<template>
  <el-dialog v-model="visible" :title="title" width="500px">
    <el-form ref="formRef" :model="form" label-width="100px">
      <el-form-item label="规则名称">
        <el-input v-model="form.name" placeholder="例如：本科生四人间住宿费" />
      </el-form-item>
      <el-form-item label="费用类型">
        <el-select v-model="form.type" style="width: 100%">
          <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-input-number v-model="form.price" :min="0" :precision="2" :step="100" style="width: 150px" />
        <span class="mx-10">元 / </span>
        <el-select v-model="form.unit" style="width: 100px">
          <el-option label="学年" value="学年" />
          <el-option label="学期" value="学期" />
          <el-option label="月" value="月" />
          <el-option label="度" value="度" />
          <el-option label="吨" value="吨" />
          <el-option label="次" value="次" />
        </el-select>
      </el-form-item>
      <el-form-item label="缴费周期">
        <el-radio-group v-model="form.cycle">
          <el-radio label="year">按年</el-radio>
          <el-radio label="term">按学期</el-radio>
          <el-radio label="month">按月</el-radio>
          <el-radio label="once">一次性</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="适用对象">
        <el-checkbox-group v-model="form.target">
          <el-checkbox label="本科生" />
          <el-checkbox label="研究生" />
          <el-checkbox label="留学生" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="备注说明">
        <el-input v-model="form.remark" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">保存配置</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['success'])

const visible = ref(false)
const isEdit = ref(false)

const form = reactive({
  id: '',
  name: '',
  type: 'accommodation',
  price: 0,
  unit: '学年',
  cycle: 'year',
  target: [],
  remark: ''
})

const title = computed(() => isEdit.value ? '编辑收费规则' : '新增收费规则')

const open = (row) => {
  if (row) {
    isEdit.value = true
    Object.assign(form, { ...row, target: typeof row.target === 'string' ? row.target.split(',') : row.target })
  } else {
    isEdit.value = false
    Object.assign(form, { id: '', name: '', type: 'accommodation', price: 0, unit: '学年', cycle: 'year', target: [], remark: '' })
  }
  visible.value = true
}

const handleSubmit = () => {
  visible.value = false
  ElMessage.success('配置已保存')
  emit('success')
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.mx-10 { margin: 0 10px; }
</style>
