<template>
	<view class="addIntention">
		<u-form
			labelPosition="top"
			:model="userInfo"
			:rules="rules"
			ref="uForm"
			labelWidth="120"
		>
			<u-form-item label="期望职位" prop="workType">
				<u-cell
					size="large"
					isLink
					@click="showDialog2 = true"
				>
					<view slot="title">
						<view v-if="userInfo.industryName">{{userInfo.industryName}}</view>
						<view class="cell-placeholder" v-else>选择期望职位</view>
					</view>
				</u-cell>
			</u-form-item>
			<u-form-item label="工作城市" prop="city">
				<u-cell
					size="large"
					isLink
					@click="showDialog = true"
				>
					<view slot="title">
						<view v-if="userInfo.city">{{userInfo.province }}-{{userInfo.city}}</view>
						<view class="cell-placeholder" v-else>选择工作城市</view>
					</view>
				</u-cell>
			</u-form-item>
			<u-form-item label="薪资要求" prop="salaryMin">
				<u-cell
					size="large"
					isLink
					@click="setSalary"
				>
					<view slot="title">
						<view v-if="userInfo.salaryMin && userInfo.salaryMax">{{userInfo.salaryMin}}-{{userInfo.salaryMax}}</view>
						<view class="cell-placeholder" v-else>选择薪资范围</view>
					</view>
				</u-cell>
				<u-picker
					:show="salaryShow"
					:columns="salaryList"
					@confirm="confirmSalary"
					@cancel="salaryShow = false"
					@change="changeSalary"
				></u-picker>
			</u-form-item>
			<u-form-item label="工作性质" prop="workType">
				<u-cell
					size="large"
					isLink
					@click="workTypeShow = true"
				>
					<view slot="title">
						<view v-if="workTypeList[0]">{{workTypeList.join('/')}}</view>
						<view class="cell-placeholder" v-else>如：全职</view>
					</view>
				</u-cell>
				<u-popup :show="workTypeShow" :round="10" mode="bottom">
					<view class="work_type">
						<view class="f_b">
							<view class="">工作性质(可多选)</view>
							<view class="btn" @click="workTypeShow=false">确认</view>
						</view>
						<view class="f_s" style="flex-wrap: wrap;">
							<view
								:class="workTypeList.includes(item) ? 'it itActive' : 'it'"
								v-for="item in workAll"
								@click="toggleWork(item)"
							>{{item}}</view>
						</view>
					</view>
				</u-popup>
			</u-form-item>
		</u-form>
		<view class="br"></view>
		<view class="footer">
			<u-button @click="submit" type="primary" shape="circle">保存</u-button>
		</view>
		<well-tree-select
			@clickThird="clickThird"
			@clickSub="clickSub"
			@clickNav="clickNav"
			:showDialog.sync="showDialog"
			:data="areaList"
			:max-selected="1"
			:selected-values="selectedValues"
			@doConfirm="showDialog = false"
		/>
		<well-tree-select2
			@clickThird="clickThird2"
			@clickSub="clickSub2"
			@clickNav="clickNav2"
			:showDialog.sync="showDialog2"
			:data="industryList"
			:max-selected="1"
			:selected-values="selectedValues"
			@doConfirm="showDialog2 = false"
		/>
	</view>
</template>

