<!--
 * @Author: zhp
 * @Date: 2023-01-11 09:24:58
 * @LastEditTime: 2023-06-20 15:51:56
 * @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.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.inspectionType')">
          <el-input v-model="dataForm.inspectionType" :placeholder="$t('code.inspectionType')"></el-input>
        </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/purchaseRegistration/box/diagram",
        getFactoryURL: '/code/purchaseRegistration/query/factory',
        getProductURL: '/code/purchaseRegistration/query/product',
        getInspectionTypeURL: '/code/purchaseRegistration/query/inspection/type',
        getPurchaseRegistrationTypeURL: '/code/purchaseRegistration/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)
          let xAxisData = []
          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: ['推移图']
            // },
            // tooltip: {
            //   trigger: 'item', // axis显示该列下所有坐标轴对应数据，item只显示该点数据
            //   axisPointer: { // 坐标轴指示器，坐标轴触发有效
            //     type: 'line' // 默认为直线，可选为：'line' | 'shadow'
            //   },
            //   formatter: function (params) {
            //     var res = `
            //       <div>
            //         <div
            //           style='display: inline-block;
            //           width:  10px;
            //           height: 20px;
            //           color: ${params.color}'
            //           >●</div>
            //         <span>${'min:' + res.data.min}</span>
            //       </div>
            //       <div>
            //         <div
            //           style='display: inline-block;
            //           width: 10px;
            //           height: 20px;
            //           color: ${params.color}'
            //         >●</div>
            //         <span>${'Q1:' + res.data.Q1}</span>
            //       </div>
            //       <div>
            //         <div
            //           style='display: inline-block;
            //           width: 10px;
            //           height: 20px;
            //           color: ${params.color}'
            //         >●</div>
            //         <span>${'median:' + res.data.median}</span>
            //       </div>
            //       <div>
            //         <div
            //           style='display: inline-block;
            //           width: 10px;
            //           height: 20px;
            //           color: ${params.color}'
            //         >●</div>
            //         <span>${'Q3:' + res.data.Q3}</span>
            //       </div>
            //       <div>
            //         <div
            //           style='display: inline-block;
            //           width: 10px;
            //           height: 20px;
            //           color: ${params.color}'
            //         >●</div>
            //         <span>${'max:' + res.data.max}</span>
            //       </div>
            //           <div>
            //         <div
            //           style='display: inline-block;
            //           width: 10px;
            //           height: 20px;
            //           color: ${params.color}'
            //         >●</div>
            //         <span>${'outlier:' + res.data.outlier}</span>
            //       </div>
            //     `
            //     return params.name + res
            //   }
            // },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              data: [this.dataForm.characteristicsId ],
              type: 'category',
              axisLabel: {
                clickable: true
              },
              silent: false,
              triggerEvent: true
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '最大值',
                type: 'line',
                stack: 'Total',
                data: [res.data.max]
              },
            ]
          };
          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>
