<template>
	<view>
		<uni-transition id="qa" ref="ani111" :duration="1000" custom-class="transition" mode-class="fade" :show="nshow">
			<view class="head-notice">
				<image class="gif" src="../../static/ss.png" mode="widthFix" v-show="gifShow" :style="gifStyle"></image>
				<view class="notice animate-right" v-if="nshow" :style="noticeStyle">
					<rich-text :nodes="noticeText" class="notice-text"></rich-text>
				</view>
			</view>
			<view class="card-head-notice" :style="cardStyle">
				<image class="card-gif" :src="personImg" mode="widthFix" v-show="gifShow"
					:style="cardGifStyle"></image>
				<view class="notice card-animate-right" v-if="nshow">
					<rich-text :nodes="notice" class="card-notice-text"></rich-text>
				</view>
				<view class="nright" v-show="isShowContinue" :style="bottom1Style">
					<text class="bottom1" @click="showcontent">
						{{num==1?"点击开始测评吧！":"点击继续！"}}
					</text>
				</view>
			</view>
		</uni-transition>
		<hr>
		<uni-transition ref="ani1" :duration="1000" custom-class="transition" mode-class="fade"
			:show="fshow==true?fshow:show">
			<view id="sss" class="qdesc">{{data.notice1}}</view>
			<block v-for="(item,index) in data.qs" :key="index">
				<view class="qitem">
					<view class="qdesc_item"><text class="item_num">{{index+1}}</text>{{item.desc}}</view>
					<view class="qitem_input">
						<block v-if="item.type=='input'">
							<u--input class="qinput" v-model="item.value" border="none" color="white"></u--input>
						</block>
						<block v-if="item.type=='number'">
							<u--input class="qinput" type="digit" v-model="item.value" border="none" color="white">
							</u--input>
						</block>
						<block v-if="item.type=='area'">
							<picker mode="selector" @change="regionChange" :value="0" :range="addressData">
								<u--input readonly class="qinput" style="padding-left: 20rpx; " v-model="address"
									border="none" color="white"></u--input>
							</picker>
						</block>
						<!-- 所属行业 多级选择器 -->
						<block v-if="item.type=='industry'">
							<picker mode="multiSelector" @change="regionChangeIndustry" @columnchange="columnChange"
								:value="multiIndex" :range="industries">
								<u--input readonly class="qinput" style="padding-left: 20rpx; " v-model="industry"
									border="none" color="white"></u--input>
							</picker>
						</block>
						<block v-if="item.type=='date'">
							<picker mode="date" @change="regionChangetime">
								<u--input readonly class="qinput" style="padding-left: 20rpx; " v-model="sdate"
									border="none" color="white"></u--input>
							</picker>
						</block>
						<block v-if="item.type=='year'">
							<picker mode="date" fields="year" :value="sb_year" @change="regionChangeYear">
								<u--input readonly class="qinput" style="padding-left: 20rpx; " v-model="sb_year"
									border="none" color="white"></u--input>
							</picker>
						</block>
						<block v-if="item.type=='checkbox'">
							<view class="answers">
								<view v-for="(item1,index1) in item.answers" :key="index1" class="answer"
									:class="{answer_check:index1==item.user_code}" @click="change_annser(index,index1)">
									{{item1}}
								</view>
							</view>
						</block>
						<block v-if="item.type=='inputs'">
							<block v-for="(item1,index1) in item.inputs" :key="index1" style="margin-bottom: 20rpx;">
								<view class="qdesc_item11">{{item1.title}}</view>
								<u--input class="qinput" type="number" v-model="item1.value" border="none"
									color="white"></u--input>
							</block>
						</block>
					</view>
				</view>
			</block>
			<view class="foot">
				<view class="step">
					<view class="bottom" @click="step1">上一步</view>
					<view class="bottom" @click="step">{{num==6?"提交诊断":"下一步"}}</view>
				</view>
				<view class="progress">
					<view class="pleft">
						<progress :percent="percent" :show-info="false" activeColor="#f1bf8c" stroke-width="6" />
					</view>
					<view class="pright" @click="reload">
						<view>
							<u-icon name="reload" color="#f1bf8c" size="22"></u-icon>
						</view>
						<view class="prtext">重新填写</view>
					</view>
				</view>
			</view>
		</uni-transition>
	</view>
