<!-- 个体户招工 -->
<template>
	<view>
		<view class="u-demo-block__content">
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u--form labelPosition="left" :model="info" ref="form1">
				<view style="font-size: 30rpx;font-weight: bold;padding: 20rpx 0 0;">招工信息</view>
				<u-form-item label="招工名称" prop="jobName" borderBottom labelWidth="80" ref="item1">
					<u--input v-model="info.jobName" border="none" placeholder="请输入招工名称"></u--input>
				</u-form-item>
				<u-form-item label="发布时间" labelWidth="80" prop="stime" borderBottom
					@click="showStime = true; hideKeyboard()" ref="item1">
					<u--input v-model="info.stime" disabledColor="#ffffff" placeholder="请选择发布时间"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="结束时间" labelWidth="80" prop="etime" borderBottom
					@click="showEtime = true; hideKeyboard()" ref="item2">
					<u--input v-model="info.etime" disabledColor="#ffffff" placeholder="请选择结束时间"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<view style="font-size: 30rpx;font-weight: bold;padding: 20rpx 0 0;">招工要求</view>
				<u-form-item label="招聘人数" prop="peopleNum" borderBottom labelWidth="80" ref="item3">
					<u--input v-model="info.peopleNum" border="none" placeholder="请输入招聘人数"></u--input>
				</u-form-item>
				<u-form-item label="参考工资" prop="wage" labelWidth="80" borderBottom
					@click="showWage = true; hideKeyboard()" ref="item4">
					<u--input v-model="info.wage" disabledColor="#ffffff" placeholder="请选择参考工资"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="行业类型" prop="tradeNames" labelWidth="80" borderBottom
					@click="showTrade = true; hideKeyboard()" ref="item4">
					<u--input v-model="info.tradeNames" disabledColor="#ffffff" placeholder="请选择行业类型"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="工种" prop="skillNames" labelWidth="80" borderBottom
					@click="showSkills = true; hideKeyboard()" ref="item4">
					<u--input v-model="info.skillNames" disabledColor="#ffffff" placeholder="请选择工种"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="招工描述" prop="jobDescription" borderBottom labelWidth="80" ref="item5">
					<!-- <u--textarea v-model="info.jobDescription"  placeholder="请输入招工要求"></u--textarea> -->
					<!-- <u--input v-model="info.jobDescription" disabledColor="#ffffff" border="none" placeholder="请输入招工描述"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon> -->

				</u-form-item>
				<view>
					<u--textarea v-model="info.jobDescription"
						placeholder="参考示例:岗位名称:保姆 工作内容: 一日三餐,卫生打扫 工资: 200元/天 年龄要求: 25-40岁 工作经验要求: 有过住家保姆经验, 会做饭,受过高等教育的优先"
						count height="100" maxlength="200"></u--textarea>
				</view>
				<view style="font-size: 30rpx;font-weight: bold;padding: 20rpx 0 0;">人员要求</view>
				<!-- <u-form-item label="人员属性" prop="userNature" labelWidth="80" borderBottom
					@click="showNature = true; hideKeyboard()" ref="item4">
					<u--input v-model="info.userNature"  disabledColor="#ffffff" placeholder="请选择人员属性"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item> -->
				<u-form-item label="年龄要求" prop="ageDesc" labelWidth="80" borderBottom
					@click="showAge = true; hideKeyboard()" ref="item4">
					<u--input v-model="info.ageDesc" disabledColor="#ffffff" placeholder="请选择年龄要求"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="学历要求" prop="educationLabel" labelWidth="80" borderBottom
					@click="showEdu = true; hideKeyboard()" ref="item4">
					<u--input v-model="info.educationLabel" disabledColor="#ffffff" placeholder="请选择学历要求"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="经验要求" prop="experienceDesc" labelWidth="80" borderBottom
					@click="showExpe = true; hideKeyboard()" ref="item4">
					<u--input v-model="info.experienceDesc" disabledColor="#ffffff" placeholder="请选择学历要求"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<view style="font-size: 30rpx;font-weight: bold;padding: 20rpx 0 0;">企业信息</view>
				<u-form-item label="用工单位" prop="jobCompanyName" borderBottom labelWidth="80" ref="item1">
					<u--input v-model="info.jobCompanyName" border="none" placeholder="请输入用工单位"></u--input>
				</u-form-item>
				<u-form-item label="企业信用代码" prop="jobCompanyScale" borderBottom labelWidth="80" ref="item1">
					<u--input v-model="info.jobCompanyScale" border="none" placeholder="请输入企业信用代码"></u--input>
				</u-form-item>
				<u-form-item label="所属行业" prop="jobCompanyIndustry" borderBottom labelWidth="80" ref="item1">
					<u--input v-model="info.jobCompanyIndustry" border="none" placeholder="请输入所属行业"></u--input>
				</u-form-item>
				<u-form-item label="企业性质" prop="jobCompanyNature" borderBottom labelWidth="80" ref="item1">
					<u--input v-model="info.jobCompanyNature" border="none" placeholder="请输入企业性质"></u--input>
				</u-form-item>
				<u-form-item label="企业介绍" prop="jobCompanyDescription" borderBottom labelWidth="80" ref="item1">
					<!-- <u--input v-model="info.jobCompanyDescription" border="none" placeholder="请输入企业介绍"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon> -->
				</u-form-item>
				<view>
					<u--textarea v-model="info.jobCompanyDescription" placeholder="请输入企业介绍" count height="100"
						maxlength="200"></u--textarea>
				</view>
				<u-form-item label="联系人" prop="callName" borderBottom labelWidth="80" ref="item1">
					<u--input v-model="info.callName" border="none" placeholder="请输入联系人"></u--input>
				</u-form-item>
				<u-form-item label="手机号" prop="callTel" borderBottom labelWidth="80" ref="item1">
					<u--input v-model="info.callTel" border="none" placeholder="请输入手机号"></u--input>
				</u-form-item>
				<u-form-item label="座机" prop="callNumber" borderBottom labelWidth="80" ref="item1">
					<u--input v-model="info.callNumber" border="none" placeholder="请输入座机"></u--input>
				</u-form-item>
				<u-form-item label="详细地址" prop="address" borderBottom labelWidth="80" ref="item1">
					<u--input v-model="info.address" border="none" placeholder="请输入详细地址"></u--input>
				</u-form-item>
				<map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
			</u--form>
			<u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></u-button>
			<u-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset"></u-button>
			<u-picker :show="showWage" ref="wagePicker" :columns="wageColumns" @confirm="wageConfirm"
				@cancel="wageClose" @close="wageClose">
			</u-picker>
			<u-picker :show="showTrade" ref="tradePicker" keyName="name" :columns="tradeColumns" @confirm="tradeConfirm"
				@cancel="tradeClose" @close="tradeClose">
			</u-picker>
			<u-picker :show="showSkills" ref="skillPicker" keyName="name" :columns="skillColumns" @change="skillsChange"
				@confirm="skillConfirm" @cancel="skillClose" @close="skillClose">
			</u-picker>
			<!-- <u-popup :show="showDesc" @close="closeDesc" @open="openDesc">
			    <view>
			        <text>出淤泥而不染，濯清涟而不妖</text>
			    </view>
			</u-popup> -->
			<u-picker :show="showAge" ref="agePicker" keyName="label" :columns="ageColumns" @confirm="ageConfirm"
				@cancel="ageClose" @close="ageClose">
			</u-picker>
			<u-picker :show="showEdu" ref="eduPicker" keyName="label" :columns="eduColumns" @confirm="eduConfirm"
				@cancel="eduClose" @close="eduClose">
			</u-picker>
			<u-picker :show="showExpe" ref="expePicker" keyName="label" :columns="expeColumns" @confirm="expeConfirm"
				@cancel="expeClose" @close="expeClose">
			</u-picker>
			<u-datetime-picker :show="showStime" :value="birthday" mode="date" closeOnClickOverlay
				@confirm="stimeConfirm" @cancel="stimeClose" @close="stimeClose"></u-datetime-picker>
			<u-datetime-picker :show="showEtime" :value="birthday" mode="date" closeOnClickOverlay
				@confirm="etimeConfirm" @cancel="etimeClose" @close="etimeClose"></u-datetime-picker>
		</view>
	</view>
