<template>
    <lay-container fluid="true" class="organization-box">
        <div style="display: flex">
            <div :style="{ width: isFold ? `0px` : `300px` }" class="left-tree">
                <!-- tree -->
                <div v-show="!isFold">
                    科室列表
                </div>
                <lay-tree v-show="!isFold" style="margin-top: 10px" :data="data" v-model:selectedKey="leftId"
                    :showLine="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;overflow: auto">
                <!-- table -->
                <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 type="yearmonth" style="width: 100%" v-model="searchForm.month"
                                        placeholder="发生时间" allow-clear></lay-date-picker>
                                </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-table :page="page" @change="handlePageChange" height="600px" :columns="columns" :loading="loading"
                    :data-source="dataSource" size="lg">
                    <template v-slot:operator="{ data }">
                        <lay-space size="lg">
                            <span style="color: #00A394;cursor: pointer" @click="showDetail(data, 1)">加分详情</span>
                            <span style="color: #00A394;cursor: pointer" @click="showDetail(data, 2)">扣分详情</span>
                        </lay-space>
                    </template>
                </lay-table>
            </div>
        </div>
        <lay-layer v-model="userShow" :title="userTitle" :shade="true" :area="['60%', '60%']">
            <lay-container fluid="true" style="padding: 20px">
                <lay-row :space="10">
                    <lay-col :md="24">
                        <lay-table height="400px" :columns="userColumns"
                            :data-source="userDataSource">
                        </lay-table>
                    </lay-col>
                </lay-row>
            </lay-container>
        </lay-layer>
    </lay-container>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { layer } from '@layui/layui-vue'
import { monthlyEvaluationGroupIndexrecords, getAdditionIndexManageExamine, getDoctorName, getUserGroupNew, evaluationGroupIndexrecordsList } from '@/api/module/home';
import { useUserStore } from '@/store/user';
const userStore = useUserStore()
import dayjs from "dayjs";
onMounted(() => {
    getLeftList();
    getUserAllList();
})
const userColumns = ref([
    {
        title: "月度",
        width: "120px",
        key: "date",
        align: 'center'
    },
    {
        title: "考评项目",
        width: "120px",
        key: "project_name",
        align: 'center'
    }, {
        title: "考评备注",
        width: "120px",
        key: "notes",
        align: 'center'
    }, {
        title: "分值",
        width: "120px",
        key: "score_value",
        align: 'center'
    }
])
const userDataSource = ref()
const userShow = ref(false)
const userTitle = ref('')
const showDetail = (data, type) => {
    if (type == 1) {
        userTitle.value = '加分详情'
    } else {
        userTitle.value = '扣分详情'
    }
    userShow.value = true;
    evaluationGroupIndexrecordsList({ user_id: data.user_id, assessment_type: type }).then((res) => {
        console.log(res)
        userDataSource.value = res.data.data;
    })
}
const userList = ref([]);
const getUserAllList = () => {
    getDoctorName({}).then((res) => {
        if (res.code === 1) {
            userList.value = res.data;
        }
    })
}
const leftId = ref(0);
const data = ref()
const getLeftList = () => {
    getUserGroupNew({}).then((res) => {
        console.log(res)
        if (res.code == 1) {
            data.value = res.data;
            leftId.value = res.data[0].id;
            getUserList();

        } else {
            layer.msg(res.msg, { icon: 2 })
        }
    })
}
const getUserList = () => {
    monthlyEvaluationGroupIndexrecords({ page: page.current, size: page.limit, group_id: leftId.value, ...searchForm.value }).then((res) => {
        if (res.code == 1) {
            dataSource.value = res.data.data;
            page.total = res.data.count;
        } else {
            layer.msg(res.msg, { icon: 2 })
        }
    })
}
// 搜索方法
const toSearch = () => {
    page.current = 1
    dataSource.value = []
    getUserList()
}
// 添加分页变化处理方法
const handlePageChange = (d) => {
    console.log(d);
    getUserList()
}
// 重置方法
const toReset = () => {
    searchForm.value = {
        month: dayjs().format('YYYY-MM'),
    }
    page.current = 1
    dataSource.value = []
    getUserList()
}
const loading = ref(false)
const page = reactive({ current: 1, limit: 10, total: 1 })
const columns = ref([
    {
        title: "月度",
        width: "120px",
        key: "month",
        align: 'center'
    },
    {
        title: "考评对象",
        width: "120px",
        key: "username",
        align: 'center'
    },
    {
        title: "科室",
        width: "120px",
        key: "group_name",
        align: 'center'
    },
    {
        title: "月度总加分",
        width: "80px",
        key: "total_addition",
        align: 'center'
    },
    {
        title: "月度总减分",
        width: "100px",
        key: "total_subtraction",
        align: 'center'
    },
    {
        title: '操作',
        width: '180px',
        customSlot: 'operator',
        key: 'operator',
        align: 'center',
        fixed: 'right'
    }
])
const dataSource = ref()
// 搜索表单
const searchForm = ref({
    month: dayjs().format('YYYY-MM'),
})

const confirm = (data: any, status: number) => {
    console.log(data, status)
    getAdditionIndexManageExamine({ id: data.id, status: status }).then((res) => {
        if (res.code == 1) {
            layer.msg(res.msg, { icon: 1 })
        } else {
            layer.msg(res.msg, { icon: 2 })
        }
        getUserList();
    })
}
// 修改点击科室树节点的处理方法
const handleClick = (node: any) => {
    leftId.value = node.id
    page.current = 1
    dataSource.value = []
    getUserList();
}
</script>

<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;
}

/* todo layui-tree-entry 设置无效 */
.layui-tree-entry {
    position: relative;
    padding: 10px 0;
    height: 20px;
    line-height: 20px;
    white-space: nowrap;
}

.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;
}

.search-input {
    display: inline-block;
    width: 98%;
    margin-right: 10px;
}

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