</template>

<script>
	export default {
		props: {
			fromdata: {
				type: Array,
				default() {
					return []
				}
			},
			num: {
				type: Number,
				default: 1
			},
			fshow: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				data: {},
				nshow: true,
				// 是否显示 “点击开始评测！” 或 “点击继续！”按钮
				isShowContinue: false,
				personImg: '../../static/ss.gif',
				// 是否显示gif图片
				gifShow: true,
				// gif图片样式
				gifStyle: "",
				cardStyle: "",
				cardGifStyle: "",
				// 提示信息
				notice: "",
				// 提示信息完整文字
				noticeText: "",
				noticeStyle: "",
				bottom1Style: "",
				sdate: "",
				addressData: [],
				address: "",
				// 所属行业 与 v-model 绑定
				industry: "",
				// 所属行业一级分类
				industries: "",
				// 所属行业二级分类
				industriesChild: "",
				multiIndex: [0, 0],
				show: false,
				sb_year: ""
				
			}
		},
		computed: {
			percent() {
				return this.num * 16 - 16;
			}
		},
		mounted() {
			this.data = this.fromdata[this.num - 1]
			if (this.num == 1) {
				this.addressData = this.fromdata[0]['qs'][3].area_data
				this.address = this.fromdata[0]['qs'][3].value ? this.fromdata[0]['qs'][3].value : ""
				this.sdate = this.fromdata[0]['qs'][4].value ? this.fromdata[0]['qs'][4].value : ""
				this.industry = this.fromdata[0]['qs'][6].value ? this.fromdata[0]['qs'][6].value : ""

				// 绑定所属行业分类数据
				this.industries = this.fromdata[0]['qs'][6].data ? this.fromdata[0]['qs'][6].data : ""
				this.industriesChild = this.fromdata[0]['qs'][6].dataChild ? this.fromdata[0]['qs'][6].dataChild : ""
				this.sb_year = this.fromdata[0]['qs'][7].value ? this.fromdata[0]['qs'][7].value : ""
			}
			if (this.fromdata[3]['qs'][4]['user_code'] == 1 && this.num == 5) {
				let lastpage = uni.getStorageSync("lastpage")
				if (lastpage < 5) {
					this.$emit("next", 6, this.fromdata[4], 5); //自定义事件  传递值“子向父组件传值”
				} else {
					this.$emit("next", 4, this.fromdata[4], 5); //自定义事件  传递值“子向父组件传值”
				}
			}
			uni.setStorageSync("lastpage", this.num)
			// 如果 点击“上一步” 按钮 直接显示表单的情况
			if (this.fshow == true) {
				// 提示信息不做 打字效果  直接显示
				this.noticeText = this.data.notice
				this.isShowContinue = true
				// gif 隐藏
				// this.gifShow = false
				// this.noticeStyle = "width: 65vw"
				// 设置gif图标位置，延迟50ms执行，否则无法获取到DOM真实高度
				setTimeout(() => this.setGifArea(), 50)
				this.cardStyle = `top: -200vh; opacity: 0`
				this.personImg = '../../static/ss.png'
			} else {
				this.printText(this.data.notice)
			}
		},
		methods: {
			// 提示信息以打字的效果展现
			printText(text) {
				let winHeight = uni.getSystemInfoSync().windowHeight - 560
				this.cardGifStyle = `bottom: ${winHeight}px; transform: scale(1.5); left: 0rpx; opacity: 1`
				this.bottom1Style = `bottom: ${winHeight}px; right: 20rpx; opacity: 1`
				this.noticeText = String(text).replace(/<.*?br.*?>/img, "\r\n")
				text = this.noticeText.split('')
				// console.log(text)
				let i = 0
				let interval = setInterval(() => {
					if (i > text.length) {
						clearInterval(interval)
						this.isShowContinue = true
						// this.noticeStyle = "width: 65vw"
						// 设置gif图标位置
						setTimeout(() => this.setGifArea(), 50)
						this.personImg = '../../static/ss.png'
					} else {
						// 控制台报错，包含<br>标签 提示解析失败
						this.notice = this.noticeText.substring(0, i)
						this.notice += (i < text.length) ? '_' : ''
					}
					i++
				}, 50) // 每50ms打印一个字
			},
			// 设置gif图片位置
			setGifArea() {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('#qa').boundingClientRect(data => {
						console.log("节点离页面底部的距离为" + data.bottom);
						let top = (data.bottom <= 198) ? 0 : data.bottom - 198 + 20
						this.gifStyle = `top: ${top}px; opacity: 1`
					}).exec()
				})
			},
			//第一个参数问题的索引，第二个答案的索引
			change_annser(qsindex, answer_index) {
				console.log(6636)
				this.data['qs'][qsindex]['user_code'] = answer_index
				//无专利时，一类和二类设置为0时
				if (this.num == 3 && this.data['qs'][0]['user_code'] == 3) {
					this.data['qs'][1]['value'] = "0" // 要字符串类型
					this.data['qs'][2]['value'] = "0"
				}
			},
			showcontent() {
				this.show = true
				// this.nshow=false
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('#sss').boundingClientRect(data => {
						console.log("节点离页面顶部的距离为" + data.top);
						uni.pageScrollTo({
							scrollTop: data.top - 10,
							duration: 322
						});
					}).exec();
				});
				this.cardStyle = `top: -200vh; opacity: 0;`
			},
			reload() {
				uni.showModal({
					title: '提示',
					content: '是否保留已经填写好的数据?',
					confirmText: "是",
					cancelText: "否",
					success: (res) => {
						if (res.confirm) {
							this.$emit("next", 999); //自定义事件  传递值“子向父组件传值”
						} else if (res.cancel) {
							this.$emit("next", 0); //自定义事件  传递值“子向父组件传值”
						}
					}
				});
			},
			step1() {
				if (this.num == 1) {
					return
				} else {
					this.$emit("next", this.num - 1, this.data, this.num); //自定义事件  传递值“子向父组件传值”
				}
			},
			step() {
				//判断inputs或 inputs里面的值不能为空
				// console.log(this.data.qs,111);return
				let no = 0
				this.data.qs.forEach((val, index, arr) => {
					// console.log(val.type, val.value)
					if ((val.type == "input" || val.type == "area" || val.type == "date" || val.type ==
							"number" || val.type == "industry" || val.type == "year") && (val.value == null || val.value == "" || val
							.value == undefined)) {
						let index1 = index + 1
						this.msg(val.msg);
						no = 1;
						throw new Error()
					}
					if (val.field == "aren" && val.value == "0") {
						this.msg(val.msg)
						no = 1;
						throw new Error()
					}
					if (val.field == "mobile" && !this.$u.test.mobile(val.value)) {
						this.msg("手机格式不正确");
						throw new Error()
					}
					if (val.type == "inputs") {
						val.inputs.forEach((val1) => {
							if (!val1.value) {
								this.msg(val1.msg);
								no = 1;
								throw new Error()
							}
						})
					}
				});

				if (no == 1) return
				//console.log(this.data,2222)
				if (this.num == 6) {
					this.$emit("res", this.data, this.num)
				} else {
					this.$emit("next", this.num + 1, this.data, this.num); //自定义事件  传递值“子向父组件传值”
				}
			},
			regionChange(e) {
				let res = e.detail.value
				console.log(e.detail.value)
				// this.address = res[0] + res[1] + res[2];
				this.address = this.addressData[e.detail.value]
				this.data.qs[3].value = this.address
			},
			regionChangetime(e) {
				this.sdate = e.detail.value
				this.data.qs[4].value = this.sdate
			},
			regionChangeYear(e) {
				this.sb_year = e.detail.value
				this.data.qs[7].value = this.sb_year
			},
			regionChangeIndustry(e) {
				// console.log(this.industriesChild[e.detail.value[0]][e.detail.value[1]])
				// console.log(this.industries[0][e.detail.value[0]])
				// 获取行业子集里的值
				this.industry = this.industries[0][e.detail.value[0]] + ' - ' + this.industriesChild[e.detail.value[0]][e
					.detail.value[1]
				];
				this.data.qs[6].value = this.industry
			},
			columnChange(e) {
				// 选择器第一列变动时,第二列随之变动
				if (e.detail.column == 0) {
					this.industries.splice(1, 1, this.industriesChild[e.detail.value])
				}
			}
		}
	}
</script>

<style scoped>
	@import url("./form-step.css");
</style>
