<template>
	<view class="dingyue-box">

		<view class="line-box">
			<view class="dl-title">领域</view>
			<view class="dl-content">
				<view class="line-row" v-for="(item,index) in bloggerTypeList">
					<view v-for="(t,i) in item"
						:class="dataObj.bloggerTypeCode.indexOf(t.code)>-1?'line-item click':'line-item'"
						@click="changeChooseValue(t,'bloggerTypeCode')">
						{{t.title}}
					</view>
					<view style="clear: both;"></view>
				</view>
			</view>
		</view>
		<view class="line-box">
			<view class="dl-title">平台</view>
			<view class="dl-content">
				<view class="line-row" v-for="(item,index) in platformList">
					<view v-for="(t,i) in item"
						:class="dataObj.platformCode.indexOf(t.code)>-1?'line-item click':'line-item'"
						@click="changeChooseValue(t,'platformCode')">
						{{t.title}}
					</view>
					<view style="clear: both;"></view>
				</view>
			</view>
		</view>
		<view class="line-box">
			<view class="dl-title">通告类型</view>
			<view class="dl-content">
				<view class="line-row" v-for="(item,index) in noticeTypeList">
					<view v-for="(t,i) in item"
						:class="dataObj.noticeTypeCode.indexOf(t.code)>-1?'line-item click':'line-item'"
						@click="changeChooseValue(t,'noticeTypeCode')">
						{{t.title}}
					</view>
					<view style="clear: both;"></view>
				</view>
			</view>
		</view>
		<view class="line-box">
			<view class="dl-title">关键词<text>包含以下关键词的通告将被收入订阅</text></view>
			<view class="dl-content">
				<view class="line-row">
					<view class="keywords-item" v-for="(item,index) in dataObj.keywordsList">
						{{checkKeywords(item)}} <uni-icons class="icon-text" type="closeempty" size="13"
							@click="delKeywords(item)"></uni-icons>
					</view>
					<view class="keywords-item" @click="addNewKeys()">
						<uni-icons type="plusempty" size="13"></uni-icons>
					</view>
					<view style="clear: both;"></view>
				</view>
			</view>
		</view>
		<view class="line-box">
			<view class="dl-title">粉丝</view>
			<view class="dl-content">
				<view class="line-row">
					<uni-data-select v-model="dataObj.fansLimit" :localdata="range" @change="change($event,'fans')"
						:clear="false"></uni-data-select>
				</view>
				<view class="line-row" v-show="dataObj.fansLimit">
					<view class="dl-drawer-item">
						<input class="uni-input" v-model="dataObj.fansDown" type="digit" placeholder="最低" />
						<view>—</view>
						<input class="uni-input" v-model="dataObj.fansUp" type="digit" placeholder="最高" />
					</view>
				</view>
			</view>
		</view>
		<view class="line-box">
			<view class="dl-title">奖励</view>
			<view class="dl-content">
				<view class="line-row" v-for="(item,index) in rewardTypeList">
					<view v-for="(t,i) in item"
						:class="dataObj.rewardTypeCode.indexOf(t.code)>-1?'line-item click':'line-item'"
						@click="changeChooseValue(t,'rewardTypeCode')">
						{{t.title}}
					</view>
					<view style="clear: both;"></view>
				</view>
			</view>
		</view>
		<view class="line-box">
			<view class="dl-title">稿费要求</view>
			<view class="dl-content">
				<view class="line-row">
					<uni-data-select v-model="dataObj.feeLimit" :localdata="range" @change="change($event,'fee')"
						:clear="false"></uni-data-select>
				</view>
				<view class="line-row" v-show="dataObj.feeLimit">
					<view class="dl-drawer-item">
						<input class="uni-input" v-model="dataObj.feeDown" type="digit" placeholder="最低" />
						<view>—</view>
						<input class="uni-input" v-model="dataObj.feeUp" type="digit" placeholder="最高" />
					</view>
				</view>
			</view>
		</view>
		<view class="line-box">
			<view class="dl-title">推送</view>
			<view class="dl-content">
				<view class="line-row">
					<view class="seting-view"><text>符合订阅设置的新通告</text>
						<switch v-if="dataObj.newNotice" style="float: right;display: flex;" checked color="#FC1F3E"
							@change="switchChange($event,'newNotice')" />
						<switch v-else style="float: right;display: flex;" color="#FC1F3E"
							@change="switchChange($event,'newNotice')" />
					</view>
					<view class="seting-view"><text>订阅通告主新通告</text>
						<switch v-if="dataObj.forkNotice" style="float: right;display: flex;" checked color="#FC1F3E"
							@change="switchChange($event,'forkNotice')" />
						<switch v-else style="float: right;display: flex;" color="#FC1F3E"
							@change="switchChange($event,'forkNotice')" />
					</view>
				</view>
			</view>
		</view>
		<view class="line-box" style="align-items: center;">
			<view class="submit-box" @click="saveSet()">保存</view>
		</view>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog" :key="keywordsValue">
			<uni-popup-dialog ref="inputClose" mode="input" title="新增关键词" placeholder="请输入关键词"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getCatgByCode
	} from '@/api/system/config.js'
	import {
		getSubscribeSet,
		saveSubscribe
	} from '@/api/business/subscribeSet.js'
	export default {
		data() {
			return {
				//一行显示几个
				showNum: 4,
				//平台列表
				platformList: [],
				//博主分类
				bloggerTypeList: [],
				//通告类型--这个只能固定死
				noticeTypeList: [
					[{
						code: "",
						title: "不限"
					}, {
						code: "money",
						title: "高奖励"
					}, {
						code: "gift",
						title: "品牌置换"
					}]
				],
				//奖励--这个只能固定死
				rewardTypeList: [
					[{
						code: "",
						title: "不限"
					}, {
						code: "money",
						title: "稿费"
					}, {
						code: "gift",
						title: "赠品"
					}]
				],
				//订阅设置对象---后端存储
				dataObj: {
					bloggerTypeCode: [],
					platformCode: [],
					noticeTypeCode: [],
					//关键词集和
					keywordsList: [],
					rewardTypeCode: [],
					//粉丝是否限制
					fansLimit: false,
					fansUp: null,
					fansDown: null,
					feeLimit: false,
					feeDown: null,
					feeUp: null,
					newNotice: true,
					forkNotice: false
				},
				//是否限制下拉框可选值
				range: [{
						value: false,
						text: "不限制"
					},
					{
						value: true,
						text: "限制"
					}
				],
				subscribeSet: {}
			}
		},
		computed: {
			keywords(value) {

			}
		},
		onLoad() {
			this.initData("dl_platform", "platformList")
			this.initData("dl_blogger_type", "bloggerTypeList")
		},
		onShow() {
			this.getSet()

		},
		mounted() {

		},
		methods: {
			getSet() {
				getSubscribeSet().then(res => {
					if (res.data) {
						this.subscribeSet = res.data
						this.dataObj = JSON.parse(res.data.jsonObj)
					} else {
						this.subscribeSet = {}
					}
				})
			},
			saveSet() {
				this.subscribeSet.jsonObj = JSON.stringify(this.dataObj)
				saveSubscribe(this.subscribeSet).then(res => {
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					})
					setTimeout(function() {
						uni.navigateBack()
					}, 800)
				})
			},
			switchChange(e, code) {
				this.dataObj[code] = e.detail.value
			},
			//改变选中值
			change(e, type) {
				// if('fans'==type){
				// 	//粉丝

				// }else if('fee'==type){
				// 	//稿费

				// }
				// console.log("e:", e);
				// console.log("type", type);
			},
			dialogInputConfirm(val) {
				this.dataObj.keywordsList.push(val)
				// 关闭窗口后，恢复默认内容
				this.$refs.inputDialog.close()
			},
			/**
			 * 计算关键词的长度
			 * @param {Object} value
			 */
			checkKeywords(value) {
				if (value.length > 5) {
					return value.substring(0, 5) + "..."
				} else {
					return value
				}
			},
			/**
			 * 删除某个关键词
			 * @param {Object} value
			 */
			delKeywords(value) {
				this.dataObj.keywordsList = this.dataObj.keywordsList.filter(item => item !== value);
			},
			/**
			 * 初始化数据
			 * @param {Object} code
			 * @param {Object} dataObj
			 */
			initData(code, dataObj) {
				let that = this
				getCatgByCode({
					code: code
				}).then(res => {
					if (res.code == 200) {
						let thisArray = [{
							id: '0',
							title: "不限",
							code: "-1"
						}]
						thisArray = thisArray.concat(res.data)
						for (let i = 0; i < thisArray.length; i += this.showNum) {
							this[dataObj].push(thisArray.slice(i, i + this.showNum));
						}
						console.log(this.bloggerTypeList, this.platformList)
					}
				}).catch((e) => {
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: e
					});
				})
			},
			/**
			 * 改变选中值
			 * @param {Object} item
			 * @param {Object} key
			 */
			changeChooseValue(item, key) {
				if (item.id == 0) {
					this.dataObj[key] = []
					this.dataObj[key].push(item.code)
				} else {
					let tempList = []
					this.dataObj[key].forEach(item => {
						if (item.code != '-1') {
							tempList.push(item.code)
						}
					})
					this.dataObj[key] = tempList
				}

			},
			/**
			 * 添加关键词
			 */
			addNewKeys() {
				this.$refs.inputDialog.open()
			}
		}
	}
