<template>
	<view>
		<!-- 培训信息完善 -->
		<view class="title-left-border">培训信息</view>
		<uni-forms ref="baseForm" :modelValue="form" label-width="120">
			<uni-forms-item label="所在单位名称" required name="unitName">
				<uni-easyinput v-model="form.unitName" placeholder="请输入所在单位名称" />
			</uni-forms-item>
			<uni-forms-item label="现任职务" required name="unitRole">
				<uni-easyinput v-model="form.unitRole" placeholder="请输入现任职务" />
			</uni-forms-item>
			<view v-if="activity.invoiceFlag=='1'">
				<uni-forms-item label="是否需要发票" required name="invoiceFlag">
					<uni-data-checkbox v-model="form.invoiceFlag" :localdata="invoiceFlag" />
				</uni-forms-item>
				<uni-forms-item label="发票形式" v-if="form.invoiceFlag=='1'" required name="invoiceType">
					<uni-data-checkbox v-model="form.invoiceType" :localdata="invoiceType" />
				</uni-forms-item>
				<uni-forms-item label="开票信息" v-if="form.invoiceFlag=='1'" required name="invoiceInfo">
					<uni-easyinput v-model="form.invoiceInfo" placeholder="请输入开票信息" />
				</uni-forms-item>
			</view>
			<uni-forms-item :label="c.name"  v-for="c in customInfo" :key="c.id">
				<uni-easyinput v-if="c.type=='1'" v-model="form.customInfoObj[c.id]" placeholder="请输入" />
				<view>

					<uni-file-picker v-if="c.type == '2'" limit="1" file-mediatype="all" file-extname="doc,docx,pdf,txt"
						v-model="c.value" @select="selectFile"
						@delete="delSupplementFile(c,$event)" />
					<text v-if="c.type == '2'" style="font-size: 24rpx;color: #999;">仅支持上传doc,docx,pdf,txt</text>

					<uni-file-picker v-if="c.type == '3'" v-model="upSupplement3Value" return-type="object" limit="1"
						@select="upSupplement3" @delete="delSupplementImg(c,$event)" />
				</view>
				<uni-data-select v-model="c.value" v-if="c.type == '4'" :localdata="c.option"></uni-data-select>

			</uni-forms-item>



		</uni-forms>
	</view>

	<view class="fixedBottom">
		<button class="btn btn-red-kx" @click="prev">上一步</button>
		<button class="btn btn-red" @click="next">下一步</button>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		toRefs,
		computed,
		watch
	} from 'vue'
	import _ from 'lodash'
	import * as train from '@/training/train.js'

	const emit = defineEmits(['prev', 'next'])
	const props = defineProps({
		activity: {
			type: Object,
			default: () => {}
		},
		trainId: {
			type: String,
			default: () => {}
		},
		active: {
			type: Number,
			default: () => {}
		}

	})

	const customInfo = computed(() => {
		if (props.activity.customInfo) {
			return JSON.parse(props.activity.customInfo).info
		} else {
			return []
		}
	})

	const data = reactive({
		form: {
			invoiceFlag: '1',
			customInfoObj: {}
		},
		invoiceFlag: [{
			value: '0',
			text: '否'
		}, {
			value: '1',
			text: '是'
		}],
		invoiceType: [{
			value: 0,
			text: '电子票'
		}, {
			value: 1,
			text: '纸质专票'
		}, {
			value: 2,
			text: '纸质普票'
		}]
	})
	const {
		form,
		invoiceType,
		invoiceFlag
	} = toRefs(data)

	watch(() => props.activity.invoiceFlag, (val) => {
		if (val == '1') {
			if (!form.value.invoiceType) {
				form.value.invoiceType = _.orderBy(props.activity.invoiceType.split(','))[0]
			}
		}
	}, {
		immediate: true
	})
	watch(() => props.active, (val) => {
		if (val == 2) {
			uni.showLoading({
				title:'加载中'
			})
			train.getTrainPersonalInfo(props.trainId).then(res => {
			
					form.value = res.data || {}
					if (res.data?.customInfo) {
						form.value.customInfoObj = JSON.parse(res.data.customInfo)
					} else {
						form.value.customInfoObj = {}
					}
					uni.hideLoading()
				
			})
		}
	})

	function prev() {
		emit('prev')
	}

	function next() {
		// 判断必填
		if(!form.value.unitName){
			uni.showToast({
				title: '请填写所在单位',
				icon: 'none'
			})
			return
		}
		if(!form.value.unitRole){
			uni.showToast({
				title: '请填写职务信息',
				icon: 'none'
			})
			return
		}
		form.value.activityId = props.trainId
		form.value.customInfo = JSON.stringify(form.value.customInfoObj)
		train.savePersonalInfo(form.value).then(() => {
			uni.showToast({
				title: '保存成功',
				icon: 'none'
			}).finally(res=>{
				emit('next')
			})
		})
	}
</script>

<style scoped lang="scss">
</style>