<template>
    <div class="recruitAdd">
        <el-dialog title="上传岗位" v-model="dialogShow" width="1300px" @open="dialogOpen" @close="dialogClose" :close-on-click-modal="false" >
            <el-form :model="form" :rules="rules"  label-width="100px" style="padding-right: 40px;" ref="addRef">
                <el-form-item label="职位类型" prop="industry">
                    <el-cascader
                        v-model="form.industry"
                        :options="industryList"
                        :show-all-levels="false"
                        @change="(e)=>{console.log(e)}"
                        style="width: 100%"
                        :disabled="form.title == '岗位详情'"
                        :props="{
                            value: 'name',
                            label: 'name',
                            children: 'chilList'
                        }"
                    />
                </el-form-item>
                <el-form-item label="招聘类型" prop="recruitTypeId">
                    <el-select
                        v-model="form.recruitTypeId"
                        placeholder="请选择"
                        filterable
                        style="width: 100%"
                        :disabled="form.title == '岗位详情'"
                    >
                    <el-option
                        v-for="item in recruitAllList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                    </el-select>
                </el-form-item>
                <el-form-item label="学历" prop="qualificationId">
                    <el-select
                        v-model="form.qualificationId"
                        placeholder="请选择"
                        filterable
                        style="width: 100%"
                        :disabled="form.title == '岗位详情'"
                    >
                    <el-option
                        v-for="item in qualificationList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                    </el-select>
                </el-form-item>
                <el-form-item label="经验" prop="experienceId">
                    <el-select
                        v-model="form.experienceId"
                        placeholder="请选择"
                        filterable
                        style="width: 100%"
                        :disabled="form.title == '岗位详情'"
                    >
                    <el-option
                        v-for="item in experienceList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                    </el-select>
                </el-form-item>
                <el-form-item label="招聘时间" prop="time">
                    <el-date-picker
                        type="daterange"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        v-model="form.time"
                        value-format="YYYYMMDD"
                        :disabled="form.title == '岗位详情'"
                    />
                </el-form-item>
                <el-form-item label="招聘人数" prop="times">
                    <el-input-number
                        v-model="form.times"
                        step="1"
                        placeholder="请输入"
                        step-strictly
                        :min="1"
                        :controls="false"
                        style="width: 100%;"
                        :disabled="form.title == '岗位详情'"
                    />
                </el-form-item>
                <el-form-item label="薪资待遇" prop="payTimes">
                    <el-select
                        v-model="form.payTimes"
                        placeholder="请选择"
                        filterable
                        style="width: 100%"
                        :disabled="form.title == '岗位详情'"
                    >
                        <el-option
                            v-for="item in payTimeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="地址" prop="area">
                    <el-cascader
                        v-model="form.area"
                        :options="areaList"
                        @change="(e)=>{console.log(e)}"
                        style="width: 100%"
                        :props="{ value: 'label' }"
                        :disabled="form.title == '岗位详情'"
                    />
                </el-form-item>
                <el-form-item label="行政编码" prop="regionCode">
                    <el-input v-model="form.regionCode" placeholder="请输入"/>
                </el-form-item>
                <el-form-item label="选择文件" prop="file">
                    <div style="display: flex;justify-content: space-between;align-items: center;width: 100%;">
                        <el-input readonly style="width: 70%;" :value="form.file && form.file.name"/>
                        <el-button type="primary" @click="$refs.fileInput.click()">选择文件</el-button>
                        <input
                        type="file"
                        ref="fileInput"
                        @change="handleFileChange"
                        style="display: none;"
                        accept='.txt,.json'
                        />
                    </div>
                </el-form-item>
                <el-form-item />
            </el-form>
            <template #footer>
                <span class="dialog-footer" style="text-align: center;width: 100%;display: block;">
                    <el-button @click="calcel" v-if="form.title != '岗位详情'">取 消</el-button>
                    <el-button  type="primary"  @click="calcel" v-if="form.title == '岗位详情'">关 闭</el-button>
                    <el-button type="primary" @click="submit" v-if="form.title != '岗位详情'">提交</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { uploadRecruit } from "@/api/recruit";
