<template>
  <div class="fee-config-container">
    <vab-card>
      <vab-query-form>
        <vab-query-form-left-panel>
          <el-form :inline="true" :model="queryForm" @submit.prevent>
            <el-form-item label="费用类型">
              <el-select v-model="queryForm.type" placeholder="全部" clearable style="width: 140px">
                <el-option label="住宿费" value="accommodation" />
                <el-option label="水电费" value="utility" />
                <el-option label="网络费" value="network" />
                <el-option label="押金" value="deposit" />
              </el-select>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="queryForm.status" placeholder="全部" clearable style="width: 120px">
                <el-option label="生效中" value="active" />
                <el-option label="已停用" value="inactive" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery"> <vab-icon icon="search-line" /> 查询</el-button>
            </el-form-item>
          </el-form>
        </vab-query-form-left-panel>
        <vab-query-form-right-panel>
          <el-button type="primary" @click="handleAdd"> <vab-icon icon="add-line" /> 新增规则</el-button>
        </vab-query-form-right-panel>
      </vab-query-form>

      <el-table v-loading="loading" :data="tableData" border stripe>
        <el-table-column prop="name" label="规则名称" min-width="150" />
        <el-table-column prop="type" label="费用类型" width="120">
          <template #default="{ row }">
            <el-tag :type="getTypeTag(row.type)">{{ getTypeLabel(row.type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="standard" label="收费标准" width="180">
          <template #default="{ row }">
            <span class="font-bold">¥ {{ row.price }}</span>
            <span class="text-gray ml-5">/ {{ row.unit }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="cycle" label="缴费周期" width="120">
          <template #default="{ row }">
            {{ getCycleLabel(row.cycle) }}
          </template>
        </el-table-column>
        <el-table-column prop="target" label="适用对象" show-overflow-tooltip />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-switch v-model="row.status" active-value="active" inactive-value="inactive" @change="handleStatusChange(row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" text size="small" @click="handleEdit(row)"> <vab-icon icon="edit-line" /> 编辑</el-button>
            <el-button type="danger" text size="small" @click="handleDelete(row)"> <vab-icon icon="delete-line" /> 删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <vab-pagination
        :current-page="queryForm.pageNo"
        :page-size="queryForm.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </vab-card>

    <fee-rule-dialog ref="feeRuleDialogRef" @success="handleQuery" />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import FeeRuleDialog from './components/FeeRuleDialog.vue'

defineOptions({
  name: 'FeeConfig',
})

const queryForm = reactive({
  type: '',
  status: '',
  pageNo: 1,
  pageSize: 10,
})

const loading = ref(false)
const total = ref(100)
const tableData = ref([])
const feeRuleDialogRef = ref()

const getTypeLabel = (type) => {
  const map = { accommodation: '住宿费', utility: '水电费', network: '网络费', deposit: '押金' }
  return map[type]
}
const getTypeTag = (type) => {
  const map = { accommodation: 'primary', utility: 'warning', network: 'success', deposit: 'info' }
  return map[type]
}
const getCycleLabel = (cycle) => {
  const map = { year: '按年', term: '按学期', month: '按月', once: '一次性' }
  return map[cycle]
}

const generateMockData = () => {
  return [
    {
      id: 1,
      name: '本科生四人间住宿费',
      type: 'accommodation',
      price: 1200,
      unit: '学年',
      cycle: 'year',
      target: '本科生',
      status: 'active'
    },
    {
      id: 2,
      name: '研究生双人间住宿费',
      type: 'accommodation',
      price: 1600,
      unit: '学年',
      cycle: 'year',
      target: '研究生',
      status: 'active'
    },
    {
      id: 3,
      name: '留学生单人间住宿费',
      type: 'accommodation',
      price: 8000,
      unit: '学年',
      cycle: 'year',
      target: '留学生',
      status: 'active'
    },
    {
      id: 4,
      name: '超额电费',
      type: 'utility',
      price: 0.58,
      unit: '度',
      cycle: 'month',
      target: '全体学生',
      status: 'active'
    },
    {
      id: 5,
      name: '空调租赁押金',
      type: 'deposit',
      price: 400,
      unit: '次',
      cycle: 'once',
      target: '全体学生',
      status: 'inactive'
    }
  ]
}

const handleQuery = () => {
  loading.value = true
  setTimeout(() => {
    tableData.value = generateMockData()
    loading.value = false
  }, 500)
}

const handleAdd = () => {
  feeRuleDialogRef.value.open()
}

const handleEdit = (row) => {
  feeRuleDialogRef.value.open(row)
}

const handleDelete = (row) => {
  ElMessage.success('删除成功')
  handleQuery()
}

const handleStatusChange = (row) => {
  ElMessage.success(`规则已${row.status === 'active' ? '启用' : '停用'}`)
}

const handleCurrentChange = (val) => {
  queryForm.pageNo = val
  handleQuery()
}
const handleSizeChange = (val) => {
  queryForm.pageSize = val
  handleQuery()
}

handleQuery()
</script>

<style lang="scss" scoped>
.fee-config-container {
  .text-gray { color: #909399; }
  .ml-5 { margin-left: 5px; }
  .mx-10 { margin: 0 10px; }
  .font-bold { font-weight: bold; }
}
</style>
