<template>
  <div>
    <a-form :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
      <a-form-item :label="$t('functional-analysis.top-btn.risk.type')">
        <a-select @change="riskTypeChange" :value="riskType">
          <a-select-option
              v-for="(item, index) in riskTypeDict"
              :key="index"
              :value="item.value">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
    <a-table
        class="mt10"
        ref="tableRef"
        :loading="loading"
        bordered
        :columns="tableColumns"
        :rowKey="(record, index) => {return index;}"
        size="small"
        :dataSource="tableData"
        :scroll="{ y: 'calc(88vh - 400px)' }"
        :pagination="false">
    </a-table>
    <div id="eCharts5" style="height:450px;"/>
  </div>
</template>
<script>

import * as echarts from 'echarts';

export default {
  name: "RiskStatus",
  data() {
    return {
      /** 表单布局 */
      formItemLayout: {
        // xxl: '1600px',
        // xl: '1200px',
        // lg: '992px',
        // md: '768px',
        // sm: '576px',
        // xs: '480px',
        labelCol: {
          xxl: {span: 3},
          xl: {span: 3},
          lg: {span: 3},
          md: {span: 24},
          xs: {span: 24},
          sm: {span: 24}
        },
        wrapperCol: {
          xxl: {span: 8},
          xl: {span: 8},
          lg: {span: 8},
          md: {span: 24},
          xs: {span: 24},
          sm: {span: 24}
        }
      },
      /** 风险类型 */
      riskType: "01",
      /** 风险类型字典 */
      riskTypeDict: [
        {value: "01", name: this.$t('global-dict.all')},
        {value: "14", name: this.$t('global-dict.current-measures')},
        {value: "07", name: this.$t('global-dict.optimization-measures')},
      ],
      /** 全部表头 */
      allTabCols: [
        {
          title: () => this.$t('functional-analysis.top-btn.high-risk'),
          dataIndex: 'highQuantity',
          align: 'center',
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.top-btn.medium-risk'),
          dataIndex: 'mediumQuantity',
          align: 'center',
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.top-btn.low-risk'),
          dataIndex: 'lowQuantity',
          align: 'center',
          ellipsis: true
        }
      ],
      /** 当前措施表头 */
      currentMeasuresTabCols: [
        {
          title: () => this.$t('functional-analysis.top-btn.current-actions-high-risk'),
          dataIndex: 'highQuantity',
          align: 'center',
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.top-btn.current-actions-medium-risk'),
          dataIndex: 'mediumQuantity',
          align: 'center',
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.top-btn.current-actions-low-risk'),
          dataIndex: 'lowQuantity',
          align: 'center',
          ellipsis: true
        }
      ],
      /** 优化措施表头 */
      optimizationMeasuresTabCols: [
        {
          title: () => this.$t('functional-analysis.top-btn.optimization-actions-high-risk'),
          dataIndex: 'highQuantity',
          align: 'center',
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.top-btn.optimization-actions-medium-risk'),
          dataIndex: 'mediumQuantity',
          align: 'center',
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.top-btn.optimization-actions-low-risk'),
          dataIndex: 'lowQuantity',
          align: 'center',
          ellipsis: true
        }
      ],
      /** 表格表头 */
      tableColumns: [],
      /** 表格数据 */
      tableData: [],
      /** 图表Loading */
      loading: false,
      /** 响应Data数据 */
      resData: {},
    };
  },
  mounted() {
    this.list();
  },
  methods: {
    /**
     * 风险类型
     * @param val 下拉key
     */
    riskTypeChange(val) {
      switch (val) {
        case '01': // 全部
          this.tableColumns = this.allTabCols;
          this.tableData = [this.resData.allVo];
          break;
        case '14': // 当前措施
          this.tableColumns = this.currentMeasuresTabCols;
          this.tableData = [this.resData.currentVo];
          break;
        case '07': // 优化措施
          this.tableColumns = this.optimizationMeasuresTabCols;
          this.tableData = [this.resData.optimizeVo];
          break;
      }
      this.riskType = val;
      // 处理数据对象
      let obj = this.handleDataObj(val);
      // 初始化图表
      this.initChart(obj);
    },
    /**
     * 列表
     */
    list(struId = undefined) {
      let _that = this;
      _that.loading = true;
      _that.$api.getRiskStatus({
        fmeaId: _that.$store.getters.rfmeaId,
        struId: struId
      }).then(res => {
        if (res.flag) {
          _that.resData = res.data;
          // 初始化图表
          _that.riskTypeChange(_that.riskType);
        } else {
          _that.$message.error(res.message, 1);
        }
      }).finally(() => {
        _that.loading = false;
      });
    },
    /**
     * 处理数据对象
     * @param val
     */
    handleDataObj(val) {
      switch (val) {
        case '01': // 全部
          return {
            "subtext": this.$t('functional-analysis.top-btn.risk-distribution'),
            "highName": this.$t('functional-analysis.top-btn.high-risk'),
            "mediumName": this.$t('functional-analysis.top-btn.medium-risk'),
            "lowName": this.$t('functional-analysis.top-btn.low-risk'),
            "highValue": this.resData.allVo.highQuantity,
            "mediumValue": this.resData.allVo.mediumQuantity,
            "lowValue": this.resData.allVo.lowQuantity,
          };
        case '14': // 当前措施
          return {
            "subtext": this.$t('functional-analysis.top-btn.current-actions-risk-distribution'),
            "highName": this.$t('functional-analysis.top-btn.current-actions-high-risk'),
            "mediumName": this.$t('functional-analysis.top-btn.current-actions-medium-risk'),
            "lowName": this.$t('functional-analysis.top-btn.current-actions-low-risk'),
            "highValue": this.resData.currentVo.highQuantity,
            "mediumValue": this.resData.currentVo.mediumQuantity,
            "lowValue": this.resData.currentVo.lowQuantity,
          };
        case '07': // 优化措施
          return {
            "subtext": this.$t('functional-analysis.top-btn.optimization-actions-risk-distribution'),
            "highName": this.$t('functional-analysis.top-btn.optimization-actions-high-risk'),
            "mediumName": this.$t('functional-analysis.top-btn.optimization-actions-medium-risk'),
            "lowName": this.$t('functional-analysis.top-btn.optimization-actions-low-risk'),
            "highValue": this.resData.optimizeVo.highQuantity,
            "mediumValue": this.resData.optimizeVo.mediumQuantity,
            "lowValue": this.resData.optimizeVo.lowQuantity,
          };
      }
    },
    /**
     * 初始化图表
     * @param obj 数据对象
     */
    initChart(obj) {
      // 基于准备好的dom，初始化echarts实例
      let eCharts = echarts.init(document.getElementById('eCharts5'));
      eCharts.hideLoading();
      let option = {
        tooltip: {
          trigger: 'item'
        },
        title: [
          {
            subtext: obj.subtext,
            left: '25%',
            top: '10%',
            textAlign: 'center',
            subtextStyle: {
              fontSize: 15,
              fontWeight: 'normal'
            }
          }
        ],
        series: [
          {
            type: 'pie',
            radius: '50%',
            center: ['25%', '50%'],
            label: {
              normal: {
                show: true,
                position: 'inner',
                textStyle: {
                  fontWeight: 400,
                  fontSize: 16,
                  color: '#fff'
                },
                formatter: '{c}'
              }
            },
            data: [

            ]
          }
        ]
      };

      //数量为0时 不展示
      if ( obj.highValue!=0){
        let highValue =  {value: obj.highValue, name: obj.highName, itemStyle: {color: "#c84d3c"}};
        option.series[0].data.push(highValue);
      }
      if ( obj.mediumValue!=0){
        let mediumValue =  {value: obj.mediumValue, name: obj.mediumName, itemStyle: {color: "#FF8C00"}};
        option.series[0].data.push(mediumValue);
      }
      if ( obj.lowValue!=0){
        let lowValue =   {value: obj.lowValue, name: obj.mediumName, itemStyle: {color: "#42a75e"}};
        option.series[0].data.push(lowValue);
      }
      if (obj.highValue == 0 && obj.lowValue==0 && obj.mediumValue == 0){
        let highValue =  {value: obj.highValue, name: obj.highName, itemStyle: {color: "#bfbfbf"}};
        option.series[0].data.push(highValue);
        let mediumValue =  {value: obj.mediumValue, name: obj.mediumName, itemStyle: {color: "#bfbfbf"}};
        option.series[0].data.push(mediumValue);
        let lowValue =   {value: obj.lowValue, name: obj.mediumName, itemStyle: {color: "#bfbfbf"}};
        option.series[0].data.push(lowValue);
      }

      // 使用刚指定的配置项和数据显示图表。
      eCharts.setOption(option);
    },
  },
};
</script>
<style lang="less" scoped>
/** 表格头部自动换行 */
/deep/ .ant-table-thead {
  .ant-table-row-cell-ellipsis .ant-table-column-title {
    white-space: normal;
  }
}

/*/deep/ .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
  overflow-y: auto !important;
}*/
</style>

