<template>
	<view class="personal">
		<view class="">
			<text class="title">{{bigtitle}}求职意向</text>
			<view class="titleb">不同的求职期望，推荐啊的职位也会不同。</view>
		</view>
		<view class="body-input u-flex-col u-row-center" @click="birthdayBtn">
			<text class="input-title">求职时间</text>
			<u--input :disabled="true" disabledColor="#fff" customStyle="padding:0 !important" type="text"
				placeholder="请选择您的求职时间" border placeholderClass='input-style' suffixIcon="arrow-right"
				suffixIconStyle="font-size: 32rpx;font-weight: 400;color: #CACACA;"
				v-model="job_intention.job_date"></u--input>
		</view>
		<view class="body-input u-flex-col u-row-center" @click="cityShow = true">
			<text class="input-title">期望城市</text>
			<u--input :disabled="true" disabledColor="#fff" customStyle="padding:0 !important" type="text"
				placeholder="请选择您的期望城市" border placeholderClass='input-style' suffixIcon="arrow-right"
				suffixIconStyle="font-size: 32rpx;font-weight: 400;color: #CACACA;" v-model="city1"></u--input>
		</view>
		<view class="body-input u-flex-col u-row-center" @click="show = true">
			<text class="input-title">期望薪资</text>
			<u--input :value="label" :disabled="true" disabledColor="#fff" customStyle="padding:0 !important"
				type="text" placeholder="请选择您的期望薪资" border placeholderClass='input-style' suffixIcon="arrow-right"
				suffixIconStyle="font-size: 32rpx;font-weight: 400;color: #CACACA;"></u--input>
		</view>
		<!-- 		<view class="body-input u-flex-col u-row-center" @click="changehangye">
			<text class="input-title">当前行业</text>
			<u--input :disabled="true" disabledColor="#fff" customStyle="padding:0 !important" type="text"
				placeholder="请选择您的当前行业" border placeholderClass='input-style' suffixIcon="arrow-right"
				suffixIconStyle="font-size: 32rpx;font-weight: 400;color: #CACACA;" v-model="category_three"></u--input>
		</view> -->
		<view class="body-input u-flex-col u-row-center" @click="changehangye1">
			<text class="input-title">期望行业</text>
			<u--input :disabled="true" disabledColor="#fff" customStyle="padding:0 !important" type="text"
				placeholder="请选择您的期望行业" border placeholderClass='input-style' suffixIcon="arrow-right"
				suffixIconStyle="font-size: 32rpx;font-weight: 400;color: #CACACA;"
				v-model="category_industry_name"></u--input>
		</view>
		<!-- 		<view class="body-input u-flex-col u-row-center" @click="changeright1">
			<text class="input-title">当前职位</text>
			<u--input :disabled="true" disabledColor="#fff" customStyle="padding:0 !important" type="text"
				placeholder="请选择您的当前职位" border placeholderClass='input-style' suffixIcon="arrow-right"
				suffixIconStyle="font-size: 32rpx;font-weight: 400;color: #CACACA;" v-model="category_job3"></u--input>
		</view> -->
		<view class="body-input u-flex-col u-row-center" @click="changeright">
			<text class="input-title">期望职位</text>
			<u--input :disabled="true" disabledColor="#fff" customStyle="padding:0 !important" type="text"
				placeholder="请选择您的期望职位" border placeholderClass='input-style' suffixIcon="arrow-right"
				suffixIconStyle="font-size: 32rpx;font-weight: 400;color: #CACACA;"
				v-model="category_job_name"></u--input>
		</view>
		<view class="body-input u-flex-col u-row-center" @click="show1 = true">
			<text class="input-title">所属领域</text>
			<u--input :disabled="true" disabledColor="#fff" customStyle="padding:0 !important" type="text"
				placeholder="请选择您要选择的领域" border placeholderClass='input-style' suffixIcon="arrow-right"
				suffixIconStyle="font-size: 32rpx;font-weight: 400;color: #CACACA;" v-model="category_name"></u--input>
		</view>
		<view class="u-flex u-row-between" style="margin-top: 30rpx;">
			<view class="u-flex" @click="propshow = true">
				<text>付费求职</text>
				<image style="width: 32rpx;height: 32rpx;" src="/static/images/xiangguan.png" mode=""></image>
			</view>
			<u-switch :disabled="job_intention.is_pay==1?true:false" v-model="button"
				@change="tixing = true"></u-switch>
		</view>
		<view class="u-flex u-row-between bot" style="height: 120rpx;">
			<view class="safe-area-inset-bottom"></view>
			<view v-if="type==2" class="button1" @click="dele">
				删除
			</view>
			<view class="button" @click="next">
				保存
			</view>
			<view class="safe-area-inset-bottom"></view>
		</view>
		<u-datetime-picker ref="picker" title="求职时间" :minDate="minDate" @confirm="birthdayConfirm" :show="birthdayShow"
			mode="date" @cancel='birthdayShow = false'></u-datetime-picker>
		<u-picker ref="uPicker" keyName="name" title="期望城市" :defaultIndex="indexs" :show="cityShow" :columns="cityList"
			@confirm="cityconfirm" @cancel="cityShow = false" @change="changeHandler"></u-picker>
		<u-popup :show="propshow" mode="center" @close="propshow = false" round="20">
			<view style="width:570rpx ;padding: 32rpx;border-radius: 20rpx;">
				<text>{{concant}}</text>
				<view class="u-flex" style="justify-content: center;">
					<view class="btn" @click="propshow=false">
						我知道了
					</view>
				</view>
			</view>
		</u-popup>
		<u-modal :showCancelButton="true" :show="delec" :title="title" :content='content' @confirm="confirm"
			@cancel="delec = false"></u-modal>
		<u-picker keyName="label" title="期待薪资" :show="show" :columns="xinzilist" @confirm="xin"
			@cancel="show = false"></u-picker>
		<!-- 		<u-picker keyName="name" title="所属领域" :show="show1" :columns="category_list" @confirm="category1"
			@cancel="show1 = false"></u-picker> -->
		<u-picker ref="uPicker1" keyName="name" title="所属领域" :defaultIndex="indexs" :show="show1"
			:columns="category_list" @confirm="category1" @cancel="show1 = false" @change="changecategory"></u-picker>
		<u-modal @confirm="change" :show="tixing" :title="title1" :content='content1' :showCancelButton="true"
			@cancel="tixing = false;button=false"></u-modal>
	</view>
