<template>
    <div class="store-estrutura-container">
        <search-menu
            :storeFrame="true"
            :treeData="menuData"
            :searchResult="searchResult"
            @handleSearchKey="handleSearchKey"
            @handleTreeSelection="handleTreeSelection"
            @handleStoreSelection="handleStoreSelection"
            @handleEmployeeSelection="handleEmployeeSelection">
            <template slot="buttonBox">
                <div class="slot-button">
                    <el-button @click="addBrand" :disabled="disableBtn">新建品牌</el-button>
                    <el-popover
                        placement="right"
                        width="550"
                        content="若您的企业为集团企业，可通过新建品牌，不同品牌的门店可以创建在不同的品牌下面"
                        trigger="hover">
                        <i class="el-icon-question" slot="reference"></i>
                    </el-popover>
                </div>
            </template>
        </search-menu>
        <clerk-info v-if="showEmployee == 'employee'" :clerkInfo="selectedEmployee"></clerk-info>
        <store-info v-else-if="showEmployee == 'store'" :storeInfo="storeInfo"></store-info>
        <div class="sf-right-container"
            v-else
            v-loading="loading">
            <div class="sf-right-header">
                <span class="title-span">{{groupInfo.groupName}}（{{total}}家）</span>
                <span class="id-span">部门ID： {{groupInfo.departmentId}}</span>
                <span class="handle-area">
                    <a :href="'#/addDepartment?departmentId='+groupInfo.departmentId" target="_blank" class="J_add-child a-href">添加子部门</a>
                    <span class="hurdle"></span>
                    <a class="J_edit a-href">编辑</a>
                </span>
            </div>
            <div class="tab-div">
                <el-radio-group v-model="tableView" @change="switchView">
                    <el-radio-button :label="1">门店视图</el-radio-button>
                    <el-radio-button :label="2">店员视图</el-radio-button>
                </el-radio-group>
            </div>
            <template v-if="tableView == 1">
                <store-view :tableData="storeList" @setChildMemberShow="setChildMemberShow"></store-view>
            </template>
            <template v-else>
                <clerk-view :tableData="storeList" @setChildMemberShow="setChildMemberShow" @selectByStatus="selectByStatus" @selectByType="selectByType"></clerk-view>
            </template>
            <div class="pagination">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[20, 40, 60, 80]"
                    :page-size="pageSize"
                    :current-page="pageNumber"
                    layout="total, sizes, prev, pager, next"
                    :total="total">
                </el-pagination>
            </div>
        </div>
        <add-brand ref="add_brand"></add-brand>
        <vue-select-store></vue-select-store>
    </div>
