<template>
    <div class="store-estrutura-container">
        <search-menu
            :treeData="menuData"
            :searchResult="searchResult"
            @handleSearchKey="handleSearchKey"
            @handleTreeSelection="handleTreeSelection"
            @handleEmployeeSelection="handleEmployeeSelection">
        </search-menu>
        <div class="sf-right-container"
            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="sf-right-button-box">
                <el-button type="primary">添加门店</el-button>
                <a><el-button>批量导入/导出</el-button></a>
                <el-button type="danger" plain @click="delStores" :disabled="disabledDel">批量删除</el-button>
                <el-button class="J_show-children"><el-checkbox class="m-r-10" v-model="showChildMember" @change="setChildMemberShow"></el-checkbox><a class="a-href">显示子成员</a></el-button>
            </div>
            <el-table
                height="495"
                :data="storeList"
                @selection-change="selectMember"
                @row-click="linkToDetail"
            >
                <el-table-column
                    type="selection"
                    width="42"
                ></el-table-column>
                <el-table-column
                    label="门店"
                    prop="storeName"
                ></el-table-column>
                <el-table-column
                    label="代码"
                    prop="storeCode"
                    width="80"
                ></el-table-column>
                <el-table-column
                    label="类型"
                    prop="storeType"
                    width="50"
                >
                    <template slot-scope="scope">
                        {{typeArr[scope.row.storeType]}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="地区"
                    prop="areaChainName"
                ></el-table-column>
                <el-table-column
                    label="所属分组"
                    prop="groupChainName"
                ></el-table-column>
                <el-table-column
                    label="状态"
                    prop="status"
                    width="80"
                >
                    <template slot-scope="scope">
                        {{statusArr[scope.row.status]}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                >
                    <template slot-scope="scope">
                        <a class="a-href" @click="editStore(scope.row)">编辑</a>
                        <a class="a-href" @click="delStore(scope.row)">删除</a>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import searchMenu from "components/contacts/searchMenu";
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
export default {
    name: "storeEstruturaContainer",
    components: {
        searchMenu
    },
    data() {
        return {
            menuData: [],
            searchResult: {},
            loading: false,
            groupInfo: {
                groupName: "test",
                departmentId: "0001"
            },
            total: 100,
            showChildMember: false,
            pageSize: 100,
            pageNumber: 1,
            showType: 1,
            storeList: [],
            typeArr: ["自营", "联营", "代理(加盟)", "代销", "托管"],
            statusArr: ["待审核", "正常", "审核失败", "停业整顿", "回收站", "删除"]
        };
    },
    methods: {
        handleSearchKey() {},
        handleTreeSelection() {},
        handleEmployeeSelection() {},
        editStore(store) {},
        delStore(store) {},
        getGroupData() {
            let _this = this;
            let params = {
                isStoreGroup: 1
            };
            getRequest("/haoban-manage-web/dept/deptList", params)
            .then(res => {
                console.log(res, "groupData");
                _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();
            })
            .catch(e => {
                console.log(e, "error");
            });
        },
        getStoreList() {
            let _this = this;
            let params = {
                departmentId: _this.groupInfo.departmentId,
                showChild: _this.showChildMember * 1,
                showType: _this.showType,
                pageSize: _this.pageSize,
                pageSize: _this.pageNumber,
                status: 1
            };
            getRequest("/haoban-manage-web/store/findSimplePage", params)
            .then(res => {
                console.log(res, "storeList");
                // _this.employeeList = res.data.result.list;
                _this.total =  res.data.result.total;
                // _this.loading = false;
            })
            .catch(e => {
                console.log(e, "error");
                _this.loading = false;
            });
        },
         /**
         * 树形菜单选择项处理
         */
        handleTreeSelection(obj, node) {
            console.log(obj, node, "selection");
            this.groupInfo.departmentId = obj.groupId;
            this.groupInfo.groupName = obj.name;
            this.getStoreList();
        },
        delStores() {},
        selectMember() {},
        linkToDetail() {}
    },
    beforeMount() {
        this.getGroupData();
    }
};
</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;
                }
            }
        }
        .sf-right-button-box {
            padding: 8px 15px;
            background: #EBEEF5;
        }
    }
}
</style>

