<template>
  <div class="app-container">
    <el-tabs v-model="activeLine" type="card" @tab-click="handleQuery">
      <el-tab-pane label="酸连轧" name="acid" />
      <el-tab-pane label="双机架" name="dr" />
      <el-tab-pane label="镀锌" name="cgl" />
      <el-tab-pane label="镀铬" name="ecl" />
      <el-tab-pane label="脱脂" name="spl" />
      <el-tab-pane label="纵剪" name="sl" />
    </el-tabs>
    <div class="mb8" style="display:flex;align-items:center;gap:12px;padding:12px 0">
      <el-date-picker v-model="dateRange" type="daterange" range-separator="至"
        start-placeholder="开始日期" end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']"
        style="width:360px" />
      <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
      <span style="color:#999;font-size:13px">查询二级实绩中的热卷是否已在三级更新</span>
    </div>
    <KLPTable v-loading="loading" :data="list" max-height="600">
      <el-table-column label="出口卷号" align="center" prop="excoilId" width="150" />
      <el-table-column label="热卷号" align="center" prop="hotCoilId" width="150" />
      <el-table-column label="下线时间" align="center" width="150">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.endDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="工序" align="center" prop="processCode" width="80" />
      <el-table-column label="对比状态" align="center" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.matchStatus === 0" type="success">已加工</el-tag>
          <el-tag v-else-if="scope.row.matchStatus === 1" type="warning">未加工</el-tag>
          <el-tag v-else type="danger">未入库</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="入场钢卷号" align="center" prop="enterCoilNo" width="150" />
      <el-table-column label="当前钢卷号" align="center" prop="currentCoilNo" width="150" />
      <el-table-column label="供应商钢卷号" align="center" prop="supplierCoilNo" width="150" />
      <el-table-column label="物品名称" align="center" prop="itemName" width="120" />
      <el-table-column label="物品编码" align="center" prop="itemCode" width="120" />
      <el-table-column label="规格" align="center" prop="specification" width="110" />
      <el-table-column label="材质" align="center" prop="material" width="100" />
      <el-table-column label="生产厂家" align="center" prop="manufacturer" width="100" />
      <el-table-column label="库区" align="center" prop="warehouseName" width="130" />
      <el-table-column label="钢卷状态" align="center" prop="coilStatus" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.coilStatus === 0">在库</span>
          <span v-else-if="scope.row.coilStatus === 1">在途</span>
          <span v-else-if="scope.row.coilStatus === 2">已出库</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
    </KLPTable>
  </div>
</template>

<script>
import { getExcoilStatus } from "@/api/wms/coilComparison";

export default {
  name: "CoilComparison",
  data() {
    return {
      loading: false,
      activeLine: 'acid',
      dateRange: [],
      list: [],
    };
  },
  created() {
    const end = new Date();
    const start = new Date();
    this.dateRange = [start, end];
    this.handleQuery();
  },
  methods: {
    handleQuery() {
      this.loading = true;
      const params = {};
      if (this.dateRange && this.dateRange.length === 2) {
        params.startTime = this.dateRange[0];
        params.endTime = this.dateRange[1];
      } else {
        const today = new Date();
        params.startTime = this.formatDateTime(today, '00:00:00');
        params.endTime = this.formatDateTime(today, '23:59:59');
      }
      params.lineType = this.activeLine;
      getExcoilStatus(params).then(res => {
        this.list = res.data || [];
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    formatDateTime(date, time) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day} ${time}`;
    },
  },
};
</script>