</template>
<script>
import searchMenu from "components/contacts/searchMenu";
import storeView from "components/contacts/storeFrame/storeView";
import clerkView from "components/contacts/storeFrame/clerkView";
import storeInfo from "components/contacts/storeFrame/storeInfo";
import addBrand from "components/contacts/storeFrame/addBrand";
import employeeInfo from "components/contacts/employeeInfo";
import clerkInfo from "components/contacts/storeFrame/clerkInfo";
import vueSelectStore from "components/common/vueSelectStore";
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
export default {
    name: "storeEstruturaContainer",
    components: {
        searchMenu,
        storeView,
        clerkView,
        employeeInfo,
        storeInfo,
        addBrand,
        clerkInfo,
        vueSelectStore
    },
    data() {
        return {
            menuData: [],
            searchResult: {},
            loading: true,
            groupInfo: {
                groupName: "",
                departmentId: ""
            },
            total: 0,
            showChildMember: false, // 是否显示子成员
            pageSize: 20,
            pageNumber: 1,
            storeList: [],
            tableView: 1,
            showEmployee: 'node',
            selectedEmployee: {},
            storeInfo: {},
            disableBtn: true,
            storeStatus: "",
            storeType: ""
        };
    },
    methods: {
        handleSearchKey(keyWord) {
            let params = {
                keyWord
            };
            getRequest("/haoban-manage-web/store/searchpage", params)
            .then(res => {
                this.searchResult = res.data.result || {};
            })
            .catch(e => {
                console.log(e, "error");
            });
        },
        /**
         * 树形搜索结果选人处理
         */
        handleEmployeeSelection(employee, showEmployee) {
            console.log(employee, showEmployee);
            this.selectedEmployee = employee;
            this.showEmployee = showEmployee;
        },
        /**
         * 新建品牌
         */
        addBrand() {
            this.$refs.add_brand.dialogVisible = true;
        },
        /**
         * 树形搜索结果选门店处理
         */
        handleStoreSelection(store) {
            console.log(store);
            this.storeInfo = store;
            this.showEmployee = "store";
        },
        handleSizeChange(size) {
            this.pageSize = size;
            this.getStoreList();
        },
        handleCurrentChange(pageNumber) {
            this.pageNumber = pageNumber;
            this.getStoreList();
        },
        /**
         * 切换视图
         */
        switchView(view) {
            this.pageSize = 20;
            this.pageNumber = 1;
            this.storeList = [];
            this.showChildMember = false;
            this.storeStatus = "";
            this.getStoreList();
        },
        /**
         * 设置是否显示子成员
         */
        setChildMemberShow(show) {
            this.showChildMember = show;
            this.getStoreList();
        },
        /**
         * 获取树形分组数据
         */
        getGroupData() {
            let _this = this;
            let params = {
                isStoreGroup: 1
            };
            getRequest("/haoban-manage-web/dept/deptList", params)
            .then(res => {
                if (res.data.errorCode == 1) {
                    _this.menuData = res.data.result || [];
                    res.data.result.some(li => {
                        if (li.level == 0) {
                            _this.groupInfo.departmentId = li.groupId;
                            _this.groupInfo.groupName = li.name;
                        }
                        return li.level == 0;
                    });
                    _this.getStoreList();
                } else {
                    _this.menuData = [];
                    _this.loading = false;
                    _this.$message.error({
                        duration: 1000,
                        message: res.data.message
                    });
                }
            })
            .catch(e => {
                _this.$message.error({
                    duration: 1000,
                    message: e.message
                });
            });
        },
        /**
         * 获取店铺列表
         */
        getStoreList() {
            let _this = this;
            _this.loading = true;
            let params = {
                storeGroupId: _this.groupInfo.departmentId,
                showChild: _this.showChildMember * 1,
                showType: _this.tableView,
                pageSize: _this.pageSize,
                pageNumber: _this.pageNumber,
                status: _this.storeStatus,
                storeType: _this.storeType
            };
            getRequest("/haoban-manage-web/store/findSimplePage", params)
            .then(res => {
                if (res.data.errorCode == 1) {
                    _this.total =  res.data.result.total;
                    _this.storeList = res.data.result.list || [];
                    _this.loading = false;
                    _this.$message.success({
                        duration: 1000,
                        message: '操作成功！'
                    });
                } else {
                    _this.loading = false;
                    _this.storeList = [];
                    _this.$message.error({
                        duration: 1000,
                        message: res.data.message
                    });
                }
            })
            .catch(e => {
                _this.loading = false;
                _this.$message.error({
                    duration: 1000,
                    message: e.message
                });
            });
        },
         /**
         * 树形菜单选择项处理
         */
        handleTreeSelection(obj, node, showEmployee) {
            console.log(obj, node, "selection");
            this.groupInfo.departmentId = obj.groupId;
            this.groupInfo.groupName = obj.name;
            this.showEmployee = showEmployee;
            this.getStoreList();
        },
        /**
         * 店员视图根据店铺状态筛选店铺
         */
        selectByStatus(val) {
            this.storeStatus = val;
            this.getStoreList();
        },
        /**
         * 店员视图根据店铺类型筛选店铺
         */
        selectByType(type) {
            this.storeType = type;
            this.getStoreList();
        }
    },
    beforeMount() {
        this.getGroupData();
    },
    mounted() {
        this.disableBtn = false;
    }
};
</script>
<style lang="scss">
.store-estrutura-container {
    display: flex;
    .sf-right-container {
        height: 690px;
        background: #fff;
        flex: 1;
        padding: 0 24px;
        .sf-right-header {
            height: 70px;
            line-height: 70px;
            font-weight: 400;
            font-size: 14px;
            color: #606266;
            .title-span {
                color: #303133;
                font-size: 20px;
            }
            .handle-area {
                float: right;
                .hurdle {
                    width:1px;
                    height:16px;
                    display: inline-block;
                    background: #DCDFE6;
                    margin: 0 10px;
                    vertical-align: sub;
                }
            }
        }
        .tab-div {
            margin-bottom: 20px;
        }
        .sf-right-button-box {
            padding: 8px 15px;
            background: #EBEEF5;
            font-size: 0;
            .el-select--small {
                width: 120px;
                margin-right: 10px;
            }
            .el-button {
                margin-right: 10px;
            }
        }
        .pagination {
            margin-top: 30px;
            text-align: right;
        }
        .diy-table {
            .diy-header {
                display: flex;
                .name {
                    width: 130px;
                }
                .phone, .position {
                    width: 125px;
                }
                .status {
                    width: 100px;
                }
            }
            .clerk-obj-li {
                display: flex;
                padding: 10px 0;
                margin-bottom: 25px;
                line-height: 32px;
                &:last-child {
                    margin-bottom: 0;
                }
                .clerk-name {
                    width: 130px;
                    .manager {
                        display: inline-block;
                        width: 30px;
                        height: 15px;
                        line-height: 16px;
                        vertical-align: middle;
                        text-align: center;
                        background:rgba(247,203,39,1);
                        border-radius:2px;
                        color: #fff;
                        font-size: 10px;
                    }
                }
                .clerk-phone, .clerk-position {
                    width: 125px;
                }
                .clerk-status {
                    width: 100px;
                    .status-icon {
                        width: 34px;
                        height: 32px;
                        line-height: 32px;
                        text-align: center;
                        background: #ECF5FF;
                        border: 1px solid #D9ECFF;
                        border-radius: 4px;
                        &.is-active {
                            color: #409EFF;
                        }
                    }
                }
            }
        }
    }
}
</style>

