<template>
    <div class="page">
        <ul class="list">
            <li class="item" @click="jump('/pages/assistant/set-welcome')">
                <div class="name">群欢迎设置</div>
                <my-image
                    class="arrow"
                    src="/static/common/arrows_left.png"
                ></my-image>
            </li>
            <li class="item" @click="jump('/pages/assistant/set-time')">
                <div class="name">助理工作时间</div>
                <my-image
                    class="arrow"
                    src="/static/common/arrows_left.png"
                ></my-image>
            </li>
            <li class="item" @click="jump('/pages/assistant/set-platform')">
                <div class="name">群关联平台</div>
                <my-image
                    class="arrow"
                    src="/static/common/arrows_left.png"
                ></my-image>
            </li>
            <li class="item" v-if="groupData.status===2 ||groupData.status===1">
                <div class="name">启用助理</div>
                <!-- <my-image
                    class="arrow"
                    src="/static/common/arrows_left.png"
                ></my-image> -->
                <switch
                    :checked="switchChecked"
                    @change="switchChange"
                ></switch>
            </li>
            <li class="item" v-else>
                <div class="name">助理状态</div>
                <span class="gray-text" v-if="groupData.status===0">待关联</span>
                <span class="gray-text" v-if="groupData.status===3">助理被移除群</span>
            </li>
        </ul>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
export default {
    name: "",
    components: { MyImage },

    // 数据
    data() {
        return {
            switchChecked: false,
            groupData: {},
        };
    },

    onLoad(opts) {
        this.groupData = this.$store.state.common.groupData;
        // 判断只有1 和2 时可以设置
        this.switchChecked = this.groupData.status === 1 ? true : false;
    },
    async onShow() {
        this.api
            .get("/Group/GetGroup", { gid: this.groupData._id }, { pass: true })
            .then((res) => {
                this.$store.commit("common/update", {
                    groupData: res.data,
                });
                this.groupData = res.data;
            });
    },

    // 函数
    methods: {
        switchChange(e) {
            let detail = e.detail.value;
            this.switchChecked = detail;
            let data = {
                id: this.groupData._id,
                status: detail ? 1 : 2,
            };

            this.api
                .post("/Group/SetStatus", data, { pass: true })
                .then((res) => {
                    uni.hideLoading();
                    if (res.success) {
                        this.fn.showToast("设置成功");
                        this.groupData.status = this.curStatus;

                        this.$store.commit("common/update", {
                            groupData: this.groupData,
                        });
                    } else {
                        this.switchChecked = !this.switchChecked;
                        this.fn.showModal({
                            title: "设置失败",
                            content: "错误信息:" + res.message,
                            showCancel: false,
                        });
                    }
                });
        },
    },

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

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

<style lang="scss" scoped>
.page {
    min-height: 100vh;
    background-color: #fff;
}
.list {
    border-top: 1px solid #f1f1f1;
    .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);
        }
    }
}
switch {
    transform: scale(0.7);
}
.gray-text{
    color: #666;
}
</style>