<template>
  <div>
    <el-form inline>
      <el-form-item :label="$t.value.LicensePlateNo">
        <el-input v-model="queryForm.plate_number" :placeholder="$t.value.carPlateInput" clearable />
      </el-form-item>
      <el-form-item label="卡类型">
        <el-select v-model="queryForm.card_type" clearable placeholder="全部" style="width:120px">
          <el-option label="月卡" value="month" />
          <el-option label="季卡" value="quarter" />
          <el-option label="年卡" value="year" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchList">{{ $t.value.Search }}</el-button>
        <el-button @click="resetQuery">{{ $t.value.Reset }}</el-button>
        <el-button type="success" @click="openCreate">{{ $t.value.new }}</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="list" height="605" border>
      <el-table-column :label="$t.value.licensePlate" prop="plate_number" align="center" width="120" />
      <el-table-column label="卡类型" align="center" width="100">
        <template #default="{ row }">{{ typeLabel(row.card_type) }}</template>
      </el-table-column>
      <el-table-column label="生效日期" prop="start_date" align="center" width="120" />
      <el-table-column label="到期日期" prop="end_date" align="center" width="120" />
      <el-table-column label="金额" align="center" width="100">
        <template #default="{ row }">¥{{ row.fee.toFixed(2) }}</template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="80">
        <template #default="{ row }">
          <el-tag :type="row.payment_status === 'paid' ? 'success' : 'danger'">{{ row.payment_status === 'paid' ? '有效' : '已退' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="$t.value.Action" align="center" width="160">
        <template #default="{ row }">
          <template v-if="row.payment_status === 'paid'">
            <el-button text type="primary" @click="openRenew(row)">续费</el-button>
            <el-button text type="danger" @click="doRefund(row.id)">退卡</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination v-model:current-page="queryForm.page" :page-size="queryForm.page_size" :total="total" layout="total, prev, pager, next" style="margin-top:12px; justify-content:flex-end" @current-change="fetchList" />

    <el-dialog v-model="createVisible" title="办理月卡" width="460px">
      <el-form :model="createForm" label-width="100px">
        <el-form-item label="选择车辆" required>
          <el-select v-model="createForm.vehicle_id" filterable placeholder="搜索车牌号" style="width:100%">
            <el-option v-for="v in vehicleList" :key="v.ID" :label="v.plate_number" :value="v.ID" />
          </el-select>
        </el-form-item>
        <el-form-item label="卡类型" required>
          <el-select v-model="createForm.card_type" style="width:100%">
            <el-option label="月卡 (30天)" value="month" />
            <el-option label="季卡 (90天)" value="quarter" />
            <el-option label="年卡 (365天)" value="year" />
          </el-select>
        </el-form-item>
        <el-form-item label="到期日期">{{ computeEnd(createForm.card_type) }}</el-form-item>
        <el-form-item label="金额" required>
          <el-input-number v-model="createForm.fee" :min="0" :precision="2" style="width:100%" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="createVisible = false">{{ $t.value.Cancel }}</el-button>
        <el-button type="primary" :loading="submitting" @click="doCreate">{{ $t.value.Confirm }}</el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="renewVisible" title="续费" width="400px">
      <el-form :model="renewForm" label-width="100px">
        <el-form-item label="续费时长" required>
          <el-select v-model="renewForm.card_type" style="width:100%">
            <el-option label="月卡 (30天)" value="month" />
            <el-option label="季卡 (90天)" value="quarter" />
            <el-option label="年卡 (365天)" value="year" />
          </el-select>
        </el-form-item>
        <el-form-item label="金额" required>
          <el-input-number v-model="renewForm.fee" :min="0" :precision="2" style="width:100%" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="renewVisible = false">{{ $t.value.Cancel }}</el-button>
        <el-button type="primary" :loading="submitting" @click="doRenew">{{ $t.value.Confirm }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { createMonthlyCard, renewMonthlyCard, refundMonthlyCard, getMonthlyCardList } from '@/api/monthlyCard'
import { queryAllVehicles } from '@/api/vehicle'

const days = { month: 30, quarter: 90, year: 365 }
const labels = { month: '月卡', quarter: '季卡', year: '年卡' }
const typeLabel = (t) => labels[t] || t

const queryForm = reactive({ plate_number: '', card_type: '', page: 1, page_size: 10 })
const list = ref([]), total = ref(0), vehicleList = ref([])
const createVisible = ref(false), renewVisible = ref(false), submitting = ref(false)
const createForm = reactive({ vehicle_id: null, card_type: 'month', fee: 0 })
const renewForm = reactive({ card_id: null, card_type: 'month', fee: 0 })

function computeEnd(t) {
  const d = new Date(); d.setDate(d.getDate() + (days[t] || 30))
  return d.toLocaleDateString('zh-CN')
}

onMounted(() => { fetchList(); queryAllVehicles().then(r => { if (r.code === 0) vehicleList.value = r.data || [] }) })

function fetchList() { getMonthlyCardList(queryForm).then(r => { if (r.code === 0) { list.value = r.data.list || []; total.value = r.data.total || 0 } }) }
function resetQuery() { queryForm.plate_number = ''; queryForm.card_type = ''; queryForm.page = 1; fetchList() }

function openCreate() { createForm.vehicle_id = null; createForm.card_type = 'month'; createForm.fee = 0; createVisible.value = true }
function openRenew(row) { renewForm.card_id = row.id; renewForm.card_type = 'month'; renewForm.fee = 0; renewVisible.value = true }

async function doCreate() {
  if (!createForm.vehicle_id) { ElMessage.warning('请选择车辆'); return }
  submitting.value = true
  try {
    const r = await createMonthlyCard(createForm)
    if (r.code === 0) { ElMessage.success('办理成功'); createVisible.value = false; fetchList() } else ElMessage.error(r.msg)
  } catch (e) { ElMessage.error(e.message) } finally { submitting.value = false }
}

async function doRenew() {
  submitting.value = true
  try {
    const r = await renewMonthlyCard(renewForm)
    if (r.code === 0) { ElMessage.success('续费成功'); renewVisible.value = false; fetchList() } else ElMessage.error(r.msg)
  } catch (e) { ElMessage.error(e.message) } finally { submitting.value = false }
}

async function doRefund(id) {
  await ElMessageBox.confirm('确定退卡？将移除白名单。', '退卡确认', { type: 'warning' })
  try {
    const r = await refundMonthlyCard(id)
    if (r.code === 0) { ElMessage.success('退卡成功'); fetchList() } else ElMessage.error(r.msg)
  } catch (e) { ElMessage.error(e.message) }
}
</script>