</template>

<script setup>
	import {
		getAllArea,
		update,
		resumeDetail,
		destroy,
		pay,
		get_category_field,
		get_agreement_detail
	} from "@/units/inquire.js"
	export default {
		data() {
			return {
				concant: '',
				tixing: false,
				title1: "提示",
				content1: "付费求职选择后不可中途取消，确定要选择吗?",
				show1: false,
				category_list: [],
				label: "",
				show: false,
				title: "您确定要删除该求职意向吗？",
				delec: false,
				type: 2,
				bigtitle: "添加",
				button: false,
				propshow: false,
				province: [], //省数据
				city: [], //市数据
				area: [], //区数据
				provinceid: "", //省数据
				cityid: "", //市数据
				areaid: "", //区数据
				indexs: [], //默认地区下标
				//选择器状态
				birthdayShow: false, //出生年月
				workShow: false, //工作时间
				cityShow: false, //户口所在地
				jobShow: false, //工作显示
				cityList: [], //数据地址
				cityids: [], //数据地址
				joblist: [],
				id: "",
				category_three: "",
				category_job3: "",
				city1: "", //string	期望城市名称(求职意向
				category_industry_name: "", //string	行业名称(求职意向
				category_job_first_name: "", //string	职业分类一级名称(求职意向
				category_job_second_name: "", //string	职业分类二级名称(求职意向
				category_job_name: "", //string	职位分类名称(求职意向
				category_field_name: "", //string	领域名称(求职意向
				job_intention: {
					category_field_first: '',
					category_field_id: '',
					job_date: "", //date	求职时间(求职意向
					province_id: "", //string	期望省份ID(求职意向
					city_id: "", //string	期望城市ID(求职意向	
					salary_type: "month", //string	薪资类型: year=年薪;month=月薪(求职意向
					salary: "", //string	薪水(求职意向
					// salary_month: "", //string	一年多少薪(求职意向
					// category_field_id: "", //string	领域ID(求职意向
					category_industry_first: "", //string	行业一级ID(求职意向
					category_industry_id: "", //string	行业ID(求职意向
					category_job_first: "", //string	职业分类一级ID(求职意向
					category_job_second: "", //string	职业分类二级ID(求职意向
					category_job_id: "", //string	职位分类ID(求职意向
					is_pay: 0,
					// city1: "",
					source_id: this.id
				},
				xinzilist: [

				],
				category_field_first: [],
				category_two: [],
				category_name: ''

			}
		},
		onLoad(opsition) {
			this.get_agreement_detail()
			this.AllArea()
			this.xinzi()
			this.get_category_field()
			this.id = opsition.id
			// console.log(this.id);
			this.type = opsition.type
			console.log(this.type);
			if (opsition.type == 1) {
				this.bigtitle = "添加"
			} else {
				this.bigtitle = "编辑"
				this.resumeDetail()
			}
		},
		methods: {
			get_agreement_detail() {
				get_agreement_detail({
					code: 'pay_for_job'
				}).then(res => {
					this.concant = res.data.content
				})
			},
			changecategory(e) {
				const {
					columnIndex, //当前改变值的列下标
					value,
					values, // values为当前变化列的数组内容
					indexs, //当前地区值下标
					picker = this.$refs.uPicker1
				} = e
				//columnIndex代表第几列，意思是下标为0的列发生变化

				if (columnIndex === 0) {
					if (this.category_two[indexs[0]]) {
						picker.setColumnValues(1, this.category_two[indexs[0]].map(v => {
							return {
								name: v.name,
								id: v.id
							}
						}))
					} else {
						value = ""
					}
					// picker.setColumnValues(2, this.area[indexs[0]][0].map(v => {
					// 	return {
					// 		name: v.name,
					// 		id: v.id
					// 	}
					// }))
				}
			},
			category1(e) {
				console.log('kkkk', e);
				let a = ''
				if (e.value[1]) {
					a = e.value[0].name + e.value[1].name
				} else {
					a = e.value[0].name
				}
				if (e.value[1]) {
					this.job_intention.category_field_id = e.value[1].id
					this.job_intention.category_field_first = e.value[0].id
				} else {
					this.job_intention.category_field_first = e.value[0].id
				}
				// let ids = String(e.value[0].id) + String(e.value[1].id)


				this.category_name = a
				this.show1 = false
				// this.city1 = e.value.join("")
			},
			get_category_field() {
				get_category_field().then(res => {
					res.data.forEach(item => {
						if (item.childlist) {

						} else {
							item.childlist = []
							res.data.push(item)
						}
					})

					this.category_field_first = res.data.map(t => {
						return {
							name: t.name,
							id: t.id
						}
					})
					console.log("aaa", this.category_field_first);
					this.category_two = res.data.map(t => {
						if (t.childlist) {
							var c = []
							c = t.childlist.map(v => {
								console.log(v);
								return {
									name: v.name,
									id: v.id
								}
							})
						}
						return c
					})
					console.log('category_two', this.category_two);
					let a = []
					let b = []
					this.category_field_first.map(res => {
						a.push({
							name: res.name,
							id: res.id,
						})
					})
					this.category_two[0].map(res => {
						b.push({
							name: res.name,
							id: res.id,
						})
					})
					this.category_list = [a, b]
				})
			},
			xin(e) {
				this.job_intention.salary = e.value[0].value
				this.label = e.value[0].label
				this.show = false
			},
			xinzi() {
				var xinzilist = []
				for (var i = 1; i <= 700; i++) {
					xinzilist.push({
						label: `${i}K`,
						value: i
					})
				}
				this.xinzilist.push(xinzilist)
			},
			dele() {
				this.delec = true
			},
			confirm() {
				destroy({
					source_type: "job_intention",
					source_id: this.id
				}).then(res => {
					this.$u.toast("删除成功")
					setTimeout(() => {
						const eventChannel = this.getOpenerEventChannel()
						eventChannel.emit("refresh", "")
						uni.navigateBack()
					}, 800)
				})
			},
			resumeDetail() {
				resumeDetail().then(res => {
					res.data.job_intention.forEach((item) => {
						if (item.id == this.id) {
							this.job_intention.category_field_first = item.category_field_first
							this.label = item.salary + "k"
							this.job_intention.category_field_id = item.category_field_id
							this.category_name = item.category_field_name
							this.job_intention.category_industry_first = item.category_industry_first
							this.job_intention.category_industry_id = item.category_industry_id
							this.category_industry_name = item.category_industry_name
							this.job_intention.category_job_first = item.category_job_first
							this.job_intention.category_job_first_name = item.category_job_first_name
							this.job_intention.category_job_id = item.category_job_id
							this.category_job_name = item.category_job_name
							this.job_intention.category_job_second = item.category_job_second
							this.category_job_second_name = item.category_job_second_name
							this.city1 = item.province + item.city
							this.job_intention.city_id = item.city_id
							this.job_intention.is_pay = item.is_pay
							if (this.job_intention.is_pay == 0) {
								this.button = false
							} else {
								this.button = true
							}
							this.job_intention.job_date = item.job_date
							this.job_intention.province_id = item.province_id
							this.job_intention.salary = item.salary
							this.job_intention.salary_month = item.salary_month
							this.job_intention.salary_type = item.salary_type
							this.job_intention.source_id = this.id

						}
					})
				})
			},
			//保存
			next() {
				// if (!this.job_intention.job_date) {
				// 	this.$u.toast("请选择求职时间")
				// 	return
				// }
				if (!this.city1) {
					this.$u.toast("请选择期望城市")
					return
				}
				if (!this.category_industry_name) {
					this.$u.toast("请选择期望行业")
					return
				}
				if (!this.category_job_name) {
					this.$u.toast("请选择职位")
					return
				}
				update({
					source_type: "job_intention",
					...this.job_intention
				}).then(res => {
					const eventChannel = this.getOpenerEventChannel();
					eventChannel.emit('refresh', '');
					uni.navigateBack()
				})
			},
			change(e) {
				if (this.button) {
					this.job_intention.is_pay = 1
					// pay({
					// 	id: this.id
					// }).then(res => {
					// 	console.log(res);
					// 	if (res.code == 1) {

					// 	} else {
					// 		this.$u.toast(res.msg)
					// 		this.job_intention.is_pay = 0
					// 		this.resumeDetail()
					// 	}
					// })
				} else {
					this.job_intention.is_pay = 0
				}
				this.tixing = false
			},
			//所有地区
			AllArea() {
				getAllArea().then((res) => {
					// console.log(res);
					this.province = res.data.map(t => {
						return {
							name: t.name,
							id: t.id
						}
					})
					// console.log("aaa", this.province);
					this.city = res.data.map(t => t.children.map(v => {
						return {
							name: v.name,
							id: v.id
						}
					}))
					this.area = res.data.map(t => t.children.map(v => v.children.map(i => {
						return {
							name: i.name,
							id: i.id
						}
					})))
					//默认显示数据
					// this.cityList = [
					// 	this.province.map(res => res.name),
					// 	this.city[0].map(res => res.name),
					// 	this.area[0][0].map(res => res.name)
					// ]
					let a = []
					let b = []
					let c = []
					this.province.map(res => {
						a.push({
							name: res.name,
							id: res.id,
						})
					})
					this.city[0].map(res => {
						b.push({
							name: res.name,
							id: res.id,
						})
					})
					this.area[0][0].map(res => {
						c.push({
							name: res.name,
							id: res.id,
						})
					})
					this.cityList = [a, b, c]
				})
			},
			changeHandler(e) {
				const {
					columnIndex, //当前改变值的列下标
					value,
					values, // values为当前变化列的数组内容
					indexs, //当前地区值下标
					picker = this.$refs.uPicker
				} = e
				//columnIndex代表第几列，意思是下标为0的列发生变化

				if (columnIndex === 0) {
					picker.setColumnValues(1, this.city[indexs[0]].map(v => {
						return {
							name: v.name,
							id: v.id
						}
					}))
					picker.setColumnValues(2, this.area[indexs[0]][0].map(v => {
						return {
							name: v.name,
							id: v.id
						}
					}))
				}
				if (columnIndex === 1) {
					picker.setColumnValues(2, this.area[indexs[0]][indexs[1]].map(v => {
						return {
							name: v.name,
							id: v.id
						}
					}))
				}
			},
			//点击显示时间选择器
			birthdayBtn() {
				this.birthdayShow = true
				//new Date(this.endDate).getTime()为你需要在选择器上显示的时间戳
				this.$refs.picker.innerValue = new Date(946656000000).getTime()
			},
			//出生日期选择器
			async birthdayConfirm(e) {
				const timeFormat = uni.$u.timeFormat;
				let timeValue = await timeFormat(e.value, 'yyyy-mm-dd');
				this.job_intention.job_date = timeValue;
				this.birthdayShow = false
			},
			//户口地址
			cityconfirm(e) {
				let a = e.value[0].name + e.value[1].name + e.value[2].name
				let ids = String(e.value[0].id) + String(e.value[1].id) + String(e.value[2].id)
				this.job_intention.province_id = e.value[1].id
				this.job_intention.city_id = e.value[0].id
				// this.city1 = e.value.join("")
				this.city1 = a
				this.cityShow = false
			},
			changehangye() {
				uni.navigateTo({
					url: "/pagesA/change-hangye1",
					events: {
						changehangye: (res) => {
							// this.job_intention.category_one = res[0].id, //行业一级ID
							// 	this.job_intention.category_two = res[1].id, //行业二级ID
							this.category_three = res[1].name //行业名称
						}
					}
				})
			},
			changehangye1() {
				uni.navigateTo({
					url: "/pagesA/change-hangye1",
					events: {
						changehangye: (res) => {
							// console.log(res);
							// res.forEach((item) => {
							// 	this.category_industry_name += item.name + " "
							// 	// this.category_industry_id = item.id
							// })
							this.category_industry_name = res[1].name
							this.job_intention.category_industry_first = res[0].id, //行业一级ID
								this.job_intention.category_industry_id = res[1].id //行业二级ID
						}
					}
				})
			},
			changeright() {
				uni.navigateTo({
					url: "/pagesA/change-zhiwei",
					events: {
						changefenlei: (res) => {
							this.job_intention.category_job_first = res[0].id //string	职业分类一级ID(求职意向
							this.job_intention.category_job_second = res[1].id //string	职业分类二级ID(求职意向
							this.job_intention.category_job_id = res[2].id //string	职位分类ID(求职意向
							this.category_job_first_name = res[0].name //string	职业分类一级名称(求职意向
							this.category_job_second_name = res[1].name //string	职业分类二级名称(求职意向
							this.category_job_name = res[2].name
						}
					}
				})
			},
			changeright1() {
				uni.navigateTo({
					url: "/pagesA/change-zhiwei",
					events: {
						changefenlei: (res) => {
							this.category_job3 = res[2].name
						}
					}
				})
			}
		}
	}
