<template>
  <div class="timely-kit-page">
    <el-card>
      <div class="search-container" @keyup.enter="searchTable">
        <span class="show-text">生产订单:</span>
        <el-input v-model="orderNo" clearable placeholder="请输入生产订单" class="filter-control" />
        <span class="show-text">销售订单:</span>
        <el-input v-model="contractNo" clearable placeholder="请输入销售订单" class="filter-control" />
        <span class="show-text">物料编码:</span>
        <el-input v-model="productCode" clearable placeholder="请输入产品编码" class="filter-control" />
        <span class="show-text">计划号:</span>
        <el-input v-model="planNo" clearable placeholder="请输入计划号" class="filter-control" />
        <span class="show-text">发货状态:</span>
        <el-select v-model="shipmentStatus" clearable placeholder="请选择" class="filter-control">
          <el-option label="全部" value="全部" />
          <el-option label="已下达发货通知" value="已发货" />
          <el-option label="未下达发货通知" value="未发货" />
        </el-select>
        <span class="show-text">齐套:</span>
        <el-select v-model="complete" clearable placeholder="请选择" class="small-filter">
          <el-option label="全部" value="全部" />
          <el-option label="是" value="是" />
          <el-option label="否" value="否" />
        </el-select>
        <span class="show-text">完成状态:</span>
        <el-select v-model="checkStatus" clearable placeholder="请选择" class="filter-control">
          <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="请选择" class="filter-control">
          <el-option label="全部" value="全部" />
          <el-option label="发料齐套" value="发料齐套" />
          <el-option label="发料缺件" value="发料缺件" />
          <el-option label="未发料" value="未发料" />
        </el-select>
        <span class="show-text">自制件属性:</span>
        <el-select v-model="selfStatus" clearable placeholder="请选择" class="filter-control">
          <el-option label="全部" value="全部" />
          <el-option label="机加" value="机加" />
          <el-option label="装配" value="装配" />
        </el-select>
        <span class="show-text">计划开始:</span>
        <el-date-picker
          v-model="planStart"
          clearable
          format="yyyy-MM-dd"
          placeholder="选择日期"
          type="date"
          value-format="yyyy-MM-dd"
          class="filter-control"
        />
        <el-button :disabled="loading" icon="el-icon-search" plain type="primary" @click="searchTable">查询</el-button>
      </div>

      <el-table
        v-loading="loading"
        :data="tableData"
        :height="'78vh'"
        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 type="expand">
          <template slot-scope="scope">
            <el-table
              :data="scope.row.缺件明细"
              border
              size="mini"
              class="detail-table"
              :row-class-name="detailRowClassName"
            >
              <el-table-column align="center" label="序号" type="index" width="50" />
              <el-table-column align="center" label="物料编码" prop="缺件物料编码" min-width="180" show-overflow-tooltip />
              <el-table-column align="center" label="物料名称" prop="缺件物料名称" width="150" show-overflow-tooltip />
              <el-table-column align="center" label="缺件数量" prop="缺件数量" width="90" />
              <el-table-column align="center" label="库存数量" prop="库存数量" width="90" />
              <el-table-column align="center" label="属性" prop="缺件属性" width="90" />
              <el-table-column align="center" label="生产订单号" prop="缺件生产订单号" width="100" />
              <el-table-column align="center" label="进度" prop="进度" width="130" show-overflow-tooltip />
              <el-table-column align="center" label="工艺路线/采购状态" min-width="520">
                <template slot-scope="detail">
                  <div v-if="detail.row.缺件属性 === '外购'" class="purchase-route">
                    {{ detail.row.工艺路线 }}
                  </div>
                  <div v-else class="process-route" v-html="formatProcessRoute(detail.row)" />
                </template>
              </el-table-column>
              <el-table-column align="center" label="预计完成时间" width="130">
                <template slot-scope="detail">{{ formatDate(detail.row.预计完成时间) }}</template>
              </el-table-column>
              <el-table-column align="center" label="采购未清数量" prop="采购未清数量" width="110" />
              <el-table-column align="center" label="到货草稿" prop="到货草稿" width="90" />
              <el-table-column align="center" label="质检状态" width="90">
                <template slot-scope="detail">
                  <div :style="getStatusStyle(detail.row.质检状态)" class="score-cell">{{ detail.row.质检状态 }}</div>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column align="center" label="序号" type="index" width="50" />
        <el-table-column align="center" prop="合同号" label="销售订单" width="110" show-overflow-tooltip />
        <el-table-column align="center" prop="计划号" label="计划号" width="100" show-overflow-tooltip />
        <el-table-column align="center" prop="订单号" label="生产订单" width="90" />
        <el-table-column align="center" prop="产品名称" label="产品名称" width="160" show-overflow-tooltip />
        <el-table-column align="center" prop="产品编码" label="产品编码" min-width="210" show-overflow-tooltip />
        <el-table-column align="center" prop="计划数量订单" label="计划数量" width="80" />
        <el-table-column align="center" prop="入库数量" label="入库数量" width="80" />
        <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="120">
          <template slot-scope="scope">{{ formatDate(scope.row.要求发货日期) }}</template>
        </el-table-column>
        <el-table-column align="center" label="预计齐套时间" width="130">
          <template slot-scope="scope">{{ formatDate(scope.row.预计齐套时间) }}</template>
        </el-table-column>
        <el-table-column align="center" label="齐套" width="80">
          <template slot-scope="scope">
            <div :style="getStatusStyle(scope.row.齐套)" class="score-cell">{{ scope.row.齐套 }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="拣配状态" width="90">
          <template slot-scope="scope">
            <div :style="getStatusStyle(scope.row.拣配状态)" class="score-cell">{{ scope.row.拣配状态 }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="发料状态" width="90">
          <template slot-scope="scope">
            <div :style="getStatusStyle(scope.row.发料状态)" class="score-cell">{{ scope.row.发料状态 }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="装配开工" width="90">
          <template slot-scope="scope">
            <div :style="getStatusStyle(scope.row.装配开工)" class="score-cell">{{ scope.row.装配开工 }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="完成数量" label="送检数量" width="90" />
        <el-table-column align="center" label="终检" width="70">
          <template slot-scope="scope">
            <div :style="getStatusStyle(scope.row.终检)" class="score-cell">{{ scope.row.终检 }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="工艺" width="70">
          <template slot-scope="scope">
            <div :style="getStatusStyle(scope.row.生产工艺)" class="score-cell">{{ scope.row.生产工艺 }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="缺件项" width="80">
          <template slot-scope="scope">{{ scope.row.缺件明细.length }}</template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'TimelyKitTrackingResult',
  data() {
    return {
      orderNo: '',
      contractNo: '',
      productCode: '',
      productName: '',
      processName: '',
      planNo: '',
      shipmentStatus: '全部',
      complete: '全部',
      checkStatus: '',
      sendStatus: '全部',
      selfStatus: '全部',
      planStart: '',
      tableData: [],
      loading: false
    }
  },
  created() {
    this.searchTable()
  },
  methods: {
    async searchTable() {
      this.loading = true
      this.tableData = []

      const param = []
      param.push(['订单号', this.orderNo || 0])
      param.push(['物料类型', '自制件'])
      param.push(['合同号', this.contractNo])
      param.push(['产品编码', this.productCode])
      param.push(['产品名称', this.productName])
      param.push(['工序名称', this.processName])
      param.push(['计划开始', ''])
      param.push(['计划完成', this.planStart])
      param.push(['排产状态', '全部'])
      param.push(['指派对象', '全部'])
      param.push(['计划号', this.planNo])
      param.push(['发货状态', this.shipmentStatus])
      param.push(['齐套', this.complete])
      param.push(['检验状态', this.checkStatus])
      param.push(['发料状态', this.sendStatus])
      param.push(['自制件属性', this.selfStatus])

      const data = this.CreateData('11', '生产管理_及时齐套跟踪结果_查询', param)
      try {
        const response = await this.ExecDatabase(data)
        this.tableData = this.mergeRows(response.data || [])
        if (this.tableData.length === 0) {
          this.$message.info('未查询到及时齐套跟踪结果')
        }
      } catch (error) {
        console.error('及时齐套跟踪结果查询失败:', error)
        this.$message.error('查询失败')
      } finally {
        this.loading = false
      }
    },
    mergeRows(rows) {
      const map = new Map()
      rows.forEach(row => {
        const key = [
          row.订单号 || '',
          row.合同号 || '',
          row.计划号 || '',
          row.产品编码 || ''
        ].join('|')

        if (!map.has(key)) {
          map.set(key, {
            计划号: row.计划号,
            合同号: row.合同号,
            订单号: row.订单号,
            产品编码: row.产品编码,
            产品名称: row.产品名称,
            计划数量订单: this.formatQuantity(row.计划数量订单),
            入库数量: this.formatQuantity(row.入库数量),
            要求完工日期: row.要求完工日期,
            要求发货日期: row.要求发货日期,
            预计齐套时间: row.预计齐套时间,
            齐套: row.齐套,
            拣配状态: row.拣配状态,
            发料状态: row.发料状态,
            装配开工: row.装配开工,
            完成数量: this.formatQuantity(row.完成数量),
            终检: row.终检,
            生产工艺: row.生产工艺,
            缺件明细: []
          })
        }

        const detailKey = [
          row.缺件生产订单号 || '',
          row.缺件物料编码 || '',
          row.缺件属性 || ''
        ].join('|')
        const current = map.get(key)
        if (current.缺件明细.some(item => item.detailKey === detailKey)) {
          return
        }

        current.缺件明细.push({
          detailKey,
          缺件物料编码: row.缺件物料编码,
          缺件物料名称: row.缺件物料名称,
          缺件数量: this.formatQuantity(row.缺件数量),
          库存数量: this.formatQuantity(row.库存数量),
          缺件属性: row.缺件属性,
          缺件生产订单号: row.缺件生产订单号,
          进度: row.进度,
          工艺路线: row.工艺路线,
          工艺路线明细: this.parseRouteDetails(row.工艺路线明细),
          预计完成时间: row.预计完成时间,
          采购未清数量: this.formatQuantity(row.采购未清数量),
          到货草稿: row.到货草稿,
          质检状态: row.质检状态,
          SAP单据: row.SAP单据,
          SAP行号: row.SAP行号
        })
      })
      return Array.from(map.values())
    },
    detailRowClassName() {
      return 'detail-row'
    },
    parseRouteDetails(value) {
      if (!value) return []
      if (Array.isArray(value)) return value
      try {
        const parsed = JSON.parse(value)
        return Array.isArray(parsed) ? parsed : []
      } catch (error) {
        return []
      }
    },
    toProcessNumber(value) {
      const num = Number(value)
      return Number.isFinite(num) ? num : 0
    },
    isValidProcessDate(value) {
      if (!value) return false
      const date = new Date(value)
      return !Number.isNaN(date.getTime()) && date > new Date('1900-01-01 00:00:00')
    },
    getProcessStatusNum(value) {
      const num = parseInt(value)
      if (Number.isFinite(num)) return num
      const statusMap = {
        辅助开始: 2,
        辅助结束: 3,
        开始加工: 4,
        暂停: 5,
        报工: 6,
        装配加工: 4
      }
      return statusMap[value] || 0
    },
    isOutsourceProcess(process) {
      return process.指派对象 === '外协' ||
        String(process.工序名称 || '').includes('(外协)') ||
        String(process.工序名称 || '').includes('（外协）')
    },
    isBlueProcess(process) {
      const statusNum = this.getProcessStatusNum(process.加工状态)
      const countNum = parseInt(process.收检合格数)
      return statusNum === 6 || statusNum === 3 || countNum > 0
    },
    isGreenProcess(process) {
      return this.isOutsourceProcess(process) &&
        this.toProcessNumber(process.收料数量) > this.toProcessNumber(process.收检合格数) + this.toProcessNumber(process.收检不合格数)
    },
    getProcessBaseClass(process) {
      if (this.isGreenProcess(process)) {
        return 'process-route-green'
      }

      if (this.isBlueProcess(process)) {
        return 'process-route-blue'
      }

      const statusNum = this.getProcessStatusNum(process.加工状态)
      if (statusNum === 2 || statusNum === 4) {
        return 'process-route-green'
      }

      return 'process-route-red'
    },
    getOutsourceGroupClassState(processes) {
      const classes = new Map()
      let currentIndexes = []
      let lastProcess = null

      const flushOutsourceRun = () => {
        if (currentIndexes.length > 0 && lastProcess) {
          const className = this.getProcessBaseClass(lastProcess)
          currentIndexes.forEach(index => classes.set(index, className))
        }
        currentIndexes = []
        lastProcess = null
      }

      const isSameContinuousGroup = process => {
        if (!lastProcess) {
          return true
        }
        const lineNo = this.toProcessNumber(process.订单行号)
        const lastLineNo = this.toProcessNumber(lastProcess.订单行号)
        return lineNo === lastLineNo + 1 &&
          String(process.外协分组 || '') === String(lastProcess.外协分组 || '')
      }

      processes.forEach((process, index) => {
        if (!this.isOutsourceProcess(process)) {
          flushOutsourceRun()
          return
        }
        if (!isSameContinuousGroup(process)) {
          flushOutsourceRun()
        }
        currentIndexes.push(index)
        lastProcess = process
      })
      flushOutsourceRun()

      return classes
    },
    getProcessClass(process, index, outsourceGroupClasses) {
      if (this.isOutsourceProcess(process)) {
        return outsourceGroupClasses.get(index) || this.getProcessBaseClass(process)
      }
      return this.getProcessBaseClass(process)
    },
    getRouteProcessName(process) {
      const name = String(process.工序名称 || '')
      const assignee = String(process.指派对象 || '')
      if (!assignee || name.includes(`(${assignee})`) || name.includes(`（${assignee}）`)) {
        return name
      }
      return `${name}(${assignee})`
    },
    escapeProcessHtml(value) {
      return String(value == null ? '' : value)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;')
    },
    formatProcessRoute(detail) {
      const processes = Array.isArray(detail.工艺路线明细) ? detail.工艺路线明细 : []
      if (processes.length === 0) {
        return this.escapeProcessHtml(detail.工艺路线 || '')
      }

      const maxPerRow = 8
      const rows = Math.ceil(processes.length / maxPerRow)
      const outsourceGroupClasses = this.getOutsourceGroupClassState(processes)
      let html = '<div class="process-route-wrap"><table class="process-route-table"><tbody>'

      for (let rowIndex = 0; rowIndex < rows; rowIndex++) {
        const startIndex = rowIndex * maxPerRow
        const rowProcesses = processes.slice(startIndex, startIndex + maxPerRow)
        if (rowIndex > 0) {
          html += `<tr class="process-route-spacer"><td colspan="${maxPerRow * 2 - 1}"></td></tr>`
        }

        html += '<tr>'
        rowProcesses.forEach((process, index) => {
          const className = this.getProcessClass(process, startIndex + index, outsourceGroupClasses)
          const date = this.formatDate(process.计划开始时间 || process.计划完成时间)
          html += `<td class="process-route-date ${className}">${this.escapeProcessHtml(date)}</td>`
          if (index < rowProcesses.length - 1) html += '<td class="process-route-arrow-hidden"></td>'
        })
        html += '</tr><tr>'
        rowProcesses.forEach((process, index) => {
          const className = this.getProcessClass(process, startIndex + index, outsourceGroupClasses)
          html += `<td class="${className}">${this.escapeProcessHtml(this.getRouteProcessName(process))}</td>`
          if (index < rowProcesses.length - 1) html += '<td class="process-route-arrow">→</td>'
        })
        html += '</tr><tr>'
        rowProcesses.forEach((process, index) => {
          const className = this.getProcessClass(process, startIndex + index, outsourceGroupClasses)
          const count = this.formatQuantity(process.收检合格数)
          html += `<td class="process-route-count ${className}">合格${this.escapeProcessHtml(count)}</td>`
          if (index < rowProcesses.length - 1) html += '<td class="process-route-arrow-hidden"></td>'
        })
        html += '</tr>'
      }

      html += '</tbody></table></div>'
      return html
    },
    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(/\.$/, '')
    },
    getStatusStyle(value) {
      if (value === '是' || value === '发料齐套' || value === '已拣配' || value === '已开工' || value === '已完成') {
        return {
          backgroundColor: '#f0f9eb',
          color: '#67c23a'
        }
      }
      if (value === '否' || value === '发料缺件' || value === '未拣配' || value === '待执行' || value === '未完成') {
        return {
          backgroundColor: '#fdf6ec',
          color: '#e6a23c'
        }
      }
      return {}
    }
  }
}
</script>

<style scoped>
.timely-kit-page {
  padding: 0;
}

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

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

.filter-control {
  margin-right: 10px;
  width: 150px;
}

.small-filter {
  margin-right: 10px;
  width: 100px;
}

.score-cell {
  border-radius: 3px;
  padding: 2px 4px;
}

.detail-table {
  margin: 4px 0;
}

.purchase-route {
  line-height: 22px;
  text-align: left;
  white-space: normal;
}

.process-route {
  overflow-x: auto;
  padding: 0;
  text-align: left;
}

::v-deep .process-route-wrap {
  min-width: 480px;
  text-align: left;
}

::v-deep .process-route-table {
  border-collapse: collapse;
  margin: 0;
  text-align: left;
  table-layout: auto;
}

::v-deep .process-route-table td {
  line-height: 1.4;
  min-width: 35px;
  padding: 2px 2px;
  text-align: left;
  white-space: nowrap;
}

::v-deep .process-route-date {
  color: #8899aa !important;
  font-size: 10px !important;
  padding: 2px 2px !important;
}

::v-deep .process-route-count {
  font-size: 12px !important;
  font-weight: 700;
}

::v-deep .process-route-arrow,
::v-deep .process-route-arrow-hidden {
  background: transparent;
  min-width: 8px;
  padding: 2px 0 !important;
  width: 8px;
}

::v-deep .process-route-arrow {
  color: rgba(0, 164, 255, 0.6) !important;
  font-size: 10px !important;
  text-align: center !important;
}

::v-deep .process-route-arrow-hidden {
  color: transparent;
}

::v-deep .process-route-spacer td {
  height: 4px;
  line-height: 1 !important;
  padding: 0 !important;
}

::v-deep .process-route-green {
  color: #28d961;
  font-weight: 700;
}

::v-deep .process-route-blue {
  color: #09a8ff;
  font-weight: 700;
}

::v-deep .process-route-red {
  color: #ff3f37;
  font-weight: 700;
}

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