<template>
  <div class="card">
    <div class="dataList">
      <div class="item" v-for="item in recordList" :key="item.ID" @click="onItemClick(item)">
        <div class="tItem">
          <div class="name">库位名称:</div>
          <div class="value">{{ item.库位名称 }}</div>
        </div>
        <div class="tItem">
          <div class="name">操作时间:</div>
          <div class="value">{{ item.操作时间 }}</div>
        </div>
        <div class="tItem">
          <div class="name">操作类型:</div>
          <van-tag class="value" :type="getTypeTag(item.type || item.操作类型)">{{ getTypeText(item.type || item.操作类型)
            }}</van-tag>
        </div>
      </div>
    </div>
    <el-dialog v-model="detailDialogShow" title="详细信息" width="90vw" :close-on-click-modal="true" class="mobile-dialog">
      <el-descriptions :column="1" border class="mobile-desc">
        <el-descriptions-item label="库位名称">{{ detailData.库位名称 }}</el-descriptions-item>
        <el-descriptions-item label="项目名称(新)">{{ detailData.项目名称 }}</el-descriptions-item>
        <el-descriptions-item label="间隔编号(新)">{{ detailData.间隔编号 }}</el-descriptions-item>
        <el-descriptions-item label="部件位置(新)">{{ detailData.部件位置 }}</el-descriptions-item>
        <el-descriptions-item label="托盘编号(新)">{{ detailData.托盘编号 }}</el-descriptions-item>
        <el-descriptions-item label="项目名称(旧)">{{ detailData.项目名称_old }}</el-descriptions-item>
        <el-descriptions-item label="间隔编号(旧)">{{ detailData.间隔编号_old }}</el-descriptions-item>
        <el-descriptions-item label="部件位置(旧)">{{ detailData.部件位置_old }}</el-descriptions-item>
        <el-descriptions-item label="托盘编号(旧)">{{ detailData.托盘编号_old }}</el-descriptions-item>
        <el-descriptions-item label="操作人">{{ detailData.操作人 }}</el-descriptions-item>
        <el-descriptions-item label="操作类型">{{ getTypeText(detailData.type || detailData.操作类型) }}</el-descriptions-item>
        <el-descriptions-item label="操作时间">{{ detailData.操作时间 }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup>
import { inject, onMounted, onUnmounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'

const ExecDatabaseByParam = inject('ExecDatabaseByParam')
const recordList = ref([])
const detailDialogShow = ref(false)
const detailData = ref({})

onMounted(async () => {
  // 查询库位更新记录
  const res = await ExecDatabaseByParam('11', 'PTCHV_AGV_库位更新记录_PDA_查询', [])
  if (res.data) {
    recordList.value = res.data
  } else {
    ElMessage.error('查询失败')
  }
})

// 离开网页 删除定时器
onUnmounted(() => {
})

const getTypeText = (type) => {
  if (type === 2 || type === '2') return '退空托盘'
  return '修改信息'
}
const getTypeTag = (type) => {
  if (type === 2 || type === '2') return 'warning'
  return 'success'
}
const onItemClick = (item) => {
  detailData.value = item
  detailDialogShow.value = true
}
</script>

<style lang="scss" scoped>
.dataList {
  .item {
    border: 2px solid #ccc;
    padding: 10px 10px;
    // 圆角 阴影
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    margin: 10px 0;

    .tItem {
      display: flex;
    }
  }
}

.mobile-dialog {
  max-width: 98vw;
}

.mobile-desc {
  word-break: break-all;
  font-size: 15px;
  .el-descriptions__cell {
    padding: 6px 4px;
  }
}
</style>
