<!--
 * @Author: zhp
 * @Date: 2023-01-11 09:24:58
 * @LastEditTime: 2023-06-20 15:50:01
 * @LastEditors: zhp
 * @Description: 
-->
<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__user">
      <el-form :inline="true" :model="dataForm" class="demo-form-inline">
        <el-form-item :label="$t('code.inspectionTime')" prop="timeSlot">
          <el-date-picker v-model="dataForm.timeSlot" size="small" type="datetimerange" format='yyyy-MM-dd HH:mm:ss'
            @change="getFactory" valueFormat='yyyy-MM-ddTHH:mm:ss' :start-placeholder="$t('gage.startTime')"
            :end-placeholder="$t('gage.endTime')" :range-separator="$t('gage.to')" clearable />
        </el-form-item>
        <el-form-item :label="$t('code.factoryName')">
          <el-select v-model="dataForm.factoryId" :placeholder="$t('code.factoryName')" @change="getInspectionType">
            <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('code.inspectionType')">
          <el-input v-model="dataForm.inspectionType" :placeholder="$t('code.inspectionType')"></el-input>
        </el-form-item>
        <!-- <el-form-item :label="$t('code.productName')">
          <el-select v-model="dataForm.productId" :placeholder="$t('code.productName')" @change="gerCharacteristics">
            <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item :label="$t('code.inspectionType')">
          <el-select v-model="dataForm.inspectionType" :placeholder="$t('code.inspectionType')">
            <el-option v-for="item in inspectionTypeList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item> -->
        <!--
        <el-form-item :label="$t('code.characteristics')">
          <el-input v-model="dataForm.characteristicsId" :placeholder="$t('code.characteristics')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('code.sampleSize')">
          <el-input v-model="dataForm.sampleSize" :placeholder="$t('code.sampleSize')"></el-input>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="getData">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="priceMain" :style="{ width: '100%', height: '500px' }" />
  </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/productRegistration/pareto/diagram",
        getFactoryURL: '/code/productRegistration/query/factory',
        getProductURL: '/code/productRegistration/query/product',
        getInspectionTypeURL: '/code/productRegistration/query/inspection/type',
        getPurchaseRegistrationTypeURL: '/code/productRegistration/query/checkout/project',
      },
      factoryList: [],
      productList:[],
      listQuery: {
        characteristicsId:null,
        factoryId: null,
        inspectionType: null,
        productId: null,
        sampleSize: null,
        endTime: null,
        startTime: null,
      },
      dataForm: {
        productId: null,
        timeSlot: [],
        factoryId: null,
        characteristicsId: null,
        inspectionType: null,
        sampleSize:null
      },
      selectOptions: [{
            id: 0,
            name: '监控'
          },
            {
              id: 1,
              name: '电芯来料检验'
            },
            {
              id: 2,
              lname: 'IQC抽检'
            },
            {
              id: 3,
              name: 'IQC抽检2'
            },
            {
              id: 4,
              name: '原料抽检'
            },
            {
              id: 5,
              name: '进货外观检验'
            },
            {
              id: 6,
              name: '库内原料检验'
            },
            {
              id: 7,
              name: '来料检验'
            },
            {
              id: 8,
              name: '胶片'
            },
            {
              id: 9,
              name: '抽检'
            },
            {
              id: 10,
              name: '巡检'
            }, {
              id: 11,
              name: '首检'
            },
            {
              id: 12,
              name: '末检'
            },
            {
              id: 13,
              name: '实时监测'
            },
            {
              id: 14,
              name: 'FQC抽检'
            },
            {
              id: 15,
              name: 'OQC抽检'
            },
          ],
    };
  },
  // components: {
  //   AddOrUpdate,
  // },
  mounted() {
    this.getData()
    // this.getDict()
  },
  methods: {
    selectChanged(val) {
      console.log(val)
      alert(JSON.stringify(val))
    },
    getFactory(val) {
      console.log(val)
      this.$http.get(this.urlOptions.getFactoryURL, {
        params: {
          startTime: val[0],
          endTime: val[1]
        },
      })
        .then(({ data: res }) => {
          if (res.code === 0) {
            this.factoryList = res.data.map((item) => {
              return {
                id: item.factoryId,
                name: item.factoryName
              }
            })
          }
        })
      this.$http.get(this.urlOptions.getProductURL, {
        params: {
          startTime: val[0],
          endTime: val[1]
        },
      })
        .then(({ data: res }) => {
          if (res.code === 0) {
            this.productList = res.data.map((item) => {
              return {
                id: item.productId,
                name: item.productName
              }
            })
          }
        })
    },
    getInspectionType(val) {
      this.$http.get(this.urlOptions.getInspectionTypeURL, {
        params: {
          startTime: this.dataForm.timeSlot[0],
          endTime: this.dataForm.timeSlot[1],
          factoryId: val
        },
      })
        .then(({ data: res }) => {
          if (res.code === 0) {
            this.dataForm.inspectionType = res.data.inspectionType
          }
        })
    },
    // gerCharacteristics(val) {
    //   this.$http.get(this.urlOptions.getPurchaseRegistrationTypeURL, {
    //     params: {
    //       productId:val
    //     },
    //   })
    //     .then(({ data: res }) => {
    //       if (res.code === 0) {
    //         this.dataForm.characteristicsId = res.data.parameterName
    //       }
    //     })
    // },
    getData() {
      this.$http
        .post(this.urlOptions.getDataListURL, {
          params: this.listQuery
        }
        )
        .then(({ data: res }) => {
          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: {
              formatter: (params) => {
                // 打印确认params是对象还是数组
                console.log(params)
                // 对象：取鼠标悬浮当前项索引params.dataIndex
                // 数组：取鼠标悬浮当前项索引params[0].dataIndex
                let index = params.dataIndex
                let obj = res.data[index] // 通过索引取当前项完整的接口返回值
                let str = `缺陷数量:${obj.number}<br/>
			        缺陷率${obj.defectRate}<br/>`
                return str
              }
            },
            xAxis: {
              data: res.data.map(i => { return i.propertyName })
            },
            yAxis: [{
              type: 'value',
              name: '缺陷数量',
              show: true,
              interval: 10,
              axisLine: {
                lineStyle: {
                  color: '#5e859e',
                  width: 2
                }
              }
            }],
            series: [{
              name: '缺陷率',
              type: 'bar',
              barWidth: '50%',
              data: res.data.map(i => { return i.defectRate })
            }, {
              name: '缺陷数量',
              type: 'line',
              smooth: true,
              data: res.data.map(i => { return i.number })
            }]
          };
          option && myChart.setOption(option);
        })
    },
    buttonClick(val) {
      console.log(val)
      switch (val.btnName) {
        case "search":
          // this.dataForm.sampleSize = val.sampleSize ? val.sampleSize : null
          this.dataForm.inspectionType = val.inspectionType ? val.inspectionType : null
          // this.dataForm.characteristicsId = val.characteristicsId ? val.characteristicsId : null
          this.dataForm.factoryId = val.factoryId ? val.factoryId : null
          // this.dataForm.productId = val.productId ? val.productId : null
          this.dataForm.startTime = val.timeSlot ? val.timeSlot[0] : null
          this.dataForm.endTime = val.timeSlot ? val.timeSlot[1] : null
          this.getData()
          break;

        default:
          console.log(val)
      }
    },
  }
};
</script>
