<template>
	<view class="xiaoxi">
		<view class="xiaoxi-item u-flex u-row-between">
			<view class="u-flex-col">
				<text class="text1">聊天消息推送</text>
				<text class="text2">接收聊天消息通知</text>
				<text class="text3">关闭后将不再向您推送聊天消息通知</text>
			</view>
			<u-switch @change='change1' v-model="is_chat_notification" active-color="#0C66C2"></u-switch>
		</view>
		<view class="xiaoxi-item u-flex u-row-between">
			<view class="u-flex-col">
				<text class="text1">求职推送</text>
				<text class="text2">投递反馈通知</text>
				<text class="text3">投递反馈通知</text>
			</view>
			<u-switch @change='change2' v-model="is_forum_notification" active-color="#0C66C2"></u-switch>
		</view>
		<view class="xiaoxi-item">
			<view class="text1">互动/资讯推送</view>
			<view class="u-flex u-row-between">
				<text class="text2">资讯推荐</text>
				<u-switch @change='change3' v-model="is_info_notification" active-color="#0C66C2"></u-switch>
			</view>
			<view class="text3" style="margin-bottom: 44rpx;">关闭后将不再向您推送最新发布的资讯通知</view>
			<view class="u-flex u-row-between">
				<text class="text2">内容互动</text>
				<u-switch @change='change4' v-model="is_order_notification" active-color="#0C66C2"></u-switch>
			</view>
			<view class="text3">关闭后将不再向您推送点赞、评论和关注您等互动消息的通知</view>
		</view>
	</view>
</template>

<script>
	import {
		index,
		updateNotificationSwitch
	} from '@/units/inquire.js'
	export default {
		data() {
			return {
				is_chat_notification: false,
				is_forum_notification: false,
				is_info_notification: false,
				is_order_notification: false
			}
		},
		onLoad() {
			this.index()
		},
		methods: {
			// is_chat_notification	       integer	否	是否开启接受聊天消息通知:0.关闭, 1.开启
			// is_order_notification	       integer	否	是否开启职位反馈通知:0.关闭, 1.开启
			// is_info_notification	         integer	否	是否开启资讯推荐通知:0.关闭, 1.开启
			// is_forum_notification	integer	否	是否开启论坛内容互动通知:0.关闭, 1.开启
			index() {
				index().then(res => {
					this.is_chat_notification = res.data.is_chat_notification == 0 ? false : true
					this.is_order_notification = res.data.is_forum_notification == 0 ? false : true
					this.is_info_notification = res.data.is_info_notification == 0 ? false : true
					this.is_forum_notification = res.data.is_order_notification == 0 ? false : true
				})
			},
			change1() {
				updateNotificationSwitch({
					is_chat_notification: this.is_chat_notification
				}).then(res => {
					this.$u.toast('修改成功')
				})
			},
			change2() {
				updateNotificationSwitch({
					is_order_notification: this.is_order_notification
				}).then(res => {
					this.$u.toast('修改成功')
				})
			},
			change3() {
				updateNotificationSwitch({
					is_info_notification: this.is_info_notification
				}).then(res => {
					this.$u.toast('修改成功')
				})
			},
			change4() {
				updateNotificationSwitch({
					is_forum_notification: this.is_forum_notification
				}).then(res => {
					this.$u.toast('修改成功')
				})
			}
		}
	}
</script>

<style lang="scss">
	.xiaoxi {
		.xiaoxi-item {
			width: 750rpx;
			background: #FFFFFF;
			margin-bottom: 20rpx;
			padding: 32rpx 32rpx 28rpx 32rpx;
			box-sizing: border-box;

			.text1 {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(34, 34, 34, 0.5);
				margin-bottom: 24rpx;
			}

			.text2 {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				margin-bottom: 12rpx;
			}

			.text3 {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(34, 34, 34, 0.5);
			}
		}
	}

	page {
		background-color: #F3F3F3;
	}
</style>