<template>
	<view class="applyform">
		<u-form :model="submitForm" ref="submitForms" label-position="top" :label-width="140" :label-align="'left'"
			:error-type="['message']">
			<block v-for="(item,index) in course_forms">
				<u-form-item :label="item.name" :prop="item.field"
					:required="item.rule?item.rule.indexOf('required')!==-1:false">
					<block v-if="item.edit_input==='text'">
						<!-- <block v-if="item.field==='introduce'
						|| item.field==='company_product' || item.field==='company_introduce'">
							<u-input type="textarea" :placeholder="item.help?item.help:'请输入'" v-model="item.value" />
						</block> -->
						<u-input :type="item.field==='introduce'||
						item.field==='company_fund'|| item.field==='company_product'||
						item.field==='company_introduce'?'textarea':'text'" :placeholder="item.help?item.help:'请输入'" v-model="item.value" />
					</block>
					<block v-if="item.edit_input==='textarea'">
						<!-- <block v-if="item.field==='introduce'
						|| item.field==='company_product' || item.field==='company_introduce'">
							<u-input type="textarea" :placeholder="item.help?item.help:'请输入'" v-model="item.value" />
						</block> -->
						<u-input :type="'textarea'" :placeholder="item.help?item.help:'请输入'" v-model="item.value" />
					</block>
					<block v-else-if="item.edit_input==='radio'">
						<u-input :placeholder="item.help?item.help:'请选择'" v-model="item.value" :type="'select'"
							@click="showSelect(item,index)" />
					</block>
					<block v-else-if="item.edit_input==='checkbox'">
						<checkbox-group style="display: flex;flex-wrap: wrap;"
							@change="(e)=>{checkboxGroupChange(e,item)}">
							<label style="flex-basis: 100%;" v-for="(checkboxitem, checkboxindex) in item.select_item">
								<checkbox :value="checkboxitem.value" :checked="checkboxitem.checked" />
								{{checkboxitem.value}}
							</label>
						</checkbox-group>
					</block>
					<block v-else-if="item.edit_input==='date'">
						<u-input :placeholder="item.help?item.help:'请选择'" v-model="item.value" :type="'select'"
							@click="showDate(item,index)" />
					</block>
					<block v-else-if="item.edit_input==='datetime'">
						<u-input :placeholder="item.help?item.help:'请选择'" v-model="item.value" :type="'select'"
							@click="showDateTime(item,index)" />
					</block>
					<block v-else-if="item.edit_input==='files'">
						<u-upload @on-remove="(index, lists, name)=>{onRemove(index, lists, name,item)}"
							@on-success="(data, index, lists, name)=>{onSuccess(data, index, lists, name,item)}"
							@on-uploaded="(lists, name)=>{onUploaded(lists, name,item)}" :form-data="formData"
							:action="action" :show-progress="true" :file-list="item.fileListArr"
							max-count="9"></u-upload>
					</block>
				</u-form-item>
			</block>
		</u-form>
		<view class="form-btn">
			<view @click="submit" type="primary">提交</view>
		</view>
		<!-- 单选 -->
		<u-picker @confirm="selectConfirm" v-model="selectShow" :range="selectList" range-key="value"
			mode="selector"></u-picker>
		<!-- 日期 -->
		<u-picker @confirm="dateConfirm" mode="time" v-model="dateShow" :params="dateParams"></u-picker>
		<!-- 日期时间 -->
		<u-picker @confirm="dateTimeConfirm" mode="time" v-model="dateTimeShow" :params="dateTimeParams"></u-picker>

	</view>
</template>

