<template>
    <div class="user-containter">
        <el-form :inline="true">
            <el-form-item label="账号">
                <el-input placeholder="账号模糊查询"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">查询</el-button>
            </el-form-item>
        </el-form>
        <el-form :inline="true">
            <el-form-item>
                <el-button type="primary" @click="handleAdd">添加用户</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" border>
            <el-table-column type="selection"></el-table-column>
            <el-table-column v-for="i in tableColumn" :label="i.label" :prop="i.prop" :width="i.width" align="center">
                <template #default="scope" v-if="i.prop == 'avatar'">
                    <el-avatar :src="scope.row.avatar"></el-avatar>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200px" align="center" fixed="right">
                <template #default="scope">
                    <el-button type="text" @click="handleEditPwd(scope.row)">修改密码</el-button>
                    <el-divider direction="vertical" />
                    <el-button type="text" @click="handleEdit(scope)">编辑</el-button>
                    <el-divider direction="vertical" />
                    <el-popconfirm title="确认删除?" @confirm="handleDelete(scope)">
                        <template #reference>
                            <el-button type="text">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-drawer v-model="showDrawer" :title="drawerTitle">
            <el-form class="form" ref="form" :rules="rules" :model="formData" size="large" label-position="right"
                label-width="80px">
                <el-form-item v-for="item in formColumn" :prop="item.prop" :label="item.label">
                    <el-input v-if="item.type == 'input'" v-model="formData[item.prop]" :placeholder="item.placeholder">
                    </el-input>
                    <el-upload v-if="item.type == 'avatar'">
                        <img class="avatar" :src="formData[item.prop]" />
                    </el-upload>
                    <el-date-picker v-if="item.type == 'date'" v-model="formData[item.prop]" format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"></el-date-picker>
                    <el-select v-if="item.type == 'select'" v-model="formData[item.prop]" multiple style="width: 300px">
                        <el-option v-for="i in roles" :key="i.id" :label="i.roleName" :value="i.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="showDrawer = false">关闭</el-button>
                    <el-button type="primary" @click="handleSubmit">{{ drawerTitle }}</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>

        <el-dialog v-model="showDialog" title="修改密码" width="30%">
            <el-form :model="editPwdData" ref="editPwdRef" :rules="rules" label-width="80px">
                <el-form-item label="用户账号">
                    <el-input v-model="editPwdData.account" :disabled="true" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="editPwdData.password" type="password" show-password clearable
                        placeholder="请输入密码" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="showDialog = false">取消</el-button>
                <el-button type="primary" @click="handlePwdAdd">确认</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { addUser, getUserInfo, editUser, deleteUser, getAllRole, findRoleByUser, editPassWord } from '@/services/api/user/userAPI'
import { valid } from 'mockjs';
const showDialog = ref(false)
const editPwdRef = ref()
const editPwdData = ref({
    password: '',
    account: ''
})

const tableColumn = reactive([
    {
        label: '用户账号',
        prop: 'fauthAccount',
        width: ''
    },
    {
        label: '用户名',
        prop: 'name',
        width: ''
    },
    {
        label: '工号',
        prop: 'fworkNo',
        width: ''
    },
    {
        label: '工作地点',
        prop: 'fworkAddr',
        width: ''
    },
    {
        label: '状态',
        prop: 'fstate',
        width: ''
    },
    {
        label: '职位',
        prop: 'fposition',
        width: ''
    },
    {
        label: '入职日期',
        prop: 'finductionDate',
        width: '155px'
    },
    {
        label: '英文名',
        prop: 'fenglishName',
        width: ''
    },
    {
        label: '部门',
        prop: 'fdept',
        width: ''
    },
    {
        label: '头像',
        prop: 'avatar',
        width: ''
    },
    {
        label: '创建人',
        prop: 'fcreator',
        width: ''
    },
    {
        label: '创建日期',
        prop: 'fdate',
        width: '155px'
    }
])

let tableData = ref([])

