<template>
    <lay-container fluid="true" class="organization-box">
        <div style="display: flex">
            <div :style="{ width: isFold ? `0px` : `300px` }" 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" @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">
                <div style="padding: 10px">
                    <span
                        class="page-title"
                        style="font-size: 18px;vertical-align: center;margin-right: 20px;vertical-align: middle;">医德征求意见管理</span>
                    <lay-button @click="openQrCode(1)" type="primary" size="sm">二维码（院内）</lay-button>
                    <lay-button @click="openQrCode(2)" type="primary" size="sm">二维码（院外）</lay-button>
                </div>
                <lay-table :page="page" height="600px" :columns="columns" :loading="loading" :data-source="dataSource"
                    @change="change">
                    <template #politics_type="{ row }">
                        <lay-tag color="#165DFF" v-if="row.politics_type == 1" size="sm">院外</lay-tag>
                        <lay-tag type="primary" v-if="row.politics_type == 2" size="sm">院内</lay-tag>
                    </template>
                    <template #operator="{ row }">
                        <span @click="openInfo(row)" class="action-btn" style="color: #00A394;cursor: pointer">详情</span>
                    </template>
                </lay-table>
            </div>
        </div>
        <lay-layer v-model="showQrCode" title="二维码" :area="['400px', '400px']">
            <div style="text-align: center">
                <lay-qrcode :text="baseURL+'/h5/#/pages/index/hospital'" :width="300" v-if="qeCode == 1"></lay-qrcode>
                <lay-qrcode :text="baseURL+'/h5/#/pages/index/hospital_nei'" :width="300" v-if="qeCode == 2"></lay-qrcode>
            </div>
        </lay-layer>
        <lay-layer v-model="showInfo" title="意见详情" :type="4" :area="['600px', '100%']">
            <div class="info-container">
                <div class="info-section">
                    <div class="info-item"><span class="info-label">提交人：</span>{{ infoData.nickname }}</div>
                    <div v-if="infoData.politics_type == 1" class="info-item">
                        <div class="info-item"><span class="info-label">手机号：</span>{{ infoData.phone }}</div>
                    </div>
                    <div class="info-item"><span class="info-label">科室：</span>{{ infoData.group_name }}</div>
                    <div class="info-item"><span class="info-label">类型：</span>{{ infoData.politics_type == 1 ? '院外' : '院内' }}</div>
                    <div class="info-item"><span class="info-label">提交时间：</span>{{ infoData.createtime }}</div>
                </div>
                <div class="info-section content-section">
                    <div class="info-item">
                        <div class="info-label">意见内容：</div>
                        <div class="info-content">{{ infoData.content }}</div>
                    </div>
                </div>
            </div>
        </lay-layer>
    </lay-container>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { layer } from '@layui/layui-vue'
import { getUserGroupNew, getSolicitopinionsIndex } from '@/api/module/home';
import { baseURL } from '@/api/http';

const isFold = ref(false)
const showQrCode = ref(false)
onMounted(() => {
    console.log(baseURL);
    
    getLeftList();

})
const leftId = ref(0);
const data = ref()
const dataSource = ref([]);
const getLeftList = () => {
    getUserGroupNew({}).then((res) => {
        console.log(res)
        if (res.code == 1) {
            data.value = res.data;
            leftId.value = res.data[0].id;
            rightList();
        } else {
            layer.msg(res.msg, { icon: 2 })
        }
    })
}
const rightList = () => {
    getSolicitopinionsIndex({ group_id: leftId.value, page: page.current, size: page.limit }).then((res) => {
        console.log(res)
        if (res.code == 1) {
            dataSource.value = res.data.list;
            page.total = res.data.total;
        } else {
            layer.msg(res.msg, { icon: 2 })
        }
    })
}
const handleClick = (data: any) => {
    console.log(data)
    leftId.value = data.id;
    rightList();
}
const qeCode = ref(1);
const openQrCode = (type) => {
    showQrCode.value = true
    qeCode.value = type;
}
const showInfo = ref(false);
const infoData = ref({});
const openInfo = (row: any) => {
    console.log(row)
    showInfo.value = true;
    infoData.value = row;
}
const loading = ref(false)
const page = reactive({ current: 1, limit: 10, total: 0 })
const columns = ref([
    { title: '部门名称', width: '120px', key: 'group_name', align: 'center' },
    { title: '提交人', width: '120px', key: 'nickname', align: 'center' },
    { title: '意见内容', width: '300px', key: 'content', align: 'center', ellipsis: true },
    { title: '类型', width: '300px', key: 'politics_type', align: 'center', customSlot: 'politics_type' },
    {
        title: '操作',
        width: '150px',
        customSlot: 'operator',
        key: 'operator',
        fixed: 'right',
        align: 'center'
    }
])
const change = (p) => {
    page.current = p.current;
    page.limit = p.limit;
    rightList();
}

</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;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

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

/* 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;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.isFold:hover {
    background-color: #f2f2f2;
    transform: scale(1.05);
}

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

.isChecked {
    display: inline-block;
    color: red;
}

/* 添加详情弹窗样式 */
:deep(.lay-layer-content) {
    padding: 15px !important;
}

/* 表格头部样式 */
:deep(.lay-table-th) {
    background-color: #f7f8fa !important;
    font-weight: 500;
}

/* 按钮样式优化 */
:deep(.lay-btn) {
    border-radius: 4px;
    transition: all 0.2s;
}

:deep(.lay-btn:hover) {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* 医德征求意见管理标题样式 */
.page-title {
    font-size: 18px;
    font-weight: 500;
    margin-right: 20px;
    vertical-align: middle;
    color: #1d2129;
}

/* 操作按钮样式 */
.action-btn {
    color: #00A394;
    cursor: pointer;
    transition: color 0.2s;
}

.action-btn:hover {
    color: #008F82;
    text-decoration: underline;
}

/* 详情弹窗样式 */
.info-container {
    padding: 20px;
}

.info-section {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.info-item {
    margin-bottom: 12px;
    line-height: 1.6;
    color: #1d2129;
}

.info-item:last-child {
    margin-bottom: 0;
}

.info-label {
    color: #86909c;
    display: inline-block;
    min-width: 80px;
    font-weight: 500;
}

.content-section {
    background-color: #fff;
    border: 1px solid #e5e6eb;
}

.info-content {
    margin-top: 8px;
    white-space: pre-wrap;
    line-height: 1.8;
    color: #4e5969;
}

/* 确保弹窗内容区域有合适的内边距 */
:deep(.lay-layer-content) {
    padding: 0 !important;
}
</style>
