<template>
    <div>
        <a-button type="text" size="small" @click="show = true">查看</a-button>
        <a-drawer v-model:visible="show" width="960px">
            <div v-if="user">
                <div class="flex flex-center flex-justify-start">
                    <a-avatar :size="72">
                        <a-image
                            alt="avatar"
                            v-if="user.avatar"
                            :src="user.avatar"
                            style="border-radius: 50%"
                        />
                    </a-avatar>
                    <div class="ml-20">
                        <div class="flex flex-center flex-justify-between">
                            <h2>{{ user.name }}</h2>
                        </div>
                        <div class="flex flex-justify-start flex-center">
                            账号状态：
                            <div>
                                <a-tag color="red" v-if="user.status === 0"
                                    >未激活
                                </a-tag>
                                <a-tag
                                    color="green"
                                    v-else-if="user.status === 1"
                                    >正常
                                </a-tag>
                                <a-tag color="grey" v-else>停用/离职</a-tag>
                            </div>
                        </div>
                        <div>创建时间：{{ user.createTime }}</div>
                    </div>
                </div>
                <a-divider />
                <div>
                    <div class="flex flex-center flex-justify-between">
                        <h2 class="padding-top padding-bottom">基础信息</h2>
                        <edit-user
                            :dept-id="user.deptId"
                            :info="user"
                            @ok="fetchInfo"
                        ></edit-user>
                    </div>
                    <a-descriptions :data="data" bordered />
                </div>
                <div class="padding-top padding-bottom">
                    <h2 class="padding-top padding-bottom">修改</h2>
                    <div class="flex flex-center flex-justify-start">
                        <a-popconfirm
                            content="确定重置密码为 000000  ？"
                            @ok="restPwd"
                        >
                            <a-button type="primary" size="small"
                                >重置密码
                            </a-button>
                        </a-popconfirm>
                        <a-popconfirm
                            :content="
                                `确定` + this.user.status === 1
                                    ? '停用'
                                    : '启用' + `当前账号？`
                            "
                            @ok="changeStatus"
                        >
                            <a-button
                                class="ml-20"
                                v-if="user.status === 0"
                                type="primary"
                                disabled
                                size="small"
                            >
                                账号未激活
                            </a-button>
                            <a-button
                                v-else
                                class="ml-20"
                                type="primary"
                                size="small"
                            >
                                {{
                                    this.user.status === 1
                                        ? '停用账号'
                                        : '启用账号'
                                }}
                            </a-button>
                        </a-popconfirm>
                        <div class="ml-20">
                            <edit-role
                                :userId="user.id"
                                :roleId="user.roleId"
                                @ok="fetchInfo"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </a-drawer>
    </div>
</template>

<script>
import editUser from '@/views/base/components/edit-user.vue'
import editRole from '@/views/base/components/edit-role.vue'

export default {
    components: {
        editUser,
        editRole
    },
    props: {
        userId: {
            type: String,
            default: ''
        }
    },
    watch: {
        show: {
            handler(val) {
                if (val) {
                    this.fetchInfo()
                }
            }
        }
    },
    data() {
        return {
            show: false,
            user: null,
            data: [
                {
                    label: '姓名',
                    prop: 'name'
                },
                {
                    label: '性别',
                    prop: 'sex'
                },
                {
                    label: '电话',
                    prop: 'phone'
                },
                {
                    label: '职务',
                    prop: 'postName'
                },
                {
                    label: '角色',
                    prop: 'roleName'
                }
            ]
        }
    },
    methods: {
        fetchInfo() {
            this.$api.user.info({ userId: this.userId }).then(res => {
                if (res.code === 200) {
                    this.user = res.data
                    this.fetchData(res.data)
                } else {
                    this.$notification.error(res.msg)
                }
            })
        },
        fetchData(info) {
            // 获取职务
            this.$api.sys.dict({ code: 'org_post' }).then(res => {
                if (res.code === 200) {
                    var tmp = res.data.find(e => e.value === info.post)
                    if (tmp) {
                        info.postName = tmp.label
                    }
                    this.$api.sys.roleList({ appId: '7XAp5LZk' }).then(res => {
                        var tmp = res.data.find(e => e.id === info.roleId)
                        if (tmp) {
                            info.roleName = tmp.name
                        }
                        info.sex = info.sex === '0' ? '男' : '女'
                        this.data = this.data.map(e => {
                            const item = {}
                            item.label = e.label
                            item.value = info[e.prop]
                            item.prop = e.prop
                            return item
                        })
                    })
                }
            })
        },
        restPwd() {
            this.$api.user.retPwd({ userId: this.user.id }).then(res => {
                if (res.code === 200) {
                    this.$notification.success(res.msg)
                } else {
                    this.$notification.error(res.msg)
                }
            })
        },
        changeStatus() {
            const data = {
                userId: this.user.id,
                status: this.user.status === 1 ? 2 : 1
            }
            this.$api.user.changeStatus(data).then(res => {
                if (res.code === 200) {
                    this.$notification.success(res.msg)
                    this.user.status = data.status
                    this.$emit('ok')
                } else {
                    this.$notification.error(res.msg)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped></style>
