<template>
  <div class="router">
    <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">
            <template #default="scope" v-if="i.prop == 'avatar'">
                <el-avatar :src="scope.row.avatar"></el-avatar>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <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>
  </div>
</template>
<script setup lang="ts">
import {reactive,ref} from 'vue'
import {addUser,getUserInfo,editUser,deleteUser,getAllRole,findRoleByUser} from '@/services/api/user/userAPI'
const tableColumn = reactive([
    {
        label:'用户账号',
        prop:'fauthAccount'
    },
    {
        label:'用户名',
        prop:'name'
    },
    {
        label:'工号',
        prop:'fworkNo'
    },
    {
        label:'工作地点',
        prop:'fworkAddr'
    },
    {
        label:'状态',
        prop:'fstate'
    },
    {
        label:'职位',
        prop:'fposition'
    },
    {
        label:'入职日期',
        prop:'finductionDate'
    },
    {
        label:'英文名',
        prop:'fenglishName'
    },
    {
        label:'部门',
        prop:'fdept'
    },
    {
        label:'头像',
        prop:'avatar'
    },
    {
        label:'创建人',
        prop:'fcreator'
    },
    {
        label:'创建日期',
        prop:'fdate'
    }
])
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 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>
.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>