<template>
    <lay-container fluid="true" style="padding: 20px">
        <lay-row :space="10">
            <lay-col :md="24">
                <lay-card>
                    <lay-form style="margin-top: 20px">
                        <lay-row>
                            <lay-col :md="5">
                                <lay-form-item label="年度：" label-width="50">
                                    <lay-date-picker type="year" v-model="searchForm.year" placeholder="请选择"
                                        allow-clear></lay-date-picker>
                                </lay-form-item>
                            </lay-col>
                            <lay-col :md="5">
                                <lay-form-item label="发生时间：" label-width="80">
                                    <lay-date-picker v-model="searchForm.occurDate" placeholder="请选择"
                                        allow-clear></lay-date-picker>
                                </lay-form-item>
                            </lay-col>
                            <lay-col :md="5">
                                <lay-form-item label="考评对象：" label-width="80">
                                    <lay-input v-model="searchForm.evaluateObject" placeholder="请输入"></lay-input>
                                </lay-form-item>
                            </lay-col>
                            <lay-col :md="5">
                                <lay-form-item label="审核状态：" label-width="80">
                                    <lay-select v-model="searchForm.status" placeholder="请选择">
                                        <lay-select-option :value="1" label="待审核"></lay-select-option>
                                        <lay-select-option :value="2" label="已通过"></lay-select-option>
                                        <lay-select-option :value="3" label="已驳回"></lay-select-option>
                                    </lay-select>
                                </lay-form-item>
                            </lay-col>
                            <lay-col :md="4">
                                <lay-form-item label-width="0">
                                    <lay-button type="primary" @click="toSearch">查询</lay-button>
                                    <lay-button @click="toReset">重置</lay-button>
                                </lay-form-item>
                            </lay-col>
                        </lay-row>
                    </lay-form>
                </lay-card>
            </lay-col>
            <lay-col :md="24">
                <lay-card>
                    <div style="padding: 10px">
                        <span style="font-size: 18px;vertical-align: center;margin-right: 20px">拒收红包列表</span>
                        <lay-button type="primary" size="sm" @click="openAdd">新增</lay-button>
                        <lay-button type="primary" size="sm">导出Excel</lay-button>
                    </div>
                    <lay-table :columns="columns" :dataSource="dataSource" :even="true" height="500px" size="md">
                        <template v-slot:checkbox="{ data }">
                            <lay-checkbox v-model="data.checked"></lay-checkbox>
                        </template>
                    </lay-table>
                </lay-card>
            </lay-col>
        </lay-row>
    </lay-container>

    <!-- 新增/编辑弹窗 -->
    <lay-layer v-model="visible" :title="formTitle" :area="['600px', '80%']" :shade="true">
        <div style="padding: 20px">
            <lay-form :model="form">
                <lay-form-item label="考评对象" required>
                    <lay-input v-model="form.evaluateObject"></lay-input>
                </lay-form-item>
                <lay-form-item label="人员编号" required>
                    <lay-input v-model="form.staffNo"></lay-input>
                </lay-form-item>
                <lay-form-item label="科室" required>
                    <lay-input v-model="form.department"></lay-input>
                </lay-form-item>
                <lay-form-item label="发生日期" required>
                    <lay-date-picker v-model="form.occurDate"></lay-date-picker>
                </lay-form-item>
                <lay-form-item label="证明人" required>
                    <lay-input v-model="form.witness"></lay-input>
                </lay-form-item>
                <lay-form-item label="患者姓名" required>
                    <lay-input v-model="form.patientName"></lay-input>
                </lay-form-item>
                <lay-form-item label="退还金额" required>
                    <lay-input-number v-model="form.refundAmount"></lay-input-number>
                </lay-form-item>
                <lay-form-item label="退还日期" required>
                    <lay-date-picker v-model="form.refundDate"></lay-date-picker>
                </lay-form-item>
                <lay-form-item label="退还方式" required>
                    <lay-select v-model="form.refundType">
                        <lay-select-option :value="1" label="现金"></lay-select-option>
                        <lay-select-option :value="2" label="转账"></lay-select-option>
                    </lay-select>
                </lay-form-item>
                <lay-form-item label="附件">
                    <lay-upload></lay-upload>
                </lay-form-item>
                <lay-form-item label="备注">
                    <lay-textarea v-model="form.remark"></lay-textarea>
                </lay-form-item>
            </lay-form>
            <div style="text-align: center; margin-top: 20px;">
                <lay-button type="primary" @click="submitForm">确定</lay-button>
                <lay-button @click="visible = false">取消</lay-button>
            </div>
        </div>
    </lay-layer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from "dayjs";

// 搜索表单
const searchForm = ref({
    year: dayjs().year(),
    occurDate: '',
    evaluateObject: '',
    status: ''
})

// 表格列配置
const columns = [
    {
        title: '',
        width: '50px',
        customSlot: 'checkbox'
    },
    {
        title: '序号',
        width: '80px',
        key: 'index'
    },
    {
        title: '发生日期',
        width: '120px',
        key: 'occurDate'
    },
    {
        title: '考评对象',
        width: '120px',
        key: 'evaluateObject'
    },
    {
        title: '工号',
        width: '100px',
        key: 'staffNo'
    },
    {
        title: '科室',
        width: '120px',
        key: 'department'
    },
    {
        title: '患者姓名',
        width: '120px',
        key: 'patientName'
    },
    {
        title: '退还金额',
        width: '100px',
        key: 'refundAmount'
    },
    {
        title: '退还日期',
        width: '120px',
        key: 'refundDate'
    },
    {
        title: '退还方式',
        width: '100px',
        key: 'refundType'
    }
]

// 表格数据
const dataSource = ref([])

// 弹窗控制
const visible = ref(false)
const formTitle = ref('新增拒收红包')

// 表单数据
const form = ref({
    evaluateObject: '',
    staffNo: '',
    department: '',
    occurDate: '',
    witness: '',
    patientName: '',
    refundAmount: 0,
    refundDate: '',
    refundType: '',
    remark: ''
})

// 搜索方法
const toSearch = () => {
    // TODO: 实现搜索逻辑
}

// 重置方法
const toReset = () => {
    searchForm.value = {
        year: dayjs().year(),
        occurDate: '',
        evaluateObject: '',
        status: ''
    }
}

// 打开新增弹窗
const openAdd = () => {
    formTitle.value = '新增拒收红包'
    form.value = {
        evaluateObject: '',
        staffNo: '',
        department: '',
        occurDate: '',
        witness: '',
        patientName: '',
        refundAmount: 0,
        refundDate: '',
        refundType: '',
        remark: ''
    }
    visible.value = true
}

// 提交表单
const submitForm = () => {
    // TODO: 实现表单提交逻辑
    visible.value = false
}
</script>

<style>
.layui-table-header .layui-table-cell {
    background-color: #ECF8FA !important;
}
</style>