const form = ref()
let formColumn = reactive([
    {
        label: '用户账号',
        prop: 'fauthAccount',
        type: 'input',
        placeholder: '请输入用户账号'
    },
    {
        label: '用户名',
        prop: 'name',
        type: 'input',
        placeholder: '请输入用户名'
    },
    {
        label: '用户介绍',
        prop: 'introduction',
        type: 'input',
        placeholder: '请输入用户介绍'
    },
    {
        label: '工号',
        prop: 'fworkNo',
        type: 'input',
        placeholder: '请输入工号'
    },
    {
        label: '工作地点',
        prop: 'fworkAddr',
        type: 'input',
        placeholder: '请输入工作地点'
    },
    {
        label: '状态',
        prop: 'fstate',
        type: 'input',
        placeholder: '请输入状态'
    },
    {
        label: '角色分配',
        prop: 'roles',
        type: 'select',
        placeholder: '分配角色'
    },
    {
        label: '职位',
        prop: 'fposition',
        type: 'input',
        placeholder: '请输入职位'
    },
    {
        label: '手机',
        prop: 'fphone',
        type: 'input',
        placeholder: '请输入手机'
    },
    {
        label: '邮箱',
        prop: 'fmail',
        type: 'input',
        placeholder: '请输入邮箱'
    },
    {
        label: '入职日期',
        prop: 'finductionDate',
        type: 'date',
        placeholder: '请输入入职日期'
    },
    {
        label: '英文名',
        prop: 'fenglishName',
        type: 'input',
        placeholder: '请输入英文名'
    },
    {
        label: '部门',
        prop: 'fdept',
        type: 'input',
        placeholder: '请输入部门'
    },
    {
        label: '头像',
        prop: 'avatar',
        type: 'avatar'
    }
])
const rules = reactive({
    fauthAccount: [
        { required: true, message: '请输入用户账号', trigger: 'blur' }
    ],
    name: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入登录密码', trigger: 'blur' }
    ]
})
let formData = ref<any>({})

let drawerTitle = ref('')
let showDrawer = ref(false)

let roles = ref<any>([])

function init() {
    getUserInfo().then((res) => {
        if (res.code == 200) {
            tableData.value = res.data.records
        }
    })
    getAllRole().then((res) => {
        if (res.code == 200) {
            roles.value = res.data
        }
    })
}

function handleEditPwd(row: any) {
    editPwdData.value.password = ''
    editPwdData.value.account = row.fauthAccount
    showDialog.value = true

}

function handlePwdAdd() {
    editPwdRef.value?.validate((valid: boolean) => {
        if (valid) {
            editPassWord(editPwdData.value).then((res: any) => {
                if (res.code === 200) {
                    showDialog.value = false
                }
            })
        }
    })
}

function handleEdit(scope: any) {
    formData.value = {}
    let params = {
        userId: scope.row.userId
    }
    findRoleByUser(params).then((res) => {
        if (res.code == 200) {
            formData.value.roles = res.data
        }
    })
    for (let i in scope.row) {
        formData.value[i] = scope.row[i]
    }
    for (let j in formColumn) {
        if (formColumn[j].prop == 'password') {
            formColumn.splice(Number(j), 1)
            break
        }
    }
    for (let k in formData.value) {
        if (k == 'password') {
            delete formData[k]
            break
        }
    }
    drawerTitle.value = '编辑'
    showDrawer.value = true
}

function handleAdd() {
    formData.value = {}
    formColumn.splice(1, 0, {
        label: '登录密码',
        prop: 'password',
        type: 'input',
        placeholder: '请输入登录密码'
    })
    drawerTitle.value = '添加'
    showDrawer.value = true
}

function handleSubmit() {
    if (drawerTitle.value == '添加') {
        form.value.validate((valid: boolean) => {
            if (valid) {
                addUser(formData.value).then((res) => {
                    if (res.code == 200) {
                        init()
                        showDrawer.value = false
                    }
                })
            }
        })
    }
    if (drawerTitle.value == '编辑') {
        form.value.validate((valid: boolean) => {
            if (valid) {
                editUser(formData.value).then((res) => {
                    if (res.code == 200) {
                        init()
                        showDrawer.value = false
                    }
                })
            }
        })
    }
}

function handleDelete(scope: any) {
    let params = {
        userId: scope.row.userId
    }
    deleteUser(params).then((res) => {
        if (res.code == 200) {
            init()
        }
    })
}

init()

</script>
<style scoped>
.user-containter {
    padding: 20px;
}

.form {
    overflow-x: hidden;
    overflow-y: auto;
    height: calc(100vh - 120px);
}

.avatar {
    width: 120px;
    height: 120px;
    display: block;
}

.el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    align-items: center;
}
</style>