<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="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">
                <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" size="small"><el-checkbox class="m-r-10" v-model="showChildMember" @change="setChildMemberShow"></el-checkbox><a class="a-href">显示子成员</a></el-button>
                </div>
                <el-table
                    height="445"
                    :data="storeList"
                    @selection-change="selectMember"
                    @row-click="linkToDetail">
                    <el-table-column
                        type="selection"
                        width="42"
                    ></el-table-column>
                    <el-table-column
                        label="门店"
                        prop="storeName"
                        width="140"
                    ></el-table-column>
                    <el-table-column
                        label="代码"
                        prop="storeCode"
                        width="140"
                    ></el-table-column>
                    <el-table-column
                        label="类型"
                        prop="storeType"
                        width="100"
                    >
                        <template slot-scope="scope">
                            {{typeArr[scope.row.storeType * 1 + 1]}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="地区"
                        prop="areaChainName"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                        label="所属分组"
                        prop="departName"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <!-- <el-table-column
                        label="状态"
                        prop="status"
                        width="100"
                    >
                        <template slot-scope="scope">
                            {{statusArr[scope.row.status]}}
                        </template>
                    </el-table-column> -->
                    <el-table-column
                        label="操作"
                        width="120"
                    >
                        <template slot-scope="scope">
                            <a class="a-href m-r-20" @click="editStore(scope.row)">编辑</a>
                            <a class="a-href" @click="delStore(scope.row)">删除</a>
                        </template>
                    </el-table-column>
                </el-table>
                <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>
            </template>
            <template v-else>
                <div class="sf-right-button-box">
                    <el-select v-model="storeType" size="small">
                        <el-option
                            v-for="(type, index) in typeArr"
                            :key="type"
                            :label="type"
                            :value="index">
                        </el-option>
                    </el-select>
                    <el-select v-model="storeStatus" size="small">
                        <el-option label="全部状态" :value="0"></el-option>
                        <el-option label="正常" :value="1"></el-option>
                        <el-option label="停业整顿" :value="3"></el-option>
                    </el-select>
                    <el-button style="vertical-align: middle;" class="J_show-children" size="small"><el-checkbox class="m-r-10" v-model="showChildMember" @change="setChildMemberShow"></el-checkbox><a class="a-href">显示子成员</a></el-button>
                </div>
                <el-table
                    height="445"
                    :data="storeList"
                    @row-click="linkToDetail">
                    <el-table-column
                        label="门店"
                        width="125"
                    >
                        <template slot-scope="scope">
                            <div>
                                <p class="m-b-10">{{scope.row.storeName}}</p>
                                <p><a class="a-href">新增门店</a></p>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="门店code"
                        prop="storeCode"
                        width="125"
                    ></el-table-column>
                    <el-table-column>
                        <template slot="header" slot-scope="scope">
                            <ul class="diy-header">
                                <li class="name">姓名</li>
                                <li class="phone">手机号</li>
                                <li class="position">职位</li>
                                <li class="status">状态</li>
                                <li>操作</li>
                            </ul>
                        </template>
                        <template slot-scope="scope">
                            <ul>
                                <li v-for="clerk in scope.row.clerks" :key="clerk.employeeClerkId" class="clerk-obj-li">
                                    <div class="clerk-name clerk-cell">
                                        <el-radio :value="1" :label="clerk.isManager" @change="changeManager(scope.row, clerk)">{{clerk.name}}</el-radio>
                                        <span class="manager" v-if="clerk.isManager == 1">店长</span>    
                                    </div>
                                    <div class="clerk-cell clerk-phone">{{clerk.phoneNumber}}</div>
                                    <div class="clerk-cell clerk-position">{{clerk.positionName}}</div>
                                    <div class="clerk-cell clerk-status">
                                        <div class="status-icon" :class="clerk.status == 1 ? 'is-active' : ''">
                                            <i class="iconfont icon-shouji"></i>
                                        </div>
                                    </div>
                                    <div class="clerk-cell clerk-handle">
                                        <a class="a-href m-r-20">编辑</a>
                                        <a class="a-href">删除</a>
                                    </div>
                                </li>
                            </ul>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </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: true,
            groupInfo: {
                groupName: "test",
                departmentId: "0001"
            },
            total: 100,
            showChildMember: false, // 是否显示子成员
            pageSize: 20,
            pageNumber: 1,
            showType: 1,
            storeList: [],
            typeArr: ["全部类型", "自营", "联营", "代理(加盟)", "代销", "托管"],
            statusArr: ["待审核", "正常", "审核失败", "停业整顿", "回收站", "删除"],
            selectedList: [],
            tableView: 2,
            storeType: 0,
            storeStatus: 0
        };
    },
    methods: {
        handleSearchKey() {},
        handleTreeSelection() {},
        handleEmployeeSelection() {},
        handleSizeChange() {},
        handleCurrentChange() {},
        switchView(view) {
            console.log(view);
            this.getStoreList();
        },
        editStore(store) {},
        delStore(store) {},
        setChildMemberShow() {
            this.getStoreList();
        },
        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 = {
                storeGroupId: _this.groupInfo.departmentId,
                showChild: _this.showChildMember * 1,
                showType: _this.tableView,
                pageSize: _this.pageSize,
                pageNumber: _this.pageNumber,
                status: 1
            };
            getRequest("/haoban-manage-web/store/findSimplePage", params)
            .then(res => {
                _this.total =  res.data.result.total;
                // _this.formatList(res.data.result.list);
                _this.storeList = res.data.result.list;
                _this.loading = false;
            })
            .catch(e => {
                console.log(e, "error");
                _this.loading = false;
            });
        },
        changeManager(row, clerk) {
            console.log(row, clerk);
            row.clerks.some(per => {
                if (per.isManager == 1) {
                    per.isManager = 0;
                }
                return per.isManager == 1;
            });
            clerk.isManager = 1;
        },
         /**
         * 树形菜单选择项处理
         */
        handleTreeSelection(obj, node) {
            console.log(obj, node, "selection");
            this.groupInfo.departmentId = obj.groupId;
            this.groupInfo.groupName = obj.name;
            this.getStoreList();
        },
        delStores() {},
        selectMember(selection) {
            this.selectedList = selection;
        },
        linkToDetail() {}
    },
    beforeMount() {
        this.getGroupData();
    },
    computed: {
        disabledDel() {
            return this.selectedList.length < 1 ;
        }
    }
};
</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-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>