</script>


<style lang="scss">
	.bot {
		position: fixed;
		bottom: 0;
		width: 682rpx;
	}

	.btn {
		background: #0C66C2;
		border-radius: 16rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		width: 310rpx;
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
		margin-top: 24rpx;
	}

	//个人信息
	.personal {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		margin-top: -40rpx;
		position: relative;
		z-index: 99;
		padding: 40rpx 32rpx 0;
		margin-bottom: 60rpx;
		box-sizing: border-box;

		.title {
			font-size: 48rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
		}

		.titleb {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #777777;
			margin-top: 20rpx;
		}

		.body-input {
			height: 150rpx;
			border-bottom: 2rpx solid #F4F4F4;

			.input-title {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #888888;
				margin-top: 30rpx;
				box-sizing: border-box;
			}

			.input-style {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #CACACA;
			}
		}

		.button1 {
			width: 256rpx;
			background: #F3F3F3;
			border-radius: 12rpx;
			margin-right: 24rpx;
			padding: 20rpx 50rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			text-align: center;
			height: 88rpx !important;
			box-sizing: border-box;
		}

		.button {
			flex: 1;
			height: 88rpx !important;
			background: #0C66C2;
			border-radius: 12rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 88rpx;
			display: flex;
			justify-content: center;
		}
	}
</style>