<template>
  <div class="grant-task-list">
    <el-card>
      <el-tabs v-model="activeTab">
        <el-tab-pane label="待执行" name="待执行" />
        <el-tab-pane label="执行中" name="执行中" />
        <el-tab-pane label="已完成" name="已完成" />
        <el-tab-pane label="全部" name="all" />
      </el-tabs>
      <div class="search-section">
        <div class="search-row">
          <el-form :model="searchForm" label-width="100px" inline>
            <el-form-item label="发放计划ID:">
              <el-input v-model="searchForm.planId" placeholder="精准匹配" clearable style="width:220px" />
            </el-form-item>
            <el-form-item label="计划名称:">
              <el-input v-model="searchForm.planName" placeholder="关键字" clearable style="width:220px" />
            </el-form-item>
            <el-form-item label="任务类型:">
              <el-select v-model="searchForm.taskType" placeholder="全部" clearable style="width:140px">
                <el-option label="自动" value="自动" />
                <el-option label="手动" value="手动" />
              </el-select>
            </el-form-item>
            <div class="button-group">
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </div>
          </el-form>
        </div>
      </div>

      <el-table :data="filteredData" stripe border style="width:100%">
        <el-table-column label="操作" width="140" fixed="left">
          <template #default="scope">
            <el-button type="text" size="small" @click="handleView(scope.row)">查看</el-button>
            <el-button
              v-if="scope.row.status === '待执行'"
              type="text"
              size="small"
              style="color:#E6A23C"
              @click="handleExecute(scope.row)"
            >执行</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="taskId" label="任务 ID" width="160" align="center" />
        <el-table-column prop="planName" label="计划名称" min-width="200" show-overflow-tooltip />
        <el-table-column prop="planId" label="发放计划 ID" width="130" align="center" />
        <el-table-column label="任务类型" width="100" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.taskType === '自动' ? 'success' : 'warning'" size="small">{{ scope.row.taskType }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="taskCycle" label="任务周期" width="160" align="center" />
        <el-table-column label="任务状态" width="100" align="center">
          <template #default="scope">
            <el-tag :type="statusTag(scope.row.status)" size="small">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="170" align="center" />
        <el-table-column prop="executeTime" label="执行时间" width="170" align="center" />
        <el-table-column prop="executor" label="执行人" width="120" align="center" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'GrantTaskList',
  data() {
    return {
      activeTab: '待执行',
      searchForm: { planId: '', planName: '', taskType: '' },
      tableData: []
    }
  },
  computed: {
    filteredData() {
      let data = this.tableData
      if (this.activeTab !== 'all') data = data.filter(t => t.status === this.activeTab)
      if (this.searchForm.planId) data = data.filter(t => t.planId === this.searchForm.planId)
      if (this.searchForm.planName) data = data.filter(t => t.planName.includes(this.searchForm.planName))
      if (this.searchForm.taskType) data = data.filter(t => t.taskType === this.searchForm.taskType)
      return data
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    statusTag(s) {
      if (s === '已完成') return 'success'
      if (s === '执行中') return ''
      return 'info'
    },
    async fetchData() {
      const res = await request.get('/api/grant-task/list')
      this.tableData = res.data || []
    },
    handleView(row) {
      this.$router.push(`/customization/hsbc/grant-task/view/${row.taskId}`)
    },
    handleExecute(row) {
      this.$router.push(`/customization/hsbc/grant-task/execute/${row.taskId}`)
    },
    handleSearch() {
      this.fetchData()
    },
    handleReset() {
      this.searchForm = { planId: '', planName: '', taskType: '' }
      this.fetchData()
    }
  }
}
</script>

<style scoped>
.grant-task-list { padding: 20px; }
.search-section { margin-top: 4px; }
.search-row { display: flex; align-items: center; }
.button-group { margin-left: 20px; }
</style>