<template>
    <!-- 用户 -->
    <div style="margin-left: 25px">
        <el-row :gutter="20">
            <el-col :span="6" style="padding: 2.2% 1.4%; border-right: 1px solid #eaebed">
                <el-input v-model="input1" size="large" placeholder="搜索" :suffix-icon="Search" style="width: 100%" />
                <el-tree style="max-width: 600px; margin-top: 2.2%" :data="userData" :props="defaultProps" @node-click="handleNodeClick" />
            </el-col>
            <el-col :span="18" style="padding: 2.2% 1.4%">
                <el-container>
                    <el-header style="display: flex; justify-content: space-between">
                        <div>
                            <el-input v-model="input2" size="large" style="width: 220px; margin-right: 10px" />
                            <el-button type="primary" size="large" :icon="Search" @click="userFromQuery">查询</el-button>
                        </div>
                        <el-button type="primary" size="large" :icon="CirclePlusFilled" @click="addUserFromData">新增</el-button>
                    </el-header>
                    <el-main>
                        <el-table
                            ref="multipleTableRef"
                            :data="tableData"
                            style="width: 100%"
                            :header-cell-style="{ color: '#333333', background: '#EFF0F1' }"
                            @selection-change="handleSelectionChange"
                        >
                            <el-table-column type="selection" width="180" />
                            <el-table-column property="account" label="账户名称" width="200" />

                            <el-table-column property="userName" label="账户中文名" width="200" />
                            <!-- <el-table-column property="address" label="是否禁用" /> -->
                            <!-- <el-table-column property="updatedTime" label="令牌超时" /> -->
                            <el-table-column property="address" label="操作">
                                <template #default="scope">
                                    <span style="color: #0064aa; cursor: pointer" @click="viewUsers(scope)">查看 </span>
                                    <span style="color: #0064aa"> | </span>
                                    <span style="color: #0064aa; cursor: pointer" @click="userFromDelete(scope)"> 删除 </span>
                                    <!-- <span style="color: #0064aa"> | </span>
                                    <span style="color: #0064aa"> 门户 </span>
                                    <span style="color: #0064aa"> | </span>
                                    <span style="color: #0064aa"> 密码</span> -->
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-main>
                    <el-footer>
                        <div style="display: flex; justify-content: right">
                            <el-pagination
                                v-model:current-page="currentPage4"
                                v-model:page-size="pageSize4"
                                :page-sizes="[100, 200, 300, 400]"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="400"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                            />
                        </div>
                    </el-footer>
                </el-container>
            </el-col>
        </el-row>
        <!-- 用户新增页面 -->
        <el-dialog v-model="visibleParam" title="新增账户" width="500" :before-close="handleCloseParam">
            <el-form
                :inline="true"
                :model="formUserAdd"
                style="padding: 24px 40px; font-size: 14px; line-height: 1.5; word-wrap: break-word; font-size: 20px"
            >
                <el-form-item label="账户名称:" prop="account">
                    <el-input v-model="formUserAdd.account" placeholder="" clearable />
                </el-form-item>

                <el-form-item label="密码:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
                    <el-input v-model="formUserAdd.password" placeholder="" type="password" show-password clearable />
                </el-form-item>
                <el-form-item label="职员名称:" prop="userName">
                    <el-input v-model="formUserAdd.userName" placeholder="" clearable />
                </el-form-item>
                <el-form-item label="职员邮箱:" prop="email">
                    <el-input v-model="formUserAdd.email" placeholder="" clearable />
                </el-form-item>
                <el-form-item label="职员联系电话:" prop="phone">
                    <el-input v-model="formUserAdd.phone" placeholder="" clearable />
                </el-form-item>
                <el-form-item label="所属机构ID:" prop="orgId">
                    <el-input v-model="formUserAdd.orgId" placeholder="" clearable />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="visibleParam = false"> 取消 </el-button>
                    <el-button type="primary" @click="addOnSubmit">提交</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 用户修改页面 -->
        <el-dialog v-model="visibleParamUpData" title="查看账户" width="500" :before-close="handleCloseParamUp">
            <el-form
                :inline="true"
                :model="formUserUpData"
                style="padding: 24px 40px; font-size: 14px; line-height: 1.5; word-wrap: break-word; font-size: 20px"
            >
                <el-form-item label="账户名称:" prop="account">
                    <el-input v-model="formUserUpData.account" placeholder="" clearable />
                </el-form-item>

                <el-form-item label="密码:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" prop="password">
                    <el-input v-model="formUserUpData.password" placeholder="" type="password" show-password clearable />
                </el-form-item>
                <el-form-item label="职员名称:" prop="userName">
                    <el-input v-model="formUserUpData.userName" placeholder="" clearable />
                </el-form-item>
                <el-form-item label="职员邮箱:" prop="email">
                    <el-input v-model="formUserUpData.email" placeholder="" clearable />
                </el-form-item>
                <el-form-item label="职员联系电话:" prop="phone">
                    <el-input v-model="formUserUpData.phone" placeholder="" clearable />
                </el-form-item>
                <el-form-item label="所属机构ID:" prop="orgId">
                    <el-input v-model="formUserUpData.orgId" placeholder="" clearable />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="visibleParamUpData = false"> 取消 </el-button>
                    <el-button type="primary" @click="upDataOnSubmit">提交</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 删除确认弹框 -->
        <el-dialog v-model="userDeleteDialog" title="操作提示" width="500" :before-close="handleCloseDelete">
            <span>确定是否删除?</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="userDeleteDialog = false">取消</el-button>
                    <el-button type="primary" @click="userDeleteDialog1"> 确定 </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Search, CirclePlusFilled } from '@element-plus/icons-vue'
