<!--
 * @Author: zhp
 * @Date: 2023-01-11 09:24:58
 * @LastEditTime: 2023-06-20 15:49:24
 * @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-input v-model="dataForm.inspectionType" :placeholder="$t('code.inspectionType')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('code.characteristics')">
          <el-select v-model="dataForm.characteristicsId" :placeholder="$t('code.characteristics')">
            <el-option v-for="item in characteristicsList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('code.grouping')">
          <el-radio v-model="dataForm.divideIntoGroup" label="0">批号</el-radio>
          <el-radio v-model="dataForm.divideIntoGroup" label="1">年</el-radio>
          <el-radio v-model="dataForm.divideIntoGroup" label="2">月</el-radio>
          <el-radio v-model="dataForm.divideIntoGroup" label="3">日</el-radio>
        </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/c/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: [],
      characteristicsList: [],
      listQuery: {
        characteristicsId: null,
        factoryId: null,
        inspectionType: null,
        productId: null,
        sampleSize: null,
        endTime: null,
        startTime: null,
        divideIntoGroup:null
      },
      dataForm: {
        productId: null,
        timeSlot: [],
        factoryId: null,
        characteristicsId: null,
        inspectionType: null,
        sampleSize: null,
        divideIntoGroup: null,
        endTime: null,
        startTime: 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.characteristicsList[0].id = res.data.id
            this.characteristicsList[0].name = res.data.parameterName

          }
        })
    },
    getData() {
      this.dataForm.startTime = this.dataForm.timeSlot ? this.dataForm.timeSlot[0] : null
      this.dataForm.endTime = this.dataForm.timeSlot ? this.dataForm.timeSlot[1] : null
      this.$http
        .post(this.urlOptions.getDataListURL, {
          params: this.dataForm
        }
        )
        .then(({ data: res }) => {
          let defectNumberArr = []
          let xAxisData = []
          res.data.forEach((item) => {
            defectNumberArr.push(item.defectNumber)
            this.dataForm.divideIntoGroup === 0 ? xAxisData.push(item.batchNo) : this.dataForm.divideIntoGroup === 1 ? xAxisData.push(item.year) : this.dataForm.divideIntoGroup === 2 ? xAxisData.push(item.month) : this.dataForm.divideIntoGroup === 3 ? xAxisData.push(item.day) : ''
          })
          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: 'C图'
            },
            tooltip: {
              trigger: 'axis'
            },
            // legend: {
            //   data: ['推移图']
            // },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              data: xAxisData,
              type: 'category',
              axisLabel: {
                clickable: true
              },
              silent: false,
              triggerEvent: true
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '	缺陷数',
                type: 'line',
                stack: 'Total',
                data: defectNumberArr
              }
            ]
          };
          option && myChart.setOption(option);
        })
    },
    buttonClick(val) {
      console.log(val)
      switch (val.btnName) {
        case "search":
          this.getData()
          break;

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