<template>
    <div class="container">
        <div class="container-box">
            <div class="box-level1" @click="jumpto(1)">{{title1.roleName}} ({{title1.cnt}}) 人</div>
            <div class="top-box">
                <div class="box-level2" v-for="item in allList">
                    <span v-if="item.roleName != '总经理直辖'" @click="jumpto(2,item,1,1)">{{item.roleName}} ({{item.cnt}}) 人</span>
                    <span v-if="item.roleName == '总经理直辖'" style="background: #fff;height: 41px;"></span>
                    <div class="box-level3" v-for="items in item.thirdList">
                        <span @click="jumpto(2,items,1,1)">{{items.roleName}} ({{items.cnt}}) 人</span>
                    </div>
                </div>
            </div>

            <div class="box-level1" @click="infochose(1)">{{title2.roleName}} ({{title2.cnt}}) 人</div>
            <div class="top-box">
                <div class="box-level2" v-for="item in regionList">
                    <span @click="jumpto(2,item,2,1)">{{item.roleName}} ({{item.cnt}}) 人</span>
                    <div class="box-level3" v-for="items in item.thirdList">
                        <span @click="jumpto(2,items,2,1)">{{items.roleName}} ({{items.cnt}}) 人</span>
                    </div>
                </div>
            </div>

            <div class="box-level1" @click="infochose(2)">{{title3.roleName}} ({{title3.cnt}}) 人</div>
            <div class="top-box">
                <div class="box-level2" v-for="item in areaList">
                    <span @click="jumpto(2,item,3,1)">{{item.roleName}} ({{item.cnt}}) 人</span>
                    <div class="box-level3" v-for="items in item.thirdList">
                        <span @click="jumpto(2,items,3,1)">{{items.roleName}} ({{items.cnt}}) 人</span>
                    </div>
                </div>
            </div>
        </div>


        <el-dialog title="区域选择" :visible.sync="dialogStatus" width="50%" :destroy-on-close="true"
            :modal-append-to-body="false" :close-on-click-modal="false">
            <div style="margin-bottom: 20px;padding-bottom: 30px;">
                <div style="height: 50vh;overflow-y:scroll;">
                    <el-table class="com-table" :data="tableData" tooltip-effect="dark" size="small" border
                        style="width: 100%">
                        <el-table-column prop="roleName" label="地市名称">
                        </el-table-column>
                        <el-table-column prop="cnt" label="人数">
                        </el-table-column>
                        <el-table-column label="操作" width="220px" align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" @click="dialogCheck(scope.row)">查看组织架构</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </el-dialog>
        <el-dialog title="区域选择" :visible.sync="dialogStatust" width="50%" :destroy-on-close="true"
            :modal-append-to-body="false" :close-on-click-modal="false">
            <div style="margin-bottom: 20px;padding-bottom: 30px;">
                <div style="height: 50vh;overflow-y:scroll;">
                    <el-table class="com-table" :data="tableDatat" tooltip-effect="dark" size="small" border
                        style="width: 100%">
                        <el-table-column prop="roleName" label="区县名称">
                        </el-table-column>
                        <el-table-column prop="father" label="所属地市">
                        </el-table-column>
                        <el-table-column prop="cnt" label="人数">
                        </el-table-column>
                        <el-table-column label="操作" width="220px" align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" @click="dialogCheckt(scope.row)">查看组织架构
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import myMessage from "../../../components/myMessage.vue"

    export default {
        components: {
            myMessage,
        },
        data() {
            return {
                tooltit: '组织架构',
                onests: 1,
                twosts: 1,
                allList: [],
                regionList: [],
                areaList: [],
                regionid: '',
                areaId: '',
                dialogStatus: false,
                tableData: [],
                dialogStatust: false,
                tableDatat: [],
                title1: {},
                title2: {},
                title3: {},
                companyFlag: 0
            }
        },
        methods: {
            infochose(v) {
                if (v == 1) {
                    if (this.onests == 1) {
                        this.dialogStatus = true;
                        this.$http({
                            url: "/market/cMkOrgRole/queryCitySumList",
                            method: "post",
                            headers: {
                                "Content-Type": "application/json",
                            },
                            data: {},
                        }).then((res) => {
                            this.tableData = res.data;
                        });
                    } else {
                        this.jumpto(2, {
                            roleId: this.regionid
                        }, 2);
                    }
                } else {
                    if (this.twosts == 1) {
                        this.dialogStatust = true;
                        //获取地市下的区县
                        let p = {};
                        if (this.regionid) {
                            p.parentId = this.regionid;
                        }
                        this.$http({
                            url: "/market/cMkOrgRole/queryAreaSumList",
                            method: "post",
                            headers: {
                                "Content-Type": "application/json",
                            },
                            data: p,
                        }).then((res) => {
                            this.tableDatat = res.data;
                        });
                    } else {
                        this.jumpto(2, {
                            roleId: this.areaId
                        }, 3);
                    }
                }
            },
            dialogCheck(v) {
                //获取地市更新区域
                this.onests = 2;
                this.dialogStatus = false;
                this.getList2(v.roleId);
                this.regionid = v.roleId;
                this.getList3();
            },
            dialogCheckt(v) {
                //获取地市更新区域
                this.twosts = 2;
                this.dialogStatust = false;
                this.getList3(v.roleId)
            },
            jumpto(v, n, t, s) {
                if (this.companyFlag == 1) {
                    if (t == 1 || v == 1) {
                        return
                    }
                }
                if (this.companyFlag == 2) {
                    if (t == 1 || t == 2 || v == 1) {
                        return
                    }
                }
                let id = '';
                let x = '';
                if(t == 2){
                    x = this.regionid
                }else if(t == 3){
                    x = this.areaId
                }
                if (v == 2) {
                    id = n.roleId + ',' + t + ',' + s + ',' + x + ',' + this.regionid;
                }
                this.$router.push({
                    path: "/personinfo?id=" + id,
                    query: {
                        id: id,
                    }
                });
                this.setabList("人员信息", "/personinfo?id=" + id);
            },
            setabList(n, p) {
                let params = {
                    children: "",
                    name: n,
                    rountPath: p,
                    target: "_self",
                };
                for (let i = 0; i < this.$store.state.tabList.length; i++) {
                    if (this.$store.state.tabList[i].name === params.name) {
                        this.$store.state.tabList[i] = params;
                    }
                }
                let set = new Set([...this.$store.state.tabList, params]);
                set.add(params);
                this.$store.commit("setDefaultActive", params.rountPath);
                this.$store.commit("setTabList", Array.from(set));
            },
            //获取列表
            getList() {
                let _this = this;
                this.$http({
                    url: "/market/cMkOrgRole/queryProvOrgList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {},
                }).then((res) => {
                    this.title1 = res.data.body.title;
                    this.allList = res.data.body.content.secondList;
                });
            },
            getList2(v) {
                let _this = this;
                let p = {};
                if (v) {
                    p.id = v;
                    this.regionid = v;
                }
                this.$http({
                    url: "/market/cMkOrgRole/queryCityOrgList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: p,
                }).then((res) => {
                    this.title2 = res.data.body.title;
                    this.regionList = res.data.body.content.secondList;
                    if(v == undefined){
                        this.regionid = res.data.body.title.roleId
                    }
                });
            },
            getList3(v) {
                let _this = this;
                let p = {};
                if (v) {
                    p.id = v;
                    this.areaId = v;
                }
                if (this.regionid) {
                    p.parentId = this.regionid;
                }
                this.$http({
                    url: "/market/cMkOrgRole/queryAreaOrgList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: p,
                }).then((res) => {
                    this.title3 = res.data.body.title;
                    this.areaList = res.data.body.content.secondList;
                    if(v == undefined){
                        this.areaId = res.data.body.title.roleId
                        console.log(this.areaId)
                    }
                });
            },
            getUser() {
                this.userInfo = JSON.parse(window.sessionStorage.userInfo);
                this.$http({
                    url: "/sysmgr/csysuserinfo/queryUserInfoByLoginNo",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {},
                }).then((res) => {
                    this.companyFlag = res.data.companyFlag
                    if(this.companyFlag == 1){
                        this.onests = 2;
                    }else if(this.companyFlag == 2){
                        this.onests = 2;
                        this.twosts = 2;
                    }
                    this.getList();
                    this.getList2();
                    this.getList3();
                });
            }
        },
        mounted() {
            this.getUser();
        },
        created() {

        }
    }
</script>
<style scoped lang="scss">
    .kong{
        background: #fff !important;
    }
    .top-box {
        width: 100%;
        overflow-x: scroll;
        white-space: nowrap;
        margin-bottom: 20px;
        text-align: center;
        height: calc(30vh - 100px);

        .box-level2 {
            // border: 1px solid red;
            padding: 12px 0;
            text-align: center;
            font-size: 16px;
            display: inline-block;
            overflow: hidden;
            margin-right: 20px;
            vertical-align: top;

            span {
                background-color: #BDD7EE;
                display: block;
                width: 100%;
                padding: 10px;
                margin-bottom: 20px;
                height: 41px;
            }

            .box-level3 {
                background-color: #FFF2CD;
                padding: 12px 0;
                text-align: center;
                font-size: 16px;
                display: inline-block;
                padding: 5px;
                margin-right: 10px;

                span {
                    background-color: #FFF2CD;
                    margin-bottom: 0px;
                }
            }

            .box-level3:last-child {
                margin-right: 0px;
            }
        }

        .box-level2:last-child {
            margin-right: 0px;
        }
    }

    .box-level1 {
        background-color: #32CCFE;
        padding: 12px 0;
        text-align: center;
        font-size: 16px;
    }
</style>
