<template>
    <div class="file-detail-container">
        <lay-card title="员工档案详情" shadow="always">
            <template #title>
                <div class="card-title">
                    <div>员工档案详情</div>
                </div>
            </template>
            <div class="user-detail">
                <!-- 基本信息区域 -->
                <div class="detail-section">
                    <h3 class="section-title">基本信息</h3>
                    <div class="user-header">
                        <div class="avatar-container">
                            <img :src="userInfo.avatar || defaultAvatar" alt="用户头像" class="user-avatar">
                        </div>
                        <div class="basic-info">
                            <div class="info-grid">
                                <div class="info-item">
                                    <span class="label">姓名：</span>
                                    <span class="value">{{ userInfo.nickname }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">工号：</span>
                                    <span class="value">{{ userInfo.code }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">性别：</span>
                                    <span class="value">{{ userInfo.gender == 1 ? '男' : '女' }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">手机号：</span>
                                    <span class="value">{{ userInfo.mobile }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">邮箱：</span>
                                    <span class="value">{{ userInfo.email || '暂无' }}</span>
                                </div>
                                <div class="info-item">
                                    <span class="label">生日：</span>
                                    <span class="value">{{ userInfo.birthday || '暂无' }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 工作信息区域 -->
                <div class="detail-section">
                    <h3 class="section-title">工作信息</h3>
                    <div class="info-grid">
                        <div class="info-item">
                            <span class="label">科室：</span>
                            <span class="value">{{ groupName || '暂无' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">党支部：</span>
                            <span class="value">{{ partyName || '暂无' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">岗位名称：</span>
                            <span class="value">{{ userInfo.position || '暂无' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">行政职务：</span>
                            <span class="value">{{ userInfo.administrative_position || '暂无' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">业务性质：</span>
                            <span class="value">{{ userInfo.business_nature || '暂无' }}</span>
                        </div>
                    </div>
                </div>

                <!-- 证件信息区域 -->
                <div class="detail-section">
                    <h3 class="section-title">证件信息</h3>
                    <div class="info-grid">
                        <div class="info-item">
                            <span class="label">身份证号码：</span>
                            <span class="value">{{ userInfo.member_code || '暂无' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">资格证编码：</span>
                            <span class="value">{{ userInfo.certificate_code || '暂无' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">执业证编码：</span>
                            <span class="value">{{ userInfo.license_code || '暂无' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">执业证图片：</span>
                            <span class="value">
                                <a v-if="userInfo.license_image" style="color:blue;" :href="userInfo.license_image" target="_blank">
                                    <img :src="userInfo.license_image" style="width: 100px;" />
                                </a>
                                <span v-else>暂无</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="detail-section">
                    <h3 class="section-title">年度考评汇总</h3>
                    <div>
                        <lay-form>
                            <lay-row>
                                <lay-col :md="5">
                                    <lay-form-item label="年度" label-width="auto">
                                        <lay-date-picker type="year" v-model="yearmonthHz" placeholder="年度"
                                            allow-clear></lay-date-picker>
                                    </lay-form-item>
                                </lay-col>
                                <lay-col :md="4">
                                    <lay-form-item :label-width="0">
                                        <lay-button type="primary" @click="toSearchHz">
                                            查询
                                        </lay-button>
                                    </lay-form-item>
                                </lay-col>
                            </lay-row>
                        </lay-form>
                    </div>
                    <div>
                        <lay-tab v-model="tab_id" @change="openTab">
                            <lay-tab-item v-for="item in tabList" :title="item.title" :id="item.id"></lay-tab-item>
                        </lay-tab>
                        <lay-table height="400px" :default-expand-all="true" :columns="userColumns"
                            :data-source="userDataSource">
                            <template v-slot:scoringrecord_status="{ row }">
                                <lay-tag v-if="row.scoringrecord_status == 1" type="primary">已自评</lay-tag>
                                <lay-tag v-if="row.scoringrecord_status == 2">未自评</lay-tag>
                                <lay-tag v-if="row.scoringrecord_status == 3" type="warm">科室已评</lay-tag>
                                <lay-tag v-if="row.scoringrecord_status == 4" type="normal">医院已评</lay-tag>
                                <lay-tag v-if="row.scoringrecord_status == 5" color="blue">支部已评</lay-tag>
                                <lay-tag v-if="row.scoringrecord_status == 6" color="#000033">总党支已评 </lay-tag>
                            </template>
                            <!-- <template v-slot:operator="{ row }">
                                <span v-if="row.if == 2" style="color: #00A394;cursor: pointer"
                                    @click="getMonthlyInfo(row, 1)">考评详情</span>
                                <span style="color: #999999;cursor: not-allowed" v-if="row.if == 1">未自评</span>
                            </template> -->
                        </lay-table>
                    </div>
                </div>
                <div class="detail-section">
                    <h3 class="section-title">加分/扣分情况</h3>
                    <div>
                        <lay-form>
                            <lay-row>
                                <lay-col :md="5">
                                    <lay-form-item label="年度" label-width="auto">
                                        <lay-date-picker type="year" v-model="yearmonthJia" placeholder="年度"
                                            allow-clear></lay-date-picker>
                                    </lay-form-item>
                                </lay-col>
                                <lay-col :md="4">
                                    <lay-form-item :label-width="0">
                                        <lay-button type="primary" @click="toSearchJJ">
                                            查询
                                        </lay-button>
                                    </lay-form-item>
                                </lay-col>
                            </lay-row>
                        </lay-form>
                    </div>
                    <div>
                        <div>
                            <table class="layui-table">
                                <colgroup>
                                    <col width="100">
                                    <col width="200">
                                    <col width="200">
                                    <col width="100">
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th>加分</th>
                                        <th>考评项目</th>
                                        <th>原因</th>
                                        <th>时间</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <template v-for="item in jiaList">
                                        <tr v-if="item.assessment_type == 1">
                                            <td>{{ item.score_value }}</td>
                                            <td>{{ item.project_name }}</td>
                                            <td>{{ item.notes }}</td>
                                            <td>{{ item.createtime }}</td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                        </div>
                        <div style="margin-top: 20px;">
                            <table class="layui-table">
                                <colgroup>
                                    <col width="100">
                                    <col width="200">
                                    <col width="200">
                                    <col width="100">
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th>加分</th>
                                        <th>考评项目</th>
                                        <th>原因</th>
                                        <th>时间</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <template v-for="item in jiaList">
                                        <tr v-if="item.assessment_type == 2">
                                            <td>{{ item.score_value }}</td>
                                            <td>{{ item.project_name }}</td>
                                            <td>{{ item.notes }}</td>
                                            <td>{{ item.createtime }}</td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </lay-card>
        <lay-card>

        </lay-card>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import dayjs from "dayjs";
import { useUserStore } from '@/store/user';
import {
    getAnnualFindData, getPersonalProfile, getGroupYear
} from "@/api/module/home";
const userStore = useUserStore()
const route = useRoute()
// const userId = ref(route.query.id || '1');
const userInfo = ref({});
const loading = ref(true);
const defaultAvatar = ref('/src/assets/default-avatar.png');
const groupName = ref('');
const partyName = ref('');
const roleName = ref('');

const yearmonthJia = ref(dayjs().year());

// 计算性别显示文本
const genderText = computed(() => {
    if (userInfo.value.gender === 1) {
        return '男';
    } else if (userInfo.value.gender === 2) {
        return '女';
    } else {
        return '未知';
    }
});

const jiaList = ref([]);
// 获取用户详情（使用模拟数据）
const getUserDetail = () => {
    getPersonalProfile({
        'user_id': user_id.value,
        'time': yearmonthJia.value
    }).then((res) => {
        if (res.code == 1) {
            console.log(res.data);
            userInfo.value = res.data.user;
            jiaList.value = res.data.date;
            getTabList();
        } else {
            layer.msg(res.msg, { icon: 2 })
        }
    })
};
const toSearchJJ = () => {
    getUserDetail();
}
const toSearchHz = () => {
    getUserListInfo();
}
// 使用模拟数据，延迟一秒模拟加载效果
onMounted(() => {
    //查询是否有query参数，没有则使用userStore.userInfo.id
    console.log(route.params.id);
    if (route.params.id != '') {
        user_id.value = route.params.id;
    } else {
        user_id.value = userStore.userInfo.id;
    }
    console.log(user_id.value)
    getUserDetail();
    //getUserListInfo();
    //getTabList();
});
const tabList = ref([]);
const userDataSource = ref([]);
const tab_id = ref(0);
const yearmonthHz = ref(dayjs().year());
const user_id = ref(0);
const getUserListInfo = () => {
    getAnnualFindData({
        'user_id': user_id.value,
        'evaluation_id': tab_id.value,
        'time': yearmonthHz.value
    }).then((res) => {
        console.log(res)
        if (res.code == 1) {
            userDataSource.value = res.data;
        } else {
            userDataSource.value = [];
        }
    })
}
const getTabList = () => {
    getGroupYear({ 'group_id': userInfo.value.group_id }).then((res) => {
        console.log(res)
        if (res.code == 1) {
            tabList.value = res.data;
            tab_id.value = res.data[0].id;
            getUserListInfo();
            //userTabId.value = res.data[0].id;
            // getList();
        } else {
            layer.msg(res.msg, { icon: 2 })
        }
    })
}
const userColumns = ref([
    { title: '年度', width: '80px', key: 'year', align: 'center' },
    { title: '考评对象', width: '100px', key: 'user', align: 'center' },
    { title: '参评时间', width: '100px', key: 'createtime', align: 'center' },
    { title: '自评总分', width: '100px', key: 'self_score', align: 'center' },
    { title: '科室评分', width: '100px', key: 'department_score', align: 'center' },
    { title: '支部评分', width: '100px', key: 'party_branch_score', align: 'center' },
    { title: '总党支评分', width: '100px', key: 'overall_party_score', align: 'center' },
    { title: '医院评分', width: '100px', key: 'hospital_score', align: 'center' },
    { title: '总得分', width: '100px', key: 'total_score', align: 'center' },
    { title: '状态', width: '100px', key: 'scoringrecord_status', customSlot: 'scoringrecord_status', align: 'center' },
])
</script>

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

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

.loading-container {
    padding: 20px;
}

.user-detail {
    padding: 10px;
}

.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-table thead tr {
    background-color: #ECF8FA !important;
}

.layui-table thead tr th {
    text-align: center;
}

.layui-table tbody tr {
    text-align: center;
}

.layui-table td,
.layui-table th {
    position: relative;
    padding: 9px 8px;
    min-height: 20px;
    height: 40px;
    line-height: 20px;
    font-size: 14px;
}

thead {
    display: table-header-group;
    vertical-align: middle;
    unicode-bidi: isolate;
    border-color: inherit;
}

.layui-table td {
    border-width: 1px;
    border-style: solid;
    border-color: #eee;
}

.layui-table {
    width: 100%;
    background-color: #fff;
    color: #666;
    table-layout: fixed;
}

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

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