<template>
    <lay-container fluid="true" class="organization-box">
        <div style="display: flex">
            <!-- 添加左侧科室列表 -->
            <div v-if="userStore.userInfo.level == 1" :style="{ width: isFold ? `0px` : `200px` }" class="left-tree">
                <div v-show="!isFold">
                    科室列表
                </div>
                <lay-tree v-show="!isFold" style="margin-top: 10px" :data="data" v-model:selectedKey="leftId"
                    :showLine="false" :default-expand-all="false" @node-click="handleClick">
                    <template #title="{ data }">
                        <span :class="leftId == data.id ? 'isChecked' : ''">
                            {{ data.name }}
                        </span>
                    </template>
                </lay-tree>
                <div class="isFold" @click="isFold = !isFold">
                    &nbsp;<lay-icon v-if="!isFold" class="layui-icon-left"></lay-icon>
                    <lay-icon v-else class="layui-icon-right"></lay-icon>
                </div>
            </div>

            <!-- 将原有内容包装在右侧容器中 -->
            <div style="flex: 1; padding: 10px;">
                <lay-row :space="10">
                    <lay-col :md="24">
                        <lay-card>
                            <lay-form style="margin-top: 20px">
                                <lay-row style="min-width: 1200px">
                                    <lay-col :md="5">
                                        <lay-form-item label="发生时间：" :label-width="100">
                                            <lay-date-picker style="width: 100%" v-model="searchForm.fsdate"
                                                placeholder="发生时间" :max="dayjs().format('YYYY-MM-DD')" allow-clear></lay-date-picker>
                                        </lay-form-item>
                                    </lay-col>
                                    <lay-col :md="6" v-if="userStore.userInfo.level == 1">
                                        <lay-form-item label="考评对象：" :label-width="100">
                                            <lay-select v-model="searchForm.user_id" placeholder="请选择考评对象"
                                                :show-search="true">
                                                <lay-select-option v-for="user in userList" :key="user.id"
                                                    :value="user.id" :label="user.nickname + '(' + user.code + ')'">
                                                </lay-select-option>
                                            </lay-select>
                                        </lay-form-item>
                                    </lay-col>
                                    <lay-col :md="4">
                                        <lay-form-item label="审核状态：" :label-width="100">
                                            <lay-select style="width: 100%" 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 style="margin-left: 20px" 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>
                            </div>
                            <lay-table @change="handlePageChange" :columns="columns" :dataSource="dataSource"
                                :even="true" height="500px" size="lg" :page="page" v-model:selected-keys="selectedKeys">
                                <template v-slot:toolbar>
                                    <lay-button size="sm" type="primary" @click="exportExcel">导出Excel</lay-button>
                                </template>
                                <template v-slot:checkbox="{ data }">
                                    <lay-checkbox v-model="data.checked" :value="data.checked"></lay-checkbox>
                                </template>
                                <template v-slot:refundAmount="{ data }">
                                    ¥{{ data.refunding_amount }}
                                </template>
                                <template v-slot:refundType="{ data }">
                                    {{ formatRefundType(data.refunding_type) }}
                                </template>
                                <template v-slot:status="{ data }">
                                    <lay-tag v-if="data.status == 1" type="warm" size="sm">待审核</lay-tag>
                                    <lay-tag v-if="data.status == 2" type="primary" size="sm">已通过</lay-tag>
                                    <lay-tag v-if="data.status == 3" type="danger" size="sm">已驳回</lay-tag>
                                </template>
                                <template v-slot:operation="{ data }">
                                    <lay-space>
                                        <span style="color: #00A394;cursor: pointer" v-if="data.status == 1"
                                            @click="openDetail(data, 2)">审核</span>
                                        <span style="color: #00A394;cursor: pointer"
                                            @click="openDetail(data, 1)">详情</span>
                                    </lay-space>
                                </template>
                            </lay-table>
                        </lay-card>
                    </lay-col>
                </lay-row>
            </div>
        </div>
    </lay-container>

    <!-- 修改详情弹窗内容 -->
    <lay-layer v-model="detailVisible" :title="addIsInfo == 1 ? '详情查看' : '审核'" :type="4" :area="['950px', '100%']"
        :btn="addIsInfo == 1 ? '' : addButton">
        <div style="padding: 20px">
            <lay-descriptions title="基本信息" :column="2" border>
                <lay-descriptions-item label="考评对象">
                    {{ detailForm.nickname }}
                </lay-descriptions-item>
                <lay-descriptions-item label="科室">
                    {{ detailForm.group_name }}
                </lay-descriptions-item>
                <lay-descriptions-item label="发生日期">
                    {{ detailForm.fsdate }}
                </lay-descriptions-item>
                <lay-descriptions-item label="证明人">
                    {{ detailForm.zm_nickname }}
                </lay-descriptions-item>
                <lay-descriptions-item label="病区名称">
                    {{ detailForm.bq_name }}
                </lay-descriptions-item>
                <lay-descriptions-item label="患者姓名">
                    {{ detailForm.hz_name }}
                </lay-descriptions-item>
            </lay-descriptions>

            <lay-descriptions title="退还信息" :column="2" border style="margin-top: 20px">
                <lay-descriptions-item label="退还金额">
                    ¥{{ detailForm.refunding_amount }}
                </lay-descriptions-item>
                <lay-descriptions-item label="退还日期">
                    {{ detailForm.thdate }}
                </lay-descriptions-item>
                <lay-descriptions-item label="退还方式">
                    {{ formatRefundType(detailForm.refunding_type) }}
                </lay-descriptions-item>
                <lay-descriptions-item label="状态">

                    {{ formatStatus(detailForm.status) }}
                </lay-descriptions-item>
                <lay-descriptions-item label="备注" :span="2">
                    {{ detailForm.notes || '暂无备注' }}
                </lay-descriptions-item>
                <lay-descriptions-item label="驳回原因" :span="2" v-if="detailForm.status == 3">
                    {{ detailForm.reason || '暂无驳回原因' }}
                </lay-descriptions-item>
            </lay-descriptions>

            <lay-descriptions v-if="detailForm.fj_url" title="附件信息" :column="1" border style="margin-top: 20px">
                <lay-descriptions-item label="附件">
                    <a style="color: #009688" :href="detailForm.fj_url" target="_blank">附件下载</a>
                </lay-descriptions-item>
            </lay-descriptions>
            <lay-descriptions v-if="detailForm.status == 1 && addIsInfo == 2" title="审核" :column="1" border style="margin-top: 20px">
                <lay-descriptions-item label="状态">
                    <lay-radio-group name="action" v-model="type">
                        <lay-radio :value="2">通过</lay-radio>
                        <lay-radio :value="3">驳回</lay-radio>
                    </lay-radio-group>
                </lay-descriptions-item>
                <lay-descriptions-item label="驳回原因" v-if="type == 3">
                    <lay-textarea v-model="reason" placeholder="请输入驳回原因"></lay-textarea>
                </lay-descriptions-item>
            </lay-descriptions>
        </div>
    </lay-layer>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { getDoctorName, getRejectRedEnvelopes, rejectRedEnvelopesCreate, rejectRedEnvelopesUpdate, userGroupData } from '@/api/module/home';