</script>

<style lang="scss">
	.dingyue-box {
		border-top: 1rpx solid #F4F4F4;
		width: 100%;
		color: #363636;
		background-color: white;
		font-size: 30rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;

		.line-box {
			width: 100%;
			padding: 30rpx 30rpx 20rpx 30rpx;
			display: flex;
			flex-direction: column;
			align-items: self-start;
			justify-content: inherit;

			.submit-box {
				padding: 15rpx 0;
				background-color: #FC1F3E;
				color: white;
				width: 70%;
				margin-bottom: 30rpx;
				border-radius: 10rpx;
				text-align: center;
			}

			.dl-title {
				font-weight: bold;
				font-size: 38rpx;

				text {
					margin-left: 20rpx;
					font-weight: normal !important;
					font-size: 22rpx;
					color: #929292;
				}
			}

			.dl-content {
				width: 100%;
				font-size: 24rpx;
				padding: 15rpx;
				border-bottom: 1rpx solid #F7F7F7;

				.line-row {
					width: 100%;

					.line-item {
						width: calc(25% - 16rpx);
						border: 1rpx solid #E9E9E9;
						margin: 8rpx 8rpx;
						float: left;
						border-radius: 25rpx;
						color: #363636;
						text-align: center;
						padding: 8rpx 15rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.keywords-item {
						border: 1rpx solid #E9E9E9;
						margin: 8rpx 8rpx;
						float: left;
						border-radius: 25rpx;
						color: #363636;
						text-align: center;
						padding: 8rpx 20rpx;

						.icon-text {
							margin-left: 8rpx;
						}
					}

					.dl-drawer-item {
						display: flex;
						color: #929292;
						align-items: center;
						justify-content: center;
						border-bottom: 1px solid #F4F4F4;
						margin-bottom: 20rpx;

						input {
							width: 100%;
							border: 1rpx solid #F4F4F4;
							border-radius: 15rpx;
							color: #929292;
							padding: 5rpx 10rpx;
							margin: 10rpx 0;
							text-align: center;
							height: 60rpx;
							line-height: 60rpx;
						}

						.dl-reward-type {
							flex: 1;
							text-align: center;
							border: 1rpx solid #F4F4F4;
							color: #929292;
							border-radius: 15rpx;
							padding: 10rpx 25rpx;
							margin: 10rpx;
						}
					}

					.seting-view {
						padding: 20rpx 0;
						font-size: 30rpx;
						display: flex;
						align-items: center;
						justify-content: flex-end;

						text {
							flex: 1;
						}
					}
				}

				.click {
					color: #FC1F3E !important;
					border: 1rpx solid #FC1F3E !important;
				}
			}
		}
	}
</style>
