<template>
  <div>
    <a-table
        :data-source="tableData"
        :columns="tableColumns"
        :customRow="customRow"
        :rowKey="(row, index) => {return row.id;}"
        :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange
          }"
        bordered
        size="small"
        :pagination="false">
      <template slot="iconDisplay" slot-scope="text, record, index">
        <span v-if="index !== 6">
          <i :class="'iconfont ' + text + getColor(record)"></i>
        </span>
        <span v-else :class="getColor(record)">
          {{ text }}
        </span>
      </template>
    </a-table>
    <div slot="footer" class="mt-3 text-right">
      <a-button @click="cancel" type="primary" class="mr-2">
        {{ $t('global-btn.cancel') }}
      </a-button>
      <a-button @click="handleConfirm" type="primary">
        {{ $t('global-btn.confirm') }}
      </a-button>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Settings',
  props: {
  },
  data () {
    return {
      tableData: [
        {
          id: 'nodeIcon',
          identification: this.$t('functional-analysis.top-btn.node-icon-display'),
          iconDisplay: this.$store.getters.treeIcons.structure,
          colorClass: ''
        },
        {
          id: 'functionNetIcon',
          identification: this.$t('functional-analysis.top-btn.function-net-icon-display'),
          iconDisplay: this.$store.getters.treeIcons.left,
          colorClass: '02'
        },
        {
          id: 'failureNetIcon',
          identification: this.$t('functional-analysis.top-btn.fault-nte-icon-display'),
          iconDisplay: this.$store.getters.treeIcons.left,
          colorClass: '06'
        },
        {
          id: 'attachmentIcon',
          identification: this.$t('functional-analysis.top-btn.attachment-icon-display'),
          iconDisplay: this.$store.getters.treeIcons.annex,
          colorClass: ''
        },
        {
          id: 'commentsIcon',
          identification: this.$t('functional-analysis.top-btn.comment-icon-display'),
          iconDisplay: this.$store.getters.treeIcons.reviewComments,
          colorClass: ''
        },
        {
          id: 'historyExperienceIcon',
          identification: this.$t('functional-analysis.top-btn.history-icon-display'),
          iconDisplay: this.$store.getters.treeIcons.joinHistoryFault,
          colorClass: '06'
        },
        {
          id: 'classificationIcon',
          identification: this.$t('functional-analysis.top-btn.classify-icon-display'),
          iconDisplay: '<标识>',
          colorClass: '04'
        },
      ],
      tableColumns: [
        {
          title: this.$t('functional-analysis.top-modal.identification-classification'),
          align: "center",
          dataIndex: "identification",
          key: "identification",
          ellipsis: true
        },
        {
          title: this.$t('functional-analysis.top-modal.icon-display'),
          align: "center",
          dataIndex: "iconDisplay",
          key: "iconDisplay",
          scopedSlots: {
            customRender: 'iconDisplay'
          },
          ellipsis: true
        },
      ],
      selectedRowKeys: ['nodeIcon', 'functionNetIcon', 'failureNetIcon', 'attachmentIcon', 'commentsIcon', 'historyExperienceIcon', 'classificationIcon'],
      configId: undefined
    }
  },
  watch: {
  },
  created() {
    this.initConfig();
  },
  methods: {
    initConfig() {
      let data = {
        fmeaId: this.$store.getters.fmeaId
      }
      this.$api.initIconConfig(data).then(res => {
        if (res.flag) {
          let config = res.data.mfmeaIconConfig;
          if (config) {
            this.configId = config.id;
            this.selectedRowKeys = [];
            if (config.nodeIconConfig === '1') {
              this.selectedRowKeys.push('nodeIcon')
            }
            if (config.functionNetIconConfig === '1') {
              this.selectedRowKeys.push('functionNetIcon')
            }
            if (config.faultNetIconConfig === '1') {
              this.selectedRowKeys.push('failureNetIcon')
            }
            if (config.attachmentIconConfig === '1') {
              this.selectedRowKeys.push('attachmentIcon')
            }
            if (config.commentsIconConfig === '1') {
              this.selectedRowKeys.push('commentsIcon')
            }
            if (config.historyIconConfig === '1') {
              this.selectedRowKeys.push('historyExperienceIcon')
            }
            if (config.classifyIconConfig === '1') {
              this.selectedRowKeys.push('classificationIcon')
            }
          }
        }
      })
    },
    /**
     * 确认
     */
    handleConfirm() {
      let data = {
        fmeaId: this.$store.getters.fmeaId,
        id: this.configId || undefined
      }
      if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
        data.nodeIconConfig = this.selectedRowKeys.includes('nodeIcon') ? '1' : '0';
        data.functionNetIconConfig = this.selectedRowKeys.includes('functionNetIcon') ? '1' : '0';
        data.faultNetIconConfig = this.selectedRowKeys.includes('failureNetIcon') ? '1' : '0';
        data.attachmentIconConfig = this.selectedRowKeys.includes('attachmentIcon') ? '1' : '0';
        data.commentsIconConfig = this.selectedRowKeys.includes('commentsIcon') ? '1' : '0';
        data.historyIconConfig = this.selectedRowKeys.includes('historyExperienceIcon') ? '1' : '0';
        data.classifyIconConfig = this.selectedRowKeys.includes('classificationIcon') ? '1' : '0';
      } else {
        data.nodeIconConfig = '0';
        data.functionNetIconConfig = '0';
        data.faultNetIconConfig = '0';
        data.attachmentIconConfig = '0';
        data.commentsIconConfig = '0';
        data.historyIconConfig = '0';
        data.classifyIconConfig = '0';
      }
      this.$api.editInitIconConfig(data).then(res => {
        if (res.flag) {
          this.$api.editSaveIconConfig(data).then(res => {
            if (res.flag) {
              this.$message.success(res.message);
              this.closeModal();
            } else {
              this.$message.warning(res.message);
            }
          })
        } else {
          // 该FMEA的图标配置已被其他用户修改，需要刷新后重新编辑
          this.$message.warning(res.message);
        }
      })
    },
    /**
     * 取消
     */
    cancel() {
      this.closeModal();
    },
    /**
     * 关闭模态框
     */
    closeModal() {
      this.$emit("closeModal");
    },
    /**
     * 获取图标颜色
     */
    getColor(record) {
      let color = " ";
      if (record && record.colorClass.length > 0) {
        let obj = this.$store.getters.nodeTypeDict.color.filter(item => item.key === record.colorClass)[0];
        if (obj) color += obj.value;
      }
      return color;
    },
    /**
     * 行点击事件
     * @param record
     * @param index
     * @returns {{on: {click: on.click}}}
     */
    customRow(record, index) {
      let _that = this;
      return {
        on: {
          // 鼠标单击行
          click: () => {
            if (_that.selectedRowKeys.indexOf(record.id) !== -1) {
              _that.selectedRowKeys.splice(_that.selectedRowKeys.indexOf(record.id), 1);
            } else {
              _that.selectedRowKeys.push(record.id)
            }
          }
        }
      };
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    }
  }
}
</script>

<style lang="less" scoped>
</style>