<script>
	import wellTreeSelect from '../../../components/well-treeSelect/well-treeSelect.vue';
	import wellTreeSelect2 from '../../../components/well-treeSelect/well-treeSelect2.vue';
	import { areaList } from '../../../util/area.js'
	export default {
		components: {
			wellTreeSelect,
			wellTreeSelect2
		},
		data() {
			return {
				userInfo:{},
				industryList: [],
				workTypeShow: false,
				workTypeList: [],
				workAll: [],
				salaryShow: false,
				salaryList: [
					['1000', '2000', '3000', '4000', '5000', '6000', '7000', '8000', '9000', '10000', '11000', '12000', '13000', '14000', '15000', '16000', '17000', '18000', '19000', '20000', '21000', '22000', '23000', '24000', '25000', '26000', '27000', '28000', '29000', '30000'],
					['2000', '3000', '4000', '5000', '6000', '7000', '8000', '9000', '10000', '11000', '12000', '13000', '14000', '15000', '16000', '17000', '18000', '19000', '20000', '21000', '22000', '23000', '24000', '25000', '26000', '27000', '28000', '29000', '30000'],
				],
				
				
				selectedValues: ['3-1-2'],
				areaList: areaList,
				showDialog: false,
				showDialog2: false,
				v1: '',
				v2: '',
				v3: '',
			}
		},
		onLoad(o) {
			this.userInfo.personId = o.id
			this.$http.get('/public/industry/l/all', {}).then(res => {
				this.industryList = res.data
			})
			this.$http.get('/recruit/type/all', {}).then(res => {
				this.workAll = res.data.list.map(item => item.name)
			})
			// 编辑
			if (o.objectiveId) {
				this.userInfo.id = o.objectiveId
				this.$http.get('/objective/details', {id: o.objectiveId}).then(res => {
					this.userInfo = {
						...this.userInfo,
						city:res.data.city,
						province: res.data.province,
						region: res.data.region,
						salaryMin:res.data.salaryMin,
						salaryMax:res.data.salaryMax,
						workType:res.data.workType,
						industryName: res.data.industryName,
						
						// industryId: res.data.industryId,
					}
					this.workTypeList = res.data.workType.split('/')
				})
			}
		},
		methods: {
			clickNav(item) {
				this.v1 = item.label
			},
			clickSub(item) {
				this.v2 = item.label
				this.userInfo.province  = this.v1
				this.userInfo.city = this.v2
				this.showDialog = false
			},
			clickThird(item) {
				this.v3 = item.label
				// this.userInfo.city = `${this.v1}-${this.v2}-${this.v3}`
				this.userInfo.province  = this.v1
				this.userInfo.city = this.v2
				this.userInfo.region = this.v3
				this.showDialog = false
			},
			clickNav2(item) {
				this.v1 = item.name
			},
			clickSub2(item) {
				this.v2 = item.name
			},
			clickThird2(item) {
				this.v3 = item.name
				// this.userInfo.industryName = `${this.v1}-${this.v2}-${this.v3}`
				this.userInfo.industryName = `${this.v3}`
				// industryId
				this.showDialog2 = false
			},
			
			toggleWork(e) {
				if (this.workTypeList.includes(e)) {
					this.workTypeList = this.workTypeList.filter(item => item != e)
				} else {
					this.workTypeList.push(e)
				}
				this.userInfo.workType = this.workTypeList.join('/')
			},
			setSalary() {
				this.salaryShow = true
			},
			changeSalary(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, values[0].slice(index + 1))
				}
			},
			confirmSalary(e) {
				if (e.value.length == 2) {
					this.userInfo.salaryMin = e.value[0]
					this.userInfo.salaryMax = e.value[1]
				}
				this.salaryShow = false
			},
			submit(){
				if (!this.userInfo.industryName) {
					return uni.showToast({
						title: '请选择期望职位',
						icon: 'none'
					})
				}
				if (!this.userInfo.city) {
					return uni.showToast({
						title: '请输入工作城市',
						icon: 'none'
					})
				}
				if (!this.userInfo.salaryMin || !this.userInfo.salaryMax) {
					return uni.showToast({
						title: '请输入薪资',
						icon: 'none'
					})
				}
				if (!this.userInfo.workType) {
					return uni.showToast({
						title: '请选择工作性质',
						icon: 'none'
					})
				}
				const url = this.userInfo.id ? '/objective/u' : '/objective/c'
				this.$http.post(url, this.userInfo).then(res => {
					uni.showToast({
					  title: this.userInfo.id ? `修改成功` : '新增成功',
					  icon: 'none',
					});
					setTimeout(()=>{
						uni.navigateBack()
					},500)
				})
			}
		}
	}
</script>

<style lang="scss">
.addIntention{
	background: #fff;
	min-height:100vh;
	padding:0 30rpx;
	.br{
		height: calc(200rpx + env(safe-area-inset-bottom));
	}
	.work_type{
		padding: 30rpx 30rpx calc(env(safe-area-inset-bottom) + 150rpx);
		.btn{
			color: $uni-color-primary;
			padding: 10rpx;
		}
		.it{
			height: 60rpx;
			padding: 0 30rpx;
			font-size: 32rpx;
			text-align: center;
			line-height: 60rpx;
			margin-right: 30rpx;
			margin-top: 40rpx;
			color: #333;
			background: #eee;
			border-radius: 6rpx;
		}
		.itActive{
			color: $uni-color-primary;
			background-color: rgba($uni-color-primary, .1);
		}
	}
	.footer{
		position: fixed;
		bottom: calc(env(safe-area-inset-bottom) + 40rpx);
		width: 690rpx;
	}
}
</style>
