<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="selectedKey"
                    :showLine="showLine" :expandKeys="[1, 3, 4]" @node-click="handleClick">
                    <template #title="{ data }">
                        <span :class="selectedKey == data.id ? 'isChecked' : ''">
                            {{ data.title }} {{ data.id }}
                        </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; over-flow: auto">
                <!-- table -->
                <lay-card>
                    <lay-form>
                        <lay-row>
                            <lay-col :md="5">
                                <lay-form-item label="用户账号" label-width="80">
                                    <lay-input v-model="searchQuery.userAccount" placeholder="请输入" size="sm"
                                        :allow-clear="true" style="width: 98%"></lay-input>
                                </lay-form-item>
                            </lay-col>
                            <lay-col :md="5">
                                <lay-form-item label="用户名" label-width="80">
                                    <lay-input v-model="searchQuery.userName" placeholder="请输入" size="sm"
                                        :allow-clear="true" style="width: 98%"></lay-input>
                                </lay-form-item>
                            </lay-col>
                            <lay-col :md="5">
                                <lay-form-item label="性别" label-width="80">
                                    <lay-select class="search-input" size="sm" v-model="searchQuery.sex"
                                        :allow-clear="true" placeholder="请选择">
                                        <lay-select-option value="man" label="男"></lay-select-option>
                                        <lay-select-option value="woman" label="女"></lay-select-option>
                                    </lay-select>
                                </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="'100%'" :columns="columns" :loading="loading" :default-toolbar="true"
                    :data-source="dataSource" v-model:selected-keys="selectedKeys" @change="change"
                    @sortChange="sortChange">
                    <template #status="{ row }">
                        <lay-switch :model-value="row.status" @change="changeStatus($event, row)"></lay-switch>
                    </template>
                    <template #role="{ row }">
                        <lay-tag color="#165DFF" variant="light">{{ row.role }}</lay-tag>
                    </template>

                    <template v-slot:toolbar>
                        <lay-button size="sm" type="primary" @click="changeVisible11('新增', null)">新增</lay-button>
                        <lay-button size="sm" @click="toRemove">删除</lay-button>
                    </template>
                    <template v-slot:operator="{ row }">
                        <lay-button size="xs" border="green" border-style="dashed"
                            @click="changeVisible11('编辑', row)">编辑</lay-button>
                        <lay-popconfirm content="确定要删除此用户吗?" @confirm="confirm" @cancel="cancel">
                            <lay-button size="xs" border="red" border-style="dashed">删除</lay-button>
                        </lay-popconfirm>
                    </template>
                </lay-table>
            </div>
        </div>
        <lay-layer v-model="visible11" :title="title" :area="['500px', '400px']">
            <div style="padding: 20px">
                <lay-form :model="model11" ref="layFormRef11" required>
                    <lay-form-item label="部门名称" prop="department">
                        <lay-input v-model="model11.department"></lay-input>
                    </lay-form-item>
                    <lay-form-item label="意见内容" prop="content">
                        <lay-textarea v-model="model11.content" placeholder="请输入意见内容"></lay-textarea>
                    </lay-form-item>
                    <lay-form-item label="是否采纳" prop="status">
                        <lay-switch v-model="model11.status"></lay-switch>
                    </lay-form-item>
                </lay-form>
                <div style="width: 100%; text-align: center">
                    <lay-button size="sm" type="primary" @click="toSubmit">保存</lay-button>
                    <lay-button size="sm" @click="toCancel">取消</lay-button>
                </div>
            </div>
        </lay-layer>
    </lay-container>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { layer } from '@layui/layui-vue'

const data = ref([
    {
        title: '内科',
        id: 1,
        children: [
            {
                title: '呼吸内科',
                id: 2,
            },
            {
                title: '心血管内科',
                id: 3,
            },
            {
                title: '消化内科',
                id: 4,
            }
        ]
    },
    {
        title: '外科',
        id: 5,
        children: [
            {
                title: '普通外科',
                id: 6,
            },
            {
                title: '骨科',
                id: 7,
            }
        ]
    },
    {
        title: '妇产科',
        id: 8,
    },
    {
        title: '儿科',
        id: 9,
    }
])
const showLine = ref(false)
const selectedKey = ref('')
const selectedNode = ref({
    id: 0,
    title: ''
})
const isFold = ref(false)
const searchQuery = ref({
    userAccount: '',
    userName: '',
    sex: ''
})
function toReset() {
    searchQuery.value = {
        userAccount: '',
        userName: '',
        sex: ''
    }
}
function handleClick(node: any) {
    selectedNode.value = JSON.parse(JSON.stringify(node))
    page.current = selectedNode.value.id
    change(page)
}
function toAdd() {
    visible22.value = true
}
function toEdit() {
    model22.value = {
        organization: '1',
        name: '研发部',
        fullName: 'xxxx公司-研发部',
        code: '001',
        type: '1',
        sort: 1,
        remark: '备注'
    }
    visible22.value = true
}
function toDelete() {
    if (selectedKey.value == '') {
        layer.msg('您未选择组织机构，请先选择要删除的组织机构', {
            icon: 3,
            time: 2000
        })
        return
    }
    layer.confirm(
        '您将删除所选中的组织机构 [ ' + selectedNode.value.title + ' ] ？',
        {
            title: '提示',
            btn: [
                {
                    text: '确定',
                    callback: (id: any) => {
                        layer.msg('您已成功删除')
                        layer.close(id)
                    }
                },
                {
                    text: '取消',
                    callback: (id: any) => {
                        layer.msg('您已取消操作')
                        layer.close(id)
                    }
                }
            ]
        }
    )
}