import { layer } from '@layui/layui-vue';
import { useUserStore } from '@/store/user';
import { baseURL } from '@/api/http';
import dayjs from 'dayjs';
const userStore = useUserStore()
// 搜索表单
const searchForm = ref({
    fsdate: '',
    user_id: '',
    status: ''
})

const selectedKeys = ref()
const exportExcel = () => {
    console.log(selectedKeys.value)
    if (selectedKeys.value.length == 0) {
        layer.msg('请选择要导出的数据', { icon: 2 })
        return
    }
    //数组转字符串
    const ids = selectedKeys.value.join(',');
    console.log(ids);
    //console.log(searchForm.value.month)
    //导出Excel
    window.open(baseURL + `/api/backend/excel_controller/RejectRedEnvelopesEs?ids=${ids}`)
}

// 修改分页参数的定义方式
const page = reactive({
    current: 1,
    limit: 10,
    total: 1
})

const type = ref(2)
const id = ref(0)
const reason = ref('')


// 添加级联选择器所需的数据结构
const ksOptions = ref([])

// 修改获取用户列表方法为懒加载方法
const getGroupList = () => {
    userGroupData({}).then((res) => {
        if (res.code === 1) {
            ksOptions.value = res.data;
        } else {
            layer.msg(res.msg, { icon: 2 })
        }
    })
}
const userList = ref([]);
const getUserList = () => {
    getDoctorName({}).then((res) => {
        if (res.code === 1) {
            userList.value = res.data;
        }
    })
}
// 表格数据
const dataSource = ref([])

// 添加左侧树相关的变量
const data = ref([])
const leftId = ref('')
const isFold = ref(false)

// 修改获取列表数据的方法，添加科室id参数
const getList = () => {
    const params = {
        page: page.current,
        size: page.limit,
        group_id: leftId.value, // 添加科室id参数
        ...searchForm.value
    }
    getRejectRedEnvelopes(params).then((res) => {
        if (res.code === 1) {
            dataSource.value = res.data.data;
            page.total = res.data.count;
        } else {
            layer.msg(res.msg, { icon: 2 })
        }
    })
}

