<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 :type="getTypeTag(item.任务类型)" size="small">{{ getTypeText(item.任务类型) }}</van-tag>
        </div>
        <div class="tItem">
          <div class="name">操作时间:</div>
          <div class="value">{{ item.操作时间 }}</div>
        </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.取料托盘编号 }}</el-descriptions-item>
        <!-- <el-descriptions-item label="送料库位">{{ detailData.送料库位 }}</el-descriptions-item> -->
        <el-descriptions-item label="送料库位名称">{{ detailData.送料库位名称 }}</el-descriptions-item>
        <el-descriptions-item label="任务类型">{{ getTypeText(detailData.任务类型) }}</el-descriptions-item>
        <el-descriptions-item label="操作人">{{ 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 === 1 || type === '1') return '叫料'
  if (type === 2 || type === '2') return '退料'
  if (type === 3 || type === '3') return '退空托'
  if (type === 4 || type === '4') return '一键移库'
  return '未知'
}

const getTypeTag = (type) => {
  if (type === 1 || type === '1') return 'success'
  if (type === 2 || type === '2') return 'warning'
  if (type === 3 || type === '3') return 'primary'
  if (type === 4 || type === '4') return 'primary'
  return 'default'
}

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>
