<template>
    <div class="page tabbar-page">
        <manage-nav :shopId="shopId" :title="'群助理'"></manage-nav>
        <div class="page-main">
            <div class="filter">
                <ul class="date-list">
                    <li @click="tabClick(0)" :class="{ on: tabIndex === 0 }">
                        我的群
                    </li>
                    <li @click="tabClick(1)" :class="{ on: tabIndex === 1 }">
                        我的平台
                    </li>
                </ul>
            </div>
            <!-- 群 -->
            <div v-if="tabIndex === 0">
                <ul class="group-list">
                    <block v-for="data of dataList" :key="data._id">
                        <li class="item" @click="jumpGroup(data)">
                            <div class="name">
                                {{ data.name | maxTit }}
                            </div>
                            <my-image
                                class="arrow"
                                src="/static/common/arrows_left.png"
                            ></my-image>
                        </li>
                    </block>
                </ul>
                <button
                    class="btn"
                    @click="
                        jump({
                            path: '/pages/assistant/add',
                        })
                    "
                >
                    添加群
                </button>
            </div>

            <!-- 平台 -->
            <div v-if="tabIndex === 1">
                <ul class="group-list">
                    <li
                        class="item"
                        v-for="item of platformList"
                        :key="item.name"
                        @click="jumpPlatform(item)"
                    >
                        <div class="name">
                            {{ item.name | maxTit }}
                        </div>
                        <my-image
                            class="arrow"
                            src="/static/common/arrows_left.png"
                        ></my-image>
                    </li>
                </ul>

                <button
                    class="btn"
                    @click="
                        jump({
                            path: '/pages/assistant/add-platform',
                        })
                    "
                >
                    添加平台
                </button>
            </div>
        </div>

        <!-- <div class="layout" @click="layout">退出登录</div> -->
        <wyg-bottom-tab
            ref="tabbar"
            :tabIndex="3"
            :tabListParent="tabList"
        ></wyg-bottom-tab>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
import wygBottomTab from "../../components/wyg-bottom-tab/wyg-bottom-tab";
import ManageNav from "../../components/layout/manage-nav";

export default {
    name: "",
    components: { MyImage, wygBottomTab, ManageNav },
    // 数据
    data() {
        return {
            tabIndex: 0, // 0 1
            pageIndex: 1,
            dataList: [],
            dataEnd: false,
            platformList: [],
            shopId: "",
        };
    },
    filters: {
        maxTit(v) {
            if (v && v.length > 16) {
                return v.substr(0, 16) + "...";
            } else {
                return v || "[未命名群]";
            }
        },
    },
    onLoad() {},
    async onShow() {
        this.$refs.tabbar.setIndex(3);
        this.checkStatus();
        if (this.tabIndex === 0) {
            this.getList();
        } else {
            this.getPlatformList();
        }
    },

    // onPullDownRefresh() {
    //     this.getList();
    // },

    // 函数
    methods: {
        checkStatus() {
            /* 
                闭店中 = 0,  // 已开通，店铺未营业
                营业中 = 1,  // 店铺营业中
                待审核 = 2,  // 通过审核后，状态改为闭店中
                待开通 = 3,  // 通过审核，等待开通
                未通过审核 = 4  // 未通过审核
            */
            this.api.get("/Shop/checkStatus").then((res) => {
                if (res.data === 1 || res.data === 0) {
                    this.api
                        .get("/Shop/GetInfo", {}, { pass: true })
                        .then((infoRes) => {
                            this.shopId = infoRes.data.id;
                        });
                }
            });
        },
        getPlatformList() {
            uni.showLoading({
                title: "加载中...",
            });
            this.api.get("/Group/GetPlatformList").then((res) => {
                uni.hideLoading();
                this.platformList = res.data;
            });
        },

        getList() {
            this.pageIndex = 1;
            let sendData = {
                pageIndex: this.pageIndex,
                pageSize: 20,
            };
            uni.showLoading({
                title: "加载中...",
            });
            this.api.get("/Group/GetList", sendData).then((res) => {
                uni.hideLoading();
                this.dataList = res.data.data;
            });
        },

        getListMore() {
            if (this.dataEnd) {
                return;
            }
            this.pageIndex++;
            let sendData = {
                pageIndex: this.pageIndex,
                pageSize: 20,
            };
            this.api.get("/Group/GetList", sendData).then((res) => {
                uni.hideLoading();
                this.dataList = [...this.dataList, ...res.data.data];
                if (res.data.data.length === 0) {
                    this.dataEnd = true;
                }
            });
        },

        tabClick(index) {
            console.log(index);
            this.tabIndex = index;
            if (index === 0) {
                this.getList();
            } else {
                this.getPlatformList();
            }
        },
        addGroup() {},

        jumpGroup(val) {
            this.$store.commit("common/update", {
                groupData: val,
            });
            this.router.push({
                path: "/pages/assistant/setting",
            });
        },
        jumpPlatform(val) {
            console.log(val);
            this.$store.commit("common/update", {
                platformData: val,
            });
            this.router.push({
                path: "/pages/assistant/setting2",
            });
        },

        layout() {
            this.$store.commit("user/logout", null);
            this.router.push({
                path: "/pages/index/login",
                isTabBar: true,
            });
        },
    },

    // 数据计算
    computed: {
        tabList() {
            return this.$store.state.common.tabList;
        },
    },

    // 数据监听
    watch: {},
};
</script>


<style lang="scss" scoped>
.tabbar-page {
    height: 100vh;
}
.page-main {
    overflow: auto;
    max-height: 100%;
}
.filter {
    padding: px(30);
}
.date-list {
    display: flex;
    justify-content: space-between;
    font-size: px(46);
    text-align: center;
    background-color: #fff;
    li {
        border: 1px solid #f1f1f1;
        padding: px(25) 0;
        width: 50%;
        flex-shrink: 0;
        &.on {
            border-color: rgb(0, 188, 38);
            color: rgb(0, 188, 38);
        }
        &:first-child {
            border-radius: px(20) 0 0 px(20);
        }
        &:last-child {
            border-radius: 0 px(20) px(20) 0;
        }
    }
}
.group-list {
    border-top: 1px solid #f1f1f1;
    background-color: #fff;
    .item {
        height: px(120);
        padding: 0 px(35);
        font-size: px(44);
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f1f1f1;
    }
    .arrow {
        width: px(40);
        height: px(40);
        flex-shrink: 0;
        transform: rotate(180deg);
        /deep/ img {
            width: px(40);
            height: px(40);
        }
    }
}
.add-group {
    position: fixed;
    bottom: 3.5rem;
    left: px(30);
    right: px(30);
    z-index: 10;
    color: #fff;
    background-color: rgb(0, 188, 38);
    font-size: px(44);
}
.layout {
    color: #666;
    position: fixed;
    bottom: 3.6rem;
    left: px(30);
    right: px(30);
    z-index: 10;
    font-size: px(44);
    text-align: center;
    height: px(80);
}
.page {
    padding-bottom: 9rem;
}
.btn {
    position: fixed;
    bottom: 3.5rem;
    left: px(30);
    right: px(30);
    z-index: 10;
    color: #fff;
    background-color: rgb(0, 188, 38);
    font-size: px(44);
}
</style>