<template>
  <div class="app-container">
    <el-card style="height: 835px">
      <div style="margin-top: 7px; margin-bottom: 7px">
        <span style="font-size: 13px;color: black;">下达时间</span>
        <el-date-picker
          v-model="dateRange"
          size="small"
          type="daterange"
          align="center"
          style="width: 240px;"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          @change="pageCurrent=1;searchTable();getOrderNumberType();getProductName()"/>
        <el-select v-model="orderNumberTypeValue" style="width:200px" placeholder="工单号" size="small" filterable clearable @change="pageCurrent=1;searchTable();getProductName()">
          <el-option
            v-for="item in orderNumberType"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <el-select v-model="productNameValue" style="width:200px" placeholder="产品名称" size="small" filterable clearable @change="pageCurrent=1;searchTable()">
          <el-option
            v-for="item in productName"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <el-select v-model="orderStatusValue" style="width:100px" placeholder="工单状态" size="small" filterable clearable @change="pageCurrent=1;searchTable()">
          <el-option
            v-for="item in orderStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </div>
      <div>
        <el-table
          v-loading="loading"
          ref="table"
          :data="tableData"
          :summary-method="getSummaries"
          highlight-current-row
          show-summary
          border
          stripe
          size="small"
          style="width: 1681px"
          height="740px">
          <el-table-column type="index" label="序号" align="center" width="70px"/>
          <el-table-column :width="setColumnWidth('状态')" label="状态" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.StateName }}
            </template>
          </el-table-column>
          <el-table-column label="工单号" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.OrderNumber }}
            </template>
          </el-table-column>
          <el-table-column label="产品编号" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.ProductNumber }}
            </template>
          </el-table-column>
          <el-table-column label="产品名称" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.ProductName }}
            </template>
          </el-table-column>
          <el-table-column label="产品规格" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.ProductSpecifications }}
            </template>
          </el-table-column>
          <el-table-column label="计划产量" align="center" width="80px" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.PlannedQuantity }}
            </template>
          </el-table-column>
          <el-table-column label="完成产量" align="center" width="80px" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.CompleteProduction }}
            </template>
          </el-table-column>
          <el-table-column label="下达时间" align="center" width="90px" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.Createtime }}
            </template>
          </el-table-column>
          <el-table-column label="实际开始时间" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.StartTime }}
            </template>
          </el-table-column>
          <el-table-column label="实际完成时间" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.EndTime }}
            </template>
          </el-table-column>
          <el-table-column label="导入方式" align="center" width="80px" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.ImportName }}
            </template>
          </el-table-column>
          <el-table-column label="导入人" align="center" width="80px" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.PeopleName }}
            </template>
          </el-table-column>
        </el-table>
        <div class="block" style="margin: 10px 0;">
          <el-pagination
            :current-page="pageCurrent"
            :page-sizes="[10, 20, 30, 40, 100]"
            :page-size="pageSize"
            :total="total"
            :pager-count="5"
            style="display:inline-block;width:50%"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChanges"
            @current-change="handleCurrentChanges"/>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      typeValue: '', // 类型
      type: [], // 类型数组
      productNameValue: '', // 产品名称
      productName: [], // 产品名称数组
      orderNumberTypeValue: '', // 工单号
      orderNumberType: [], // 工单号数组
      orderStatusValue: '', // 工单状态名称
      orderStatus: [], // 工单状态数组
      dateRange: '', // 提交日期
      loading: false, // 数据加载
      total: 0, // 分页总数
      tableData: [], // 合同信息表
      pageCurrent: 1, // 分页当前页
      pageSize: 30, // 分页每页显示条数
      orderName: '', // 排序列名
      order: '' // 排序方式
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'token'
    ])
  },
  updated() {
    this.$nextTick(() => {
      this.$refs['table'].doLayout()
    })
  },
  created() {
    this.searchTable()
    this.getOrderState()
  },
  methods: {
    getOrderNumberType() {
      this.orderNumberType = []
      var param = []
      param[0] = ['StartTime', this.dateRange[0]]
      param[1] = ['EndTime', this.dateRange[1]]
      var Data = this.CreateData('11', 'OrderTabulation_Search', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.orderNumberType.push({
            label: response.data[i].OrderNumber,
            value: response.data[i].OrderNumber
          })
        }
      })
    },
    getProductName() {
      this.productName = []
      let orderNumberTypeValue_check
      this.orderNumberTypeValue ? orderNumberTypeValue_check = 1 : orderNumberTypeValue_check = 0
      var param = []
      param[0] = ['StartTime', this.dateRange[0]]
      param[1] = ['EndTime', this.dateRange[1]]
      param[2] = ['orderNumber_check', orderNumberTypeValue_check]
      param[3] = ['orderNumber', this.orderNumberTypeValue]
      var Data = this.CreateData('11', 'ProductTabulation_Search', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.productName.push({
            label: response.data[i].ProductName,
            value: response.data[i].ProductNumber
          })
        }
      })
    },
    getOrderState() {
      var param = []
      var Data = this.CreateData('11', 'OrderStateTabulation_Search', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.OrderStatus.push({
            label: response.data[i].StateName,
            value: response.data[i].OrderState
          })
        }
      })
    },
    searchTable() {
      let orderNumberTypeValue_check, productNameValue_check, OrderStatusValue_check
      this.orderNumberTypeValue ? orderNumberTypeValue_check = 1 : orderNumberTypeValue_check = 0
      this.productNameValue ? productNameValue_check = 1 : productNameValue_check = 0
      this.OrderStatusValue ? OrderStatusValue_check = 1 : OrderStatusValue_check = 0
      var param = []
      param[0] = ['OrderNumber_check', orderNumberTypeValue_check]
      param[1] = ['OrderNumber', this.orderNumberTypeValue]
      param[2] = ['ProductNumber_check', productNameValue_check]
      param[3] = ['ProductNumber', this.productNameValue]
      param[4] = ['OrderState_check', OrderStatusValue_check]
      param[5] = ['OrderState', this.OrderStatusValue]
      param[6] = ['StartTime', this.dateRange[0]]
      param[7] = ['EndTime', this.dateRange[1]]
      param[8] = ['PageCurrent', this.pageCurrent]
      param[9] = ['PageSize', this.pageSize]
      param[10] = ['PageCount', '1111', 'int', '1']
      param[11] = ['ItemCount', '1111', 'int', '1']
      var Data = this.CreateData('11', 'OrderInformation_Search', param)
      this.ExecDatabase(Data).then(response => {
        this.tableData = response.data.result
        this.total = parseInt(response.data.output[0].ItemCount) || 0
      })
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        } else if (index === 6) {
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = sums[index]
          } else {
            sums[index] = 'N/A'
          }
        } else if (index === 7) {
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = sums[index].toFixed(2)
          } else {
            sums[index] = 'N/A'
          }
        }
      })
      return sums
    },
    /* sortChange(column) {
      if (column.prop === '采购件') {
        this.orderName = 1
      } else if (column.prop === '交货日期') {
        this.orderName = 2
      } else if (column.prop === '任务下达 ') {
        this.orderName = 3
      } else if (column.prop === '采购日期 ') {
        this.orderName = 4
      } else {
        this.orderName = 0
      }
      if (column.order === 'ascending') {
        this.order = 1
      } else if (column.order === 'descending') { this.order = 2 } else {
        this.order = ''
      }
      this.searchTable()
    },*/
    handleSizeChanges(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchTable()
    },
    handleCurrentChanges(val) {
      this.pageCurrent = val
      this.searchTable()
    }
  }
}
</script>

