<template>
    <div class="add-department-container">
        <div class="setting-cell depart-info">
            <p class="title">部门信息</p>
            <el-form
                class="department-info-form"
                label-position="right"
                :rules="rules"
                :model="departInfo"
                ref="departForm"
                label-width="120px">
                <el-form-item label="部门名称" prop="name">
                    <el-input v-model="departInfo.name"></el-input>
                </el-form-item>
                <el-form-item label="部门排序调整" prop="parentId">
                    <el-input :disabled="disabled" v-model="departInfo.parentName" @focus="callGroupSelector" suffix-icon="el-icon-arrow-down"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="setting-cell" v-if="$route.query.addnew != 1">
            <p class="title">权限设置</p>
            <permission-setting :visibleApartList="testList" :visibleSpecialLsit="testList" :onlySelfApartList="testList"></permission-setting>
        </div>
        <div class="setting-cell">
            <div class="btn-area">
                <el-button type="primary" @click="saveEdit">保存</el-button>
                <!-- <el-button>取消</el-button> -->
            </div>
        </div>
        <vue-select-employee :treeSet="treeSet" @handleSelectedList="handleSelectedList" :treeData="treeData"></vue-select-employee>
    </div>
</template>
<script>
    import permissionSetting from "components/contacts/permissionSet/permissionSetting";
    import vueSelectEmployee from "components/common/vueSelectEmployee";
    import { getRequest, postRequest, postJsonRequest } from '@/api/api';
    export default {
        name: "addDepartment",
        components: {
            permissionSetting,
            vueSelectEmployee
        },
        data() {
            return {
                departInfo: {
                    name: "",
                    parentName: "",
                    parentId: ""
                },
                testList: [],
                treeSet: {
                    isSelectPerson: false,
                    dialogVisible: false,
                    isSingle: true // 是否单选
                },
                rules: {
                    name: [
                        { required: true, message: '请输入部门名称', trigger: 'blur' },
                        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                    ],
                    parentId: [
                        { required: true, message: '请选择父级部门', trigger: 'change' }
                    ]
                },
                treeData: {},
                disabled: true
            };
        },
        methods: {
            /**
             * 唤起部门选择器
             */
            callGroupSelector() {
                this.treeSet.dialogVisible = true;
            },
            /**
             * 处理已选部门
             */
            handleSelectedList(group) {
                console.log(group);
                this.departInfo.parentId = group ? group.id : "";
                this.departInfo.parentName = group ? group.label : "";
            },
            saveEdit() {
                this.$refs.departForm.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    let _this = this;
                    let params = {
                        parentId: _this.departInfo.parentId,
                        name: _this.departInfo.name
                    }
                    getRequest("/haoban-manage-web/dept/insert", params)
                    .then(res => {
                        console.log(res);
                        if (res.data.errorCode == 1) {

                        } else {
                            _this.$message.error({
                                duration: 1000,
                                message: res.data.message
                            });
                        }
                    })
                    .catch(e => {
                        _this.$message.error({
                            duration: 1000,
                            message: e.message
                        });
                    });
                });
            },
            getGroupData() {
                let _this = this;
                let params = {
                    isStoreGroup: 0
                };
                getRequest("/haoban-manage-web/dept/deptListForCompany", params)
                .then(res => {
                    let treeData = [];
                    let personData = [];
                    if (res.data.errorCode == 1) {
                        treeData = res.data.result.departmentList || [];
                        personData = res.data.result.searchList || []
                    }
                    // _this.formatGroupData(treeData, personData);
                    _this.treeData = {
                        treeData,
                        personData
                    };
                    _this.disabled = false;
                })
                .catch(e => {
                    console.log(e, "error");
                });
            }
        },
        beforeMount() {
            this.getGroupData();
        }
    };
</script>
<style lang="scss">
    .add-department-container {
        .setting-cell {
            background: #fff;
            margin-bottom: 24px;
            .title {
                height: 55px;
                line-height: 55px;
                border-bottom: 1px solid #E4E7ED;
                text-indent: 32px;
                font-size:16px;
                font-weight:500;
                color:#303133;
            }
            .department-info-form {
                padding: 24px 32px;
                .el-input {
                    width: 380px;
                }
            }
            .btn-area{
                width: 100%;
                text-align: center;
                padding: 12px;
            }
        }
    }
</style>


