<template>
    <div class="add-department-container">
        <div class="setting-cell">
            <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">
            <div class="btn-area">
                <el-button type="primary" @click="saveEdit">保存</el-button>
                <el-button type="primary" @click="saveEdit('continue')">保存并继续添加</el-button>
                <el-button @click="cancel">取消</el-button>
            </div>
        </div>
        <vue-select-store ref="storeSelector" @handleSelectedList="handleSelectedList"></vue-select-store>
    </div>
</template>
<script>
import vueSelectStore from "components/common/vueSelectStore";
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
export default {
    name: "store-view-group-info",
    components: {
        vueSelectStore
    },
    data() {
        return {
            departInfo: {
                name: "",
                parentName: "",
                parentId: ""
            },
            rules: {
                name: [
                    { required: true, message: '请输入部门名称', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                ],
                parentId: [
                    { required: true, message: '请选择父级部门', trigger: 'change' }
                ]
            },
            disabled: true,
            treeSet: {
                isSelectPerson: false,
                dialogVisible: false,
                isSingle: true // 是否单选
            }
        } 
    },
    methods: {
        handleSelectedList(list) {
            let group = list[0];
            console.log(group);
            this.departInfo.parentId = group ? group.id : "";
            this.departInfo.parentName = group ? group.label : "";
        },
        callGroupSelector() {
            this.$refs.storeSelector.treeSet.dialogVisible = true;
        },
        saveEdit(goAhead = "") {
            this.$refs.departForm.validate(valid => {
                if (!valid) {
                    return false;
                }
                let _this = this;
                let params = {
                    parentId: _this.departInfo.parentId,
                    name: _this.departInfo.name
                }
                let url = "";
                if (_this.isAddNew) {
                    url = "/haoban-manage-web/dept/insert";
                } else {
                    url = "/haoban-manage-web/dept/update";
                    params.groupId = _this.$route.query.groupId;
                }
                getRequest(url, params)
                .then(res => {
                    console.log(res);
                    if (res.data.errorCode == 1) {
                        _this.$message.success({
                            duration: 1000,
                            message: "操作成功！"
                        });
                        console.log(goAhead);
                        if (goAhead == "continue") {
                            _this.departInfo = {
                                name: "",
                                parentName: "",
                                parentId: ""
                            }
                            _this.disabled = true;
                            _this.getGroupData();
                        } else {
                            window.history.go(-1);
                        }
                    } else {
                        _this.$message.error({
                            duration: 1000,
                            message: res.data.message
                        });
                    }
                })
                .catch(e => {
                    _this.$message.error({
                        duration: 1000,
                        message: e.message
                    });
                });
            });
        },
        cancel() {
            this.$confirm(" 是否确认取消，取消后当前页面信息将丢失 ？", "提示", {
                type: "warning"
            }).then(() => {
                window.history.go(-1);
            }).catch(e => {
                console.log(e);
            });
        },
        getGroupInfo() {
            let that = this;
            let params = {
                groupId: that.$route.query.groupId
            };
            getRequest("/haoban-manage-web/dept/findDeptById", params)
            .then(res => {
                if (res.data.errorCode == 1) {
                    that.departInfo = {
                        name: res.data.result.name,
                        parentName: res.data.result.chainName,
                        parentId: res.data.result.parentId
                    };
                } else {
                    that.$message.error({
                        message: res.data.message
                    });
                }
            })
            .catch(e => {
                that.$message.error({
                    message: e.message
                });
            });
        }
    },
    computed: {
        isAddNew() {
            return !!(this.$route.query.addnew == 1);
        }
    },
    beforeMount() {
        if (!this.isAddNew) {
            this.getGroupInfo();
        }
    },
    mounted() {
        this.disabled = false;
    },
    watch: {
        treeData() {
            this.disabled = false;
        }
    }
}
</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>

