<template>
  <div>
    <a-form :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
      <a-form-item :label="$t('functional-analysis.top-btn.node-type')">
        <a-select @change="nodeTypeChange" :value="nodeType">
          <a-select-option
              v-for="(item, index) in nodeTypeDict"
              :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="eCharts1" style="height:450px;"/>
  </div>
</template>
<script>

import * as echarts from 'echarts';

export default {
  name: "Statistics",
  data() {
    return {
      /** 表单布局 */
      formItemLayout: {
        // xxl: '1600px',
        // xl: '1200px',
        // lg: '992px',
        // md: '768px',
        // sm: '576px',
        // xs: '480px',
        labelCol: {
          xxl: {span: 2},
          xl: {span: 2},
          lg: {span: 2},
          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}
        }
      },
      /** 节点类型 */
      nodeType: "01",
      /** 节点类型字典 */
      nodeTypeDict: [
        {value: "01", name: this.$t('global-dict.structure')},
        {value: "02", name: this.$t('global-dict.function')},
        {value: "04", name: this.$t('global-dict.product-features')},
        {value: "06", name: this.$t('global-dict.failure')},
        {value: "14", name: this.$t('global-dict.current-measures')},
        {value: "07", name: this.$t('global-dict.optimization-measures')},
      ],
      /** 结构表头 */
      structureTabCols: [
        {
          title: () => this.$t('functional-analysis.top-btn.total-number-of-structure-items'),
          dataIndex: 'total',
          align: 'center',
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.top-btn.number-of-non-bottom-level-items'),
          dataIndex: 'nonBottomQuantity',
          align: 'center',
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.top-btn.number-of-bottom-level-items'),
          dataIndex: 'bottomQuantity',
          align: 'center',
          ellipsis: true
        }
      ],
      /** 功能表头 */
      functionTabCols: [
        {
          title: () => this.$t('functional-analysis.top-btn.total-functions'),
          dataIndex: 'total',
          align: 'center',
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.top-btn.number-of-non-bottom-level-functions'),
          dataIndex: 'nonBottomQuantity',
          align: 'center',
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.top-btn.number-of-bottom-level-functions'),
          dataIndex: 'bottomQuantity',
          align: 'center',
          ellipsis: true
        }
      ],
      /** 产品特性表头 */
      productFeaturesTabCols: [
        {
          title: () => this.$t('functional-analysis.top-btn.total-product-characteristics'),
          dataIndex: 'total',
          align: 'center',
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.top-btn.total-non-bottom-level-product-characteristics'),
          dataIndex: 'nonBottomQuantity',
          align: 'center',
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.top-btn.number-of-bottom-level-product-characteristics'),
          dataIndex: 'bottomQuantity',
          align: 'center',
          ellipsis: true
        }
      ],
      /** 失效表头 */
      failureTabCols: [
        {
          title: () => this.$t('functional-analysis.top-btn.total-number-of-failures'),
          dataIndex: 'total',
          align: 'center',
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.top-btn.number-of-non-bottom-level-failures'),
          dataIndex: 'nonBottomQuantity',
          align: 'center',
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.top-btn.number-of-bottom-level-failures'),
          dataIndex: 'bottomQuantity',
          align: 'center',
          ellipsis: true
        }
      ],
      /** 当前措施表头 */
      currentMeasuresTabCols: [
        {
          title: () => this.$t('functional-analysis.top-btn.total-current-actions'),
          dataIndex: 'total',
          align: 'center',
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.top-btn.number-of-prevention-actions'),
          dataIndex: 'nonBottomQuantity',
          align: 'center',
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.top-btn.number-of-detection-actions'),
          dataIndex: 'bottomQuantity',
          align: 'center',
          ellipsis: true
        }
      ],
      /** 优化措施表头 */
      optimizationMeasuresTabCols: [
        {
          title: () => this.$t('functional-analysis.top-btn.total-number-of-optimization-actions'),
          dataIndex: 'total',
          align: 'center',
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.top-btn.number-of-prevention-actions'),
          dataIndex: 'nonBottomQuantity',
          align: 'center',
          ellipsis: true
        },
        {
          title: () => this.$t('functional-analysis.top-btn.number-of-detection-actions'),
          dataIndex: 'bottomQuantity',
          align: 'center',
          ellipsis: true
        }
      ],
      /** 表格表头 */
      tableColumns: [],
      /** 表格数据 */
      tableData: [],
      /** 图表Loading */
      loading: false,
      /** 响应Data数据 */
      resData: {},
    };
  },
  mounted() {
    this.list();
  },
  methods: {
    /**
     * 节点类型
     * @param val 下拉key
     */
    nodeTypeChange(val) {
      switch (val) {
        case '01': // 结构
          this.tableColumns = this.structureTabCols;
          this.tableData = [this.resData.structureVo];
          break;
        case '02': // 功能
          this.tableColumns = this.functionTabCols;
          this.tableData = [this.resData.functionVo];
          break;
        case '04': // 产品特性
          this.tableColumns = this.productFeaturesTabCols;
          this.tableData = [this.resData.productFeatureVo];
          break;
        case '06': // 失效
          this.tableColumns = this.failureTabCols;
          this.tableData = [this.resData.failureVo];
          break;
        case '14': // 当前措施
          this.tableColumns = this.currentMeasuresTabCols;
          this.tableData = [this.resData.currentMeasuresVo];
          break;
        case '07': // 优化措施
          this.tableColumns = this.optimizationMeasuresTabCols;
          this.tableData = [this.resData.optimizationMeasuresVo];
          break;
      }
      this.nodeType = val;
      // 处理数据对象
      let obj = this.handleDataObj(val);
      // 初始化图表
      this.initChart(obj);
    },
    /**
     * 列表
     */
    list(struId = undefined) {
      let _that = this;
      _that.loading = true;
      _that.$api.getStatistics({
        fmeaId: _that.$store.getters.rfmeaId,
        struId: struId
      }).then(res => {
        if (res.flag) {
          _that.resData = res.data;
          // 初始化图表
          _that.nodeTypeChange(_that.nodeType);
        } else {
          _that.$message.error(res.message, 1);
        }
      }).finally(() => {
        _that.loading = false;
      });
    },
    /**
     * 处理数据对象
     * @param val
     */
    handleDataObj(val) {
      switch (val) {
        case '01': // 结构
          return {
            "leftSubtext": this.$t('functional-analysis.top-btn.total-number-of-structure-items'),
            "rightSubtext": this.$t('functional-analysis.top-btn.structure-number-distribution'),
            "leftName": this.$t('functional-analysis.top-btn.total-number-of-structure-items'),
            "leftValue": this.resData.structureVo.total,
            "rightName1": this.$t('functional-analysis.top-btn.number-of-non-bottom-level-items'),
            "rightValue1": this.resData.structureVo.nonBottomQuantity,
            "rightName2": this.$t('functional-analysis.top-btn.number-of-bottom-level-items'),
            "rightValue2": this.resData.structureVo.bottomQuantity
          };
        case '02': // 功能
          return {
            "leftSubtext": this.$t('functional-analysis.top-btn.total-functions'),
            "rightSubtext": this.$t('functional-analysis.top-btn.function-number-distribution'),
            "leftName": this.$t('functional-analysis.top-btn.total-functions'),
            "leftValue": this.resData.functionVo.total,
            "rightName1": this.$t('functional-analysis.top-btn.number-of-non-bottom-level-functions'),
            "rightValue1": this.resData.functionVo.nonBottomQuantity,
            "rightName2": this.$t('functional-analysis.top-btn.number-of-bottom-level-functions'),
            "rightValue2": this.resData.functionVo.bottomQuantity
          };
        case '04': // 产品特性
          return {
            "leftSubtext": this.$t('functional-analysis.top-btn.total-product-characteristics'),
            "rightSubtext": this.$t('functional-analysis.top-btn.product-feature-quantity-distribution'),
            "leftName": this.$t('functional-analysis.top-btn.total-product-characteristics'),
            "leftValue": this.resData.productFeatureVo.total,
            "rightName1": this.$t('functional-analysis.top-btn.total-non-bottom-level-product-characteristics'),
            "rightValue1": this.resData.productFeatureVo.nonBottomQuantity,
            "rightName2": this.$t('functional-analysis.top-btn.number-of-bottom-level-product-characteristics'),
            "rightValue2": this.resData.productFeatureVo.bottomQuantity
          };
        case '06': // 失效
          return {
            "leftSubtext": this.$t('functional-analysis.top-btn.total-number-of-failures'),
            "rightSubtext": this.$t('functional-analysis.top-btn.number-of-failures-distribution'),
            "leftName": this.$t('functional-analysis.top-btn.total-number-of-failures'),
            "leftValue": this.resData.failureVo.total,
            "rightName1": this.$t('functional-analysis.top-btn.number-of-non-bottom-level-failures'),
            "rightValue1": this.resData.failureVo.nonBottomQuantity,
            "rightName2": this.$t('functional-analysis.top-btn.number-of-bottom-level-failures'),
            "rightValue2": this.resData.failureVo.bottomQuantity
          };
        case '14': // 当前措施
          return {
            "leftSubtext": this.$t('functional-analysis.top-btn.total-current-actions'),
            "rightSubtext": this.$t('functional-analysis.top-btn.current-measure-distribution'),
            "leftName": this.$t('functional-analysis.top-btn.total-current-actions'),
            "leftValue": this.resData.currentMeasuresVo.total,
            "rightName1": this.$t('functional-analysis.top-btn.number-of-preventive-measures'),
            "rightValue1": this.resData.currentMeasuresVo.nonBottomQuantity,
            "rightName2": this.$t('functional-analysis.top-btn.number-of-detection-measures'),
            "rightValue2": this.resData.currentMeasuresVo.bottomQuantity
          };
        case '07': // 优化措施
          return {
            "leftSubtext": this.$t('functional-analysis.top-btn.total-number-of-optimization-actions'),
            "rightSubtext": this.$t('functional-analysis.top-btn.distribution-of-optimization-measures'),
            "leftName": this.$t('functional-analysis.top-btn.total-number-of-optimization-actions'),
            "leftValue": this.resData.optimizationMeasuresVo.total,
            "rightName1": this.$t('functional-analysis.top-btn.number-of-preventive-measures'),
            "rightValue1": this.resData.optimizationMeasuresVo.nonBottomQuantity,
            "rightName2": this.$t('functional-analysis.top-btn.number-of-detection-measures'),
            "rightValue2": this.resData.optimizationMeasuresVo.bottomQuantity
          };
      }
    },
    /**
     * 初始化图表
     * @param obj 数据对象
     */
    initChart(obj) {
      // 基于准备好的dom，初始化echarts实例
      let eCharts = echarts.init(document.getElementById('eCharts1'));
      eCharts.hideLoading();
      let option = {
        tooltip: {
          trigger: 'item'
        },
        title: [
          {
            subtext: obj.leftSubtext,
            left: '25%',
            top: '10%',
            textAlign: 'center',
            subtextStyle: {
              fontSize: 15,
              fontWeight: 'normal'
            }
          },
          {
            subtext: obj.rightSubtext,
            left: '75%',
            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}'
              }
            },
            labelLine: {show: true},
            data: [
              {value: obj.leftValue, name: obj.leftName, itemStyle: {color: '#08c'}},
            ]
          },
          {
            type: 'pie',
            radius: '50%',
            center: ['75%', '50%'],
            label: {
              normal: {
                show: true,
                position: 'inner',
                textStyle: {
                  fontWeight: 400,
                  fontSize: 16,
                  color: '#fff'
                },
                formatter: '{c}'
              }
            },
            data: [
              {value: obj.rightValue1, name: obj.rightName1, itemStyle: {color: '#08c'}},
              {value: obj.rightValue2, name: obj.rightName2, itemStyle: {color: '#FF8C00'}}
            ]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      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>

