<!--
 * @Author: zhp
 * @Date: 2023-01-11 09:24:58
 * @LastEditTime: 2023-06-20 15:55:28
 * @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="getOriginalData">{{ $t('code.originalData') }}}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="$t('code.meanRange')" name="first">
        <mean-range ref="meanRange"></mean-range>
      </el-tab-pane>
      <el-tab-pane :label="$t('code.meanStandard')" name="second">
        <mean-standard ref="meanStandard">
        </mean-standard>
      </el-tab-pane>
      <el-tab-pane :label=" $t('code.medianRange')" name="third">
        <median-range ref="medianRange">
        </median-range>
      </el-tab-pane>
      <el-tab-pane :label="$t('code.singleValueMovingRange')" name="fourth">
        <single-valueMovingRange ref="singleValueMovingRange">
        </single-valueMovingRange>
      </el-tab-pane>
      <el-tab-pane :label="$t('code.meanMovingRangeRange')" name="fifth">
        <mean-MovingRangeRange ref="meanMovingRangeRange">
        </mean-MovingRangeRange>
      </el-tab-pane>
      <el-tab-pane :label="$t('code.meanMovingRangeStandardDeviation')" name="sixth">
        <mean-movingRangeStandardDeviation ref="meanMovingRangeStandardDeviation">
        </mean-movingRangeStandardDeviation>
      </el-tab-pane>
    </el-tabs>
    <base-table id="palletTable" :table-props="tableProps" :page="listQuery.page" ref="palletTable1"
      highlight-current-row :limit="listQuery.limit" :table-data="tableData">
    </base-table>
  </el-card>
</template>

<script>
import meanRange from "./components/meanRange.vue"
import meanStandard from "./components/meanStandard.vue"
import medianRange from "./components/medianRange.vue"
import singleValueMovingRange from "./components/singleValueMovingRange.vue"
import meanMovingRangeRange from "./components/meanMovingRangeRange.vue"
import meanMovingRangeStandardDeviation from "./components/meanMovingRangeStandardDeviation.vue"
import i18n from "@/i18n"
import * as echarts from 'echarts';
const tableProps = [
  {
    prop: "orderNumber",
    label: i18n.t('code.inspectionNumber'),
  },
  {
    prop: "batchNo",
    label: i18n.t('code.batchNo'),
  },
  {
    prop: "locationNo",
    label: i18n.t('code.locationNo'),
  },
  {
    prop: "groupNo",
    label: i18n.t('code.groupNo'),
  },
  {
    prop: "meteringValue",
    label: i18n.t('code.assayValue'),
  },
  {
    prop: "createDate",
    label: i18n.t('code.parsingTime'),
  }
];
export default {
  data() {
    return {
      myChart: null,
      urlOptions: {
        getXBarURL: '',
        getDataListURL: "/code/shipmentRegistration/mean/range/chart",
        getFactoryURL: '/code/shipmentRegistration/query/factory',
        getProductURL: '/code/shipmentRegistration/query/product',
        getInspectionTypeURL: '/code/shipmentRegistration/query/inspection/type',
        getOriginalDataURL: '/code/shipmentRegistration/raw/data',
        getPurchaseRegistrationTypeURL: '/code/shipmentRegistration/query/checkout/project',
      },
      tableData:[],
      tableProps,
      factoryList: [],
      productList: [],
      meanRangeShow:false,
      listQuery: {
        characteristicsId: null,
        factoryId: null,
        inspectionType: null,
        productId: null,
        sampleSize: null,
        endTime: null,
        startTime: null,
      },
      activeName:null,
      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: '最大值',
        },
      ],
      tableData: [],
      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: {
    meanRange,
    meanStandard,
    medianRange,
    singleValueMovingRange,
    meanMovingRangeRange,
    meanMovingRangeStandardDeviation
  },
  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, });
      });
    }
  },
  mounted() {
    // this.getData()
    // this.getDict()
  },
  methods: {
    selectChanged(val) {
      console.log(val)
      alert(JSON.stringify(val))
    },
    handleClick(val) {
      if (this.activeName === 'first') {
        this.$nextTick(() => {
          this.$refs.meanRange.getData(this.listQuery)
        })
      } else if (this.activeName === 'second') {
        this.$nextTick(() => {
          this.$refs.meanStandard.getData(this.listQuery)
        })
      } else if (this.activeName === 'third') {
        this.$nextTick(() => {
          this.$refs.medianRange.getData(this.listQuery)
        })
      } else if (this.activeName === 'fourth') {
        this.$nextTick(() => {
          this.$refs.singleValueMovingRange.getData(this.listQuery)
        })
      } else if (this.activeName === 'fifth') {
        this.$nextTick(() => {
          this.$refs.meanMovingRangeRange.getData(this.listQuery)
        })
      } else if (this.activeName === 'sixth') {
        this.$nextTick(() => {
          this.$refs.meanMovingRangeStandardDeviation.getData(this.listQuery)
        })
      }

    },
    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
          }
        })
    },
    getOriginalData() {
      this.$http.get(this.urlOptions.getOriginalDataURL, {
        params:this.listQuery
      })
        .then(({ data: res }) => {
          if (res.code === 0) {
            this.tableData = res.data
          }
        })
    },
    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>