</template>

<script>
import dic from '@/common/dic.js'
import { submitInfo, getWorktypesBaseList, findTradeList } from '@/api/userrecruit.js'
export default {
	data() {
		return {
			latitude: 31.05, //中心点
			longitude: 104.20,
			covers: [{ //marker标记位置
				id: 0,
				latitude: 0,
				longitude: 0,
				// width:30,
				// height:30,
				iconPath: '../../../static/img/location.png'
			}],
			value2: '招工内容',
			fileList1: [],
			disabled1: false,
			tips: '',
			value: '',
			showCalendar: false,
			showStime: false,
			showEtime: false,
			info: {
				jobName: '', // 招工名称
				stime: '', // 发布时间
				etime: '', // 结束时间
				peopleNum: '', // 招聘人数
				wage: '', // 参考工资
				tradeId: '', // 行业类型id
				tradeNames: '', // 行业类型名称
				worktypeIds: '', // 工种一级id
				skillIds: '', // 工种二级id
				worktypeNames: '', // 工种名称
				skillNames: '', // 工种二级名称
				jobDescription: '', // 任务描述
				// userNature: '', // 人员属性
				ageDesc: '', // 年龄要求
				education: '', // 学历要求
				educationLabel: '', // 学历要求前端显示
				experienceDesc: '', // 经验要求
				jobCompanyName: '', // 用工单位
				jobCompanyScale: '', // 企业信用代码
				jobCompanyIndustry: '', // 所属行业
				jobCompanyNature: '', // 企业性质
				jobCompanyDescription: '', // 企业介绍
				callName: '', // 联系人
				callTel: '', // 手机号
				callNumber: '', // 座机
				address: '', // 公司详细地址
				// userInfo: {
				// 	name: '楼兰',
				// 	sex: '',
				// 	birthday: ''
				// },
				// radiovalue1: '苹果',
				// checkboxValue1: [],
				// intro: '',
				// code: ''
			},
			showWage: false, // 参考工资选项是否展示
			showTrade: false, // 行业类型是否显示
			showSkills: false, // 工种类型是否显示
			showNature: false, // 人员属性
			showAge: false, // 年龄要求
			showEdu: false, // 学历要求
			showExpe: false, // 经验要求
			// showDesc: false, // 招工描述
			birthday: Number(new Date()),
			wageColumns: dic.taskSalary,
			tradeColumns: dic.tradeArr,
			skillColumns: [],
			skillColumnsIndex: [0, 0],
			natureColumns: dic.natureArr,
			ageColumns: dic.ageArr,
			eduColumns: dic.eduArr,
			expeColumns: dic.expeArr,
			rules: {
				'userInfo.name': [{
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				}, {
					// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
					validator: (rule, value, callback) => {
						// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
						return uni.$u.test.chinese(value);
					},
					message: "姓名必须为中文",
					// 触发器可以同时用blur和change，二者之间用英文逗号隔开
					trigger: ["change", "blur"],
				}],
				code: {
					type: 'string',
					required: true,
					len: 4,
					message: '请填写4位验证码',
					trigger: ['blur']
				},
				'userInfo.sex': {
					type: 'string',
					max: 1,
					required: true,
					message: '请选择男或女',
					trigger: ['blur', 'change']
				},
				radiovalue1: {
					type: 'string',
					min: 1,
					max: 2,
					message: '橙子有毒',
					trigger: ['change']
				},
				checkboxValue1: {
					type: 'array',
					min: 2,
					required: true,
					message: '不能太宅，至少选两项',
					trigger: ['change']
				},
				intro: {
					type: 'string',
					min: 3,
					required: true,
					message: '不低于3个字',
					trigger: ['change']
				},
				hotel: {
					type: 'string',
					min: 2,
					required: true,
					message: '请选择住店时间',
					trigger: ['change']
				},
				'userInfo.birthday': {
					type: 'string',
					required: true,
					message: '请选择生日',
					trigger: ['change']
				},
			},
		}
	},
	props: {
		company: {
			default: null,
		}
	},
	created() {
		if (this.company) {
			const { manager, companyTid, comname, companyDesc, telphone } = this.company
			this.info.jobCompanyScale = companyTid
			this.info.jobCompanyName = comname
			this.info.callName = manager
			this.info.callTel = telphone
			this.info.jobCompanyDescription = companyDesc
		}
		this.getWorkTypes()
	},
	watch: {
		company(val) {
			if (!val) return;
			this.getDataInit()
		}

	},
	methods: {
		async getDataInit() {
			const { companyTid, comname, manager, telphone, companyDesc, tradeId, nature } = this.company
			this.info.jobCompanyScale = companyTid
			this.info.jobCompanyName = comname
			this.info.callName = manager
			this.info.callTel = telphone
			this.info.jobCompanyDescription = companyDesc
			if (tradeId / 1 !== -1) {
				const res = await findTradeList()
				const tenantArray = res.data.data?.filter(item => item.id === tradeId)
				if (tenantArray?.length === 0) return;
				this.info.jobCompanyIndustry = tenantArray[0]?.name
			}

			if (nature / 1 !== -1) {
				const tenantArray = dic.companyEnum?.filter(item => item.value === nature)
				if (tenantArray?.length === 0) return;
				this.info.jobCompanyNature = tenantArray[0]?.label
			}
		},
		wageConfirm(e) {
			const {
				value
			} = e
			this.info.wage = value[0]
			this.showWage = false
		},
		tradeConfirm(e) {
			const { value } = e
			this.info.tradeId = value[0].id
			this.info.tradeNames = value[0].name
			this.showTrade = false
		},
		skillConfirm(e) {
			const { value, indexs } = e
			this.skillColumnsIndex = indexs
			this.info.skillNames = this.getSkilDataNameWhereId(indexs).join('-')
			this.showSkills = false
		},
		// openDesc() {
		// 	this.showDesc = true
		// },
		// closeDesc() {
		// 	this.showDesc = false
		// },
		// natureConfirm(e) {
		// 	const { value } = e
		// 	this.info.userNature = value[0]
		// 	this.showNature = false
		// },
		ageConfirm(e) {
			const { value } = e
			this.info.ageDesc = value[0].label
			this.showAge = false
		},
		eduConfirm(e) {
			const { value } = e
			this.info.education = value[0].value
			this.info.educationLabel = value[0].label
			this.showEdu = false
		},
		expeConfirm(e) {
			const { value } = e
			this.info.experienceDesc = value[0].label
			this.showExpe = false
		},
		expeClose() {
			this.showExpe = false
		},
		eduClose() {
			this.showEdu = false
		},
		ageClose() {
			this.showAge = false
		},
		// natureClose() {
		// 	this.showNature = false
		// },
		skillClose() {
			this.showSkills = false
		},
		wageClose(e) {
			this.showWage = false
		},
		tradeClose(e) {
			this.showTrade = false
		},
		sexSelect(e) {
			this.info.userInfo.sex = e.name
			this.$refs.form1.validateField('userInfo.sex')
		},
		change(e) {
			// console.log(e);
		},
		formatter(day) {
			const d = new Date()
			let month = d.getMonth() + 1
			const date = d.getDate()
			if (day.month == month && day.day == date + 3) {
				day.bottomInfo = '有优惠'
				day.dot = true
			}
			return day
		},
		calendarConfirm(e) {
			this.showCalendar = false
			this.info.hotel = `${e[0]} / ${e[e.length - 1]}`
			this.$refs.form1.validateField('hotel')
		},
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}, 2000);
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},
		calendarClose() {
			this.showCalendar = false
			this.$refs.form1.validateField('hotel')
		},
		stimeClose() {
			this.showStime = false
			this.$refs.form1.validateField('userInfo.birthday')
		},
		stimeConfirm(e) {
			this.showStime = false
			this.info.stime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd') + ' 00:00:00'
			this.$refs.form1.validateField('userInfo.birthday')
		},
		etimeClose() {
			this.showEtime = false
			this.$refs.form1.validateField('userInfo.birthday')
		},
		etimeConfirm(e) {
			this.showEtime = false
			this.info.etime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd') + ' 23:59:59'
			this.$refs.form1.validateField('userInfo.birthday')
		},
		submit() {
			// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
			// this.$refs.form1.validate().then(res => {
			// 	uni.$u.toast('校验通过')
			// }).catch(errors => {
			// 	uni.$u.toast('校验失败')
			// })
			const names = this.getSkilDataNameWhereId(this.skillColumnsIndex, true)
			const ids = this.getSkilDataNameWhereId(this.skillColumnsIndex, false)
			this.info.jobType = 2
			let params = {
				...this.info,
				worktypeIds: ids[0], // 工种一级id
				skillIds: ids[1], // 工种二级id
				worktypeNames: names[0], // 工种名称
				skillNames: names[1], // 工种二级名称
			}
			let that = this
			submitInfo(params).then(res => {
				if (res.data.code == 200) {
					that.reset()
					uni.$u.toast('发布成功')
				}
			})
		},
		reset() {
			const validateList = [
				'jobName',
				'stime',
				'etime',
				'peopleNum',
				'wage',
				'tradeId',
				'tradeNames',
				'worktypeIds',
				'skillIds',
				'worktypeNames',
				'skillNames',
				'jobDescription',
				'ageDesc',
				'education',
				'educationLabel',
				'experienceDesc',
				'jobCompanyName',
				'jobCompanyScale',
				'jobCompanyIndustry',
				'jobCompanyNature',
				'jobCompanyDescription',
				'callName',
				'callTel',
				'callNumber',
				'address'
			]
			this.$refs.form1.resetFields()
			this.$refs.form1.clearValidate()
			setTimeout(() => {
				this.$refs.form1.clearValidate(validateList)
				// 或者使用 this.$refs.form1.clearValidate()
			}, 10)
		},
		hideKeyboard() {
			uni.hideKeyboard()
		},
		skillsChange(e) {
			const { columnIndex, index, picker = this.$refs.uPicker } = e
			let [index1, index2] = this.skillColumnsIndex
			switch (columnIndex) {
				case 0:
					index1 = index;
					index2 = 0
					break
				case 1:
					index2 = index;
					break
			}
			const Indexs = [index1, index2]
			picker.setColumnValues(1, this.skillData[index1].child.map((item) => item.name))
			this.skillColumnsIndex = Indexs
		},
		getSkilDataNameWhereId(Indexs, type = true) {
			if (!this.skillData) { return }
			const [index1, index2] = Indexs
			const work1 = this.skillData[index1]
			const work2 = work1.child[index2]
			if (type) {
				return [work1.name, work2.name]
			} else {
				return [work1.id, work2.id]
			}
		},
		async getWorkTypes() {
			let resData = await getWorktypesBaseList({ type: 1 })
			if (resData.data.code === 200) {
				const { data } = resData.data
				const arr = []
				// 1、 空间换时间策略/user/userrecruit/saveApp
				arr.push(data.map((item) => item.name));
				arr.push(data[0].child.map((item) => item.name))
				this.skillColumnsIndex = [0, 0]
				this.skillData = data
				this.skillColumns = arr

			}
		}
	}
}
</script>

<style>
.map {
	width: 100%;
	height: 350rpx;
	margin-top: 30rpx;
}
</style>