<template>
  <div class="card">
    <div class="dataList">
      <div class="item" v-for="item in recordList" :key="item.TaskNo" @click="onItemClick(item)">
        <div class="tItem">
          <div class="name">任务状态:</div>
          <van-tag class="value" :type="getStatusTag(item.Status)">{{ getStatusText(item.Status) }}</van-tag>
        </div>
        <div class="tItem">
          <div class="name">起点库位:</div>
          <div class="value">{{ item.PickStockName || '-' }}</div>
        </div>
        <div class="tItem">
          <div class="name">终点库位:</div>
          <div class="value">{{ item.DropStockName || '-' }}</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" :label-style="{width: '100px'}">
        <el-descriptions-item label="任务名称">{{ detailData.TaskName }}</el-descriptions-item>
        <el-descriptions-item label="任务状态">{{ getStatusText(detailData.Status) }}</el-descriptions-item>
        <el-descriptions-item label="项目名称">{{ detailData.ProjectNo }}</el-descriptions-item>
        <el-descriptions-item label="间隔编号">{{ detailData.IntervalNo }}</el-descriptions-item>
        <el-descriptions-item label="部件位置">{{ detailData.ComponentLocation }}</el-descriptions-item>
        <el-descriptions-item label="托盘编号">{{ detailData.TrayNo }}</el-descriptions-item>
        <el-descriptions-item label="起点库位">{{ detailData.PickStockName }}</el-descriptions-item>
        <el-descriptions-item label="终点库位">{{ detailData.DropStockName }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button  @click="onCancelTask(detailData)">取消任务</el-button>
      </template>
    </el-dialog>
  </div>
</template>

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

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

// 刷新任务列表
const fetchTaskList = async () => {
  const res = await ExecAgvApi('getTaskList', { PageIndex: 1, PageSize: 20 })
  if (res.Result) {
    recordList.value = res.Data
  } else {
    ElMessage.error(res.ErrMsg || '查询失败')
  }
}

// 取消任务
const onCancelTask = (item) => {
  ElMessageBox.confirm('是否确认取消该任务？', '取消任务', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const res = await ExecAgvApi('cancelTask', { taskId: item.TaskNo })
    if (res.Result) {
      ElMessage.success('任务已取消')
      detailDialogShow.value = false
      await fetchTaskList()
    } else {
      ElMessage.error(res.ErrMsg || '取消任务失败')
    }
  }).catch(() => {})
}

onMounted(async () => {
  await fetchTaskList()
})

const getStatusText = (status) => {
  switch (status) {
    case 'running': return '进行中'
    case 'aborted': return '已取消'
    case 'finish': return '已完成'
    case 'Dispatch': return '已调度'
    default: return status || '-'
  }
}
const getStatusTag = (status) => {
  switch (status) {
    case 'running': return 'primary'
    case 'aborted': return 'danger'
    case 'finish': return 'success'
    case 'Dispatch': return 'warning'
    default: 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>
