<template>
  <div class="delivery-notice-page">
    <el-card>
      <!-- <div class="page-title">发货状态列表</div> -->
      <div class="search-container" @keyup.enter="searchTable">
        <span class="show-text">生产订单:</span>
        <el-input
          v-model="orderNo"
          clearable
          placeholder="请输入生产订单"
          style="width: 130px; margin-right: 10px"
        />
        <span class="show-text">销售订单:</span>
        <el-input
          v-model="saleNo"
          clearable
          placeholder="请输入销售订单"
          style="width: 130px; margin-right: 10px"
        />
        <span class="show-text">物料名称:</span>
        <el-input
          v-model="materialName"
          clearable
          placeholder="请输入物料名称"
          style="width: 150px; margin-right: 10px"
        />
        <span class="show-text">物料编码:</span>
        <el-input
          v-model="materialCode"
          clearable
          placeholder="请输入物料编码"
          style="width: 170px; margin-right: 10px"
        />
        <span class="show-text">要求发货日期:</span>
        <el-date-picker
          v-model="deliveryDate"
          clearable
          format="yyyy-MM-dd"
          placeholder="请选择日期"
          style="width: 150px; margin-right: 10px"
          type="date"
          value-format="yyyy-MM-dd"
        />
        <span class="show-text">齐套:</span>
        <el-select
          v-model="complete"
          clearable
          placeholder="请选择"
          style="width: 100px; margin-right: 10px"
        >
          <el-option label="全部" value="" />
          <el-option label="是" value="是" />
          <el-option label="否" value="否" />
        </el-select>
        <span class="show-text">发料状态:</span>
        <el-select
          v-model="sendStatus"
          clearable
          placeholder="请选择"
          style="width: 120px; margin-right: 10px"
        >
          <el-option label="全部" value="" />
          <el-option label="发料齐套" value="发料齐套" />
          <el-option label="发料缺件" value="发料缺件" />
          <el-option label="未发料" value="未发料" />
        </el-select>
        <el-button
          :disabled="loading"
          icon="el-icon-search"
          plain
          type="primary"
          @click="searchTable"
        >查询</el-button>
      </div>

      <el-table
        v-loading="loading"
        :data="tableData"
        :height="'76vh'"
        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" fixed label="序号" type="index" width="50" />
        <el-table-column align="center" fixed label="生产订单" prop="订单编号" width="90" />
        <el-table-column align="center" label="销售订单" prop="合同号" width="110" />
        <el-table-column align="center" label="物料名称" prop="物料描述" width="160" />
        <el-table-column align="center" label="物料编码" prop="物料编号" min-width="230" show-overflow-tooltip />
        <el-table-column align="center" label="数量" width="80">
          <template slot-scope="scope">{{ formatQuantity(scope.row.交货数量 || scope.row.计划数量) }}</template>
        </el-table-column>
        <el-table-column align="center" label="要求发货日期" width="120">
          <template slot-scope="scope">{{ formatDate(scope.row.要求发货日期) }}</template>
        </el-table-column>
        <el-table-column align="center" label="齐套" width="90">
          <template slot-scope="scope">
            <div :style="getStatusStyle(formatComplete(scope.row.齐套))" class="score-cell">
              {{ formatComplete(scope.row.齐套) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="发料状态" width="110">
          <template slot-scope="scope">
            <div :style="getStatusStyle(formatSendStatus(scope.row.发料状态))" class="score-cell">
              {{ formatSendStatus(scope.row.发料状态) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作人" prop="操作人" width="100" />
        <el-table-column align="center" label="装配开工" width="100">
          <template slot-scope="scope">
            <div :style="getStatusStyle(formatStartStatus(scope.row.任务状态))" class="score-cell">
              {{ formatStartStatus(scope.row.任务状态) }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'DeliveryNoticeList',
  data() {
    return {
      orderNo: '',
      saleNo: '',
      materialName: '',
      materialCode: '',
      deliveryDate: '',
      complete: '',
      sendStatus: '',
      tableData: [],
      loading: false
    }
  },
  created() {
    this.searchTable()
  },
  methods: {
    async searchTable() {
      this.loading = true
      this.tableData = []
      const param = []
      param.push(['生产订单', this.normalizeQueryValue(this.orderNo)])
      param.push(['销售订单', this.normalizeQueryValue(this.saleNo)])
      param.push(['物料名称', this.normalizeQueryValue(this.materialName)])
      param.push(['物料编码', this.normalizeQueryValue(this.materialCode)])
      param.push(['要求发货日期', this.deliveryDate || null])
      param.push(['齐套', this.complete || ''])
      param.push(['发料状态', this.sendStatus || ''])

      const data = this.CreateData('11', '装配中心任务看板_发货状态查询', param)
      try {
        const response = await this.ExecDatabase(data)
        this.tableData = response.data || []
      } catch (error) {
        console.error('发货通知列表查询失败:', error)
        this.$message.error('查询失败')
      } finally {
        this.loading = false
      }
    },
    normalizeQueryValue(value) {
      return value === null || value === undefined || value === '' ? '0' : value
    },
    formatDate(value) {
      if (!value) return ''
      return String(value).split('T')[0].split(' ')[0]
    },
    formatQuantity(value) {
      if (value === null || value === undefined || value === '') return ''
      const numberValue = Number(value)
      if (Number.isNaN(numberValue)) return value
      return Number.isInteger(numberValue) ? String(numberValue) : String(numberValue).replace(/0+$/, '').replace(/\.$/, '')
    },
    formatComplete(value) {
      return Number(value || 0) === 1 ? '是' : '否'
    },
    formatSendStatus(value) {
      if (value === '发料齐套' || value === '发料缺件') return value
      if (Number(value || 0) === 1) return '发料齐套'
      if (Number(value || 0) === 2) return '发料缺件'
      return ''
    },
    formatStartStatus(value) {
      return Number(value || 0) > 0 ? '已开工' : '待执行'
    },
    getStatusStyle(value) {
      if (value === '是' || value === '发料齐套' || value === '已开工') {
        return {
          backgroundColor: '#f0f9eb',
          color: '#67c23a'
        }
      }
      if (value === '否' || value === '发料缺件' || value === '待执行') {
        return {
          backgroundColor: '#fdf6ec',
          color: '#e6a23c'
        }
      }
      return {}
    }
  }
}
</script>

<style scoped>
.delivery-notice-page {
  padding: 0;
}

.page-title {
  color: #409eff;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  margin-bottom: 12px;
  text-align: center;
}

.search-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
}

.show-text {
  line-height: 32px;
  margin-right: 5px;
  white-space: nowrap;
}

.score-cell {
  border-radius: 3px;
  padding: 2px 4px;
}
</style>
