<template>
	<view class="release">
		<view class="title">类型选择</view>
		<view class="menu">
			<view class="type">
				<view class="fl">事件类型：</view>
				<view class="fr">
					<view class="ite" v-for="(a,i) in typeList" :key="i" :class="tabIndex == i?'ite-on':''" @click="tabItem(i)">
						<image class="img1" src="/static/icon-select.png"></image>
						<image class="img2" src="/static/icon-select-on.png"></image>{{a.title}}
					</view>
				</view>
			</view>
		</view>
		<view class="title">当事人身份信息</view>
		<view class="menu">
			<view class="item">
				<view class="fl">
					姓名<text>*</text>
				</view>
				<view class="ml">
					<input type="text" v-model="main_realname" placeholder="请输入相关人姓名" />
				</view>
			</view>
			<view class="item">
				<view class="fl">
					手机号码<text>*</text>
				</view>
				<view class="ml">
					<input type="number" maxlength="11" v-model="main_phone" placeholder="请输入手机号码" />
				</view>
			</view>
			<view class="item" v-if="systembasicInfoopen.qq">
				<view class="fl">
					身份证号
				</view>
				<view class="ml">
					<input type="text" maxlength="18" v-model="main_cardno" placeholder="18位身份证号码" />
				</view>
			</view>
			<view class="item" v-if="systembasicInfoopen.qq">
				<view class="fl">
					QQ号
				</view>
				<view class="ml">
					<input type="text" v-model="main_qq" placeholder="请输入QQ号" />
				</view>
			</view>
			<view class="item" v-if="systembasicInfoopen.wechat">
				<view class="fl">
					微信号
				</view>
				<view class="ml">
					<input type="text" v-model="main_wechat" placeholder="请输入微信号" />
				</view>
			</view>
			<view class="item">
				<view class="fl">
					居住地址
				</view>
				<view class="ml">
					<picker mode="region" @change="changePicker1" :value="main_addressArr">
						{{main_address?main_address:'请选择 省/市/区'}}
					</picker>
				</view>
				<view class="fr">
					<image src="https://www.lijkj.cn/static/icon-arrow.png"></image>
				</view>
			</view>
			<view class="item">
				<view class="fl">
					籍贯
				</view>
				<view class="ml">
					<input type="text" v-model="main_jiguan" placeholder="请输入籍贯" />
				</view>
			</view>
			<view class="item">
				<view class="fl">
					公司
				</view>
				<view class="ml">
					<input type="text" v-model="main_company" placeholder="请输入公司名称" />
				</view>
			</view>
			<view class="item">
				<view class="fl">
					其他信息
				</view>
				<view class="ml">
					<input type="text" v-model="main_otherinfo" placeholder="请输入其他信息" />
				</view>
			</view>
		</view>
		<view class="title">事件标题<text>*</text></view>
		<view class="menu">
			<textarea class="box1" v-model="title" placeholder="请输入简短的标题，便于用户快速搜索"></textarea>
		</view>
		<view class="title">详细说明<text>*</text><text class="tip">(最多9张图片，视频不超过50MB)</text></view>
		<view class="menu">
			<textarea class="box1" maxlength="500" v-model="content" placeholder="发布内容，务必确保您所发布的内容真实，证据可靠。此处仅描述事件内容，除姓名外切勿出现其他隐私内容。保护个人隐私，尊重他人隐私，合法合规！"></textarea>
			
			<view class="txt1">{{content.length}}/500</view>
			<view class="pic">
				<view class="li" v-for="(a,i) in imgs" :key="i">
					<video class="img" v-if="a.indexOf('.mp4')>=0" :src="baseUrl+a"></video>
					<image v-else class="img" mode="heightFix" :src="baseUrl+a"></image>
					<image class="del1" mode="heightFix" @click="deletePic(i)" src="https://www.lijkj.cn/static/icon-del.png"></image>
				</view>
				<view class="upload" @click="uploadImg">
					<image src="https://www.lijkj.cn/static/upload.png"></image>
					<view class="txt">照片/视频</view>
				</view>
			</view>
		</view>
		<view class="title">事件标签<text>*</text></view>
		<view class="menu">
			<view class="tab">
				<view class="li" v-for="(a,i) in tagList" :key="i" :class="a.isSelect?'li-on':''" @click="tabLi(i)">{{a.title}}</view>
			</view>
			<view class="tip">注意：请您根据具体情况选择真实的类型，便于后期统计</view>
		</view>
		<view class="title">证人信息<text class="t"> (如有可添加)</text><view class="add" @click="toAdd()">添加</view></view>
		<view class="menu" v-for="(a,i) in zhengren" :key="i">
			<view class="a">
				<view class="item">
					<view class="fl">
						姓名<text>*</text>
					</view>
					<view class="ml">
						<input type="text" v-model="a.realname" placeholder="请输入相关人姓名" />
					</view>
				</view>
				<view class="item" v-if="systembasicInfoopen.qq">
					<view class="fl">
						身份证号
					</view>
					<view class="ml">
						<input type="text" maxlength="18" v-model="a.cardno" placeholder="18位身份证号码" />
					</view>
				</view>
				<view class="item">
					<view class="fl">
						手机号码
					</view>
					<view class="ml">
						<input type="number" maxlength="11" v-model="a.phone" placeholder="请输入手机号码" />
					</view>
				</view>
				<view class="item">
					<view class="fl">
						居住地址
					</view>
					<view class="ml">
						<picker mode="region" @change="changePicker2" :value="a.addressArr" @click="clickPicker(i)">
							{{a.address?a.address:'请选择 省/市/区'}}
						</picker>
					</view>
					<view class="fr">
						<image src="https://www.lijkj.cn/static/icon-arrow.png"></image>
					</view>
				</view>
				<view class="blank" v-if="i>=1"></view>
				<view class="del2" v-if="i>=1" @click="toDel(i)">
					<image src="https://www.lijkj.cn/static/icon-del.png"></image>删除
				</view>
			</view>
		</view>
		<view class="btn" @click="toSubmit()">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				main_addressArr: [],
				zhengren: [{
					id: 1,
					realname: "",
					phone: "",
					cardno: "",
					address: "",
					addressArr: []
				}],
				content_tag: [],
				content_type_id: "",
				main_realname: "",
				main_phone: "",
				main_cardno: "",
				main_qq: "",
				main_wechat: "",
				main_address: "",
				main_jiguan: "",
				main_company: "",
				main_otherinfo: "",
				tagList: [],
				imgs: [],
				baseUrl: "",
				content: "",
				title: "",
				tabIndex: 0,
				tabLiIndex: 0,
				typeList: [],
				zhengrenIndex: 0,
				systembasicInfoopen: {},
				id: "",
				info: {}
			}
		},
		onLoad(o) {
			this.id = o.id;
			this.baseUrl = this.$baseUrl;
			this.getInfo();
		},
		onShow() {
			this.systembasicInfoopen = uni.getStorageSync("systembasicInfoopen")
		},
		methods: {
			//事件详情
			async getInfo() {
				const that = this;
				let { code, data } = await this.$api.getContentdetail({type: 1,id: this.id, token: uni.getStorageSync("token")})
				if(code == 1){
					this.main_realname = data.main_realname
					this.content_type_id = data.content_type_id
					this.main_phone = data.main_phone
					this.main_cardno = data.main_cardno
					this.main_qq = data.main_qq
					this.main_wechat = data.main_wechat
					this.main_address = data.main_address
					this.main_jiguan = data.main_jiguan
					this.main_company = data.main_company
					this.main_otherinfo = data.main_otherinfo
					this.title = data.title
					this.content = data.content
					this.content_tag = data.content_tag;
					if(data.main_address){
						this.main_addressArr = data.main_address.split(",")
					}
					this.imgs = [];
					if(data.image){
						this.image = data.image.split(",")
						if(this.image && this.image.length > 0){
							this.image.map(a=>{
								this.imgs.push(a)
							})
						}
					}
					// content_tag: JSON.stringify(this.content_tag),
					// zhengren: JSON.stringify(this.zhengren),
					// image: this.imgs.join(",")
					that.getTylelist();
					that.getTagList();
					that.getZhengrenList();
				}
			},
			//获取事件证人接口
			async getZhengrenList() {
				const { code, data } = await this.$api.getzhengren({type: 1,content_id: this.id, token: uni.getStorageSync("token")})
				if(code == 1){
					if(data && data.length > 0){
						data.map(a=>{
							if(a.address){
								a.addressArr = a.address.split(",")
							}
						})
					}
					this.zhengren = data;
				}
			},
			//提交
			async toSubmit() {
				if(!uni.getStorageSync("token")){
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}
				let arr = []
				this.tagList.map(a=>{
					if(a.isSelect){
						arr.push(a.title)
					}
				})
				this.content_tag = arr;
				console.log(this.content_tag)
				if(uni.getStorageSync("userInfo").status !=1){
					uni.showModal({
						title: '温馨提示',
						content: '当前用户没有认证',
						confirmText: "去认证",
						success(res) {
							if(res.confirm){
								uni.navigateTo({
									url: "/pages/user/verification"
								})
							}
						}
					})
					return ;
				}
				if (!this.main_realname) {
					uni.showToast({
						title: '请输入当事人姓名',
						icon: 'none',
					})
					return
				}
				if (!this.main_phone) {
					uni.showToast({
						title: '请输入当事人手机号',
						icon: 'none',
					})
					return
				}
				if(!/^1[3456789]\d{9}$/.test(this.main_phone)){
				  uni.showToast({
				  	title: '手机号格式不正确',
				  	icon: "none",
				  })
				  return ;
				}
				if (!this.title) {
					uni.showToast({
						title: '请输入事件标题',
						icon: 'none',
					})
					return
				}
				if (!this.content) {
					uni.showToast({
						title: '请输入详细说明',
						icon: 'none',
					})
					return
				}
				if(this.content_tag.length == 0){
					uni.showToast({
						title: '请选择事件标签',
						icon: 'none',
					})
					return
				}
				let total = 0;
				// if(this.zhengren.length >0){
				// 	this.zhengren.map(a=>{
				// 		if(a.realname){
				// 			total++
				// 		}
				// 	})
				// }
				// if(total != this.zhengren.length){
				// 	uni.showToast({
				// 		title: '请完善证人信息',
				// 		icon: 'none',
				// 	})
				// 	return
				// }
				const { code, data, msg } = await this.$api.updateContent({
					id: this.id,
					main_realname: this.main_realname,
					content_type_id: this.content_type_id,
					main_phone: this.main_phone,
					main_cardno: this.main_cardno,
					main_qq: this.main_qq,
					main_wechat: this.main_wechat,
					main_address: this.main_address,
					main_jiguan: this.main_jiguan,
					main_company: this.main_company,
					main_otherinfo: this.main_otherinfo,
					image: this.imgs.join(","),
					title: this.title,
					content: this.content,
					content_tag: JSON.stringify(this.content_tag),
					zhengren: JSON.stringify(this.zhengren),
					token: uni.getStorageSync("token")
				});
				if(code == 1){
					uni.showToast({
						title: "提交成功"
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1
						})
					},2000)
				}else{
					uni.showToast({
						title: msg,
						icon: "none"
					})
				}
			},
			clickPicker(i){
				this.zhengrenIndex = i;
			},
			changePicker1(e){
				this.main_addressArr = e.detail.value;
				this.main_address = e.detail.value.join(",");
			},
			changePicker2(e){
				this.zhengren[this.zhengrenIndex].addressArr = e.detail.value;
				this.zhengren[this.zhengrenIndex].address = e.detail.value.join(",");
			},
			toAdd(){
				this.zhengren.push({
					id: this.zhengren.length+1,
					realname: "",
					phone: "",
					cardno: "",
					address: "",
					addressArr: []
				})
			},
			toDel(i){
				this.zhengren.splice(i,1)
			},
			//上传图片
			uploadImg() {
				const that = this
				uni.chooseMedia({
					count: 9-that.imgs.length,
					sizeType: ["original"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"],
					success: (res) => {
						console.log(res)
						for(var i = 0; i<res.tempFiles.length;i++){
							uni.uploadFile({
								name: 'file',
								url: this.$baseUrl+'/api/Common/upload',
								filePath: res.tempFiles[i].tempFilePath,
								formData: {
									"token": uni.getStorageSync('token')
								},
								success: (upRes) => {
									const {code, data, msg } = JSON.parse(upRes.data);
									if(code == 1){
										uni.showToast({
											icon: "success",
											title: "上传成功"
										})
										that.imgs.push(data.url)
									}else{
										uni.showToast({
											icon: "error",
											title: "上传失败"
										})
									}
								},
								fail: (err) => {
									console.log("toUpload err",err)
									console.log(err)
								}
							});	
						}
					},
					fail(err){
						console.log("fail",err)
					}
				});
			},
			deletePic(index) {
				this.imgs.splice(index, 1)
			},
			//事件类型
			async getTylelist() {
				const { code, data } = await this.$api.getTylelist({})
				if(code == 1){
					let arr = [],idx = 0;
					if(data && data.length > 0){
						data.map((a,i)=>{
							a.name = a.title;
							if(a.id == this.content_type_id){
								idx = i
							}
						})
					}
					this.typeList = data;
					this.tabIndex = idx;
				}
			},
			//事件标签
			async getTagList() {
				const { code, data } = await this.$api.getContentTag({})
				if(code == 1){
					let arr = [],that = this,idx=0;
					if(data && data.length > 0){
						data.map((a,idx)=>{
							a.isSelect = false;
									console.log(a)
							if(that.content_tag && that.content_tag.length > 0){
								that.content_tag.map(b=>{
									console.log(b)
									if(a.title == b){
										a.isSelect = true
									}
								})
							}
						})
					}
					this.tagList = data
				}
			},
			tabLi(index){
				this.tagList[index].isSelect = !this.tagList[index].isSelect;
			},
			tabItem(index){
				this.tabIndex = index;
				this.content_type_id = this.typeList[index].id
			},
			//获取商品分类
			async queryGoodsCategoryList() {
				const { code, data } = await this.$api.goodsCategoryList({})
				if(code == 200){
					this.goodsCategoryList = data
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.release {
		min-height: 100vh;
		padding-bottom: 150rpx;
		overflow: hidden;
		box-sizing: border-box;
		.tipss{
			width: 100%;
			padding: 20rpx 25rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			background-color: rgba(255,255,255,0.5);
			font-size: 30rpx;
			color: #e54230;
			display: flex;
			align-items: center;
			justify-content: space-between;
			image{
				width: 14rpx;
				height: 24rpx;
			}
		}
		.title{
			font-weight: 500;
			font-size: 30rpx;
			color: #222222;
			padding: 30rpx 25rpx 10rpx;
			text{
				color: #FA1919;
			}
			.t{
				font-size: 24rpx;
				color: #999999;
			}
			.tip{
				font-size: 24rpx;
				color: #999999;
				margin-left: 20rpx;
			}
			.add{
				float: right;
				color: #00C6A9;
			}
		}
		.btn{
			width: 702rpx;
			line-height: 90rpx;
			background: #00C6A9;
			box-shadow: 0px 3rpx 10rpx 0px rgba(9,44,39,0.05);
			border-radius: 90rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			text-align: center;
			margin: 0 auto;
			margin-top: 30rpx;
		}
		.menu{
			width: 700rpx;
			background: #FFFFFF;
			box-shadow: 0px 3rpx 10rpx 0px rgba(9,44,39,0.05);
			border-radius: 20rpx;
			margin: 0 auto;
			padding: 0 30rpx;
			box-sizing: border-box;
			position: relative;
			margin-top: 20rpx;
			overflow: hidden;
			.txt1{
				padding-bottom: 20rpx;
				float: right;
				font-size: 26rpx;
				color: #212121;
			}
			.blank{
				width: 100%;
				height: 72rpx;
			}
			.dels{
				width: 100%;
				line-height: 72rpx;
				background: #ECFBF9;
				border-radius: 0px 0px 20rpx 20rpx;
				font-weight: 500;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #00C6A9;
				position: absolute;
				left: 0;
				bottom: 0;
				z-index: 2;
				image{
					width: 45rpx;
					height: 45rpx;
					margin-right: 10rpx;
				}
			}
			.tip{
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				padding-top: 20rpx;
				padding-bottom: 30rpx;
				line-height: 45rpx;
			}
			.tab{
				width: 110%;
				overflow: hidden;
				padding-top: 10rpx;
				.li{
					width: 140rpx;
					line-height: 56rpx;
					background: #FFFFFF;
					border-radius: 10rpx;
					border: 1px solid #D4E4DF;
					text-align: center;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
					margin-top: 20rpx;
					float: left;
					margin-right: 20rpx;
					&-on{
						color: #00C6A9;
						border-color: #00C6A9;
					}
				}
			}
			.pic{
				overflow: hidden;
				padding-bottom: 30rpx;
				.li{
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
					position: relative;
					overflow: hidden;
					margin-top: 20rpx;
					margin-right: 20rpx;
					float: left;
					.img{
						width: 100%;
						height: 100%;
					}
					.del1{
						width: 45rpx;
						height: 45rpx;
						position: absolute;
						right: 0;
						top: 0;
						z-index: 2;
					}
				}
				.upload{
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
					position: relative;
					overflow: hidden;
					background: #F0F3F4;
					text-align: center;
					font-weight: 500;
					margin-top: 20rpx;
					font-size: 24rpx;
					color: #333333;
					float: left;
					image{
						width: 46rpx;
						height: 42rpx;
						margin-top: 35rpx;
						margin-bottom: 20rpx;
					}
				}
			}
			.blank{
				height: 72rpx;
			}
			.del2{
				width: 100%;
				height: 72rpx;
				background: #ECFBF9;
				border-radius: 0px 0px 20rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #00C6A9;
				position: absolute;
				left: 0;
				bottom: 0;
				z-index: 2;
				image{
					width: 45rpx;
					height: 45rpx;
					margin-right: 10rpx;
				}
			}
			.tips{
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				padding-top: 30rpx;
				line-height: 45rpx;
			}
			.box1{
				width: 100%;
				font-size: 26rpx;
				padding-top: 30rpx;
				height: 150rpx;
			}
			.box2{
				line-height: 60rpx;
			}
			.type{
				padding: 25rpx 0;
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 28rpx;
				.fr{
					flex: 1;
					display: flex;
					align-items: center;
					margin-left: 20rpx;
					.ite{
						flex: 1;
						color: #333333;
						display: flex;
						align-items: center;
						image{
							width: 45rpx;
							height: 45rpx;
							margin-right: 15rpx;
						}
						.img1{
							display: block;
						}
						.img2{
							display: none;
						}
						&-on{
							color: #00C6A9;
							.img1{
								display: none;
							}
							.img2{
								display: block;
							}
						}
						
					}
				}
			}
			.item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-top: 1px solid #EAEAEA;
				padding: 35rpx 0;
				overflow: hidden;
				position: relative;
				&:first-child{
					border-color: #FFFFFF;
				}
				.fl{
					width: 160rpx;
					display: flex;
					align-items: center;
					font-weight: 500;
					font-size: 28rpx;
					color: #222222;
					text{
						color: #FA1919;
					}
				}
				.ml{
					flex: 1;
					input{
						width: 100%;
						font-weight: 500;
						font-size: 28rpx;
						color: #212121;
					}
					picker{
						width: 100%;
						font-weight: 500;
						font-size: 28rpx;
						color: #808080;
					}
				}
				.fr{
					image{
						width: 45rpx;
						height: 45rpx;
					}
				}
			}
		}
	}
</style>
