<template>
    <div class="editDeptDialog">
        <el-dialog center width="636px" title="修改部门" :visible.sync='editDeptData.dialogVisible'>            
            <el-form label-width="80px" ref="ruleForm" :rules="rules" :model="editDeptData.data">
                <el-form-item v-if="editDeptData.data.parentName" label="上级部门" prop="parentName">                    
                    <el-select style="width: 265px;" clearable v-model="editDeptData.data.parentName" placeholder="上级部门名称" ref="selectTree">
                        <el-option :value="treeData.id" :label="treeData.label" hidden />
                        <el-tree :data="treeData" :props="defaultProps" :node-key="treeData.id" accordion highlight-current
                            @node-click="handleNodeClick" />
                    </el-select>
                </el-form-item>
                <el-form-item label="部门名称" prop="deptName">                    
                    <el-input :maxLength="30" v-model="editDeptData.data.deptName"></el-input>
                </el-form-item>
                <el-form-item label="部门编码" prop="deptCode">                    
                    <el-input :maxLength="30" v-model="editDeptData.data.deptCode"></el-input>
                </el-form-item>
                <el-form-item label="显示排序" prop="orderNum">
                    <el-input :maxLength="10" onkeyup="this.value=this.value.replace(/\D/g,'')"
                        onafterpaste="this.value=this.value.replace(/\D/g,'')"
                        v-model="editDeptData.data.orderNum"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input :maxLength="11" v-model="editDeptData.data.phone"></el-input>
                </el-form-item>
                <el-form-item label="联系邮箱">
                    <el-input :maxLength="30" v-model="editDeptData.data.email"></el-input>
                </el-form-item>                
                <el-form-item label="状态" prop="status">
                    <!-- <el-switch v-model="editDeptData.data.status" active-color="#13ce66"
                        inactive-color="#ff4949" active-text="启用" inactive-text="停用"></el-switch> -->
                        <el-switch class="switchStyle" v-model="editDeptData.data.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="editDeptData.dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateDept()">保 存</el-button> -->
                <div class="search"  @click="updateDept()">保 存</div>
                <div class="reset" @click="editDeptData.dialogVisible = false">取 消</div>                
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getDeptTree } from '@/api/sysManage'
export default {
    name: '',
    props: {
        editDeptData: {
            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 {
            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() {
        this.getDeptTree()
    },
    methods: {
        getDeptTree() {
            getDeptTree().then(res => {
                this.treeData = res.data
            })
        },
        handleNodeClick(v) {
            this.editDeptData.data.parentId = v.id
            this.editDeptData.data.parentName = v.label
        },
        updateDept() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {                    
                    let params = {                        
                        deptId:this.editDeptData.data.deptId,
                        parentId: this.editDeptData.data.parentId,
                        deptName: this.editDeptData.data.deptName,
                        deptCode:this.editDeptData.data.deptCode,
                        orderNum: this.editDeptData.data.orderNum,
                        phone: this.editDeptData.data.phone,
                        email: this.editDeptData.data.email,
                        status: this.editDeptData.data.status == true ? '1' : '2'
                    }
                    this.$emit('updateDept',params)
                }
            })
        }
    }
}
</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;
      }
}
</style>