<template>
    <div class="recruitAdd">
        <el-dialog :title="form.id ? form.title : '岗位发布'" v-model="dialogShow" width="1200px" @open="dialogOpen" @close="dialogClose" :close-on-click-modal="false" fullscreen>
            <el-form :model="form" :rules="rules"  label-width="100px" style="padding-right: 40px;" ref="addRef">
                <el-form-item label="招聘企业" prop="orgId">
                    <el-select
                        v-model="form.orgId"
                        placeholder="请选择"
                        filterable
                        style="width: 100%"
                        :disabled="form.title == '岗位详情'"
                    >
                    <el-option
                        v-for="item in orgList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                    </el-select>
                </el-form-item>
                <el-form-item label="职位名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入" :disabled="form.title == '岗位详情'"/>
                </el-form-item>
                <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="salaryMin">
                    <div class="salary f_b">
                        <el-select
                            v-model="form.salaryMin"
                            placeholder="请选择"
                            filterable
                            style="width: 100%"
                            @change="salaryMinChange"
                            :disabled="form.title == '岗位详情'"
                        >
                            <el-option
                                v-for="item in salaryMinList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>~
                        <el-select
                            v-model="form.salaryMax"
                            placeholder="请选择"
                            filterable
                            style="width: 100%"
                            :disabled="form.title == '岗位详情'"
                        >
                            <el-option
                                v-for="item in salaryMaxList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>-
                        <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>
                    </div>
                </el-form-item>
                <el-form-item label="绩效奖金" prop="bonus">
                    <el-input v-model="form.bonus" placeholder="请输入" :disabled="form.title == '岗位详情'"/>
                </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="address">
                    <el-input v-model="form.address" placeholder="请输入" :disabled="form.title == '岗位详情'"/>
                </el-form-item>
                <el-form-item label="职位描述" prop="details" class="w100">
                    <el-input type="textarea" v-model="form.details" rows="15" placeholder="请输入" :disabled="form.title == '岗位详情'"/>
                </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 { recruitSave } 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({
    orgId: [{ required: true, message: "请选择招聘企业", trigger: "blur" }],
    name: [{ required: true, message: "请输入职位名称", trigger: "blur" }],
    industry: [{ required: true, message: "请输入职位类型", trigger: "blur" }],
    recruitTypeId: [{ required: true, message: "请选择招聘类型", trigger: "blur" }],
    qualificationId: [{ required: true, message: "请选择学历", trigger: "blur" }],
    experienceId: [{ required: true, message: "请选择经验", trigger: "blur" }],
    time: [{ required: true, message: "请选择招聘时间", trigger: "blur" }],
    times: [{ required: true, message: "请输入招聘人数", trigger: "blur" }],
    salaryMin: [{ required: true, message: "请输入最低工资", trigger: "blur" }],
    area: [{ required: true, message: "请选择地址", trigger: "blur" }],
    address: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
    industryId: [{ required: true, message: "请选择职位类型", trigger: "blur" }],
    details: [{ required: true, message: "请输入职位描述", trigger: "blur" }],
})
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 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,
            orgId: props.detailInfo.orgId,
            name: props.detailInfo.name,
            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],
            details: props.detailInfo.details,
            times: props.detailInfo.times,
            time: [props.detailInfo.startDate, props.detailInfo.expiredDate]
        }
    } else {
        form.value.interviewAmount = ''
    }
}
function calcel() {
    dialogShow.value = false;
}
function submit() {
    proxy.$refs.addRef.validate(valid => {
        if (!valid) return;
        const submitForm = {...form.value}
        if (!submitForm.salaryMax) {
            return proxy.$modal.msgError("请选择薪资待遇");
        }
        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
        submitForm.orgName = orgList.find(item => item.id == submitForm.orgId).name
        // 职位类型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;
        recruitSave(submitForm).then(res => {
            if(res.isSuccess) {
                calcel()
                proxy.$modal.msgSuccess(res.code);
                emit("getList");
            }
        })
    });
}
</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>
