<script setup lang="ts">
    import { reactive, ref, toRefs } 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 { getCodeByText } from '@/utils/areaData'
    import { useDictStore } from '@/store/modules/dict'
    import { getDictData } 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)
    const 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 }).then((res) => {
            if (res.length) {
                const dataArr = []
                for (let i = 0; i < res.length; i++) {
                    const 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('');
        const valText = e.text[e.text.length - 1]
        if (tempWorkersParam.skill.length) {
            const 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) {
        const val = e.value
        queryByCategoryAndCode(val, e)
    }
    // 学历和属性的选择
    function attrChange(e) {
        if (DictData.dictType == 'education') {
            const educationArr = DictData.educationArr
            tempWorkersParam.eduZh = e.value
            for (let i = 0; i < educationArr.length; i++) {
                if (e.value == educationArr[i].itemText) {
                    tempWorkersParam.edu = Number.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 = Number.parseInt(tempWorkersParam.genderZh)
        const entries = Object.entries(VerificationInfo2)
        for (const [key, value] of entries) {
            if (tempWorkersParam[key].trim().length === 0) {
                toastRef.value.show({
                    type: 'error',
                    text: value,
                })
                return
            }
        }
        if (pageData.actionType == 'edit') {
            const 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') {
            const arr = DictData.sexArr
            for (let i = 0; i < arr.length; i++) {
                if (val == Number.parseInt(arr[i].itemValue)) {
                    valText = arr[i].itemText
                    break
                }
            }
        }
        if (type == 'edu') {
            const arr = DictData.educationArr
            for (let i = 0; i < arr.length; i++) {
                if (val == Number.parseInt(arr[i].itemValue)) {
                    valText = arr[i].itemText
                    break
                }
            }
        }
        return valText
    }

    // 选择出生日期
    function onPickerTap(e) {
        let dataVal = null
        const 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) {
        const 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)
            const code = pageData.province[0].code
            LinghuoyonggongAPI.queryConditions({ parentCode: code }).then((res) => {
                pageData.city = res
                pageData.mulSelect.push(pageData.city)
                const code = pageData.city[0].code
                LinghuoyonggongAPI.queryConditions({ parentCode: code }).then((res) => {
                    pageData.district = res
                    pageData.mulSelect.push(pageData.district)
                    const 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 (let i = 0; i < e.detail.value.length; i++) {
            if (e.detail.value[i] === null) {
                e.detail.value[i] = 0
            }
        }
        const s_province = pageData.mulSelect[0][e.detail.value[0]]
        const s_city = pageData.mulSelect[1][e.detail.value[1] || 0]
        const 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() {
        const 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]
        const entries = Object.entries(VerificationInfo1)
        for (const [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
        }
        const formData = {
            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" />
                <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 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-form-item>
                    <fui-form-item label="手机号">
                        <fui-input
                            type="tel"
                            :borderBottom="false"
                            v-model="tempWorkersParam.mobile"
                            :padding="[0]"
                            placeholder="请输入手机号"
                        />
                    </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-text :size="28" :text="item.itemText" :padding="['0', '30rpx', '0', '16rpx']" />
                            </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"
                        />
                        <!-- <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-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-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-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-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"
            />
            <view class="fui-icon__close" @tap.stop="DictData.isSkillPopupShow = false">
                <fui-icon name="close" :size="48" />
            </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 :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>
