<script setup lang="ts">
    import { reactive, 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 * as UserInfoAPI from '@/api/model/userInfo'
    import { areaTree, getTextByCode, getCodeByText } from '@/utils/areaData'
    import { useDictStore } from '@/store/modules/dict'

    const dictStore = useDictStore()
    const userStore = useUserStore()
    const globSetting = useGlobSetting()
    onLoad((option) => {
        // 获取数据详情
        if (option.id) {
            getDetails(option.id)
        } else {
            // 获取当前位置
            getCurrentAddressInfo()
        }
    })

    onShow(() => {
        // 数据字典赋值
        initDict()
    })

    const pageData = reactive({
        show: {
            time1: false,
            time2: false,
            area: false,
            urgentdegree: false,
            type: false,
        },
        options: {
            area: [],
            urgentdegree: [],
            type: [],
        },
        form: {
            id: '',
            name: '',
            content: '',
            workers: 0,
            price: 0,
            typeText: '',
            type: null,
            area: '',
            province: '',
            city: '',
            country: '',
            address: '',
            urgentdegreeText: '',
            urgentdegree: null,
            starttime: '',
            estimatedendtime: '',
            picture: null,
        },
        rules: [
            {
                name: 'name',
                rule: ['required'],
                msg: ['请输入名称'],
            },
            {
                name: 'workers',
                rule: ['required'],
                msg: ['请输入工作内容'],
            },
            {
                name: 'workers',
                rule: ['required'],
                msg: ['请输入工人数量'],
            },
            {
                name: 'price',
                rule: ['required'],
                msg: ['请输入价钱'],
            },
            {
                name: 'type',
                rule: ['required'],
                msg: ['请选择类型'],
            },
            {
                name: 'area',
                rule: ['required'],
                msg: ['请选择地区'],
            },
            {
                name: 'address',
                rule: ['required'],
                msg: ['请选择详细地址'],
            },
            {
                name: 'urgentdegree',
                rule: ['required'],
                msg: ['请选择紧急程度'],
            },
            {
                name: 'starttime',
                rule: ['required'],
                msg: ['请选择开始时间'],
            },
            {
                name: 'estimatedendtime',
                rule: ['required'],
                msg: ['请选择预计结束时间'],
            },
            {
                name: 'picture',
                rule: ['required'],
                msg: ['请上传图片'],
            },
        ],
    })

    const { show, options, form } = toRefs(pageData)

    function initDict() {
        pageData.options.area = areaTree
        console.log(dictStore.getDictList['purchase_status'])

        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')
        UserInfoAPI.location({
            lon,
            lat,
        }).then((res) => {
            pageData.form.province = res.province
            pageData.form.city = res.city
            pageData.form.country = res.country
            pageData.form.area = `${res.province}/${res.city}/${res.country}`
        })
    }

    function getDetails(id) {
        LinghuoyonggongAPI.employmentDetails({ id }).then((res) => {
            console.log(res)

            pageData.form = res
            pageData.form.area = `${getTextByCode(res.province)}/${getTextByCode(res.city)}/${getTextByCode(res.country)}`
        })
    }

    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.area = e.text.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() {
        formRef.value.validator(pageData.form, pageData.rules, true).then((res) => {
            if (res.isPassed) {
                changeAddressValue(pageData.form)
                LinghuoyonggongAPI.employmentAdd(pageData.form)
                    .then((res) => {
                        toastRef.value.show({
                            type: 'success',
                            text: '用工发布成功',
                        })
                        uni.switchTab({
                            url: '/pages/chanxiao/chanxiao',
                        })
                    })
                    .catch((err) => {
                        toastRef.value.show({
                            type: 'error',
                            text: '用工发布失败',
                        })
                    })
            }
        })
    }
    /**
     * 处理地区值
     * @param formData 表单数据
     */
    const changeAddressValue = (formData) => {
        const addressValue = formData.area.split('/')
        if (addressValue.length === 3) {
            formData.province = getCodeByText(addressValue[0])
            formData.city = getCodeByText(addressValue[1])
            formData.country = getCodeByText(addressValue[2])
        }
    }
</script>

<template>
    <fui-form ref="formRef">
        <fui-input required label="名称" placeholder="请输入名称" v-model="form.name"></fui-input>
        <fui-input required label="工作内容" borderTop placeholder="请输入工作内容" v-model="form.content"></fui-input>
        <fui-input required label="工人数量" borderTop placeholder="请输入工人数量" v-model="form.workers"></fui-input>
        <fui-input required label="价钱" borderTop placeholder="请输入价钱" v-model="form.price"></fui-input>
        <fui-input
            required
            label="类型"
            placeholder="请选择类型"
            v-model="form.typeText"
            @click="show.type = true"
        ></fui-input>
        <fui-input
            required
            label="地区"
            placeholder="请选择地区"
            v-model="form.area"
            @click="show.area = true"
        ></fui-input>
        <fui-input label="详细地址" placeholder="请输入详细地址" v-model="form.address"></fui-input>
        <fui-input
            required
            label="紧急程度"
            placeholder="请选择紧急程度"
            v-model="form.urgentdegreeText"
            @click="show.urgentdegree = true"
        ></fui-input>
        <fui-input
            required
            label="开始时间"
            borderTop
            placeholder="请选择开始时间"
            v-model="form.starttime"
            @click="show.time1 = true"
        ></fui-input>
        <fui-input
            required
            label="结束时间"
            borderTop
            placeholder="请选择结束时间"
            v-model="form.estimatedendtime"
            @click="show.time2 = true"
        ></fui-input>
        <view class="bg-white" style="padding: 0.875rem 0.35rem">
            <view class="mb-1 flex justify-start">
                <text class="pr-1" style="color: #ff2b2b">*</text>
                图片
            </view>
            <uni-file-picker
                ref="uploadRef"
                limit="1"
                :auto-upload="false"
                @select="handleUpload"
                @delete="handleDelete"
            ></uni-file-picker>
        </view>
        <view class="fui-btn__box bg-white p-4" v-if="!form.id">
            <fui-button text="发布用工" bold radius="96rpx" @click="submit"></fui-button>
        </view>
    </fui-form>

    <fui-date-picker
        :show="show.time1"
        type="3"
        @change="handleChangeTime1"
        @cancel="show.time1 = false"
    ></fui-date-picker>
    <fui-date-picker
        :show="show.time2"
        type="3"
        @change="handleChangeTime2"
        @cancel="show.time2 = false"
    ></fui-date-picker>
    <fui-picker
        :show="show.type"
        :layer="1"
        :linkage="true"
        :options="options.type"
        @change="handleChangetype"
        @cancel="show.type = false"
    ></fui-picker>
    <fui-picker
        :show="show.urgentdegree"
        :layer="1"
        :linkage="true"
        :options="options.urgentdegree"
        @change="handleChangeUrgentdegree"
        @cancel="show.urgentdegree = false"
    ></fui-picker>
    <fui-picker
        :show="show.area"
        :options="options.area"
        :linkage="true"
        :layer="3"
        @change="handleChangeAddress"
        @cancel="show.area = false"
    ></fui-picker>

    <fui-toast ref="toastRef"></fui-toast>
</template>

<style lang="scss" scoped>
    :deep(.fui-button) {
        border-color: #ff9800 !important;
        background: #ff9800 !important;
    }
</style>
