<script setup lang="ts">
    import { reactive, toRefs, ref, computed } from 'vue'
    import { onLoad, onShow } from '@dcloudio/uni-app'
    import { useUserStore } from '@/store/modules/user'
    import { useGlobSetting } from '/@/hooks/setting'
    import * as LinghuoyonggongAPI from '@/api/model/linghuoyonggong'
	import { getCalculateAge } from '@/utils/date'
    import * as UserInfoAPI from '@/api/model/userInfo'
    import { areaTree, getCodeByText, getTextByCode } from '@/utils/areaData'
    import { useDictStore } from '@/store/modules/dict'
    import { getDictData, getText } from '@/utils/dict/area'
	
	
    const dictStore = useDictStore()
    const userStore = useUserStore()
    const globSetting = useGlobSetting()
	let pageType= 'add';
	
    onLoad((option) => {
        // 获取数据详情
        if (option && option.id) {
			pageType = 'edit';
			uni.setNavigationBarTitle({title: '编辑'});
            getDetails(option.id)
        } else {
            // 获取当前位置
            getCurrentAddressInfo()
        }
		getProvince();
		// 获取字典值
		getDictVal();
    })

    onShow(() => {
        // 数据字典赋值
        initDict()
    })
	const VerificationInfo1 = {
		addr:'请选择村',
		contactName:'请输入联系人',
		contactMobile:'请输入联系电话'
	}
	const VerificationInfo2 = {
		name:'请输入姓名',
		mobile:'请输入手机号',
		genderZh:'请选择性别',
		birthday:'请选择出生日期',
		eduZh:"请选择学历",
		attr:"请选择人员属性",
		skill:"请选择人员技能"
	}
	const skillPopupRef = ref(null);
	let tempWorkersParam = reactive({
		id:null,
		laborId:null,	//用工信息ID
		name:"",// 工人姓名
		mobile:"",// 手机号
		gender:null,// 性别
		genderZh:"",
		birthday:"", // 出生日期
		edu:null,// 学历
		eduZh:"",
		attr:"",// 人员属性
		skill:"", // 人员技能
	})
	let startDate = getDate('start');
	const endDate = getDate('end');
	// 字典值
	const DictData = reactive({
		sexArr:[],// 性别
		educationArr:[],// 学历
		socialattributesArr:[],// 人员属性
		
		dictValArr:[],// 过渡
		dictType:"",
		
		isSkillPopupShow:false,
		skillValue:[],
		skillOptionsVal:[],
		
	})
	
    const pageData = reactive({
		province: [], //省数组
		city: [], //市数组
		district: [], //区数组
		street: [], //街道数组
		mulSelect: [], //四级联动显示数组，该数组的值为[[province],[city],[district],[street]]
		provinceId: 0, //省的id
		cityId: 0, //市的id
		districtId: 0,//区的id
		isActive:false,
		address:'',
		birthdayPickerIsShow:false,
		
		laborParam:{
			id:null,
			lon:"", // 经度
			lat:"", // 纬度
			contactName:"", // 联系人姓名
			contactMobile:"", // 联系人电话
			provinceName:"湖南省", // 所属省名称
			provinceCode:"43", // 所属省编码
			
			cityName:"", // 所属市名称
			cityCode:"", // 所属市编码
			districtName:"", // 所属区县名称
			districtCode:"", // 所属区县编码
			townName:"", // 所属乡镇名称
			townCode:"", // 所属乡镇编码
			villageName:"", // 村名称
			villageCode:"", // 村编码
			
			addr:"",
		},
		workersParam:[],
		actionType:'add',
		editWorkersIndex:0,
		
        loading: false,
		isPersonPopupShow:false,
		datePickerShow:false,
		attrPickerShow:false,
		show: {
            time1: false,
            time2: false,
            area: false,
            urgentdegree: false,
            type: false,
        },
        options: {
            area: [],
            urgentdegree: [],
            type: [],
        },
        form: {
            id: '',
            name: '',
            content: '',
            price: '',
            typeText: '',
            type: null,
            area: '',
            areaText: '',
            province: '',
            city: '',
            country: '',
            address: '',
            urgentdegreeText: '',
            urgentdegree: null,
            starttime: '',
            estimatedendtime: '',
            picture: null,
            pictureObj: null,
            longitude: '',
            latitude: ''
        },
        position: [],
        rules: [
            {
                name: 'type',
                rule: ['required'],
                msg: ['请选择用工类型'],
            },{
                name: 'name',
                rule: ['required'],
                msg: ['请输入标题'],
            }, {
                name: 'workers',
                rule: ['required'],
                msg: ['请输入工人数量'],
            }, {
                name: 'price',
                rule: ['required'],
                msg: ['请输入用工单价'],
            }, {
                name: 'starttime',
                rule: ['required'],
                msg: ['请选择开始时间'],
            }, {
                name: 'estimatedendtime',
                rule: ['required'],
                msg: ['请选择预计结束时间'],
            }, {
                name: 'content',
                rule: ['required'],
                msg: ['请输入工作内容'],
            }, {
                name: 'area',
                rule: ['required'],
                msg: ['请选择地区'],
            }, {
                name: 'address',
                rule: ['required'],
                msg: ['请输入详细地址'],
            }, {
                name: 'urgentdegree',
                rule: ['required'],
                msg: ['请选择紧急程度'],
            },  {
                name: 'picture',
                rule: ['required'],
                msg: ['请上传图片'],
            },
        ],
    })
	// 获取字典值
	function getDictVal(){
		LinghuoyonggongAPI.gitListByCodeDict({ code : 'sex'}).then(res=>{
			DictData.sexArr = res;
		})
		LinghuoyonggongAPI.gitListByCodeDict({ code : 'education'}).then(res=>{
			DictData.educationArr = res;
		})
		LinghuoyonggongAPI.gitListByCodeDict({ code : 'socialattributes'}).then(res=>{
			DictData.socialattributesArr = res;
		})
		
		queryByCategoryAndCode(0,null);
		
	}
	function queryByCategoryAndCode(code,e){
		LinghuoyonggongAPI.queryByCategoryAndCode({ category : 1,code : code}).then(res=>{
			if(res.length){
				let dataArr = [];
				for(let i = 0; i < res.length; i++){
					let obj = {text:"",value:""};
					obj.text = res[i].name;
					obj.value = res[i].code;
					dataArr.push(obj);
				}
				if(!DictData.skillOptionsVal.length){
					DictData.skillOptionsVal = dataArr;
				}else{
					skillPopupRef.value.setRequestData(dataArr, e.layer);
				}
			}else{
				skillPopupRef.value.end();
			}
		})
	}
	// 选择技能完成
	function selectCompleteSkill(e){
		// tempWorkersParam.skill = e.text.join('');
		let valText = e.text[e.text.length-1];
		if(tempWorkersParam.skill.length){
			let skillArray = tempWorkersParam.skill.split("、");
			if(skillArray.length < 3){
				tempWorkersParam.skill = tempWorkersParam.skill+'、'+valText;
			}else{
				toastRef.value.show({
				    type: 'error',
				    text: '最多只能选择3项技能！',
				})
			}
		}else{
			tempWorkersParam.skill = valText;
		}
		DictData.isSkillPopupShow = false;
	}
	// 技能值发生了改变
	function changeSkill(e){
		let val = e.value;
		queryByCategoryAndCode(val,e);
	}
	// 学历和属性的选择
	function attrChange(e) {
		if(DictData.dictType == 'education'){
			let educationArr = DictData.educationArr;
			tempWorkersParam.eduZh = e.value;
			for(let i = 0; i < educationArr.length; i++){
				if(e.value == educationArr[i].itemText){
					tempWorkersParam.edu = parseInt(educationArr[i].itemValue);
					break;
				}
			}
		}
		if(DictData.dictType == 'socialattributes'){
			tempWorkersParam.attr = e.value;
		}
		pageData.attrPickerShow = false;
	}
	
	// 出生日期的选择
	function dateBirthChange(e) {
		tempWorkersParam.birthday = e.result;
		pageData.datePickerShow = false;
	}
	function getDate(type) {
		const date = new Date();
		let year = date.getFullYear();
		let month:any = date.getMonth() + 1;
		let day:any = date.getDate();
		if (type === 'start') {
			year = year - 18;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`;
	}
	// 删除人员
	function delPersonData(name){
		Message.confirm('你真的要删除【'+name+'】吗?', '温馨提示').then(async (confirm) => {
			if(confirm){
				pageData.workersParam.splice(pageData.editWorkersIndex, 1);
				pageData.isPersonPopupShow = false
			}
		})
	}
	// 添加人员
	function addPersonData(){
		tempWorkersParam.gender = parseInt(tempWorkersParam.genderZh);
		let entries = Object.entries(VerificationInfo2);
		for (let [key, value] of entries) {
			if(tempWorkersParam[key].trim().length === 0){
				toastRef.value.show({
				    type: 'error',
				    text: value,
				})
				return;
			}
		}
		if(pageData.actionType == 'edit'){
			let editObj = pageData.workersParam[pageData.editWorkersIndex];
			Object.keys(tempWorkersParam).forEach((item) => {
				editObj[item] = tempWorkersParam[item];
			 });
		}else{
			pageData.workersParam.push(JSON.parse(JSON.stringify(tempWorkersParam)));
		}
		pageData.isPersonPopupShow = false;
	}
	// 返回字典中的中文值
	function returnDictZhVel(type:any,val:any){
		let valText = "";
		if(type == 'gender'){
			let arr = DictData.sexArr;
			for(let i = 0; i < arr.length;i++){
				if(val == parseInt(arr[i].itemValue)){
					valText = arr[i].itemText;
					break;
				}
			}
		}
		if(type == 'edu'){
			let arr = DictData.educationArr;
			for(let i = 0; i < arr.length;i++){
				if(val == parseInt(arr[i].itemValue)){
					valText = arr[i].itemText;
					break;
				}
			}
		}
		return valText;
	}
	
	// 选择出生日期
	function onPickerTap(e) {
		let dataVal = null,itemTextArr = [];
		DictData.dictType = e;
		if(DictData.dictType == 'education'){
			dataVal = DictData.educationArr;
			for(let i = 0; i < dataVal.length; i++){
				itemTextArr.push(dataVal[i].itemText);
			}
		}
		if(DictData.dictType == 'socialattributes'){
			dataVal = DictData.socialattributesArr;
			for(let i = 0; i < dataVal.length; i++){
				itemTextArr.push(dataVal[i].itemText);
			}
		}
		DictData.dictValArr = itemTextArr;
		pageData.attrPickerShow = true
	}
	// 打开添加人员弹出框
	function openAddPersonPopup(){
		tempWorkersParam.id=null;
		tempWorkersParam.laborId=null;
		tempWorkersParam.name="";
		tempWorkersParam.mobile="";
		tempWorkersParam.gender="";
		tempWorkersParam.genderZh="";
		tempWorkersParam.birthday="";
		tempWorkersParam.edu="";
		tempWorkersParam.eduZh="";
		tempWorkersParam.attr="";
		tempWorkersParam.skill="";
		pageData.actionType = "add";
		pageData.isPersonPopupShow = true;
	}
	// 编辑找人干活待业人员
	function editPersonPopup(index){
		let workersParamObj = pageData.workersParam[index];
		workersParamObj.eduZh = returnDictZhVel('edu',workersParamObj.edu);
		if(pageType == 'edit'){
			workersParamObj.genderZh = workersParamObj.gender+'';
			startDate = workersParamObj.birthday;
		}
		
		// workersParamObj.skill.split("、");
		Object.keys(workersParamObj).forEach((item) => {
			tempWorkersParam[item] = workersParamObj[item];
		});
		pageData.actionType = "edit";
		pageData.editWorkersIndex = index;
		pageData.isPersonPopupShow = true;
	}
	function colChange(e) {
		switch (e.detail.column){
			case 0://选择市
				pageData.provinceId = pageData.mulSelect[0][e.detail.value].code;
				// 获取对应的 区县
				LinghuoyonggongAPI.queryConditions({ parentCode : pageData.provinceId}).then(res=>{
					pageData.city = res;
					pageData.mulSelect[1]= pageData.city;
					// 获取对应的乡镇
					LinghuoyonggongAPI.queryConditions({ parentCode : pageData.city[0].code}).then(res=>{
						pageData.district = res;
						pageData.mulSelect[2]= pageData.district;
						// 获取对应的村
						LinghuoyonggongAPI.queryConditions({ parentCode : pageData.district[0].code}).then(res=>{
							pageData.street = res;
							if(res.length){
								pageData.mulSelect[3]= pageData.street;
							}
						})
					})
				})
				break;
			case 1://选择区县
				pageData.cityId=pageData.mulSelect[1][e.detail.value].code;
				// 获取对应的乡镇
				LinghuoyonggongAPI.queryConditions({ parentCode :pageData.cityId}).then(res=>{
					pageData.district = res;
					pageData.mulSelect[2]=pageData.district;
					// 获取对应的村
					LinghuoyonggongAPI.queryConditions({ parentCode :pageData.district[0].code}).then(res=>{
						if(res.length){
							pageData.street = res;
							pageData.mulSelect[3]=pageData.street;
						}
					})
				})
				break;
			case 2://选择镇
				pageData.districtId=pageData.mulSelect[2][e.detail.value].code;
				LinghuoyonggongAPI.queryConditions({ parentCode :pageData.districtId}).then(res=>{
					if(res.length){
						pageData.street = res;
						pageData.mulSelect[3]=pageData.street;
					}
				});
				break;
			default:
				break;
		}
	}
		
	function getProvince() {
		LinghuoyonggongAPI.queryConditions({ parentCode : 43 }).then(res=>{
			pageData.province = [];
			pageData.province = res;
			pageData.mulSelect.push(pageData.province);
			let code = pageData.province[0].code;
			LinghuoyonggongAPI.queryConditions({ parentCode : code}).then(res=>{
				pageData.city = res;
				pageData.mulSelect.push(pageData.city);
				let code = pageData.city[0].code;
				LinghuoyonggongAPI.queryConditions({ parentCode : code}).then(res=>{
					pageData.district = res;
					pageData.mulSelect.push(pageData.district);
					let code = pageData.district[0].code;
					LinghuoyonggongAPI.queryConditions({ parentCode : code}).then(res=>{
						pageData.street = res;
						if(res.length){
							pageData.mulSelect.push(pageData.street);
						}
					})
				})
			})
		})
	}
		
   function pickerChange(e) {
		for(var i=0;i<e.detail.value.length;i++){
			if(e.detail.value[i]===null){
				e.detail.value[i]=0;
			}
		}
		let s_province = pageData.mulSelect[0][e.detail.value[0]];
		let s_city = pageData.mulSelect[1][e.detail.value[1]||0];
		let s_district = pageData.mulSelect[2][e.detail.value[2]||0];
		let s_street = null;
		if(e.detail.value.length == 4){
			s_street = pageData.mulSelect[3][e.detail.value[3]||0];
			pageData.laborParam.addr = s_province.name+s_city.name+s_district.name+s_street.name;
			pageData.laborParam.cityName = s_province.name;
			pageData.laborParam.districtName = s_city.name;
			pageData.laborParam.townName = s_district.name;
			pageData.laborParam.villageName = s_street.name;
			
			pageData.laborParam.cityCode = s_province.code;
			pageData.laborParam.districtCode = s_city.code;
			pageData.laborParam.townCode = s_district.code;
			pageData.laborParam.villageCode = s_street.code;
		}else{
			pageData.laborParam.addr = s_province.name+s_city.name+s_district.name;
			pageData.laborParam.cityName = s_province.name;
			pageData.laborParam.districtName = s_city.name;
			pageData.laborParam.townName = s_district.name;
			
			pageData.laborParam.cityCode = s_province.code;
			pageData.laborParam.districtCode = s_city.code;
			pageData.laborParam.townCode = s_district.code;
		}
		pageData.isActive=true;
	}

/* ****************************************************** */


    const { show, options, form } = toRefs(pageData);
    async function initDict() {
        pageData.options.area = await getDictData();
        pageData.options.urgentdegree = dictStore.getDictList.employment_urgent.map((item) => {
            return {
                value: item.value,
                text: item.text,
            }
        })
        pageData.options.type = dictStore.getDictList.employment_type.map((item) => {
            return {
                value: item.value,
                text: item.text,
            }
        })
    }

    function getCurrentAddressInfo() {
        if (!uni.getStorageSync('location')) 
    return

        const { lon, lat } = uni.getStorageSync('location')
        pageData.position = [lon, lat]
        UserInfoAPI.location({
            lon,
            lat,
        }).then((res) => {
            pageData.form.province = res.province
            pageData.form.city = res.city
            pageData.form.country = res.country
            pageData.form.areaText = `${res.province}/${res.city}/${res.country}`
            pageData.form.area = `${getCodeByText(res.province)},${getCodeByText(res.city)},${getCodeByText(res.country)}`
        })
    }

    function getDetails(id) {
        pageData.loading = true
        LinghuoyonggongAPI.getLaborAppDetail({ id })
            .then((res) => {
				pageData.laborParam.addr = res.villageName;
				pageData.laborParam.contactName = res.contactName;
				pageData.laborParam.contactMobile = res.contactMobile;
				pageData.workersParam = res.workers;
				pageData.isActive = true;
            })
            .finally(() => {
                pageData.loading = false
            })
    }

    function parseUrlInfo(url) {
        // 从URL中提取文件名
        const pathParts = url.split('/')
        const fileName = pathParts[pathParts.length - 1]
        // 提取扩展名
        const fileParts = fileName.split('.')
        const extname = fileParts[fileParts.length - 1]

        // 返回格式化的对象
        return {
            name: fileName,
            extname,
            url,
        }
    }

    function handleChangeTime1(e) {
        pageData.form.starttime = e.result
        pageData.show.time1 = false
    }
    function handleChangeTime2(e) {
        pageData.form.estimatedendtime = e.result
        pageData.show.time2 = false
    }
    function handleChangetype(e) {
        pageData.form.type = e.value
        pageData.form.typeText = e.text
        pageData.show.type = false
    }
    function handleChangeUrgentdegree(e) {
        pageData.form.urgentdegree = e.value
        pageData.form.urgentdegreeText = e.text
        pageData.show.urgentdegree = false
    }
    function handleChangeAddress(e) {
        pageData.form.areaText = e.text.join('/')
        pageData.form.area = e.value.join(',')
        pageData.show.area = false
    }
    const toastRef = ref()
    const uploadRef = ref()
    // 文件上传
    function handleUpload(file) {
        uni.uploadFile({
            url: `${globSetting.apiUrl + globSetting.urlPrefix}/sys/common/upload`, // 直接使用上传接口URL
            filePath: file.tempFiles[0].path,
            name: 'file',
            formData: {
                biz: 'temp',
            },
            header: {
                'X-Access-Token': userStore.getToken,
            },
            success: (res) => {
                if (res.statusCode === 200) {
                    const data = JSON.parse(res.data)
                    if (data.code === 200 || data.code === 0) {
                        toastRef.value.show({
                            type: 'success',
                            text: '上传成功',
                        })
                        pageData.form.picture = data.message // 保存返回的图片信息
                    }
                }
            },
            fail: (err) => {
                toastRef.value.show({
                    type: 'error',
                    text: '上传失败',
                })
                uploadRef.value.clearFiles()
                pageData.form.picture = null
            },
        })
    }
    // 文件删除
    function handleDelete(file) {
        uploadRef.value.clearFiles()
        pageData.form.picture = null
    }
    const formRef = ref()
    function submit() {
        if (pageData.position.length == 0) {
            toastRef.value.show({
                type: 'error',
                text: '无法获取位置',
            })
            return
        }
        pageData.form.longitude = pageData.position[0]
        pageData.form.latitude = pageData.position[1]
        formRef.value.validator(pageData.form, pageData.rules, true).then((res) => {
            if (res.isPassed) {
                LinghuoyonggongAPI.employmentAdd(pageData.form).then((res) => {
                    toastRef.value.show({
                        type: 'success',
                        text: '用工发布成功',
                    })
                    uni.switchTab({
                        url: '/pages/chanxiao/chanxiao',
                    })
                })
            }
        })
    }
	// 发布灵活用工
	function submitLaborAdd(){
		let laborParam = pageData.laborParam;
		if (pageData.position.length == 0) {
		    toastRef.value.show({
		        type: 'error',
		        text: '无法获取位置',
		    })
		    return
		}
		laborParam.lon = pageData.position[0];
		laborParam.lat = pageData.position[1];
		let entries = Object.entries(VerificationInfo1);
		for (let [key, value] of entries) {
			if(laborParam[key].trim().length === 0){
				toastRef.value.show({
				    type: 'error',
				    text: value,
				})
				return;
			}
		}
		if(!pageData.workersParam.length){
			toastRef.value.show({
			    type: 'error',
			    text: '请选择待业人员',
			})
			return;
		}
		let formData = {
			laborParam:laborParam,
			workersParam:pageData.workersParam
		}
		LinghuoyonggongAPI.postLaborAdd(formData).then((res) => {
		    toastRef.value.show({
		        type: 'success',
		        text: '发布成功',
		    })
			setTimeout(()=>{
				uni.navigateBack({
				    delta: 1
				});
			},1000)
		})
	}
    function getCurrentDate(){
        const date = new Date()
        const year = date.getFullYear()
        const month = date.getMonth() + 1
        const day = date.getDate()
        return `${year}-${month}-${day}`
    }
</script>

<template>
    <view class="page">
        <view class="bg_white formBox">
			<view class="form_view">
				<view class="yr-form">
					<view class="yr-form-item">
						<view class="yr-form-title"><text class="required-mark">*</text>村名称</view>
						<picker class="yr-form-input" indicator-class="yr-form-village" mode="multiSelector" :range="pageData.mulSelect" :range-key="'name'" @change="pickerChange" @columnchange="colChange">
							<view class="yr-input-placeholder" v-if="!pageData.isActive">请选择</view>
							<view v-else class="yr-input-style">{{pageData.laborParam.addr}}</view>
						</picker>
					</view>
					<view class="yr-form-item">
						<view class="yr-form-title"><text class="required-mark">*</text>联系人</view>
						<input class="yr-form-input" v-model="pageData.laborParam.contactName" name="input" placeholder="请填写联系人姓名" />
					</view>
					<view class="yr-form-item border-bottom-none">
						<view class="yr-form-title"><text class="required-mark">*</text>联系电话</view>
						<input class="yr-form-input" v-model="pageData.laborParam.contactMobile" type="tel" :maxlength="11" placeholder="请填写联系电话" />
					</view>
				</view>
			</view>
        </view>
		
		<!-- 待业人员 -->
		<view class="bg_white formBox unemployed_person">
			<view class="form_view">
				<view class="yr-form">
					<view class="yr-form-item border-bottom-none">
						<view class="yr-form-title"><text class="required-mark">*</text>待业人员</view>
						<view class="yr_add_btn" @click="openAddPersonPopup()">
							<image class="add_person_icon" src="/static/images/linghuoyonggong/add_person.png" />
							<view class="add_person_text">添加人员</view>
						</view>
					</view>
					
					<view class="yr-person-item" v-for="(item,index) in pageData.workersParam" :key="index">
						<view class="yr-person-info">
							<view class="person_name_attr">{{item.name}}<text class="person_attr">{{item.attr}}</text></view>
							<view class="person-info">{{getCalculateAge(item.birthday)}}｜{{ returnDictZhVel('gender',item.gender) }}｜{{ returnDictZhVel('edu',item.edu)}}</view>
							<view class="person-info text_overflow_ellipsis">技能：{{item.skill}}</view>
						</view>
						<view class="edit_person" @click="editPersonPopup(index)">
							<image class="edit_person_icon" src="/static/images/linghuoyonggong/edit_person.png" />
						</view>
					</view>
					
				</view>
			</view>
		</view>
		
		<view class="yr-submit-btn">
		    <view class="submit-btn-view">
				<fui-button text="发布" bold radius="96rpx" @click="submitLaborAdd"  height="80rpx"/>
			</view>
		</view>
			
    </view>

    <fui-date-picker :show="show.time1" type="3" @change="handleChangeTime1" :min-date="getCurrentDate()" @cancel="show.time1 = false" />
    <fui-date-picker :show="show.time2" type="3" @change="handleChangeTime2" :min-date="getCurrentDate()" @cancel="show.time2 = false" />
    <fui-picker :show="show.type" :layer="1" :linkage="true" :options="options.type" @change="handleChangetype" @cancel="show.type = false" />
    <fui-picker :show="show.urgentdegree" :layer="1" :linkage="true" :options="options.urgentdegree" @change="handleChangeUrgentdegree" @cancel="show.urgentdegree = false"/>
    <fui-picker :show="show.area" :options="options.area" :linkage="true" :layer="3" @change="handleChangeAddress" @cancel="show.area = false" />
	<fui-toast ref="toastRef" />
    <fui-loading isFixed v-if="pageData.loading" backgroundColor="rgba(0, 0, 0, 0.4)" />
	
	<!-- 普通弹窗 -->
	<fui-bottom-popup :show="pageData.isPersonPopupShow" @close="pageData.isPersonPopupShow = false">
		<view class="fui-custom__wrap yr_person_popup">
			<view class="popup_top">
				<uni-icons type="left" size="24" color="#333333" @click="pageData.isPersonPopupShow = false"></uni-icons>
				<view class="add_person_text">{{pageData.actionType == 'edit'?'编辑':'添加'}}人员</view>
				<view class="del_person_btn" v-if="pageData.actionType == 'edit'" @click="delPersonData(tempWorkersParam.name)">删除</view>
				<view class="del_person_btn" v-else></view>
			</view>
			<view class="popup_content">
				<fui-form error-position="1" ref="form" top="0" :model="tempWorkersParam" :show="false">
					<fui-form-item label="姓名">
						<fui-input :borderBottom="false" v-model="tempWorkersParam.name" :padding="[0]" placeholder="请输入姓名"></fui-input>
					</fui-form-item>
					<fui-form-item label="手机号">
						<fui-input type="tel" :borderBottom="false" v-model="tempWorkersParam.mobile" :padding="[0]" placeholder="请输入手机号"></fui-input>
					</fui-form-item>
					<fui-form-item label="性别">
						<fui-radio-group v-model="tempWorkersParam.genderZh">
							<fui-label inline v-for="item in DictData.sexArr" :key="item.id">
								<fui-radio :value="item.itemValue"></fui-radio>
								<fui-text :size="28" :text="item.itemText" :padding="['0','30rpx','0','16rpx']"></fui-text>
							</fui-label>
						</fui-radio-group>
					</fui-form-item>
					<fui-form-item label="出生日期" highlight>
						<fui-input :borderBottom="false" @click="pageData.datePickerShow = true" v-model="tempWorkersParam.birthday" :padding="[0]" :disabled="true" placeholder="请选择出生日期"
							backgroundColor="transparent"></fui-input>
						<!-- <picker class="publish_empl_picker" mode="date" :value="startDate" :end="endDate" @change="dateBirthChange">
							<fui-input :borderBottom="false" v-model="tempWorkersParam.birthday" :padding="[0]" :disabled="true" placeholder="请选择出生日期"
								backgroundColor="transparent"></fui-input>
						</picker> -->
					</fui-form-item>
					<fui-form-item label="学历" highlight @click="onPickerTap('education')">
						<fui-input v-model="tempWorkersParam.eduZh" :borderBottom="false" :padding="[0]" placeholder="请选择学历" :disabled="true"
							backgroundColor="transparent"></fui-input>
					</fui-form-item>
					<fui-form-item label="人员属性" highlight @click="onPickerTap('socialattributes')">
						<fui-input v-model="tempWorkersParam.attr" :borderBottom="false" :padding="[0]" placeholder="请选择人员属性" :disabled="true"
							backgroundColor="transparent"></fui-input>
					</fui-form-item>
					<fui-form-item label="人员技能" highlight @click="DictData.isSkillPopupShow = true">
						<fui-input v-model="tempWorkersParam.skill" :borderBottom="false" :padding="[0]" placeholder="请选择人员技能" :disabled="true"
							backgroundColor="transparent"></fui-input>
					</fui-form-item>
				</fui-form>
			</view>
			<fui-button text="保存" bold radius="96rpx" @click="addPersonData" height="80rpx"/>
		</view>
	</fui-bottom-popup>
	
	
	<!-- <picker mode="date" :value="currentDate" :start="startDate" :end="endDate" @change="dateBirthChange"></picker> -->
	<fui-picker :show="pageData.attrPickerShow" :zIndex="9999" layer="1" :options="DictData.dictValArr" :linkage="false" @change="attrChange" @cancel="pageData.attrPickerShow = false"></fui-picker>
	<!-- 人员技能 -->
	<fui-bottom-popup :show="DictData.isSkillPopupShow">
		<view class="fui-scroll__wrap">
			<view class="fui-title">请选择技能</view>
			<fui-cascader ref="skillPopupRef" :value="DictData.skillValue" textSize="32" size="32" stepLoading @change="changeSkill" @complete="selectCompleteSkill" :options="DictData.skillOptionsVal"></fui-cascader>
			<view class="fui-icon__close" @tap.stop="DictData.isSkillPopupShow=false">
				<fui-icon name="close" :size="48"></fui-icon>
			</view>
		</view>
	</fui-bottom-popup>
	<fui-date-picker :isShow="true" :zIndex="9999" :show="pageData.datePickerShow" type="3" :range="false" minDate="1940-01-01" :valueEnd="getCurrentDate()" :value="startDate" :maxDate="getCurrentDate()" @change="dateBirthChange" @cancel="pageData.datePickerShow=false"></fui-date-picker>
	
<!-- 	<fui-date-picker :show="pageData.birthdayPickerIsShow" :type="type" :range="range" :value="value" :valueEnd="valueEnd" @change="change"
		@cancel="cancel">
	</fui-date-picker> -->
	
</template>

<style lang="scss" scoped>
    body {
        background-color: #e6f5e8;
    }

    .page {
        background-color: #e6f5e8;
        width: 750rpx;
        overflow-x: hidden;
        .mt20 {
            margin-top: 30rpx;
            background: #fff;
            padding: 20rpx;
            border-radius: 10rpx;
        }
		.bg_white{
			background-color: #FFFFFF;
		}
		.required-mark{
			color:#FF5733;
			font-size: 28rpx;
			margin-right: 4rpx;
		}
		.text_overflow_ellipsis{
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
        .formBox {
            width: 690rpx;
            margin: 30rpx auto;
			border-radius: 16rpx;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			.form_view{
				display: flex;
				justify-content: center;
				.yr-form{
					width: 642rpx;
				}
				.border-bottom-none{
					border-bottom: none !important;
				}
				.yr-form-item{
					display: flex;
					justify-content: space-between;
					align-content: center;
					padding-top: 36rpx;
					padding-bottom: 36rpx;
					border-bottom: 2rpx solid #EEEEEE;
					.yr-form-title{
						font-size: 28rpx;
						color: #333333;
						width: 132rpx;
					}
					.yr-form-input{
						width: 480rpx;
					}
					.yr-input-placeholder {
					    font-size: 28rpx !important;
					    color: #999999 !important;
					}
					.yr-input-style{
						font-size: 30rpx;
						color:#181818;
					}
				}
			}
			
			.unemployed_person{
				margin-top: 24rpx;
			}
			.yr_add_btn{
				display: flex;
				align-items: center;
				.add_person_icon{
					width: 32rpx;
					height: 32rpx;
				}
				.add_person_text{
					color: #5DB66F;
					font-size: 28rpx;
					margin-left: 20rpx;
				}
			}
			
			.yr-person-item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2rpx solid #EEEEEE;
				margin-top: 28rpx;
				.yr-person-info{
					.person_name_attr{
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
						.person_attr{
							font-size: 24rpx;
							font-weight: 400;
							color: #5DB66F;
							margin-left: 12rpx;
						}
					}
					.person-info{
						font-size: 24rpx;
						color: #999999;
						vertical-align: middle;
						margin-bottom: 24rpx;
						margin-top: 24rpx;
						width: 512rpx;
					}
				}
				
				.edit_person{
					width: 68rpx;
					height: 88rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
				}
				.edit_person_icon{
					width: 32rpx;
					height: 28rpx;
				}
			}
			.yr-person-item:last-child{
				border-bottom: none;
			}
        }
		
		.yr-submit-btn{
			display: flex;
			justify-content: center;
			margin-top: 40rpx;
			.submit-btn-view{
				width: 690rpx;
			}
		}
		

        .form-section {
            // border-bottom: 1rpx solid #f5f5f5;
        }

        .form-item {
            padding: 30rpx 0;
            border-bottom: 1rpx solid #f5f5f5;

            &:last-child {
                border-bottom: none;
            }

            &.required .label::before {
                content: '*';
                color: #ff4d4f;
                margin-right: 8rpx;
            }
        }

        .form-row {
            display: flex;
            justify-content: space-between;
        }

        .half-width {
            width: 48%;
        }

        .align-center {
            align-items: center;
        }

        .label {
            display: block;
            font-size: 28rpx;
            color: #333333;
            font-weight: 500;
            width: 180rpx;
        }

        .input {
            width: 100%;
            height: 80rpx;
            background: #f8f9fa;
            border-radius: 8rpx;
            padding: 0 20rpx;
            font-size: 28rpx;
            color: #333333;

            &::placeholder {
                color: #999999;
            }
        }

        .time-range {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .time-input {
            width: 45%;
            border-radius: 8rpx;
            display: flex;
            align-items: center;
        }

        .time-text {
            font-size: 28rpx;
            color: #333333;

            &.placeholder {
                color: #999999;
            }
        }

        .time-separator {
            color: #666666;
            font-size: 28rpx;
            margin: 0 10rpx;
        }

        .upload-area {
            margin-top: 10rpx;
        }

        .custom-uploader {
            :deep(.uni-file-picker__container) {
                border: 2rpx dashed #d9d9d9;
                border-radius: 8rpx;
                background: #f8f9fa;
            }
        }

        .upload-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 200rpx;
            color: #999999;
        }

        .upload-icon {
            font-size: 48rpx;
            margin-bottom: 10rpx;
        }

        .upload-text {
            font-size: 24rpx;
        }

        .submit-section {
            background: transparent;
            padding: 40rpx 0;
        }

        .submit-btn {
            width: 100%;
            height: 88rpx;
            background: #ff9800;
            border-radius: 44rpx;
            color: #ffffff;
            font-size: 32rpx;
            font-weight: 500;
            border: none;

            &:active {
                background: #e68900;
                opacity: 0.9;
            }
        }
    }
    ::v-deep .uni-input-placeholder {
        font-size: 28rpx !important;
        color: #999999 !important;
    }

    // 移除fui-form的默认样式
    :deep(.fui-form) {
        background: transparent;
    }

    :deep(.fui-form__item) {
        background: transparent;
        border: none;
        margin-bottom: 0;
        padding: 0;
    }
    .unit-slot {
        padding: 0 16rpx;
        color: #333;
        font-size: 28rpx;
    }
	
	.fui-scroll__wrap {
		padding-top: 30rpx;
		position: relative;
	}
	
	.fui-title {
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		padding-bottom: 24rpx;
	}
	
	.fui-icon__close {
		position: absolute;
		top: 24rpx;
		right: 24rpx;
	}
</style>
