<template>
  <div class="custom-component">
    <template v-for="(item, index) in dataModel">
      <el-descriptions class="margin-top" :column="1" :key="index + 'A' + dataKey" border>
        <el-descriptions-item >
          <template slot="label" >
            问题{{index+1}}：
            <el-button
              size="small"
              type="info"
              :disabled="disabled"
              @click="handleCut(index)"
              icon="el-icon-minus"
              style="margin:10px 0px 10px 25px"
            ></el-button>
          </template>

        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions class="margin-top" :column="2" :key="index + 'B' + dataKey" border>
        <el-descriptions-item class="problem-id" label="问题序号：" :labelStyle="{'width': '140px'}">
          <template v-if="!showType">
            <el-cascader
              ref="proSet1"
              :key="problemCascaderKey"
              :options="cascaderOptions"
              v-model="item.questionId"
              :disabled="disabled"
              @change="changeProblem(index)"
              clearable
              :props.sync="problemCascaderProps"
              :show-all-levels="false"
              style="width: 100px"
            >
            </el-cascader>
          </template>
          <template v-else>
            {{item.questionId}}
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="问题类别：" :labelStyle="{'width': '140px'}">
<!--          <template v-if="!showType">-->
<!--            <el-tooltip :disabled="item.questionName.length < 13" :content="item.questionName" placement="top" effect="dark">-->
<!--              <el-cascader-->
<!--                ref="proSet2"-->
<!--                :options="options"-->
<!--                :disabled="disabled"-->
<!--                v-model="item.questionId"-->
<!--                @change="changeProblem(index)"-->
<!--                clearable-->
<!--                :props="{ value: 'id', label: 'name', children: 'children' }"-->
<!--                :show-all-levels="false"-->
<!--                class="problem-name"-->
<!--              >-->
<!--              </el-cascader>-->
<!--            </el-tooltip>-->
<!--          </template>-->
          <template>
              <el-input
                type="textarea"
                rows="2"
                v-model="item.questionName"
                :disabled="disabled"
                style="width: 90%"
              ></el-input>
          </template>

        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions class="margin-top" :column="1" :key="index + 'C' + dataKey" border>
        <el-descriptions-item label="问题描述：" :labelStyle="{'width': '140px'}">

          <el-input
            type="textarea"
            rows="10"
            v-model="item.questionDetails"
            :disabled="disabled"
            style="width: 90%"
          ></el-input>
        </el-descriptions-item>
      </el-descriptions>
    </template>
    <div style="text-align: center; margin: 10px">
      <el-button :disabled="disabled" type="info" @click="handleAdd" icon="el-icon-plus"></el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "custom-width-height",
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    width: {
      type: Number,
      default: 100,
    },
    height: {
      type: Number,
      default: 100,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    options: {
      type: Array,
      default: () => [],
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    showType: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dataModel: this.value.map((item) => {
        return {
          key: item.key
            ? item.key
            : new Date().getTime() + "_" + Math.ceil(Math.random() * 99999),
          questionId: item.questionId,
          questionDetails: item.questionDetails ? item.questionDetails : null,
        };
      }),
      dataKey: 0,
      cascaderOptions:this.options,
      problemCascaderKey:'cascaderPanelOff',
      problemCascaderProps:{
        value: 'id',
        label: 'id',
        children: 'children',
        expandTrigger:'hover'
      }
    };
  },
  mounted() {

  },
  watch: {
    value: {
      handler(val) {
        this.dataModel = val;
      },
      immediate: true,
    },
    dataModel: {
      handler(val) {
        this.$emit("input", val);
      },
      immediate: true,
    },
    showType: {
      handler(val){
        if(val){
          this.problemCascaderProps.label='id'
          this.problemCascaderKey = 'cascaderPanelOff'
        }else{
          this.problemCascaderProps.label='displayName'
          this.problemCascaderKey = 'cascaderPanelOn'
        }
      },
      immediate:true
    }
  },
  methods: {
    handleAdd() {
      this.dataModel.push({
        key: new Date().getTime() + "_" + Math.ceil(Math.random() * 99999),
        questionId: null,
        questionName: '',
        questionDetails: null,
      });
    },
    handleCut(num) {
      this.dataModel.splice(num, 1);
    },
    changeProblem(index) {
      let questionIdInfo = this.dataModel[index].questionId
      console.log(questionIdInfo)
      if(questionIdInfo && questionIdInfo.length > 0) {
        // 仅取叶子节点的id值
        let id = questionIdInfo[questionIdInfo.length - 1]
        this.dataModel[index].questionId = id

        this.getLabel(this.options,id,index)
      }else{
        this.dataModel[index].questionName = ''
      }
      this.dataKey = new Date().toString()
    },
    getLabel(options,params,indexFlag) {
      if(options) {
        for (let index = 0; index < options.length; index++) {
          const el = options[index];
          if(params.startsWith(el.id)){
            if (el.id == params) {
              this.dataModel[indexFlag].questionName = el.name
              return
            } else if(el.children){
              this.getLabel(el.children,params,indexFlag)
            }
          }

        }
      }
    }
  },
};
</script>

<style lang="scss">
.generate .custom-component .el-form-item__label {
  /* line-height: 140px !important;
  height: 120px !important; */
  // border-right: 1px solid black;
  margin-right: 10px;
  padding: 10px;
  // display: inline-block;
}

.generate .custom-component .el-form-item {
  margin: 0px !important;
  border:1px solid black;
  // display: inline-block;
  /* padding: 10px; */
}

.generate .custom-component .el-form-item__content {
  width: 50%;
  margin: 10px;
  // display: inline-block;
  /* padding: 10px; */
}

.generate .custom-component .pheader .el-form-item__content {
  border: 0;
  /* padding: 10px; */
}

.problem-name {
  width: 75%;
}

.problem-id {
  color: #000000;
}
</style>
