<template>
  <el-dialog
    title="选择患教内容"
    v-model:visible="showCartoonDialog"
    v-if="isSelectCartoon"
    :before-close="clickClose"
    center
  >
    <div class="select-content">
      <div class="first-section">
        <el-select
          placeholder="请选择疾病"
          v-model:value="diseaseId"
          size="small"
          @change="changeDisease"
        >
          <el-option
            v-for="(item, index) in diseaseOptions"
            :key="index"
            :label="item.value"
            :value="item.no"
          >
          </el-option>
        </el-select>
        <el-select
          v-if="showSecond"
          v-model:value="typeId"
          @change="changeType"
          placeholder="请选择类目"
          size="small"
          style="margin-left: 20px"
        >
          <el-option
            v-for="(item, index) in typeList"
            :key="index"
            :label="item.value"
            :value="item.no"
          >
          </el-option>
        </el-select>
      </div>
      <div class="scroll-section">
        <el-radio-group v-model:value="sendObj" size="small">
          <el-radio
            v-for="(item, index) in cartoonList"
            :key="index"
            :label="item"
            class="radio-item"
            >{{ item.header_name }}</el-radio
          >
        </el-radio-group>
      </div>
    </div>
    <template v-slot:footer>
      <span class="dialog-footer">
        <el-button class="button-green" size="small" @click="clickClose" plain
          >取 消</el-button
        >
        <el-button
          class="button-white"
          size="small"
          @click="sureSelect"
          type="primary"
          >确 定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { $on, $off, $once, $emit } from '../../../../../utils/gogocodeTransfer'
import {
  getBasicData,
  getAllEducationComtent,
} from '@/utils/followup/followapis'

export default {
  components: {},
  data() {
    return {
      sendObj: {},
      saasDisease: '', // 高血压标识
      showSecond: false, //是否显示分类
      showCartoonDialog: true,
      cartoonList: [],
      patientTypeModels: [],
      diseaseId: '', //所选疾病id
      typeId: '', //所选分类id
      typeList: [
        // 分类列表
        {
          no: '',
          value: '全部',
        },
      ],
      diseaseOptions: [
        //疾病列表
        {
          no: '',
          value: '全部',
        },
      ],
    }
  },
  props: {
    isSelectCartoon: Boolean,
    activeComentId: String,
  },
  watch: {
    isSelectCartoon(val) {
      if (val) {
        getBasicData({
          numList: 'P036,P004',
        }).then((res) => {
          this.diseaseOptions = [
            //疾病列表
            {
              no: '',
              value: '全部',
            },
          ]
          this.diseaseOptions = this.diseaseOptions.concat(res.data.P004)
          this.typeList = this.typeList.concat(res.data.P036)
          this.patientTypeModels = [...res.data.P004, ...res.data.P036]
        })
        getAllEducationComtent({}).then((res) => {
          this.picapEducationComtentsForHypertension =
            res.data.picapEducationComtentsForHypertension
          this.picapEducationComtentsForNotHypertension =
            res.data.picapEducationComtentsForNotHypertension
          this.allList = [
            ...this.picapEducationComtentsForHypertension,
            ...this.picapEducationComtentsForNotHypertension,
          ]
          this.cartoonList = this.allList
          this.articleTable = this.picapEducationComtentsForNotHypertension
        })
      } else {
        this.cartoonList = []
        this.sendObj = {}
      }
    },
    cartoonList(val) {
      if (this.activeComentId) {
        for (let i = 0; i < val.length; i++) {
          if (val[i].id == this.activeComentId) {
            this.sendObj = val[i]
          }
        }
      }
    },
  },
  methods: {
    changeDisease(val) {
      this.saasDisease = val
      if (!val) {
        this.cartoonList = this.allList
        this.showSecond = false
      } else if (val === 1) {
        this.showSecond = true
        this.articleTable = this.picapEducationComtentsForHypertension
        this.reduceArticleArray(this.articleTable, val)
        this.cartoonList = this.articleTable
      } else {
        this.showSecond = false
        this.articleTable = this.picapEducationComtentsForNotHypertension
        this.cartoonList = this.reduceArticleArray(this.articleTable, val)
      }
    },
    changeType(id) {
      if (!id && this.saasDisease === 1) {
        // 选中全部时。
        this.cartoonList = this.picapEducationComtentsForHypertension
      } else {
        this.cartoonList = this.reduceArticleArray(this.articleTable, id)
      }
    },
    reduceArticleArray(articleTable, id) {
      let array = []
      let count = 0
      for (let k = 0; k < this.patientTypeModels.length; k++) {
        if (this.patientTypeModels[k].no > count) {
          count = this.patientTypeModels[k].no
        }
      }
      for (let j = 0; j <= count; j++) {
        array[j] = []
      }
      for (let i = 0; i < articleTable.length; i++) {
        let coun = this.showSecond
          ? articleTable[i].education_classify
          : articleTable[i].type
        if (coun && coun <= count) {
          array[coun].push(articleTable[i])
        }
      }
      return array[id]
    },
    clickClose() {
      $emit(this, 'closeSelectCartoon')
    },
    sureSelect() {
      if (this.sendObj.id) {
        $emit(this, 'confirmSelectComent', this.sendObj)
      } else {
        this.$message({
          message: '请选择漫画',
          type: 'warning',
        })
      }
    },
  },
  emits: ['confirmSelectComent', 'closeSelectCartoon'],
}
</script>

<style lang="scss" scoped>
.select-content {
  .first-section {
  }
  .scroll-section {
    margin-top: 20px;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    height: 300px;
    overflow-y: scroll;
    padding-left: 10px;
    .radio-item {
      padding: 10px 0;
      display: block;
      width: 100%;
      border-bottom: 1px solid #dcdfe6;
    }
    &::-webkit-scrollbar {
      width: 5px;
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: rgba(0, 0, 0, 0.1);
    }
  }
}
.el-radio-group {
  width: 100%;
}
</style>