import { areaList,getAreaText } from '@/utils/area.js'
import {
    ref,
    defineProps,
    computed,
    defineEmits,
} from "vue";
const { proxy } = getCurrentInstance();

const form = ref({});
const rules = ref({
    industry: [{ required: true, message: "请输入职位类型", trigger: ['blur', 'change'] }],
    recruitTypeId: [{ required: true, message: "请选择招聘类型", trigger: ['blur', 'change'] }],
    qualificationId: [{ required: true, message: "请选择学历", trigger: ['blur', 'change'] }],
    experienceId: [{ required: true, message: "请选择经验", trigger: ['blur', 'change'] }],
    time: [{ required: true, message: "请选择招聘时间", trigger: ['blur', 'change'] }],
    times: [{ required: true, message: "请输入招聘人数", trigger: ['blur', 'change'] }],
    area: [{ required: true, message: "请选择地址", trigger: ['blur', 'change'] }],
    address: [{ required: true, message: "请输入详细地址", trigger: ['blur', 'change'] }],
    industryId: [{ required: true, message: "请选择职位类型", trigger: ['blur', 'change'] }],
    file: [{ required: true, message: "请选择文件", trigger: ['blur', 'change'] }],
})
const salaryMinList = ref([
    {value: "1000", label: "1000"},
    {value: "2000", label: "2000"},
    {value: "3000", label: "3000"},
    {value: "4000", label: "4000"},
    {value: "5000", label: "5000"},
    {value: "6000", label: "6000"},
    {value: "7000", label: "7000"},
    {value: "8000", label: "8000"},
    {value: "9000", label: "9000"},
    {value: "10000", label: "10000"},
    {value: "11000", label: "11000"},
    {value: "12000", label: "12000"},
    {value: "13000", label: "13000"},
    {value: "14000", label: "14000"},
    {value: "15000", label: "15000"},
    {value: "16000", label: "16000"},
    {value: "17000", label: "17000"},
    {value: "18000", label: "18000"},
    {value: "19000", label: "19000"},
    {value: "20000", label: "20000"},
    {value: "21000", label: "21000"},
    {value: "22000", label: "22000"},
    {value: "23000", label: "23000"},
    {value: "24000", label: "24000"},
    {value: "25000", label: "25000"},
    {value: "26000", label: "26000"},
    {value: "27000", label: "27000"},
    {value: "28000", label: "28000"},
    {value: "29000", label: "29000"}
])
const salaryMaxList = ref([])
const payTimeList = ref([
    {value: 12, label: "12薪"},
    {value: 13, label: "13薪"},
    {value: 14, label: "14薪"},
    {value: 15, label: "15薪"},
    {value: 16, label: "16薪"},
    {value: 17, label: "17薪"},
    {value: 18, label: "18薪"},
    {value: 19, label: "19薪"},
    {value: 20, label: "20薪"},
    {value: 21, label: "21薪"},
    {value: 22, label: "22薪"},
    {value: 23, label: "23薪"},
    {value: 24, label: "24薪"},
])
const props = defineProps(["selectOp","addVisible","detailInfo","selectOp"]);
let { recruitAllList,experienceList,qualificationList,orgList,industryList } = props.selectOp;
watch(() => props.selectOp, (newValue, oldValue) => {
    recruitAllList = props.selectOp.recruitAllList;
    experienceList = props.selectOp.experienceList;
    qualificationList = props.selectOp.qualificationList;
    orgList = props.selectOp.orgList;
    industryList = props.selectOp.industryList;
});
const emit = defineEmits(["changeVisible","getList"]);