<script>
	// import { watch } from "vue"
	import {
		ROOTPATH as baseUrl
	} from "@/common/config.js"
	export default {
		props: {
			course_forms: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				submitForm: {},
				now_fileld: 0, // 当前所操作的 filed index值 
				// 单选
				selectShow: false,
				selectList: [],
				// 多选
				checkbox_list: [],
				// 日期
				dateShow: false,
				dateParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				// 日期时间
				dateTimeShow: false,
				dateTimeParams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				// 文件上传
				action: `${baseUrl}/api/mobile/upload-file`,
				fileList: [],
				formData: {},
				rules: {},


			}
		},
		onReady() {
			// this.$refs.uForm.setRules(this.rules);
			let token = uni.getStorageSync("stbc1_lifeData").vuex_token
			console.log("token", token)
			this.formData = {
				token: token
			}
		},
		onLoad() {

		},
		methods: {
			// 单选
			showSelect(item, index) {
				this.selectList = item.select_item
				this.now_fileld = index
				this.selectShow = true
			},
			selectConfirm(e) {
				this.course_forms[this.now_fileld]['value'] = this.selectList[e[0]].value
			},
			// 多选
			checkboxGroupChange(e, item) {
				if (e.detail.value.length > 0) {
					item.value = e.detail.value.join(",")
				}
			},
			// 日期
			showDate(item, index) {
				this.now_fileld = index
				this.dateShow = true
			},
			dateConfirm(e) {
				console.log("date", e)
				this.course_forms[this.now_fileld]['value'] = e.year + '-' + e.month + '-' + e.day
			},
			// 日期时间
			showDateTime(item, index) {
				this.now_fileld = index
				this.dateTimeShow = true
			},
			dateTimeConfirm(e) {
				console.log("date", e)
				this.course_forms[this.now_fileld]['value'] = e.year + '-' + e.month + '-' + e.day +
					' ' + e.hour + ':' + e.minute + ':' + e.second
			},
			onSuccess(data, index, lists, name, item) {
				// console.log("success", data, index, lists, name, item)
			},
			onUploaded(lists, name, item) {
				let arr = []
				let arrid = []
				console.log("lists---", lists, item)
				if(lists.length>0){
					this.course_forms.map(item1 => {
						if (item1.field === item.field) {
							this.$set(item1,'fileListArr',lists)
						}
					})
				}else{
					this.course_forms.map(item1 => {
						if (item1.field === item.field) {
							this.$set(item1,'fileListArr',[])
						}
					})
				}
			},
			onRemove(index, lists, name, item) {
				let arr = []
				let arrid = []
				if(lists.length>0){
					// item.fileListArr = lists
					
					this.course_forms.map(item1 => {
						if (item1.field === item.field) {
							this.$set(item1,'fileListArr',lists)
						}
					})
				}else{
					this.course_forms.map(item1 => {
						if (item1.field === item.field) {
							this.$set(item1,'fileListArr',[])
						}
					})
				}
			},
			// 提交
			submit() {
				console.log("course_forms", this.course_forms)
				let errorCount = 0
				this.course_forms.map(item => {
					if (item.rule) {
						// 不能为空
						if (item.rule.indexOf('required') !== -1) {
							if (this.base.isNull(item.value)) {
								this.base.toast(`${item.name}不能为空`)
								errorCount++
								return
							}
						}
						// 手机号
						if (!this.base.isNull(item.value) && item.rule.indexOf('mobile') !== -1) {
							if (!this.base.isMobile(item.value)) {
								this.base.toast(`${item.name}不正确`)
								errorCount++
								return
							}
						}
						// 身份证
						if (!this.base.isNull(item.value) && item.rule.indexOf('idcard') !== -1) {
							if (!this.$u.test.idCard(item.value)) {
								this.base.toast(`${item.name}不正确`)
								errorCount++
								return
							}
						}
						// 邮箱
						if (item.rule.indexOf('email') !== -1) {
							if (!this.base.isNull(item.value) && !this.base.isMail(item.value)) {
								this.base.toast(`${item.name}不正确`)
								errorCount++
								return
							}
						}
						// 整数
						if (item.rule.indexOf('integer') !== -1) {
							if (!this.base.isNull(item.value) && !this.base.isInteger(item.value)) {
								this.base.toast(`${item.name}必须为整数`)
								errorCount++
								return
							}
						}
						// 数字
						if (item.rule.indexOf('numeric') !== -1) {
							if (!this.base.isNull(item.value) && !this.base.isNumber(item.value)) {
								this.base.toast(`${item.name}必须为数字`)
								errorCount++
								return
							}
						}
					}
					
					// 文件上传处理
					if(item.edit_input==='files'){
						let valueArr = []
						let fileListArr = []
						console.log("item.fileListArr",item.fileListArr)
						if(item.fileListArr && item.fileListArr.length>0){
							item.fileListArr.map(f=>{
								if(f.response){
									valueArr.push(f.response.url.replace(baseUrl, ''))
									fileListArr.push(f.response)
								}else{
									valueArr.push(f.url.replace(baseUrl, ''))
									fileListArr.push(f)
								}
							})
						}else{
							item.fileListArr = []
						}
						item.value = valueArr.join(",")
						item.fileList = fileListArr
						console.log("submit---",valueArr,fileListArr)
					}
				})
				if (errorCount > 0) {
					return
				} else {
					// return
					this.$emit("backForm", this.course_forms)
				}
			},
		},
		watch: {
			course_forms(newval) {
				if (newval) {
					// 验证规则
					let that = this
					let _rule = {}
					newval.map(item => {
						if (item.edit_input === 'checkbox') {
							// 修改有值的时候 先split
							let _arr = []
							if (!this.base.isNull(item.value)) {
								_arr = item.value.split(",")
								console.log("_arr", _arr)
								item.select_item.forEach(item1 => {
									// 检查 item.value 是否存在于数组 b 中
									const exists = _arr.includes(item1.value);
									// 根据检查结果设置 checked 属性
									item1.checked = exists;
								});
							}
						}
						if (item.edit_input === 'files') {
							item.fileListArr = this.base.deepCopy(item.fileList)
						}
					})

				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.applyform {
		position: relative;
		z-index: 99
	}

	.form-btn {
		width: 100%;
		position: relative;
		padding: 60rpx 0;

		&>view {
			width: 70%;
			text-align: center;
			margin: 0 auto;
			color: #fff;
			background: linear-gradient(to right, #5e5fbc, #0d0398);
			border-radius: 30rpx;
			padding: 20rpx;
		}
	}
</style>