<template>
  <div class="assembly-punctual-inspection">
    <el-card>
      <div class="search-container">
        <span class="show-text">生产订单:</span>
        <el-input
          v-model="productionOrder"
          placeholder="请输入生产订单"
          clearable
          style="width: 150px; margin-right: 10px"
          @keyup.enter.native="searchTable"
        />
        <span class="show-text">销售订单:</span>
        <el-input
          v-model="salesOrder"
          placeholder="请输入销售订单"
          clearable
          style="width: 150px; margin-right: 10px"
          @keyup.enter.native="searchTable"
        />
        <span class="show-text">物料编码:</span>
        <el-input
          v-model="materialCode"
          placeholder="请输入物料编码"
          clearable
          style="width: 180px; margin-right: 10px"
          @keyup.enter.native="searchTable"
        />
        <span class="show-text">物料名称:</span>
        <el-input
          v-model="materialName"
          placeholder="请输入物料名称"
          clearable
          style="width: 180px; margin-right: 10px"
          @keyup.enter.native="searchTable"
        />
        <span class="show-text">工序名称:</span>
        <el-input
          v-model="processName"
          placeholder="请输入工序名称"
          clearable
          style="width: 150px; margin-right: 10px"
          @keyup.enter.native="searchTable"
        />
        <el-button :disabled="loading" icon="el-icon-search" plain type="primary" @click="searchTable">查询</el-button>
        <el-button :disabled="loading || tableData.length === 0" icon="el-icon-download" plain type="success" @click="exportToExcel">导出</el-button>
      </div>

      <div class="table-tip">
        仅显示预计送检日期小于等于今天的数据
      </div>

      <el-table
        v-loading="loading"
        :data="tableData"
        :height="'70vh'"
        :row-class-name="tableRowClassName"
        border
        element-loading-background="rgba(0, 0, 0, 0.2)"
        element-loading-spinner="el-icon-loading"
        highlight-current-row
        size="mini"
        style="width: 100%; margin-top: 16px"
        tooltip-effect="dark"
      >
        <el-table-column align="center" label="序号" type="index" width="60" fixed />
        <el-table-column align="center" prop="任务类型" label="任务类型" width="90" fixed />
        <el-table-column align="center" prop="预计送检日期" label="预计送检日期" width="120" fixed show-overflow-tooltip>
          <template slot-scope="scope">
            {{ formatDate(scope.row.预计送检日期) }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="订单号" label="生产订单" width="100" fixed />
        <el-table-column align="center" prop="合同号" label="销售订单" width="120" fixed show-overflow-tooltip />
        <el-table-column align="center" prop="产品编码" label="物料编码" width="180" show-overflow-tooltip />
        <el-table-column align="center" prop="产品名称" label="物料名称" width="220" show-overflow-tooltip />
        <el-table-column align="center" prop="工序名称" label="工序名称" width="120" show-overflow-tooltip />
        <el-table-column align="center" prop="计划数量" label="计划数量" width="100" />
        <el-table-column align="center" prop="指派对象" label="指派对象" width="140" show-overflow-tooltip />
        <el-table-column align="center" prop="计划开始时间" label="计划开始时间" width="120">
          <template slot-scope="scope">
            {{ formatDate(scope.row.计划开始时间) }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="计划完成时间" label="计划完成时间" width="120">
          <template slot-scope="scope">
            {{ formatDate(scope.row.计划完成时间) }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="齐套时间" label="齐套时间" width="120">
          <template slot-scope="scope">
            {{ formatDate(scope.row.齐套时间) }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="钣金预达时间" label="钣金预达时间" width="120">
          <template slot-scope="scope">
            {{ formatDate(scope.row.钣金预达时间) }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="加急状态" label="加急状态" width="90" />
      </el-table>

    </el-card>
  </div>
</template>

<script>
import * as XLSX from 'xlsx'

export default {
  name: 'AssemblyPunctualInspection',
  data() {
    return {
      productionOrder: '',
      salesOrder: '',
      materialCode: '',
      materialName: '',
      processName: '',
      loading: false,
      tableData: []
    }
  },
  mounted() {
    this.searchTable()
  },
  methods: {
    formatDate(value) {
      if (!value) return ''
      return String(value).split(' ')[0]
    },
    tableRowClassName({ row }) {
      if (this.isOverdue(row.预计送检日期)) {
        return 'overdue-row'
      }
      if (this.isToday(row.预计送检日期)) {
        return 'today-row'
      }
      return ''
    },
    async searchTable() {
      this.loading = true
      try {
        const param = []
        param.push(['订单号', this.productionOrder || 0])
        param.push(['合同号', this.salesOrder])
        param.push(['产品编码', this.materialCode])
        param.push(['产品名称', this.materialName])
        param.push(['工序名称', this.processName])
        param.push(['辅助配件', '不含'])

        const data = this.CreateData('11', '异常提醒_装配及时送检_查询', param)
        const response = await this.ExecDatabase(data)
        this.tableData = response.data || []
      } catch (error) {
        this.$message.error('查询失败: ' + error.message)
        this.tableData = []
      } finally {
        this.loading = false
      }
    },
    isOverdue(value) {
      const targetTime = this.getDateTime(value)
      if (targetTime === Infinity) {
        return false
      }
      return targetTime < this.getTodayTime()
    },
    isToday(value) {
      const targetTime = this.getDateTime(value)
      if (targetTime === Infinity) {
        return false
      }
      return targetTime === this.getTodayTime()
    },
    getTodayTime() {
      const now = new Date()
      now.setHours(0, 0, 0, 0)
      return now.getTime()
    },
    getDateTime(value) {
      if (!value) {
        return Infinity
      }
      const dateText = this.formatDate(value).replace(/-/g, '/')
      const date = new Date(dateText)
      if (Number.isNaN(date.getTime())) {
        return Infinity
      }
      date.setHours(0, 0, 0, 0)
      return date.getTime()
    },
    exportToExcel() {
      const exportData = this.tableData.map((item, index) => ({
        序号: index + 1,
        任务类型: item.任务类型,
        预计送检日期: item.预计送检日期,
        生产订单: item.订单号,
        销售订单: item.合同号,
        物料编码: item.产品编码,
        物料名称: item.产品名称,
        工序名称: item.工序名称,
        计划数量: item.计划数量,
        指派对象: item.指派对象,
        计划开始时间: this.formatDate(item.计划开始时间),
        计划完成时间: this.formatDate(item.计划完成时间),
        齐套时间: this.formatDate(item.齐套时间),
        钣金预达时间: this.formatDate(item.钣金预达时间),
        加急状态: item.加急状态
      }))

      const wb = XLSX.utils.book_new()
      const ws = XLSX.utils.json_to_sheet(exportData)
      ws['!cols'] = [
        { wch: 8 },
        { wch: 10 },
        { wch: 14 },
        { wch: 14 },
        { wch: 14 },
        { wch: 22 },
        { wch: 28 },
        { wch: 14 },
        { wch: 10 },
        { wch: 14 },
        { wch: 14 },
        { wch: 14 },
        { wch: 14 },
        { wch: 14 },
        { wch: 10 }
      ]
      XLSX.utils.book_append_sheet(wb, ws, '装配及时送检')
      XLSX.writeFile(wb, '装配及时送检.xlsx')
      this.$message.success('导出成功')
    }
  }
}
</script>

<style scoped>
.assembly-punctual-inspection {
  padding: 10px;
}

.search-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.show-text {
  font-size: 14px;
  margin-right: 6px;
}

.table-tip {
  margin-top: 12px;
  color: #909399;
  font-size: 13px;
}

::v-deep .overdue-row > td {
  background-color: #fde2e2 !important;
}

::v-deep .today-row > td {
  background-color: #faecd8 !important;
}
</style>
