<template>
  <div class="app-container">
    <el-card class="topCard">
      <div class="topDiv">
        <span>更新时间：</span>
        <el-date-picker
          :clearable="false"
          v-model="dateRange"
          size="small"
          type="daterange"
          align="center"
          style="width: 260px;"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          range-separator="～"
          start-placeholder="开始日期"
          end-placeholder="结束日期"/>

        <span style="margin-left: 10px">库位号：</span>
        <el-input
          v-model="locationCode"
          size="small"
          placeholder="输入库位号"
          clearable
          style="width: 160px"/>

        <span style="margin-left: 10px">配送类型：</span>
        <el-select v-model="deliveryType" size="small" placeholder="全部" clearable style="width: 140px">
          <el-option :value="'1'" label="退空托盘"/>
          <el-option :value="'2'" label="请求叫料"/>
          <el-option :value="'3'" label="送料"/>
        </el-select>

        <span style="margin-left: 10px">订单号：</span>
        <el-input
          v-model="orderNo"
          size="small"
          placeholder="模糊查询"
          clearable
          style="width: 180px"/>

        <el-button type="primary" plain size="small" icon="el-icon-search" style="margin-left: 8px" @click="pageCurrent=1;searchTable()">查询</el-button>
        <el-button size="small" icon="el-icon-refresh" style="margin-left: 4px" @click="resetFilter">重置</el-button>
      </div>

      <el-table
        v-loading="loading"
        :data="tableData"
        border
        size="mini"
        height="720"
        style="width: 100%">
        <el-table-column width="60" label="序号" type="index" align="center"/>
        <el-table-column label="库位号" width="140" prop="库位号" align="center"/>
        <el-table-column label="配送类型" width="110" align="center">
          <template slot-scope="scope">
            <el-tag size="mini" :type="typeTag(scope.row.配送类型)">{{ typeLabel(scope.row.配送类型) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="显示时间" width="180" align="center">
          <template slot-scope="scope">{{ scope.row.显示时间 }}</template>
        </el-table-column>
        <el-table-column label="AGV到达时间" width="180" align="center">
          <template slot-scope="scope">{{ scope.row.允许AGV进入时间 || scope.row.AGV请求进入时间 }}</template>
        </el-table-column>
        <el-table-column label="AGV离开时间" width="180" align="center">
          <template slot-scope="scope">{{ scope.row.允许AGV离开时间 || scope.row.AGV请求离开时间 }}</template>
        </el-table-column>
        <el-table-column label="订单号" width="220" prop="订单号" align="center"/>
        <el-table-column label="物料编号" width="160" prop="物料编号" align="center"/>
        <el-table-column label="器具号" width="180" prop="器具号" align="center"/>
        <el-table-column label="当前状态" width="140" prop="当前状态" align="center"/>
        <el-table-column label="更新时间" width="180" prop="更新时间" align="center"/>
        <el-table-column label="备注" prop="备注" show-overflow-tooltip/>
        <el-table-column label="操作" width="100" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="openDetail(scope.row)">查看参数</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block" style="margin-top: 10px;">
        <el-pagination
          v-if="!loading"
          :current-page="pageCurrent"
          :page-sizes="[30, 50, 100, 200]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
      <el-dialog title="查看参数" :visible.sync="dialogVisible" width="720px">
        <el-table :data="detailToPairs(detailRow)" size="mini" border height="400" style="width:100%">
          <el-table-column label="字段" prop="key" width="240" show-overflow-tooltip/>
          <el-table-column label="值" prop="value" show-overflow-tooltip/>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="dialogVisible=false">关 闭</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      tableData: [],
      dateRange: [],
      locationCode: '',
      deliveryType: '',
      orderNo: '',
      total: 0,
      pageSize: 50,
      pageCurrent: 1,
      dialogVisible: false,
      detailRow: {}
    }
  },
  created() {
    const end = new Date()
    const start = new Date()
    start.setDate(start.getDate() - 7)
    const fmt = (d) => {
      const y = d.getFullYear()
      const m = (d.getMonth() + 1).toString().padStart(2, '0')
      const da = d.getDate().toString().padStart(2, '0')
      return `${y}-${m}-${da}`
    }
    this.dateRange = [fmt(start), fmt(end)]
    this.searchTable()
  },
  methods: {
    typeLabel(val) {
      if (val === '1' || val === 1) return '退空托盘'
      if (val === '2' || val === 2) return '请求叫料'
      if (val === '3' || val === 3) return '送料'
      return ''
    },
    typeTag(val) {
      if (val === '1' || val === 1) return 'info'
      if (val === '2' || val === 2) return 'warning'
      if (val === '3' || val === 3) return 'success'
      return ''
    },
    resetFilter() {
      this.locationCode = ''
      this.deliveryType = ''
      this.orderNo = ''
      this.pageCurrent = 1
      this.searchTable()
    },
    openDetail(row) {
      this.detailRow = Object.assign({}, row)
      this.dialogVisible = true
    },
    // 将对象转成 key-value 数组，便于表格展示
    detailToPairs(obj) {
      const pairs = []
      if (!obj) return pairs
      Object.keys(obj).forEach(k => {
        pairs.push({ key: k, value: obj[k] })
      })
      return pairs
    },
    searchTable() {
      if (!this.dateRange || this.dateRange.length !== 2) {
        this.$message.warning('请选择更新时间范围')
        return
      }
      this.loading = true
      this.tableData = []
      const start = this.dateRange[0] + ' 00:00:00'
      const end = this.dateRange[1] + ' 23:59:59'
      const param = []
      param[0] = ['开始时间', start]
      param[1] = ['结束时间', end]
      param[2] = ['库位号', this.locationCode || '']
      param[3] = ['配送类型', this.deliveryType || '']
      param[4] = ['订单号', this.orderNo || '']
      param[5] = ['PageCurrent', this.pageCurrent]
      param[6] = ['PageSize', this.pageSize]
      param[7] = ['PageCount', '1111', 'int', '1']
      param[8] = ['ItemCount', '1111', 'int', '1']
      const Data = this.CreateData('11', 'AGV_库位送料记录_分页查询', param)
      this.ExecDatabase(Data).then(response => {
        let rows = []
        if (response && response.data) {
          if (Array.isArray(response.data)) {
            rows = response.data
          } else if (response.data.result && Array.isArray(response.data.result)) {
            rows = response.data.result
          }
        }
        // 兼容后端未返回“显示时间”时的前端计算
        this.tableData = (rows || []).map(r => {
          if (!r.显示时间) {
            const t = r.配送类型
            if (t === '1' || t === 1) {
              r.显示时间 = r.退空时间 || r.更新时间
            } else if (t === '2' || t === 2) {
              r.显示时间 = r.叫料时间 || r.更新时间
            } else if (t === '3' || t === 3) {
              r.显示时间 = r.送料验证时间 || r.器具码扫描时间 || r.更新时间
            } else {
              r.显示时间 = r.更新时间
            }
          }
          return r
        })
        let total = 0
        if (response && response.data && Array.isArray(response.data.output) && response.data.output.length > 0) {
          total = parseInt(response.data.output[0].ItemCount || 0)
        }
        this.total = total
      }).finally(() => {
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchTable()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchTable()
    }
  }
}
</script>

<style scoped>
.topCard{
  margin: 10px;
  padding: 10px;
}
.topDiv{
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
</style>