import { userQuery, userUpdate, userDelete, userAdd, userList } from '/@/api/backend'
import { ElTable, ElMessage } from 'element-plus'
import { useAdminInfo } from '/@/stores/adminInfo'
import { fa } from 'element-plus/es/locales.mjs'
import { values } from 'lodash-es'
const adminInfo = useAdminInfo()
const input1 = ref('')
const input2 = ref('')
interface Tree {
    label: string
    children?: Tree[]
    id: string
}

// 用户左边树
const treeQuery = reactive({
    parentOrgId: adminInfo.orgid,
    recursive: true,
})

const userData = ref()

const getTree = () => {
    console.log(treeQuery, 'treeQuery')

    userList(treeQuery).then((res) => {
        console.log(res, '树')
        userData.value = res.data
    })
}

onMounted(() => {
    getTree()
})

const formQuery = reactive({
    orgId: '',
    recursive: false,
})

const treeId = ref()

const handleNodeClick = (data: Tree) => {
    console.log(data.id, 'data')

    treeId.value = data.id
    formQuery.orgId = data.id
    console.log(formQuery, '闵1')

    RyUserQuery(formQuery)
}

const defaultProps = {
    children: 'children',
    label: 'name',
}

// 用户查询
interface userQuery {
    // rows?: any[]
}
const tableData = ref()
const RyUserQuery = (data: any) => {
    userQuery(data).then((res) => {
        if (res.code == 200) {
            console.log(res.rows, 'res111')
            tableData.value = res.rows
        } else {
            ElMessage.error({
                message: res.msg,
                type: 'error',
            })
        }
    })
}

interface User {
    date: string
    name: string
    address: string
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])

const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}

// 用户搜索
const formQuery1 = reactive({
    userName: '',
})
const userFromQuery = () => {
    formQuery1.userName = input2.value
    console.log(formQuery1, '闵2')

    RyUserQuery(formQuery1)
}

// 用户增加
const visibleParam = ref(false)
interface RuleUser {
    account: string
    password: string
    userName: string
    email: string
    phone: string
    orgId: string
}
const formUserAdd = reactive({
    account: '',
    password: '',
    userName: '',
    email: '',
    phone: '',
    orgId: '',
})

const addUserFromData = () => {
    visibleParam.value = true
    formUserAdd.account = ''
    formUserAdd.password = ''
    formUserAdd.userName = ''
    formUserAdd.email = ''
    formUserAdd.phone = ''
    formUserAdd.orgId = ''
}

const handleCloseParam = (data: any) => {
    visibleParam.value = false
    console.log(data)
}

const addOnSubmit = () => {
    visibleParam.value = false
    userAdd(formUserAdd).then((res) => {
        console.log(res, '新增')
    })
    formQuery1.userName = input2.value
    RyUserQuery(formQuery1)
}

// 页面修改
const visibleParamUpData = ref(false)

const formUserUpData = reactive({ id: '', account: '', password: '', userName: '', email: '', phone: '', orgId: '' })
const viewUsers = (data: any) => {
    console.log(data, '页面修改数据')
    visibleParamUpData.value = true
    formUserUpData.id = data.row.id
    formUserUpData.account = data.row.account
    formUserUpData.password = data.row.password
    formUserUpData.userName = data.row.userName
    formUserUpData.email = data.row.email
    formUserUpData.phone = data.row.phone
    formUserUpData.orgId = data.row.orgId
}
const upDataOnSubmit = () => {
    console.log(formUserUpData, 'formUserUpData')

    userUpdate(formUserUpData).then((res) => {
        console.log(res, '修改成功')
    })
    visibleParamUpData.value = false
}

const handleCloseParamUp = () => {
    visibleParamUpData.value = false
}

// 页面删除
const userListDelete = reactive({
    id: '',
})
const userFromDelete = (data: any) => {
    userDeleteDialog.value = true
    userListDelete.id = data.row.id
    userDelete(userListDelete).then((res) => {
        if (res.code == 200) {
            setTimeout(() => {
                ElMessage({
                    message: res.msg,
                    type: 'success',
                })
            }, 1000)
        } else {
            ElMessage.error({
                message: res.msg,
                type: 'error',
            })
        }
    })
}

const userDeleteDialog = ref(false)

const handleCloseDelete = () => {
    userDeleteDialog.value = false
}

const userDeleteDialog1 = () => {
    userDeleteDialog.value = false
    formQuery.orgId = treeId.value
    console.log(formQuery, 'formQuery')
    RyUserQuery(formQuery)
}

// 分页
const currentPage4 = ref(4)
const pageSize4 = ref(100)

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
</script>

<style scoped lang="scss">
.el-row {
    margin-bottom: 20px;
    width: 99%;
    height: 823px;
}
.el-row:last-child {
    margin-bottom: 0;
}
.el-col {
    // border-radius: 4px;
    background-color: #fff;
}
</style>
