<template>
  <div class="grant-task-detail">
    <el-card>
      <el-descriptions title="计划信息" :column="2" border>
        <el-descriptions-item label="发放计划 ID">{{ task.planId }}</el-descriptions-item>
        <el-descriptions-item label="发放计划名称">{{ task.planName }}</el-descriptions-item>
        <el-descriptions-item label="获取方式">
          <el-tag :type="task.grantMode === 'direct' ? 'warning' : 'success'" size="small">
            {{ task.grantMode === 'direct' ? '直接发放' : '用户领取' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="是否自动发放">
          <el-tag :type="task.isAutoGrant === '是' ? 'success' : 'info'" size="small">{{ task.isAutoGrant }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="单客户权益数量">{{ task.grantQuantityLabel }}</el-descriptions-item>
        <el-descriptions-item label="开始时间">{{ task.planStartTime }}</el-descriptions-item>
        <el-descriptions-item label="结束时间">{{ task.planEndTime }}</el-descriptions-item>
        <el-descriptions-item label="选择客群">{{ task.crowdLabel }}</el-descriptions-item>
        <el-descriptions-item label="选择权益">{{ task.equityLabel }}</el-descriptions-item>
        <el-descriptions-item label="短信通知">{{ task.smsLabel }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card style="margin-top: 16px;">
      <el-descriptions title="任务信息" :column="2" border>
        <el-descriptions-item label="任务 ID">{{ task.taskId }}</el-descriptions-item>
        <el-descriptions-item label="任务类型">
          <el-tag :type="task.taskType === '自动' ? 'success' : 'warning'" size="small">{{ task.taskType }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="任务周期">{{ task.taskCycle }}</el-descriptions-item>
        <el-descriptions-item label="任务状态">
          <el-tag :type="statusTag(task.status)" size="small">{{ task.status }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ task.createTime }}</el-descriptions-item>
        <el-descriptions-item label="执行时间">{{ task.executeTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="执行人">{{ task.executor || '-' }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <div v-if="isExecute" class="execute-section" style="margin-top: 16px;">
        <el-button type="primary" @click="handleExecute">确认执行</el-button>
        <el-button @click="handleBack">取消</el-button>
    </div>

    <div v-else class="back-actions">
      <el-button style="margin-top: 16px;" @click="handleBack">返回</el-button>
    </div>
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/utils/request'

export default {
  name: 'GrantTaskDetail',
  data() {
    return {
      task: {}
    }
  },
  computed: {
    isExecute() {
      return this.$route.name === 'GrantTaskExecute'
    },
    statusTag() {
      return (s) => {
        if (s === '已完成') return 'success'
        if (s === '执行中') return ''
        return 'info'
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      const res = await request.get('/api/grant-task/detail', { params: { taskId: this.$route.params.taskId } })
      this.task = res.data || {}
    },
    async handleExecute() {
      await ElMessageBox.confirm('确认执行该发放任务？', '执行确认', { type: 'warning' })
      const res = await request.post('/api/grant-task/execute', { taskId: this.task.taskId })
      ElMessage.success(res.msg || '执行成功')
      this.$router.push('/customization/hsbc/grant-task')
    },
    handleBack() {
      this.$router.push('/customization/hsbc/grant-task')
    }
  }
}
</script>

<style scoped>
.grant-task-detail { padding: 20px; }
.execute-actions { margin-top: 16px; }
.back-actions { margin-top: 16px; }
</style>