<template>
  <el-dialog title="关键信息点" :visible.sync="dialogFormVisible" class="crux-dialog">
    <section v-for="(val,key,i) in checkList" :key="i">
      <h4 class="base">{{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: this.type,
                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 = this.allChecks.map(i => {
            if (i.InfoPointName) {
              delete i.InfoPointName
            }
            return {...i}
          })

          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>
