<!--
 * @Author: zhp
 * @Date: 2023-06-19 09:19:53
 * @LastEditTime: 2023-06-19 10:49:35
 * @LastEditors: zhp
 * @Description: 
-->
<template>
  <el-card shadow="never" class="aui-card--fill">
    <el-row :gutter="24">
      <el-col :span="18">
        <div id="priceMain" :style="{ width: '100%', height: '500px' }" />
      </el-col>
      <el-col :span="6">
        <el-table style="width: 100%" :data="getValues" :show-header="false">
          <el-table-column width="180" v-for="(item, index) in getHeaders" :key="index" :prop="item">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
// import available from "./components/gageAvailable.vue"
import i18n from "@/i18n"
import * as echarts from 'echarts';
export default {
  data() {
    return {
      myChart: null,
      urlOptions: {
        getDataListURL: "/code/purchaseRegistration/mean/range/chart",
      },
      tableData: [],
      headers: [
        {
          prop: 'usl',
          label: 'USL',
        },
        {
          prop: 'sl',
          label: 'SL',
        },
        {
          prop: 'lsl',
          label: 'LSL',
        },
        {
          prop: 'rangeUcl',
          label: 'CL(图一)',
        },
        {
          prop: 'averageUcl',
          label: 'UCL(图一)',
        },
        {
          prop: 'rangeLcl',
          label: 'LCL(图一)',
        },
        {
          prop: 'standardDeviationCl',
          label: 'CL(图二)',
        },
        {
          prop: 'standardDeviationLcl',
          label: 'LCL(图二)',
        },
        {
          prop: 'standardDeviationUcl',
          label: 'UCL(图二)',
        },
        {
          prop: 'standardDeviationGroup',
          label: '标准差',
        },
        {
          prop: 'cpk',
          label: 'cpk',
        },
        {
          prop: 'standardDeviationWhole',
          label: '总体标准差',
        },
        {
          prop: 'ppk',
          label: 'ppk',
        },
        {
          prop: 'ca',
          label: 'ca',
        },
        {
          prop: 'cp',
          label: 'cp',
        },
        {
          prop: 'ca',
          label: 'ca',
        },
        {
          prop: 'average',
          label: '均值',
        },
        {
          prop: 'max',
          label: '最大值',
        },
        {
          prop: 'max',
          label: '最大值',
        },
      ],
      listQuery: {
        characteristicsId: null,
        factoryId: null,
        inspectionType: null,
        productId: null,
        sampleSize: null,
        endTime: null,
        startTime: null,
      },
    };
  },
  computed: {
    getHeaders() {
      return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
    },
    getValues() {
      return this.headers.map(item => {
        return this.tableData.reduce((pre, cur, index) => Object.assign(pre, { ['value' + index]: cur[item.prop] }), { 'title': item.label, });
      });
    }
  },
  // components: {
  //   AddOrUpdate,
  // },
  methods: {
    getData(listQuery) {
      this.$http
        .post(this.urlOptions.getDataListURL, {
          params: listQuery
        }
        )
        .then(({ data: res }) => {
          this.tableData.push({
            average: res.data.average,
            averageCl: res.data.averageCl,
            averageLcl: res.data.averageLcl,
            averageUcl: res.data.averageUcl,
            ca: res.data.ca,
            cp: res.data.cp,
            cpk: res.data.cpk,
            groupNum: res.data.groupNum,
            lsl: res.data.lsl,
            ppk: res.data.ppk,
            rangeCl: res.data.rangeCl,
            rangeLcl: res.data.rangeCl,
            rangeUcl: res.data.rangeCl,
            standardDeviationWhole: res.data.standardDeviationWhole,
            usl: res.data.usl,
            max: res.data.max,
            min: res.data.min,
          })
          console.log(res)
          var chartDom = document.getElementById('priceMain');
          var myChart = echarts.init(chartDom)
          this.myChart = myChart
          var option;
          // myChart.on('click', function (params) {
          //   console.log(params);
          // });
          myChart.on('click', 'xAxis.category', function (params) {
            console.log(params);
          });
          option = {
            title: {
              text: '均值极差图'
            },
            tooltip: {
              trigger: 'axis'
            },
            // legend: {
            //   data: ['推移图']
            // },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              data: [1, 2131, 312, 231321, 321312, 321321, 321312, 321321],
              type: 'category',
              axisLabel: {
                clickable: true
              },
              silent: false,
              triggerEvent: true
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: 'lsl',
                type: 'bar',
                barWidth: '50%',
                data: [res.data.lsl]
              },
              {
                name: 'UCL(图一)',
                type: 'bar',
                barWidth: '50%',
                data: [res.data.averageUcl]
              },
              {
                name: 'UCL(图二)',
                type: 'bar',
                barWidth: '50%',
                data: [res.data.rangeUcl]
              },
              {
                name: 'USL(图一)',
                type: 'bar',
                barWidth: '50%',
                data: [res.data.usl]
              },
              {
                name: 'CL(图一)',
                type: 'bar',
                barWidth: '50%',
                data: [res.data.rangeCl]
              },
              {
                name: 'LCL(图一)',
                type: 'bar',
                barWidth: '50%',
                data: [res.data.averageLcl]
              },
              {
                name: 'SL',
                type: 'bar',
                barWidth: '50%',
                data: [res.data.sl]
              },
            ]
          };
          option && myChart.setOption(option);
        })
    },
  }
};
</script>
