<template>
  <el-dialog title="关键信息点" :visible.sync="dialogFormVisible" class="crux-dialog">
    <section v-for="(val,key,i) in checkList" :key="i">
      <h4 class="base">{{ key == 'undefined' ? '基本信息' : key }}</h4>
      <el-checkbox
        v-for="(option,index) in val"
        :key="option+index"
        :label="option.InfoPointName"
        v-model="option.KeyWord"
      />
    </section>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="save">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { setDataDictionary } from "@/api/scan/request";

export default {
  name: "cruxDialog",
  props: ['crux', 'type'],
  data() {
    return {
      dialogFormVisible: false,
      checkList: {},
      checkboxGroup: []
    }
  },
  computed: {
    allChecks() {
      const tmp = [];
      for (const key in this.checkList) {
        if (this.checkList.hasOwnProperty(key)) {
          const element = this.checkList[key];
          tmp.push(...element);
        }
      }
      return tmp;
    }
  },

  watch: {
    crux() {
      this.changeList()
    }
  },
  methods: {
    changeList() {
      const tmp = {};
      for (let key in this.crux) {
        if (this.crux.hasOwnProperty(key)) {
          const element = this.crux[key];
          tmp[key] = [
            ...element.paths.map(i => ({
              InfoPointCode: i.InfoPointCode,
              KeyWord: i.KeyWord,
              type: i.type,
              code: i.InfoPointCode,
              classCode: i.classCode,
              id: i.id,
              groupCode: i.groupCode,
              InfoPointName: i.InfoPointName
            }))
          ]
        }
      }
      this.checkList = tmp;
    },
    dialogOpen() {
      this.dialogFormVisible = true
    },
    save() {
      let arrLenght = this.allChecks.filter(i => i.KeyWord)
      if (arrLenght.length > 6) {
        this.$message.info('不可超过6个')
        return false
      } else {
        let param = {
          content: []
        }
        param.content = this.allChecks.map(i => {
          if (i.InfoPointName) {
            delete i.InfoPointName
          }
          // return { ...i }
          return {
            keyWord: i.KeyWord,
            // type: this.type,
            type: i.type,
            code: i.InfoPointCode,
            classCode: i.classCode,
            id: i.id,
            groupCode: i.groupCode
          }
        })
        setDataDictionary(param, res => {
          this.dialogFormVisible = false
          this.$emit('cruxSuccess')
          this.$message('保存成功')

        });

      }


    }
  }
}
</script>

<style scoped lang="less">
.crux-dialog {
  .el-checkbox {
    display: inline-block;
    width: 20%;
  }

  /deep/ .el-dialog__body {
    height: 420px;
    overflow: auto;
  }
}
</style>