function toSearch() {
    page.current = 1
    change(page)
}

const loading = ref(false)
const selectedKeys = ref()
const page = reactive({ current: 1, limit: 10, total: 100 })
const columns = ref([
    { title: '选项', width: '55px', type: 'checkbox', fixed: 'left' },
    { title: '编号', width: '80px', key: 'id', fixed: 'left' },
    { title: '部门名称', width: '120px', key: 'department' },
    { title: '意见内容', width: '300px', key: 'content' },
    { title: '是否采纳', width: '100px', customSlot: 'status' },
    {
        title: '操作',
        width: '150px',
        customSlot: 'operator',
        key: 'operator',
        fixed: 'right'
    }
])
const change = (page: any) => {
    loading.value = true
    setTimeout(() => {
        dataSource.value = loadDataSource(page.current, page.limit)
        loading.value = false
    }, 1000)
}
const sortChange = (key: any, sort: number) => {
    layer.msg(`字段${key} - 排序${sort}, 你可以利用 sort-change 实现服务端排序`)
}
const dataSource = ref([
    {
        id: '1',
        department: '呼吸内科',
        content: '建议增加呼吸科专业设备配置',
        status: true
    },
    {
        id: '2',
        department: '心血管内科',
        content: '关于心血管科室人员培训的建议',
        status: false
    },
    {
        id: '3',
        department: '消化内科',
        content: '建议增加消化科专业设备配置',
        status: true
    },
    {
        id: '4',
        department: '普通外科',
        content: '建议增加普通外科专业设备配置',
        status: false
    },
    {
        id: '5',
        department: '骨科',
        content: '建议增加骨科专业设备配置',
        status: true
    }
])
const changeStatus = (isChecked: boolean, row: any) => {
    dataSource.value.forEach((item) => {
        if (item.id === row.id) {
            layer.msg('Success', { icon: 1 }, () => {
                item.status = isChecked
            })
        }
    })
}
const remove = () => {
    layer.msg(selectedKeys.value, { area: '50%' })
}
const loadDataSource = (page: number, pageSize: number) => {
    var response = []
    var startIndex = (page - 1) * pageSize + 1
    var endIndex = page * pageSize
    for (var i = startIndex; i <= endIndex; i++) {
        response.push({
            id: `${i}`,
            department: selectedNode.value.title || '呼吸内科',
            content: `意见内容${i}`,
            status: i % 2 === 0
        })
    }
    return response
}
const model11 = ref({
    id: '',
    department: '',
    content: '',
    status: false
})
const layFormRef11 = ref()
const visible11 = ref(false)
const title = ref('新增')
const changeVisible11 = (text: any, row: any) => {
    title.value = text
    if (row != null) {
        let info = JSON.parse(JSON.stringify(row))
        model11.value = info
    } else {
        model11.value = {
            id: '',
            department: '',
            content: '',
            status: false
        }
    }
    visible11.value = !visible11.value
}
const submit11 = function () {
    layFormRef11.value.validate((isValidate: any, model: any, errors: any) => {
        layer.open({
            type: 1,
            title: '表单提交结果',
            content: `<div style="padding: 10px"><p>是否通过 : ${isValidate}</p> <p>表单数据 : ${JSON.stringify(
                model
            )} </p> <p>错误信息 : ${JSON.stringify(errors)}</p></div>`,
            shade: false,
            isHtmlFragment: true,
            btn: [
                {
                    text: '确认',
                    callback(index: any) {
                        layer.close(index)
                    }
                }
            ],
            area: '500px'
        })
    })
}
// 清除校验
const clearValidate11 = function () {
    layFormRef11.value.clearValidate()
}
// 重置表单
const reset11 = function () {
    layFormRef11.value.reset()
}
function toRemove() {
    if (selectedKeys.value.length == 0) {
        layer.msg('您未选择数据，请先选择要删除的数据', { icon: 3, time: 2000 })
        return
    }
    layer.confirm('您将删除所有选中的数据？', {
        title: '提示',
        btn: [
            {
                text: '确定',
                callback: (id: any) => {
                    layer.msg('您已成功删除')
                    layer.close(id)
                }
            },
            {
                text: '取消',
                callback: (id: any) => {
                    layer.msg('您已取消操作')
                    layer.close(id)
                }
            }
        ]
    })
}
function toSubmit() {
    layer.msg('保存成功！', { icon: 1, time: 1000 })
    visible11.value = false
    visible22.value = false
}
function toCancel() {
    visible11.value = false
    visible22.value = false
}
function confirm() {
    layer.msg('您已成功删除')
}
function cancel() {
    layer.msg('您已取消操作')
}

const model22 = ref({
    organization: '',
    name: '',
    fullName: '',
    code: '',
    type: '',
    sort: 0,
    remark: ''
})
const layFormRef22 = ref()
const visible22 = ref(false)
const title22 = ref('新建')
</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>
