<template>
  <div>
    <a-modal
        :title="title"
        :visible="showMaturity"
        :width="1200"
        :maskClosable="false"
        @cancel="handleCancel"
        :footer="false"
        destroy-on-close
    >
      <a-form layout='vertical'>
        <a-card :title="$t('fmeamanager.maturity.scoring-criteria')" class="card">
          <a-table
              class="mt10"
              :loading='loading'
              :columns='scoringTableColumns'
              :pagination='false'
              :rowKey='
              (record, index) => {
                return index;
              }'
              :dataSource='scoringTableData'
              bordered
              size="middle"
          >
            <template slot="score" slot-scope="text, record">
              {{ record.score + "%" }}
            </template>
          </a-table>
        </a-card>
        <a-card :title="$t('fmeamanager.maturity.evaluation-criteria')
                + $t('summary-archive.maturity.evaluation.describe')" class="footer">
          <a-table
              ref='mt10'
              :loading='loading'
              :columns='evaluationTableColumns'
              :pagination='false'
              :rowKey='
					(record, index) => {
						return index;
					}'
              :dataSource='evaluationTableData'
              bordered
              size="middle"
              style="margin-bottom: 100px"
          >
            <template slot="isNeedStar" slot-scope="text, record">
              {{ record.isNeedStar === 0 ? $t('fmea.yes') : $t('fmea.no') }}
            </template>
            <template slot="result" slot-scope="text, record">
              {{
                record.result === '01' ? $t('fmeamanager.maturity.high-maturity')
                  : record.result === '02' ? $t('fmeamanager.maturity.medium-maturity')
                    : record.result === '03' ? $t('fmeamanager.maturity.low-maturity') : ''
              }}
            </template>
          </a-table>
        </a-card>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
/**
 * 合并单元格
 * @param data
 * @param key
 * @param index
 * @returns {number}
 */
const mergeNodeNameCells = (data, key, index) => {
  if (index !== 0 && data[index][key] === data[index-1][key]) {
    return 0
  }
  let rowSpan = 1
  for (let i = index + 1; i < data.length; i++) {
    if (data[index][key] !== data[i][key]) {
      break
    }
    rowSpan++
  }
  return rowSpan;
};
export default {
  name: "MatruityModal",
  data() {
    return {
      /**  模态框状态  **/
      showMaturity: false,
      /** 模态框title **/
      title: this.$t('summary-archive.maturity.standard'),
      /** 加载中 **/
      loading: false,
      /** 评分标准表头 **/
      scoringTableColumns: [
        {
          title: () => this.$t('fmeamanager.maturity.rating-settings'),
          width: 200,
          align: 'center',
          dataIndex: 'scoreCode',
          ellipsis: true,
          colSpan: 2,
          customRender: (value, row, index) => {
            return {
              children: value,
              attrs: {
                colSpan : 1,
              },
            };
          }
        },
        {
          colSpan: 0,
          width: 200,
          align: 'center',
          scopedSlots: {customRender: 'score'},
          ellipsis: true,
        },
        {
          title: () => this.$t('fmeamanager.maturity.Implementation-and-fulfillment'),
          width: 300,
          align: 'center',
          dataIndex: 'perform',
          ellipsis: true,
        },
        {
          title: () => this.$t('fmeamanager.maturity.Description'),
          width: 300,
          align: 'center',
          dataIndex: 'description',
          ellipsis: true,
        },
      ],
      /** 评分标准数据源 **/
      scoringTableData: [],
      /** 评估准则表头 **/
      evaluationTableColumns: [
        {
          title: () => this.$t('fmeamanager.maturity.evaluation-node'),
          width: 200,
          align: 'center',
          dataIndex: 'gradeCode',
          customRender: (text, record, index) => {
            const obj = {
              children: text,
              attrs: {}
            }
            obj.attrs.rowSpan = mergeNodeNameCells(this.evaluationTableData, 'gradeCode', index)
            return obj
          },
          ellipsis: true,
        },
        {
          title: () => this.$t('fmeamanager.maturity.minimum-score'),
          width: 200,
          align: 'center',
          dataIndex: 'lowerValue',
          ellipsis: true,
        },
        {
          title: () => this.$t('fmeamanager.maturity.maximum-score'),
          width: 200,
          align: 'center',
          dataIndex: 'highValue',
          ellipsis: true,
        },
        {
          title: () => this.$t('fmeamanager.maturity.whether-need-a-star-rating-of-a'),
          width: 150,
          align: 'center',
          scopedSlots: { customRender: 'isNeedStar' },
          ellipsis: true,
        },
        {
          title: () => this.$t('fmeamanager.maturity.evaluation-results'),
          width: 300,
          align: 'center',
          scopedSlots: { customRender: 'result' },
          ellipsis: true,
        },
      ],
      /** 评估准则数据源 */
      evaluationTableData: [],
    }
  },

  methods: {
    /**
     * 模态框关闭
     */
    handleCancel() {
      this.showMaturity = false;
    },

    /**
     * 成熟度管理编辑页面初始化
     */
    initData() {
      this.$api.getRdfmMaturityHelp({
        fmeaId: this.$store.getters.rfmeaId
      }).then(res => {
        if (res.flag) {
          this.evaluationTableData = res.data.rdfmMaturityStageResults;
          this.scoringTableData = res.data.rdfmMaturityStandards;
        } else {
          this.$notification.error({message: res.message});
        }
      });
    },
  },

  mounted() {
    this.initData();
  }
}
</script>

<style scoped>
/deep/ .ant-modal {
  top: 0 !important;
  overflow: auto;
}
</style>