<template>
	<view class="container-box">
		<navigation-bar-vue title="发布种草通告" style="width: 100%;" background-color="#ffffff"
			title-color="#000000"></navigation-bar-vue>
		<view class="content">
			<!-- 操作按钮 -->
			<view class="dl-opt-box">
				<view class="dl-menu-box">
					<view @click="handleUserAgrement(globalConfig.appInfo.agreements[7])" class="dl-menu">
						<image class="dl-vip" src="@/static/detail/shenhebiaozhun.png" mode="aspectFit"></image>
						{{globalConfig.appInfo.agreements[7].title}}
					</view>
					<view @click="handleUserAgrement(globalConfig.appInfo.agreements[8])" class="dl-menu">
						<image class="dl-vip" src="@/static/detail/jinjiejiqiao.png" mode="aspectFit"></image>
						{{globalConfig.appInfo.agreements[8].title}}
					</view>
				</view>
			</view>
			<view class="data-list-box">
				<view class="form-warn">
					<image src="@/static/detail/warn.png" mode="aspectFit"></image>
					<text>注意：请勿发布直发、代发等虚假通告。</text>
				</view>
				<view class="form-content">
					<view class="item-field">
						<view class="item-lable is-required">
							标题
						</view>
						<view class="item-value">
							<input class="uni-input" v-model="dataObj.title" type="text" placeholder="请输入" />
						</view>
					</view>
					<view class="item-field">
						<view class="item-lable is-required">
							平台
						</view>
						<view class="item-value">
							<uni-data-select v-model="dataObj.platformCode" :localdata="platFormRange"
								@change="change($event,'platformCode')" :clear="false"
								:imgCode="dataObj.platformCode"></uni-data-select>
						</view>
					</view>
					<view class="item-field">
						<view class="item-lable is-required">
							稿费
						</view>
						<view class="item-value">
							<uni-data-select v-model="dataObj.feeLimit" :localdata="ifHasRange"
								@change="change($event,'fee')" :clear="false"></uni-data-select>
							<view class="dl-drawer-item" v-if="dataObj.feeLimit">
								<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 class="item-field">
						<view class="item-lable is-required">
							赠品
						</view>
						<view class="item-value">
							<uni-data-select v-model="dataObj.giftLimit" :localdata="ifHasRange"
								@change="change($event,'gift')" :clear="false"></uni-data-select>
							<view class="dl-drawer-item" v-if="dataObj.giftLimit">
								<textarea v-model="dataObj.giftDetail" type="text" placeholder="请输入赠品明细" />
							</view>
							<view class="dl-drawer-item" v-if="dataObj.giftLimit">
								<input class="uni-input" v-model="dataObj.giftDetail" type="number"
									placeholder="请输入赠品价值(元)" />
							</view>
						</view>
					</view>
					<view class="item-field">
						<view class="item-lable is-required">
							截止时间
						</view>
						<view class="item-value">
							<uni-datetime-picker type="date" :clear-icon="false" v-model="dataObj.endDate"
								@maskClick="maskClick" />
						</view>
					</view>
					<view class="item-field">
						<view class="item-lable is-required">
							品牌
						</view>
						<view class="item-value">
							<input class="uni-input" v-model="dataObj.brand" type="text" placeholder="请输入" />
						</view>
					</view>
					<view class="item-field">
						<view class="item-lable is-required">
							名额
						</view>
						<view class="item-value">
							<input class="uni-input" v-model="dataObj.needNum" type="number" placeholder="请输入" />
						</view>
					</view>
					<view class="item-field">
						<view class="item-lable is-required">
							粉丝
						</view>
						<view class="item-value">
							<uni-data-select v-model="dataObj.fansLimit" :localdata="limitRange"
								@change="change($event,'fans')" :clear="false"></uni-data-select>
							<view class="dl-drawer-item" v-if="dataObj.fansLimit">
								<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 class="dl-drawer-item" v-if="dataObj.fansLimit">
								<uni-data-checkbox @change="chooseBoxFun($event,'isEligible')" multiple
									:localdata="isEligibleList" />
							</view>
						</view>
					</view>
					<view class="item-field">
						<view class="item-lable is-required">
							通告明细
						</view>
						<view class="item-value">
							<textarea v-model="dataObj.giftDetail" style="height: 600rpx;" type="text"
								placeholder="请输入赠品明细" />
						</view>
					</view>
					<view class="item-field">
						<view class="item-lable is-required">
							产品图
						</view>
						<view class="item-value">
							<uni-file-picker :value="fileList" :sizeType="sizeType"
								@select="afterRead($event,'fileList')" @delete="deleteFile($event,'fileList')"
								limit="9"></uni-file-picker>
						</view>
					</view>
					<view class="item-field">
						<view class="item-lable is-required">
							博主类型 <text class="little-text">(可多选)</text>
						</view>
						<view class="item-value">
							<view class="line-row" v-for="(item,index) in bloggerTypeList">
								<view v-for="(t,i) in item"
									:class="dataObj.bloggerTypesList.includes(t.value)?'line-item click':'line-item'"
									@click="changeChooseValue(t.value,'bloggerTypesList','bloggerTypes')">
									<uni-icons v-if="'new'==t.value" type="plusempty" size="18"></uni-icons>
									<text v-else>{{t.text}}</text>
								</view>
								<view style="clear: both;"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="form-content">
					<view class="item-field">
						<view class="item-lable is-required">
							联系方式：
						</view>
						<view class="item-value">
						</view>
					</view>
					<view class="item-field-row">
						<view class="item-lable is-required">
							电话
						</view>
						<view class="item-value">
							<input class="uni-input" v-model="dataObj.tel" type="text" placeholder="请输入" />
						</view>
					</view>
					<view class="item-field-row">
						<view class="item-lable is-required">
							微信
						</view>
						<view class="item-value">
							<input class="uni-input" v-model="dataObj.wechat" type="text" placeholder="请输入" />
						</view>
					</view>
					<view class="item-field-row">
						<view class="line-row">
							<uni-data-checkbox @change="chooseBoxFun($event,'isShowTel')" multiple
								:localdata="isShowTelList" />
						</view>
					</view>
				</view>
				<!-- 自定义表单 -->
				<view class="form-content">
					<view class="item-field-row" style="padding-top: 0;">
						<view class="item-lable is-required" style="flex: 1;">
							自定义报名信息收集：
						</view>
						<view class="item-value" style="width: 200rpx;">
							<uni-icons type="plusempty" size="18"></uni-icons><text @click="addNewField()">添加信息</text>
						</view>
					</view>
					<view class="form-warn">
						<image src="@/static/detail/warn.png" mode="aspectFit"></image>
						<text>注意：为了您的信息安全，平台不建议填写您的银行卡号、身份证号、密码等隐私信息。</text>
					</view>
					<view class="item-field-row" v-for="(item,index) in customFieldList">
						<view class="item-lable is-required">
							{{item.labelTitle}}
						</view>
						<view class="item-value">
							<input class="uni-input" v-model="item.value" type="text" placeholder="请输入" />
						</view>
					</view>
				</view>
				<!-- 微信群码 -->
				<view class="form-content">
					<view class="item-field">
						<view class="item-lable is-required">
							微信群码<text class="little-text">(选填)</text>
						</view>
						<view class="item-value">
							<uni-file-picker :value="groupImageList" :sizeType="sizeType"
								@select="afterRead($event,'groupImageList')"
								@delete="deleteFile($event,'groupImageList')" limit="1"></uni-file-picker>
						</view>
					</view>
				</view>
				<view class="line-row-bottom">
					<uni-data-checkbox @change="chooseBoxFun($event,'isRead')" multiple :localdata="readBookList" />
					<text @click="handleUserAgrement(globalConfig.appInfo.agreements[1])"
						class="text-red">《{{globalConfig.appInfo.agreements[1].title}}》</text>
				</view>
			</view>
		</view>
		<view class="dl-bottom-box">
			<!-- 预览 -->
			<view class="view-dom">
				预览
			</view>
			<view class="public-dom">
				发布
			</view>
		</view>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="新增博主类型" placeholder="请输入博主类型"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialogCus" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="新增信息" placeholder="请输入信息"
				@confirm="dialogInputConfirmCus"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import navigationBarVue from '@/components/navigation/navigationBar.vue';
	import {
		toast
	} from '@/utils/common.js'
	import upload from '@/utils/upload'
	import {
		uniListByParentCode
	} from '@/api/system/config.js'
	import config from '@/config';
	export default {
		components: {
			navigationBarVue,
		},
		data() {
			return {
				//一行显示几个
				showNum: 4,
				globalConfig: getApp().globalData.config,
				//博主分类
				bloggerTypeList: [],
				//所有可选的平台
				platFormRange: [],
				globalConfig: getApp().globalData.config,
				uploadUrl: config.baseUrl,
				sizeType: ['compressed'],
				//产品图片数组
				fileList: [],
				//微信群码
				groupImageList: [],
				//自定义表单
				customFieldList: [{
					labelTitle: "姓名",
					value: "",
					sort: 1
				}, {
					labelTitle: "身份证号",
					value: "",
					sort: 2
				}],
				dataObj: {
					isRead: false,
					title: "",
					brand: "",
					platformCode: "",
					feeLimit: false,
					feeDown: null,
					feeUp: null,
					giftLimit: false,
					giftDetail: "",
					giftPrice: null,
					endDate: null,
					needNum: null,
					fansLimit: false,
					fansDown: null,
					fansUp: null,
					// 报名是否需符合粉丝要求(0否|1是)
					isEligible: 0,
					//博主类型，按逗号拼接
					bloggerTypes: "",
					//博主类型数组，方便判断
					bloggerTypesList: [],
					tel: "",
					wechat: "",
					// 是否公开联系方式(0否|1是)
					isShowTel: 0,
				},
				isEligibleList: [{
					text: '报名需符合粉丝要求',
					value: true
				}],
				isShowTelList: [{
					text: '不公开联系方式，我会自己联系博主',
					value: true
				}],
				readBookList: [{
					text: '我已阅读并同意',
					value: true
				}],
				//有无限制下拉框可选值
				ifHasRange: [{
						value: false,
						text: "无"
					},
					{
						value: true,
						text: "有"
					}
				],
				//是否限制
				limitRange: [{
						value: false,
						text: "不限制"
					},
					{
						value: true,
						text: "限制"
					}
				],

			}
		},
		onLoad() {
			this.initData("dl_platform", 'platFormRange')
			this.initData("dl_blogger_type", "bloggerTypeList")
		},
		methods: {
			// 查看相关协议
			handleUserAgrement(site) {
				this.$tab.navigateTo(`/pages/common/richview/index?title=${site.title}&code=${site.code}`)
			},
			/**
			 * 添加字段
			 */
			addNewField() {
				this.$refs.inputDialogCus.open()
			},
			// 查看相关协议
			handleUserAgrement(site) {
				this.$tab.navigateTo(`/pages/common/richview/index?title=${site.title}&code=${site.code}`)
			},
			/**初始化字典数据*/
			initData(code, key) {
				let that = this
				uniListByParentCode({
					code: code
				}).then(res => {
					if (res.code == 200) {
						if ("bloggerTypeList" == key) {
							let thisArray = res.data
							thisArray.push({
								text: "",
								value: "new"
							})
							for (let i = 0; i < thisArray.length; i += that.showNum) {
								that[key].push(thisArray.slice(i, i + that.showNum));
							}
						} else {
							that[key] = res.data
						}
					}
				}).catch((e) => {
					toast(e)
				})
			},
			//改变选中值
			change(e, type) {},
			/**
			 * 复选框
			 * @param {Object} e
			 */
			chooseBoxFun(e, key) {
				if (e.detail.value.length > 0) {
					//选中
					this.dataObj[key] = 1
				} else {
					//未选中
					this.dataObj[key] = 0
				}
				console.log(this.dataObj)
			},
			afterRead(file, key) {
				for (let i = 0; i < file.tempFilePaths.length; i++) {
					upload({
						url: '',
						filePath: file.tempFilePaths[i]
					}).then((res) => {
						console.log(res, '215')
						this[key].push({
							url: res.url
						})
						console.log(this[key], "this[key]")
					})
				}
			},
			deleteFile(index, key) {
				console.log('删除文件', this[key][index]);
				this[key].splice(index, 1);
			},
			/**
			 * 选择
			 * @param {Object} value
			 * @param {Object} keyList
			 * @param {Object} key
			 */
			changeChooseValue(value, keyList, key) {
				if ('new' == value) {
					this.$refs.inputDialog.open()
				} else {
					if (this.dataObj[keyList].includes(value)) {
						//原来包含，需要去掉
						let newList = []
						this.dataObj[keyList].map((item) => {
							if (value != item) {
								newList.push(item)
							}
						})
						this.dataObj[keyList] = newList
					} else {
						//没有，追加
						this.dataObj[keyList].push(value)
					}
					this.dataObj[key] = this.dataObj[keyList].join(",")
				}
			},
			dialogInputConfirm(val) {
				let thisObj = {
					text: val,
					value: val
				}
				//TODO  这里还需要走后台的插入接口---添加博主类型
				let endArray = this.bloggerTypeList[this.bloggerTypeList.length - 1]
				if (endArray.length == this.showNum) {
					//正好是一行，需要替换掉最后一个，另起一个新数组
					endArray[endArray.length - 1] = thisObj
					let newArray = [{
						text: "",
						value: "new"
					}]
					this.bloggerTypeList[this.bloggerTypeList.length - 1] = endArray
					this.bloggerTypeList.push(newArray)
				} else {
					//不到一行，在倒数第二位插入本对象
					endArray.splice(endArray.length - 1, 0, thisObj)
					this.bloggerTypeList[this.bloggerTypeList.length - 1] = endArray
				}
				// 关闭窗口后，恢复默认内容
				this.$refs.inputDialog.close()
			},
			dialogInputConfirmCus(val) {
				let thisObj = {
					labelTitle: val,
					value: ""
				}
				if (this.customFieldList.length == 0) {
					//直接添加
					thisObj.sort = 1
				} else {
					//取最后一个字段
					let endFieldObj = this.customFieldList[this.customFieldList.length - 1]
					thisObj.sort = endFieldObj.sort + 1
				}
				this.customFieldList.push(thisObj)
				// 关闭窗口后，恢复默认内容
				this.$refs.inputDialogCus.close()
			}
		}
	}
