<template>
  <div>
    <el-row>
      <span style="margin-left: 10px; font-size: larger">工位号：</span>
      <el-select v-model="stationNumberValue" placeholder="请选择工位号" clearable style="width: 200px;margin: 20px 0 0 22px">
        <el-option
          v-for="item in stationArr"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <span style="margin-left: 50px; font-size: larger">时间：</span>
      <el-date-picker
        v-model="dateTime"
        :clearable="false"
        size="small"
        type="daterange"
        align="center"
        style="width: 440px; height: 40px"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        range-separator="～"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
      <el-button type="primary" plain size="small" icon="el-icon-search" style="margin-left: 50px" @click="selectDate()">
        查询
      </el-button>
    </el-row>
    <el-row style="height: 87%; width: 99%; margin-top: 20px">
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="tableData"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        element-loading-text="数据加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)"
        class="main"
        tooltip-effect="dark"
        height="700px"
        style="width: 100%;max-height: 700px"
        border
        size="mini"
      >
        <!--        <el-table-column :selectable="selectable" type="selection" width="45" align="center"/>-->
        <el-table-column type="index" width="60" label="序号" align="center" />
        <el-table-column align="center" label="订单号">
          <template slot-scope="scope">
            {{ scope.row.订单号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="机型">
          <template slot-scope="scope">
            {{ scope.row.发动机型号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="总成编号">
          <template slot-scope="scope">
            {{ scope.row.发动机号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工位号">
          <template slot-scope="scope">
            {{ scope.row.工位号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工位名称">
          <template slot-scope="scope">
            {{ scope.row.工序名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="零件数量">
          <template slot-scope="scope">
            {{ scope.row.零件数量 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="零件名称">
          <template slot-scope="scope">
            {{ scope.row.零件名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="零件图号">
          <template slot-scope="scope">
            {{ scope.row.零件图号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="物料号">
          <template slot-scope="scope">
            {{ scope.row.物料号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="生产厂家">
          <template slot-scope="scope">
            {{ scope.row.生产厂家 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="物料条码">
          <template slot-scope="scope">
            {{ scope.row.物料条码 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="物料条码批次">
          <template slot-scope="scope">
            {{ scope.row.物料条码批次 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作时间">
          <template slot-scope="scope">
            {{ scope.row.操作时间 }}
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <div class="block" style="margin-top: 10px;margin-left: 20px">
      <el-pagination
        v-if="!loading"
        :current-page="pageCurrent"
        :page-sizes="[15, 30, 40]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
export default {
  name: 'Index',
  data() {
    return {
      tableData: [],
      engineTypeValue_check: 0,
      engineTypeValue: '',
      assemblyNumberValue_check: 0,
      assemblyNumberValue: '',
      stationNumberValue_check: 1,
      partNameValue_check: 0,
      partNameValue: '',
      traceabilityCode_check: 0,
      traceabilityCode: '',
      batchBarcodeValue_check: 0,
      batchBarcodeValue: '',
      pageCurrent: 1,
      pageSize: 30,
      loading: false,
      stationNumberValue: '',
      dateTime: '',
      total: 0,
      stationArr: []
    }
  },
  created() {
    this.getStation()
  },
  methods: {
    // 确定编辑
    getStation() {
      this.stationArr = []
      const Data = this.CreateData('11', '工位与名称_视图_查询')
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.stationArr.push({
            label: response.data[i].工位号,
            value: response.data[i].工位号
          })
        }
      })
    },
    selectDate() {
      this.tableData = []
      var param = []
      param[0] = ['开始时间', this.dateTime[0] + ' ' + '00:00']
      param[1] = ['结束时间', this.dateTime[1] + ' ' + '23:59']
      param[2] = ['发动机型号_ischeck', this.engineTypeValue_check]
      param[3] = ['发动机型号', this.engineTypeValue]
      param[4] = ['发动机号_ischeck', this.assemblyNumberValue_check]
      param[5] = ['发动机号', this.assemblyNumberValue]
      param[6] = ['工位号_ischeck', this.stationNumberValue_check]
      param[7] = ['工位号', this.stationNumberValue]
      param[8] = ['零件名称_ischeck', this.partNameValue_check]
      param[9] = ['零件名称', this.partNameValue]
      param[10] = ['二维码_ischeck', this.traceabilityCode_check]
      param[11] = ['二维码', this.traceabilityCode]
      param[12] = ['物料条码批次_ischeck', this.batchBarcodeValue_check]
      param[13] = ['物料条码批次', this.batchBarcodeValue]
      param[14] = ['PageCurrent', this.pageCurrent]
      param[15] = ['PageSize', this.pageSize]
      param[16] = ['PageCount', '1111', 'int', '1']
      param[17] = ['ItemCount', '1111', 'int', '1']
      var Data = this.CreateData('11', '物料数据_视图_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.result.length !== 0) {
          this.tableData = response.data.result
        }
        this.total = parseInt(response.data.output[0].ItemCount)
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.selectDate()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.selectDate()
    }
  }
}
</script>

<style scoped>
  ::v-deep.cell{
    font-size: large;
    color: black;
  }
  ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td{
    background-color: #cedcf3;
  }

</style>
