<template>
    <div class="editDeptDialog">
        <el-dialog center @close="cancel()" width="636px" title="新增部门" :visible.sync='addDeptData.dialogVisible'>
            <el-form label-width="80px" ref="ruleForm" :rules="rules" :model="addDeptForm">
                <el-form-item label="上级部门" prop="parentName">
                    <el-input :maxLength="30" :disabled="true" placeholder="请输入部门名称" v-model="addDeptData.data.deptName"></el-input>
                </el-form-item>
                <el-form-item label="部门名称" prop="deptName">
                    <el-input :maxLength="30" placeholder="请输入部门名称" v-model="addDeptForm.deptName"></el-input>
                </el-form-item>
                <el-form-item label="部门编码" prop="deptCode">
                    <el-input :maxLength="30" placeholder="请输入部门编码" v-model="addDeptForm.deptCode"></el-input>
                </el-form-item>
                <el-form-item label="显示排序" prop="orderNum">
                    <el-input :maxLength="10" placeholder="请输入部门排序" onkeyup="this.value=this.value.replace(/\D/g,'')"
                        onafterpaste="this.value=this.value.replace(/\D/g,'')" v-model="addDeptForm.orderNum"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input placeholder="请输入联系电话" :maxLength="11" v-model="addDeptForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="联系邮箱">
                    <el-input :maxLength="30" placeholder="请输入联系邮箱" v-model="addDeptForm.email"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <!-- <el-switch class="switchStyle" v-model="addDeptForm.status" active-text="启用" inactive-text="停用"
                        active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch> -->
                    <el-switch class="switchStyle" v-model="addDeptForm.status" active-text="启用"
                        inactive-text="停用" active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click='cancel'>取 消</el-button>
                <el-button type="primary" @click="addDept()">保 存</el-button> -->
                <div class="search" @click="addDept()">保 存</div>
                <div class="reset" @click="cancel()">取 消</div>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getDeptTree } from '@/api/sysManage'
export default {
    name: 'addDeptDialog',
    props: {
        addDeptData: {
            type: Object,
            default: {}
        }
    },
    data() {
        let checkPhone = (rule, value, callback) => {
            if (value) {
                let isPhone = /^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/;
                let reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
                // if () {
                //   cbfn("");
                // }
                if (!reg.test(value) && !isPhone.test(value) && value) {
                    callback(new Error("请输入正确的手机号"));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        };
        return {
            addDeptForm: {
                parentName: '',
                parentId: '',
                deptName: '',
                deptCode: '',
                orderNum: '',
                phone: '',
                email: '',
                status: true
            },
            treeData: [],
            rules: {
                parentName: [{ required: true, message: '请选择上级部门', trigger: 'blur' },],
                deptName: [{ required: true, message: '请输入部门名称', trigger: 'blur' },],
                deptCode: [{ required: true, message: '请输入部门编码', trigger: 'blur' }],
                orderNum: [{ required: true, message: '请输入部门排序', trigger: 'blur' },],
                phone: [{ validator: checkPhone, },
                ],
                email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },],
                status: [{ required: true, message: '请选择状态', trigger: 'blur' },]
            }
        }
    },
    created() {
        // if (this.addDeptData.data == 0) {
        //     this.addDeptForm.parentId = 0
        // } else {
        //     this.addDeptForm.parentId = this.addDeptData.data.parentId
        //     this.addDeptForm.parentName = this.addDeptData.data.deptName
        // }
        this.addDeptForm.parentId = this.addDeptData.data.deptId
        this.addDeptForm.parentName = this.addDeptData.data.deptName
        // this.getDeptTree()
    },
    methods: {
        getDeptTree() {
            getDeptTree().then(res => {
                this.treeData = res.data
            })
        },
        handleNodeClick(v) {
            let newV = JSON.parse(JSON.stringify(v))
            this.addDeptForm.parentId = newV.id
            this.addDeptForm.parentName = newV.label
        },
        cancel() {
            this.addDeptData.dialogVisible = false
            this.addDeptForm = {
                parentName: '',
                parentId: '',
                deptName: '',
                orderNum: '',
                phone: '',
                email: '',
                status: true
            }
        },
        addDept() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    this.$emit('addDeptBtn', this.addDeptForm)
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
    padding: 20px 95px !important;
}

.dialog-footer {
    div {
        display: inline-block;
        width: 80px;
        height: 40px;
        border-radius: 2px;
        font-size: 14px;
        line-height: 40px;
        text-align: center;
    }

    div:hover {
        cursor: pointer;
    }

    .search {
        margin: 0 12px;
        background-color: #2766DD;
        color: #fff;
    }

    .search:hover {
        background-color: #4D85F4;
    }

    .reset {
        color: #333334;
        border: 1px solid #D7D7D7;
    }

    .reset:hover {
        color: #1F9FFF;
        border: 1px solid #1F9FFF;
    }
}

// 选中后radio文本的颜色
::v-deep .el-radio__input.is-checked+.el-radio__label {
    color: #2766DD
}

/* radio选中后小圆点的颜色 */
::v-deep .el-radio__input.is-checked .el-radio__inner {
    background: #2766DD !important;
    border-color: #2766DD !important;
}</style>