</script>

<style lang="scss">
	.container-box {
		padding-top: calc(90rpx + var(--status-bar-height));
		border-top: 1rpx solid #F4F4F4;
		background-color: white;
		width: 100%;
		color: #363636;
		font-size: 30rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: self-start;
		justify-content: center;
		position: relative;

		.content {
			border-top: 1rpx solid #F4F4F4;
			height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 232rpx);
			overflow-y: scroll;
			width: 100%;
			background-color: #F2F2F2;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: self-start;
			justify-content: start;
			position: relative;

			.dl-opt-box {
				background-color: white;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.dl-menu-box {
					color: #929292;
					display: flex;
					flex: 1;
					align-items: center;
					justify-content: center;
					width: 100%;
					padding-top: 20rpx;

					.dl-menu {
						display: flex;
						align-items: center;
						justify-content: center;
						flex: 1;
						font-size: 30rpx;
						color: #FC1F3E;
						margin: 0 20rpx;
						padding-bottom: 15rpx;
						text-align: center;

						image {
							margin-right: 10rpx;
							width: 26rpx;
							height: 26rpx;
						}
					}

				}

			}

			.data-list-box {
				flex: 1;
				overflow-y: scroll;
				padding: 20rpx 30rpx;
				display: flex;
				flex-direction: column;
				align-items: self-start;
				justify-content: start;
				width: 100%;

				.form-warn {
					width: 100%;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: start;
					background-color: #FDECD9;
					color: #FF6627;
					border-radius: 20rpx;
					padding: 15rpx;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}

					text {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: start;
					}
				}

				.form-content {
					width: 100%;
					background-color: white;
					padding: 20rpx;
					border-radius: 20rpx;
					margin-top: 25rpx;

					.item-field-row {
						width: 100%;
						padding-top: 15rpx;
						display: flex;
						align-items: center;
						justify-content: start;
						padding-bottom: 15rpx;
						border-bottom: 1rpx solid #F4F4F4;

						.img-upload {
							width: 50%;
							margin: 10rpx 10rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.is-required {
							image {
								width: 20rpx;
								height: 20rpx;
								margin-right: 10rpx;
							}
						}

						.item-lable {
							font-weight: bold;
							width: 210rpx;
							padding: 15rpx 0;
							display: flex;
							align-items: center;
							justify-content: start;

						}

						.item-value {
							flex: 1;
							padding-left: 20rpx;
							display: flex;
							align-items: center;
							justify-content: flex-end;

							input {
								width: 100%;
								padding-left: 20rpx;
								line-height: 1;
								height: 70rpx;
								border: 1rpx solid #dcdfe6;
								border-radius: 8rpx;
							}

							.choose-add {
								color: #686868;
								padding: 10rpx 0 10rpx 20rpx;
								display: flex;
								align-items: center;
								justify-content: flex-start;
								border: 1rpx solid #dcdfe6;
								border-radius: 8rpx;
							}

							textarea {
								width: 100%;
								height: 150rpx;
								color: #686868;
								padding: 10rpx 0 10rpx 20rpx;
								border: 1rpx solid #dcdfe6;
								border-radius: 8rpx;
							}
						}
					}

					.item-field {
						width: 100%;
						display: flex;
						flex-direction: column;
						align-items: self-start;
						justify-content: center;
						padding-bottom: 20rpx;
						border-bottom: 1rpx solid #F4F4F4;

						.warn-little-text {
							color: #FE9860;
							font-size: 18rpx;
							margin-bottom: 20rpx;
						}

						.is-required {
							image {
								width: 20rpx;
								height: 20rpx;
								margin-right: 10rpx;
							}
						}

						.item-lable {
							padding: 15rpx 0;
							font-weight: bold;
							display: flex;
							align-items: center;
							justify-content: center;

							.little-text {
								padding-left: 10rpx;
								font-weight: normal;
								color: #929292;
							}
						}

						.item-value {
							width: 100%;

							.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;
								}

								.click {
									color: #FC1F3E !important;
									border: 1rpx solid #FC1F3E !important;
								}
							}

							.dl-drawer-item {
								display: flex;
								color: #929292;
								align-items: center;
								justify-content: start;
								padding-top: 10rpx;
							}

							input {
								width: 100%;
								padding-left: 20rpx;
								line-height: 1;
								height: 70rpx;
								border: 1rpx solid #dcdfe6;
								border-radius: 8rpx;
							}

							.choose-add {
								color: #686868;
								padding: 10rpx 0 10rpx 20rpx;
								display: flex;
								align-items: center;
								justify-content: flex-start;
								border: 1rpx solid #dcdfe6;
								border-radius: 8rpx;
							}

							textarea {
								width: 100%;
								height: 150rpx;
								color: #686868;
								padding: 10rpx 0 10rpx 20rpx;
								border: 1rpx solid #dcdfe6;
								border-radius: 8rpx;
							}
						}
					}
				}
			}
		}

		.dl-bottom-box {
			border-top: 1rpx solid #EEEEEE;
			height: calc(var(--window-bottom) + 140rpx);
			padding-bottom: var(--window-bottom);
			color: #363636;
			position: fixed;
			padding-bottom: 20rpx;
			bottom: 0;
			background-color: #F7F7F7;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 999;

			.view-dom {
				flex: 1;
				margin: 0 30rpx;
				color: #181D24;
				background-image: linear-gradient(to right, #F7DDBD, #EFCBA0);
				padding: 20rpx 0;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.public-dom {
				flex: 1;
				margin: 0 30rpx;
				padding: 20rpx 0;
				border-radius: 30rpx;
				color: white;
				background-color: #FC1F3E;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.line-row-bottom {
			width: 100%;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.text-red {
				color: #FC1F3E;
			}
		}
	}

	.checklist-box {
		margin-right: 0 !important;
	}
</style>