<template>
  <el-dialog
    title="选择患教内容"
    :visible.sync="showCartoonDialog"
    v-if="isSelectCartoon"
    :before-close="clickClose"
    center>
    <div class="select-content">
      <div class="first-section">
        <el-select
          placeholder="请选择疾病"
          v-model="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="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="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>
    <span slot="footer" 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>
  </el-dialog>
</template>
<script>
  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() {
        this.$emit('closeSelectCartoon')
      },
      sureSelect() {
        if(this.sendObj.id){
          this.$emit('confirmSelectComent', this.sendObj);
        }else{
          this.$message({
            message: '请选择漫画',
            type: 'warning'
          });
        }
      },
    },
  }
</script>
<style scoped lang="scss">
  .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>
