<template>
  <div style="background-color:#f0f2f5;padding:12px;">
    <a-card :title="$t('functional-analysis.top-btn.interval-statistics')">
      <template slot="extra">
        <a-form layout="inline" style="margin-right: -24px;">
          <a-form-item :label="$t('functional-analysis.top-btn.data-type')">
            <a-select @change="dataTypeChange" :value="dataType" style="width: 120px;">
              <a-select-option
                  v-for="(item, index) in dataTypeDict"
                  :key="index"
                  :value="item.value">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </template>
      <div id="eCharts3" :style="{ height: chartHeight }"/>
    </a-card>
  </div>
</template>
<script>

import * as echarts from 'echarts';

export default {
  name: "IntervalStatistics",
  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: 10},
          xl: {span: 10},
          lg: {span: 10},
          md: {span: 24},
          xs: {span: 24},
          sm: {span: 24}
        }
      },
      /** 数据类型 */
      dataType: '01',
      /** 数据类型字典 */
      dataTypeDict: [
        {value: "01", name: 'RPN'},
        {value: "02", name: 'S'},
        {value: "03", name: 'O'},
        {value: "04", name: 'D'},
        {value: "05", name: 'SO'},
        {value: "06", name: 'SD'},
        {value: "07", name: 'OD'},
        {value: "08", name: 'AP'},
      ],
      /** 响应Data数据 */
      resData: {},
      /** 图表Loading */
      loading: false,
      myChart: undefined,
      chartHeight: window.innerHeight - 230 + 'px'
    };
  },
  mounted() {
    this.list();
    window.onresize = () => {
      this.chartHeight = window.innerHeight - 230 + 'px';
      this.myChart.resize();
    };
  },
  methods: {
    /**
     * 节点类型
     * @param val 下拉key
     */
    dataTypeChange(val) {
      this.dataType = val;

      /** S */
      let sCauses = ['1~1', '2~4', '5~8', '9~10'];
      let sBeforeOptimizationData = this.resData.stotals.map(item => item.totoalOptimizeBe);
      let sAfterOptimizationData = this.resData.stotals.map(item => item.totoalOptimizeAf);

      /** O */
      let oCauses = ['1~3', '4~5', '6~7', '8~10'];
      let oBeforeOptimizationData = this.resData.ototals.map(item => item.totoalOptimizeBe);
      let oAfterOptimizationData = this.resData.ototals.map(item => item.totoalOptimizeAf);

      /** D */
      let dCauses = ['1~4', '5~6', '7~10'];
      let dBeforeOptimizationData = this.resData.dtotals.map(item => item.totoalOptimizeBe);
      let dAfterOptimizationData = this.resData.dtotals.map(item => item.totoalOptimizeAf);

      /** SO */
      let soCauses = ['1~8', '9~18', '19~30', '31~50', '51~100'];
      let soBeforeOptimizationData = this.resData.sototals.map(item => item.totoalOptimizeBe);
      let soAfterOptimizationData = this.resData.sototals.map(item => item.totoalOptimizeAf);

      /** SD */
      let sdCauses = ['1~8', '9~18', '19~30', '31~50', '51~100'];
      let sdBeforeOptimizationData = this.resData.sdtotals.map(item => item.totoalOptimizeBe);
      let sdAfterOptimizationData = this.resData.sdtotals.map(item => item.totoalOptimizeAf);

      /** OD */
      let odCauses = ['1~8', '9~18', '19~30', '31~50', '51~100'];
      let odBeforeOptimizationData = this.resData.odtotals.map(item => item.totoalOptimizeBe);
      let odAfterOptimizationData = this.resData.odtotals.map(item => item.totoalOptimizeAf);

      /** RPN */
      let rpnCauses = ['1~15', '16~30', '31~45', '46~60', '61~75', '76~90', '91~125', '126~150', '151~175', '176~200', '201~250', '251~300', '301~400', '401~600', '601~1000'];
      let rpnBeforeOptimizationData = this.resData.rpntotals.map(item => item.totoalOptimizeBe);
      let rpnAfterOptimizationData = this.resData.rpntotals.map(item => item.totoalOptimizeAf);

      /** AP */
      let apCauses = ['H', 'M', 'L'];
      let apBeforeOptimizationData = [
        this.resData.aptotalDto.apValBeforeH,
        this.resData.aptotalDto.apValBeforeM,
        this.resData.aptotalDto.apValBeforeL
      ];
      let apAfterOptimizationData = [
        this.resData.aptotalDto.apValAfterH,
        this.resData.aptotalDto.apValAfterM,
        this.resData.aptotalDto.apValAfterL,
      ];

      // 初始化图表
      switch (val) {
        case '01':
          this.initChart('RPN', rpnCauses, rpnBeforeOptimizationData, rpnAfterOptimizationData, 10);
          break;
        case '02':
          this.initChart('S', sCauses, sBeforeOptimizationData, sAfterOptimizationData, 10);
          break;
        case '03':
          this.initChart('O', oCauses, oBeforeOptimizationData, oAfterOptimizationData, 10);
          break;
        case '04':
          this.initChart('D', dCauses, dBeforeOptimizationData, dAfterOptimizationData, 10);
          break;
        case '05':
          this.initChart('SO', soCauses, soBeforeOptimizationData, soAfterOptimizationData, 10);
          break;
        case '06':
          this.initChart('SD', sdCauses, sdBeforeOptimizationData, sdAfterOptimizationData, 10);
          break;
        case '07':
          this.initChart('OD', odCauses, odBeforeOptimizationData, odAfterOptimizationData, 10);
          break;
        case '08':
          this.initChart('AP', apCauses, apBeforeOptimizationData, apAfterOptimizationData, 10);
          break;
      }
    },
    /**
     * 列表
     */
    list(struId = undefined) {
      let _that = this;
      _that.loading = true;
      _that.$api.getIntervalStatistics({
        fmeaId: _that.$store.getters.rfmeaId,
        struId: struId
      }).then(res => {
        if (res.flag) {
          _that.resData = res.data;
          // 初始化图表
          _that.dataTypeChange(_that.dataType);
        } else {
          _that.$message.error(res.message, 1);
        }
      }).finally(() => {
        _that.loading = false;
      });
    },
    /**
     * 初始化图表
     * @param xTitle X轴标题
     * @param causes 刻度
     * @param beforeOptimization 优化前数据
     * @param afterOptimization 优化后数据
     * @param yMax Y轴最大值
     */
    initChart(xTitle, causes, beforeOptimization, afterOptimization, yMax) {

      // 基于准备好的dom，初始化echarts实例
      let lang = this.$store.getters.lang.split('-')[0].toUpperCase();
      this.myChart = echarts.init(document.getElementById('eCharts3'), null, {locale: lang});
      let option1 = {
        title: {
          text: this.$t('functional-analysis.top-btn.interval-statistics'),
          x: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          feature: {
            // dataView: {show: true, readOnly: false},
            // restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        legend: {
          data: [
            this.$t('functional-analysis.top-btn.initial'),
            this.$t('functional-analysis.top-btn.revised')
          ],
          top: '5%'
        },
        grid: {
          top: '15%',
          left: '10%',
          right: '10%',
          bottom: '15%'  // 网格线距离底部的距离
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            inverse: true,
            start: 0,
            end: 100
          }
        ],
        xAxis: [
          {
            name: xTitle,
            type: 'category',
            data: causes,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            name: this.$t('functional-analysis.top-btn.frequency'),
            type: 'value',
            //min: 0,
            //max: yMax,
            interval: 10,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: this.$t('functional-analysis.top-btn.initial'),
            type: 'bar',
            itemStyle: {
              color: '#08c'
            },
            label: {
              show: true,
              position: 'top'
            },
            data: beforeOptimization
          },
          {
            name: this.$t('functional-analysis.top-btn.revised'),
            type: 'bar',
            itemStyle: {
              color: '#42a75e'
            },
            label: {
              show: true,
              position: 'top'
            },
            data: afterOptimization
          }
        ]
      };
      let option2 = {
        title: {
          text: this.$t('functional-analysis.top-btn.interval-statistics'),
          x: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          feature: {
            // dataView: {show: true, readOnly: false},
            // restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        legend: {
          data: [
            this.$t('functional-analysis.top-btn.initial'),
            this.$t('functional-analysis.top-btn.revised')
          ],
          top: '5%'
        },
        grid: {
          top: '15%',
          left: '10%',
          right: '10%',
          bottom: '15%'  // 网格线距离底部的距离
        },
        xAxis: [
          {
            name: xTitle,
            type: 'category',
            data: causes,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            name: this.$t('functional-analysis.top-btn.frequency'),
            type: 'value',
            //min: 0,
            //max: ymax,
            interval: 10,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: this.$t('functional-analysis.top-btn.initial'),
            type: 'bar',
            itemStyle: {
              color: '#4F81BD'
            },
            label: {
              show: true,
              position: 'top'
            },
            data: beforeOptimization
          },
          {
            name: this.$t('functional-analysis.top-btn.revised'),
            type: 'bar',
            itemStyle: {
              color: '#9BBB59'
            },
            label: {
              show: true,
              position: 'top'
            },
            data: afterOptimization
          }
        ]
      };
      this.myChart.clear();
      if (xTitle === 'RPN' || xTitle === 'AP') {
        // 使用刚指定的配置项和数据显示图表。
        this.myChart.setOption(option1);
      } else {
        // 使用刚指定的配置项和数据显示图表。
        this.myChart.setOption(option2);
      }
    },
  },
};
</script>
<style lang="less" scoped>
/** 表格头部自动换行 */
/deep/ .ant-table-thead {
  .ant-table-row-cell-ellipsis .ant-table-column-title {
    white-space: normal;
  }
}
/deep/ .ant-card-extra {
  padding: 0px 0;
}
</style>

