<template>
    <nav-bar :navbar-data="navbarData" ref="navBar" />
    <view class="message-subscription"
        :style="{ marginTop: height +'rpx', height: 'calc(100vh - '+ height +'px)' }">
        <view class="message-subscription-title">订阅消息将不定时为您推送优质内容</view>
        <view class="message-subscription-content">
            <view class="message-subscription-content-item border-bottom-after" v-for="(item, index) in subscribeData"
                :key="index">
                <view class="message-subscription-content-left">
                    {{ item.templateDesc }}
                </view>
                <view class="message-subscription-content-right">
                    <text>{{ item.checked ? '已订阅' : '未订阅' }}</text>
                    <van-switch :checked="item.checked" @change="handleSwitchChange(item)" />
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import $http from "@/utils/https";
import Util from '@/utils/utils';
import httpConfig from '@/utils/httpConfig'
import navBar from '@/components/navBar/index'
import VanSwitch from '@/components/switch/index'
const app = getApp()
export default {
    components: {
        'nav-bar': navBar,
        'van-switch': VanSwitch
    },
    data() {
        return {
            navbarData: {
                isGoHome: true,
                isGoBack: true,
                title: '消息订阅', //导航栏 中间的标题
            },
            height: app.globalData.height,
            subscribeData: []
        }
    },
    onLoad: function (options) {
        this.getSubscribeData();
    },
    methods: {
        // 获取消息订阅内容
        getSubscribeData() {
            let userData = this.$cache.get('userData');
            let data = {
                params: [{
                    pubAccCode: userData.pubAccCode || ''
                }]
            }
            $http.post("urlS", this, {
                code: "01050006",
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        let subscribeData = res.result.templateList && res.result.templateList instanceof Array ? res.result.templateList : [];
                        for (var i = 0; i < subscribeData.length; i++) {
                            subscribeData[i].checked = subscribeData[i].status === 'Y' ? true : false;
                        }
                        this.setData({ subscribeData })
                    } else {
                        this.setData({ subscribeData: [] })
                    }
                }
            });
        },

        // 微信消息订阅
        handleSwitchChange(itemData) {
            let { subscribeData } = this;
            let _this = this;
            uni.requestSubscribeMessage({
                tmplIds: [itemData.templateID],
                success(res) {
                    console.log(res)
                    let checked = false;
                    if (res[itemData.templateID] === "reject") {
                        checked = false;
                    } else if (res[itemData.templateID] === "accept") {
                        checked = true;
                    }
                    itemData.checked = checked;
                    subscribeData = subscribeData.map(item => item.templateID === itemData.templateID ? itemData : item);
                    _this.setData({ subscribeData }, () => {
                        _this.saveJurisdiction(itemData)
                    })
                },
                fail(error) {
                    console.log(error)
                }
            })
        },

        // 保存小程序消息权限
        saveJurisdiction(item) {
            let userData = this.$cache.get('userData');
            let data = {
                params: [{
                    pubAccCode: userData.pubAccCode || '',
                    templateID: item.templateID || '',
                    status: item.checked ? 'Y' : 'N'
                }]
            }
            $http.post("urlS", this, {
                code: "01050007",
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        console.log("权限保存成功");
                    } else {
                        console.log("权限保存失败");
                    }
                }
            })
        },
    }
}
</script>

<style>
.message-subscription {
  width: 100%;
  padding: 0 24rpx;
  box-sizing: border-box;
}

.message-subscription-title {
  height: 90rpx;
  line-height: 90rpx;
  font-size: 28rpx;
  color: #666;

}

.message-subscription-content {
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0, .5);
}

.message-subscription-content-item {
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0 24rpx;
  box-sizing: border-box;
  height: 100rpx;
  align-items: center;
}

.message-subscription-content-item:first-child {
  border-radius: 10rpx 10rpx 0 0;
}

.message-subscription-content-item:last-child {
  border-radius: 0 0 10rpx 10rpx;
}

.message-subscription-content-left {
  font-size: 32rpx;
  color: #333;
}

.message-subscription-content-right {
  display: flex;
  align-items: center;
}

.message-subscription-content-right text {
  color: #999;
  font-size: 28rpx;
  margin-right: 12rpx;
}
</style>