const dialogShow = computed({
    get: () => props.addVisible,
    set: (val) => emit("changeVisible", val),
});
salaryMaxList.value = [...salaryMinList.value]
// 上传文件
function handleFileChange(e) {
  if (e.target.files.length > 0) {
    form.value.file = e.target.files[0];
  }
  proxy.$refs.fileInput.value = null;
}
function salaryMinChange(e) {
    const index = salaryMinList.value.findIndex(item => item.value === e)
    salaryMaxList.value = salaryMinList.value.slice(index + 1)
    salaryMaxList.value.push({value: "30000", label: "30000"})
    form.value.salaryMax = ''
}
function dialogClose() {
    form.value = {};
    proxy.$refs.addRef.resetFields()
}
function dialogOpen(){
    // if (props.detailInfo.id) {
    //     form.value = {
    //         id: props.detailInfo.id,
    //         title: props.detailInfo.title,
    //         recruitTypeId: props.detailInfo.recruitTypeId,
    //         qualificationId: props.detailInfo.qualificationId,
    //         experienceId: props.detailInfo.experienceId,
    //         salaryMin: props.detailInfo.salaryMin,
    //         salaryMax: props.detailInfo.salaryMax,
    //         payTimes: props.detailInfo.payTimes,
    //         bonus: props.detailInfo.bonus,
    //         address: props.detailInfo.address,
    //         industry: [props.detailInfo.oneIndustryName,props.detailInfo.towIndustryName,props.detailInfo.industryName],
    //         area: [props.detailInfo.province,props.detailInfo.city,props.detailInfo.region],
    //         times: props.detailInfo.times,
    //         time: [props.detailInfo.startDate, props.detailInfo.expiredDate]
    //     }
    // } else {
        form.value.regionCode = '610100'
    // }
}
function calcel() {
    dialogShow.value = false;
}
function submit() {
    proxy.$refs.addRef.validate(valid => {
        if (!valid) return;
        const submitForm = {...form.value}
        submitForm.recruitType = recruitAllList.find(item => item.id == submitForm.recruitTypeId).name
        submitForm.experience = experienceList.find(item => item.id == submitForm.experienceId).name
        submitForm.experienceCode = experienceList.find(item => item.id == submitForm.experienceId).code
        submitForm.qualification = qualificationList.find(item => item.id == submitForm.qualificationId).name
        submitForm.qualificationCode = qualificationList.find(item => item.id == submitForm.qualificationId).code
        // 职位类型start
        submitForm.oneIndustryName = submitForm.industry[0]
        submitForm.towIndustryName = submitForm.industry[1]
        submitForm.industryName = submitForm.industry[2]
        let v1 = industryList.find(item => item.name == submitForm.industry[0])
        let v2 = v1.chilList.find(item => item.name == submitForm.industry[1])
        submitForm.industryCode = v2.chilList.find(item => item.name == submitForm.industry[2]).code
        delete submitForm.industry
        // 职位类型end
        submitForm.province = submitForm.area[0]
        submitForm.city = submitForm.area[1]
        submitForm.region = submitForm.area[2]
        delete submitForm.area
        if (submitForm.time.length == 2) {
            submitForm.startDate = submitForm.time[0]
            submitForm.expiredDate = submitForm.time[1]
        }
        delete submitForm.time;
        uploadRecruit(setFormData(submitForm)).then(res => {
            if(res.isSuccess) {
                calcel()
                proxy.$modal.msgSuccess(res.code);
                emit("getList");
            }
        })
    });
}
const setFormData = (data) => {
  const formData = new FormData()
  const keys = Object.keys(data)
  for(let i = 0;i<keys.length;i++) {
    if (data[keys[i]]!=null&&[keys[i]]!=undefined&&data[keys[i]].constructor ==  Array){
    // 数组参数转FormData
      for(let j = 0; j < data[keys[i]].length; j++) {
        formData.append(keys[i], data[keys[i]][j])
      }
    } else {
      formData.append(keys[i], data[keys[i]])
    }
  }
  return formData
}
</script>

<style lang="scss">
.recruitAdd{
    .el-form{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .el-form-item{
            width: 33%;
        }
        .el-form-item.w100{
            width: 100%;
        }
    }
    .el-input-number{
        width: 100%;
        .el-input__wrapper{
            padding: 1px 11px ;
            .el-input__inner{
                text-align: left;
                width: 100%;
            }
        }
    }
    .f_b {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    .salary{
        .el-select{
            width: 30%;
        }
    }
}
</style>
