<template>
    <view class="message-info">
        <user-info></user-info>
        <info-container title="消息订阅">
            <template v-slot:title-right>
                <view class="title-right">
                    <view class="tr-left">
                        <view class="tl-txt" v-if="false">已绑定（微信用户）</view>
                        <view class="tl-tag">未绑定</view>
                    </view>
                    <view class="tr-status" v-if="isBind">解绑</view>
                    <view class="tr-status bind-active" v-else @click="bindBtn">去绑定</view>
                </view>
            </template>
            <template v-slot:content>
                <view class="mi-content">
                    <view class="mc-item">
                        <view class="mi-tit">订阅模块</view>
                        <view class="mi-ls">
                            <view class="ml-item" v-for="i in 5" :key="i">
                                <permission-item active></permission-item>
                            </view>
                        </view>
                    </view>
                    <view class="mc-item">
                        <view class="mi-tit">订阅门店</view>
                        <view class="mi-ls-2">
                            <view class="ml2-item" v-for="i in 3" :key="i">
                                <permission-item active></permission-item>
                            </view>
                        </view>
                    </view>
                </view>
            </template>
        </info-container>
        <fixed-button @click="changeMessageSubscriptions">修改消息订阅</fixed-button>

        <bind-modal ref="bindModal"></bind-modal>
    </view>
</template>

<script>
import infoContainer from '../../components/info_container.vue';
import user_info from "../../components/user_info.vue";
import fixedButton from "../../components/fixed_button.vue";
import permission_item from '../../components/permission_item.vue';
import bind_modal from "./modules/info/bind_modal.vue";
import { routeTo } from "@/utils/util";
export default {
    components: {
        'info-container': infoContainer,
        'user-info': user_info,
        'fixed-button': fixedButton,
        'permission-item': permission_item,
        'bind-modal': bind_modal
    },
    data(){
        return {
            isBind: false,
            brand_id: ''
        }
    },
    onLoad(options){
        this.brand_id = options?.brand_id || '';
    },
    methods: {
        bindBtn(){
            this.$refs?.bindModal?.show?.();
        },
        changeMessageSubscriptions(){
            routeTo(`/subpackage/account/pages/message/edit?brand_id=${this.brand_id}`, 'nT')
        }

    }
}
</script>

<style lang="scss">
.title-right{
    @include ctf(space-between);
    .tr-left{
        flex-grow: 1;
        .tl-txt{
            @include flcw(24upx, 34upx, #9C9C9F);
            @include tHide;
        }
        .tl-tag{
            display: inline-block;
            padding: 0 8upx;
            background: #EA5061;
            border-radius: 6upx;
            @include flcw(22upx, 32upx, #fff);
        }
    }
    .tr-status{
        flex-shrink: 0;
        margin-left: 10upx;
        @include flcw(24upx, 34upx, #EA5061);
        &.bind-active{
            color: $mColor;
        }
    }
}
.mi-content{
    padding: 0 20upx;
    .mc-item + .mc-item{
        margin-top: 30upx;
    }
    .mi-tit{
        @include flcw(28upx, 40upx, #1A1A1A);
    }
    .mi-ls{
        display: flex;
        flex-wrap: wrap;
        padding-top: 30upx;
        padding-bottom: 30upx;
        border-bottom: 2upx solid #D8D8D8;
        .ml-item{
            flex-shrink: 0;
            flex-grow: 0;
            width: 50%;
            &:nth-child(n + 3){
                margin-top: 30upx;
            }
        }
    }
    .mi-ls-2{
        padding-top: 30upx;
        .ml2-item + .ml2-item{
            margin-top: 30upx;
        }
    }
}
</style>