<template>
    <el-dialog :title="dialogTitle" :visible.sync="show" destroy-on-close :before-close="onClose">
        <el-form v-if="user" :model="formData" :rules="rules" ref="form" label-width="100px">
            <el-form-item :label="label" prop="status_desc">
                <el-input
                    type="textarea"
                    placeholder="请输入"
                    :autosize="{ minRows: 3, maxRows: 6}"
                    v-model="formData.status_desc"
                    maxlength="300"
                    show-word-limit>
                </el-input>
            </el-form-item>
            <div class="tool">
                <el-button @click="onClose">取消</el-button>
                <el-button type="primary" @click="onSubmit">保存</el-button>
            </div>
        </el-form>
    </el-dialog>
</template>

<script>
import { updateUserStatus } from '@/api/system_user'

export default {
    props: ['show', 'user'],
    data () {
        return {
            dialogTitle: '',
            label: '',
            formData: {
                status_reason: '管理停用',
                status_desc: '',
                oper_type: 'disable',
            },
            rules: {
                status_desc: [
                    { required: true, message: '请输入说明', trigger: 'blur' },
                    { min: 1, max: 300, message: '长度在 1 到 300 个字符', trigger: 'blur' }
                ]
            },
        }
    },
    watch: {
        show(n) {
            if (n) {
                this.initData();
            }
        }
    },
    methods: {
        initData() {
            let s = '停用员工', r = '停用原因：';
            this.formData.oper_type = 'disable';
            this.formData.status_reason = '管理停用';
            if (this.user) {
                if (this.user.user_status == 2) {
                    s = '启用员工';
                    r = '启用原因：';
                    this.formData.status_reason = '管理启用';
                    this.formData.oper_type = 'enable';
                }
                if (this.user.user_status == 1) {
                    s = '解冻员工';
                    r = '解冻原因：';
                    this.formData.status_reason = '管理解冻';
                    this.formData.oper_type = 'unfreeze';
                }
                s += ': ' + this.user.name;
            }
            this.dialogTitle = s;
            this.label = r;
        },
        onClose(flag = false) {
            this.$emit('update:show', false);
            this.$emit('close', flag);
        },
        onSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    const status = this.user.user_status;
                    const msg = status == 0 ? '停用' : (status == 1 ? '解冻' : '启用');
                    updateUserStatus(this.user.id, this.formData).then(res => {
                        this.$message({
                            message: `${msg}成功`,
                            type: 'success'
                        });
                        this.$refs.form.resetFields();
                        this.onClose(true);
                    });
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.tool {
    display: flex;
    justify-content: flex-end;
    margin: 8px;
}
</style>