<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>
                        <lay-row>
                            <lay-col :md="5">
                                <lay-form-item label="姓名" label-width="80">
                                    <lay-input v-model="searchQuery.nickname" placeholder="请输入" :allow-clear="true"
                                        style="width: 98%"></lay-input>
                                </lay-form-item>
                            </lay-col>
                            <lay-col :md="5">
                                <lay-form-item label="手机号" label-width="80px">
                                    <lay-input v-model="searchQuery.mobile" placeholder="请输入" :allow-clear="true"
                                        style="width: 98%"></lay-input>
                                </lay-form-item>
                            </lay-col>
                            <lay-col :md="5">
                                <lay-form-item label-width="20">
                                    <lay-button style="margin-left: 20px" type="normal" size="sm" @click="toSearch">
                                        查询
                                    </lay-button>
                                    <lay-button size="sm" @click="toReset"> 重置</lay-button>
                                </lay-form-item>
                            </lay-col>
                        </lay-row>
                    </lay-form>
                </lay-card>
                <lay-table :page="page" height="600px" :columns="columns" :data-source="dataSource"
                    @change="changePage">
                    <template #gender="{ row }">
                        <span v-if="row.gender == 0">未选择</span>
                        <span v-if="row.gender == 1">男</span>
                        <span v-if="row.gender == 2">女</span>
                    </template>
                    <template v-slot:operator="{ row }">
                        <lay-button size="xs" border="green" border-style="dashed" @click="getInfo(row)">
                            员工档案
                        </lay-button>
                    </template>
                </lay-table>
            </div>
        </div>
    </lay-container>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { layer } from '@layui/layui-vue';
import {
    authGroupData,
    userData, partyGroupData,
    userGroupData,
    personalProfileFind,
    personalProfileList
} from "@/api/module/home";
import { useUserStore } from "@/store/user";
import { useRouter } from 'vue-router';
const router = useRouter();
const userStore = useUserStore()
onMounted(() => {
    getLeftList();
})

const dataSource = ref([])
const getUserList = () => {
    personalProfileFind({ group_id: leftId.value, size: page.limit, page: page.current, ...searchQuery.value }).then((res) => {
        console.log(res)
        if (res.code == 1) {
            dataSource.value = res.data.data;
            page.total = res.data.count;
        } else {
            dataSource.value = [];
        }
    })
}
const changePage = (ppc) => {
    page.current = ppc.current;
    page.limit = ppc.limit;
    getUserList();
}

const leftId = ref(0);
const getLeftList = () => {
    personalProfileList({}).then((res) => {
        console.log(res)
        if (res.code == 1) {
            data.value = res.data;
            leftId.value = res.data[0].id;
            getUserList();
        }
    })
}

//左侧
const data = ref([])
const isFold = ref(false)
const searchQuery = ref({
    nickname: '',
    mobile: '',
})

function toReset() {
    searchQuery.value = {
        nickname: '',
        mobile: '',
    }
}

function handleClick(node: any) {
    console.log(node);
    leftId.value = node.id
    getUserList();
}

const page = reactive({ current: 1, limit: 10, total: 1 })
const columns = ref([
    { title: '编号', width: '80px', key: 'id', align: 'center' },
    { title: '工号/帐号', width: '100px', key: 'code', align: 'center' },
    { title: '姓名', width: '100px', key: 'nickname', align: 'center' },
    { title: '手机号', width: '120px', key: 'mobile', align: 'center' },
    { title: '性别', width: '80px', key: 'gender', customSlot: 'gender', align: 'center' },
    { title: '身份证号', width: '180px', key: 'member_code', align: 'center' },
    { title: '状态', width: '100px', key: 'status', customSlot: 'status', align: 'center' },
    { title: '操作', width: '250px', customSlot: 'operator', key: 'operator', fixed: 'right', align: 'center' }
])


// 搜索功leftId能
const toSearch = () => {
    page.current = 1;
    getUserList();
}
const getInfo = (row) => {
    console.log(row.id);
    router.push({ path: '/file_bag/index/' + row.id });
}
</script>

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

.file-detail-container {
    padding: 20px;
}

.card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.loading-container {
    padding: 20px;
}

.detail-section {
    margin-bottom: 30px;
    background-color: #fff;
    border-radius: 4px;
    padding: 15px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.section-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    color: #333;
}

.user-header {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
}

.avatar-container {
    margin-right: 20px;
}

.user-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #eee;
}

.basic-info {
    flex: 1;
}

.info-row {
    display: flex;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.info-item {
    margin-right: 20px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.label {
    color: #666;
    min-width: 90px;
    display: inline-block;
    font-weight: 500;
}

.value {
    color: #333;
    word-break: break-all;
}

@media (max-width: 768px) {
    .user-header {
        flex-direction: column;
        align-items: center;
    }

    .avatar-container {
        margin-right: 0;
        margin-bottom: 15px;
    }

    .info-row {
        flex-direction: column;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }
}

.layui-card-body {
    padding: 0px;
}

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

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