<template>
  <div class="coupon-batch-picker">
    <el-button @click="dialogVisible = true">选择批次</el-button>
    <div v-if="modelValue" class="picked">
      已选批次：<span class="batch-id">{{ modelValue }}</span>
      <el-button type="text" size="small" @click="clearPick">清除</el-button>
    </div>

    <el-dialog title="选择券码批次" v-model="dialogVisible" width="760px" @open="loadData">
      <div class="picker-tip">仅展示未关联权益商品且审核通过的待导入券码批次</div>
      <div class="search-section">
        <el-form :model="search" inline label-width="70px">
          <el-form-item label="批次ID:">
            <el-input v-model="search.batchId" placeholder="精准匹配" style="width: 220px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="loadData">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="pagedData" stripe style="width: 100%">
        <el-table-column prop="batchId" label="批次ID" width="180" />
        <el-table-column prop="importCount" label="券码数量" width="120" align="center" />
        <el-table-column prop="creator" label="创建人" width="120" align="center" />
        <el-table-column prop="createTime" label="创建时间" min-width="180" align="center" />
        <el-table-column label="操作" width="100" fixed="right">
          <template #default="scope">
            <el-button type="text" size="small" @click="choose(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-section">
        <span>Total {{ list.length }}</span>
        <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="list.length"
        />
      </div>
      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

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

export default {
  name: 'CouponBatchPicker',
  props: {
    modelValue: { type: String, default: '' }
  },
  emits: ['update:modelValue'],
  data() {
    return {
      dialogVisible: false,
      search: { batchId: '' },
      list: [],
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    pagedData() {
      const start = (this.currentPage - 1) * this.pageSize
      return this.list.slice(start, start + this.pageSize)
    }
  },
  methods: {
    loadData() {
      const params = new URLSearchParams()
      params.append('status', 'approved')
      params.append('unlinked', '1')
      if (this.search.batchId) params.append('batchId', this.search.batchId)
      request.get('/api/coupon/pending-list?' + params.toString()).then(res => {
        this.list = res.data || []
        this.currentPage = 1
      }).catch(() => {})
    },
    choose(row) {
      this.$emit('update:modelValue', row.batchId)
      this.dialogVisible = false
    },
    clearPick() {
      this.$emit('update:modelValue', '')
    }
  }
}
</script>

<style scoped>
.picked {
  margin-top: 10px;
  font-size: 14px;
  color: #606266;
}

.picked .batch-id {
  color: #303133;
  font-weight: 500;
}

.picker-tip {
  font-size: 13px;
  color: #909399;
  margin-bottom: 12px;
}

.search-section {
  margin-bottom: 8px;
}

.pagination-section {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
}
</style>