// 格式化退还方式
const formatRefundType = (type) => {
    return type == 1 ? '现金' : '转账'
}

// 修改表格列配置
const columns = [
    { fixed: "left", type: "checkbox", title: "复选", align: 'center', width: '80px' },
    {
        title: '发生日期',
        width: '120px',
        key: 'fsdate',
        align: 'center'
    },
    {
        title: '考评对象',
        width: '120px',
        key: 'nickname',
        align: 'center'
    },
    {
        title: '科室',
        width: '120px',
        key: 'group_name',
        align: 'center'
    },
    {
        title: '病区',
        width: '100px',
        key: 'bq_name',
        align: 'center'
    },
    {
        title: '患者姓名',
        width: '120px',
        key: 'hz_name',
        align: 'center'
    },
    {
        title: '退还金额',
        width: '110px',
        key: 'refunding_amount',
        align: 'center',
        customSlot: 'refundAmount'
    },
    {
        title: '退还日期',
        width: '120px',
        key: 'thdate',
        align: 'center'
    },
    {
        title: '退还方式',
        width: '120px',
        key: 'refunding_type',
        align: 'center',
        customSlot: 'refundType'
    },
    {
        title: '状态',
        width: '120px',
        key: 'status',
        align: 'center',
        customSlot: 'status'
    },
    {
        title: '操作',
        width: '130px',
        key: 'operation',
        align: 'center',
        fixed: 'right',
        customSlot: 'operation'
    }
]


// 添加编辑状态标识
// 搜索方法
const toSearch = () => {
    page.current = 1
    getList()
}

// 重置方法
const toReset = () => {
    searchForm.value = {
        fsdate: '',
        user_id: '',
        status: ''
    }
    page.current = 1
    getList()
}
// 添加分页变化处理方法
const handlePageChange = (current: number) => {
    page.current = current
    getList()
}

// 添加状态格式化方法
const formatStatus = (status: number) => {
    switch (status) {
        case 1:
            return '待审核'
        case 2:
            return '已通过'
        case 3:
            return '已驳回'
        default:
            return '未知'
    }
}

// 详情弹窗控制
const detailVisible = ref(false)
const detailForm = ref()
const addIsInfo = ref(1);
// 打开详情弹窗
const openDetail = (data, type) => {
    id.value = data.id
    detailForm.value = { ...data }
    detailVisible.value = true
    addIsInfo.value = type
    reason.value = ''
}

// 添加获取左侧科室列表的方法
const getLeftList = () => {
    userGroupData({}).then((res) => {
        if (res.code === 1) {
            data.value = res.data;
            if (userStore.userInfo.level == 1) {
                leftId.value = res.data[0].id;
            } else {
                leftId.value = userStore.userInfo.group_id;
            }
            getList(); // 获取右侧列表数据
        } else {
            layer.msg(res.msg, { icon: 2 })
        }
    })
}

// 修改点击科室树节点的处理方法
function handleClick(node: any) {
    leftId.value = node.id
    getList();
}

onMounted(() => {
    getLeftList(); // 替换原有的 getList()
    getUserList();
    getGroupList();
})

const addButton = ref([
    {
        text: "确认",
        callback: async () => {
            const submitRequest = rejectRedEnvelopesUpdate({ status: type.value, id: id.value, reason: reason.value });
            submitRequest.then(res => {
                if (res.code === 1) {
                    layer.msg('审核成功', { icon: 1 })
                    getList()
                } else {
                    layer.msg(res.msg, { icon: 2 })
                }
            })
            detailVisible.value = false;
        }
    },
    {
        text: "取消",
        callback: () => {
            detailVisible.value = false;
        }
    }
])
</script>

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

.search-form-wrapper {
    width: 100%;
    overflow-x: auto;
}

.search-form-wrapper::-webkit-scrollbar {
    height: 8px;
}

.search-form-wrapper::-webkit-scrollbar-thumb {
    background-color: #e0e0e0;
    border-radius: 4px;
}

.search-form-wrapper::-webkit-scrollbar-track {
    background-color: #f5f5f5;
}
</style>

<style scoped>
/* 添加左侧树的样式 */
.organization-box {
    width: calc(100vw - 240px);
    height: calc(100vh - 110px);
    margin-top: 10px;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.left-tree {
    display: inline-block;
    padding: 20px 15px 0 5px;
    height: 1200px;
    border-right: 1px solid #e6e6e6;
    box-sizing: border-box;
    position: relative;
}

.isFold {
    position: absolute;
    top: 36%;
    right: -10px;
    width: 26px;
    height: 26px;
    line-height: 26px;
    border-radius: 13px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    cursor: pointer;
}

.isChecked {
    display: inline-block;
    background-color: #e8f1ff;
    color: red;
}
</style>
