<template>
    <el-dialog :title="title" :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="冻结原因" prop="status_reason">
                <el-select v-model="formData.status_reason" placeholder="请选择">
                    <el-option label="请假" value="请假"></el-option>
                    <el-option label="调离" value="调离"></el-option>
                    <el-option label="出差" value="出差"></el-option>
                    <el-option label="培训" value="培训"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="冻结时间" prop="status_end_time">
                <el-date-picker
                    v-model="formData.status_end_time"
                    type="datetime"
                    :picker-options="pickerOptions"
                    placeholder="选择日期"
                    default-time="23:59:59">
                </el-date-picker>
            </el-form-item>
            <div class="tips">*超过此结束日期自动解冻</div>
            <el-form-item label="详细说明" prop="status_desc">
                <el-input
                    type="textarea"
                    placeholder="请输入"
                    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 {
            formData: {
                oper_type: 'freeze',
                status_reason: '',
                status_end_time: '',
                status_desc: '',
            },
            rules: {
                status_reason: [
                    { required: true, message: '请选择冻结原因', trigger: 'change' }
                ],
                status_end_time: [
                    { required: true, message: '请选择冻结截止时间', trigger: 'change' }
                ],
                status_desc: [
                    { required: true, message: '请输入详细说明', trigger: 'blur' },
                    { min: 1, max: 300, message: '长度在 1 到 300 个字符', trigger: 'blur' }
                ]
            },
            pickerOptions: {
                disabledDate: function(date) {
                    return date.getTime() < Date.now() - 8.64e7;
                }
            },
        }
    },
    computed: {
        title() {
            let s = '冻结员工';
            if (this.user) {
                s += ':  ' + this.user.name;
            }
            return s;
        }
    },
    methods: {
        onClose(flag = false) {
            this.$emit('update:show', false);
            this.$emit('close', flag);
        },
        onSubmit() {
            if (this.formData.status_end_time) {
                const dis = new Date() - this.formData.status_end_time;
                if (dis >= 0) {
                    this.$message.error('冻结时间不能晚于当前时间，请重新选择');
                    return
                }
            }
            this.$refs.form.validate(valid => {
                if (valid) {
                    updateUserStatus(this.user.id, this.formData).then(res => {
                        this.$message({
                            message: '冻结成功',
                            type: 'success'
                        });
                        this.onClose(true);
                    });
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.tips {
    padding-left: 100px;
    margin: -9px 0 16px;
    color: #F56C6C;
}
.tool {
    display: flex;
    justify-content: flex-end;
    margin: 8px;
}
</style>