<template>
    <div class="recruitAdd">
        <el-dialog :title="'新增招聘需求'" v-model="dialogShow" width="500px" @open="dialogOpen" @close="dialogClose">
            <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%"
                    >
                    <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="请输入" />
                </el-form-item>
                <el-form-item label="招聘类型" prop="recruitTypeId">
                    <el-select
                        v-model="form.recruitTypeId"
                        placeholder="请选择"
                        filterable
                        style="width: 100%"
                    >
                    <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%"
                    >
                    <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%"
                    >
                    <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="YYYY-MM-DD"
                    />
                </el-form-item>
                <el-form-item label="招聘人数" prop="times">
                    <el-input v-model="form.times" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="最低工资" prop="salaryMin">
                    <el-input v-model="form.salaryMin" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="最高工资" prop="salaryMax">
                    <el-input v-model="form.salaryMax" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="发薪次数" prop="payTimes">
                    <el-input v-model="form.payTimes" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="绩效奖金" prop="bonus">
                    <el-input v-model="form.bonus" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="form.address" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="职位类型" prop="industryId">
                    <el-select
                        v-model="form.industryId"
                        placeholder="请选择"
                        filterable
                        style="width: 100%"
                    >
                        <el-option
                            v-for="item in industryList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="职位描述" prop="details">
                    <el-input type="textarea" v-model="form.details" rows="3" placeholder="请输入" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="calcel">取 消</el-button>
                    <el-button type="primary" @click="submit">提交</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { recruitSave } from "@/api/recruit";

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" }],
    recruitTypeId: [{ required: true, message: "请选择招聘类型", trigger: "blur" }],
    qualificationId: [{ required: true, message: "请选择学历", trigger: "blur" }],
    experienceId: [{ required: true, message: "请选择经验", trigger: "blur" }],
    time: [{ required: true, message: "请选择招聘时间", trigger: "blur" }],
    salaryMin: [{ required: true, message: "请输入最低工资", trigger: "blur" }],
    salaryMax: [{ required: true, message: "请输入最高工资", trigger: "blur" }],
    payTimes: [{ required: true, message: "请输入发薪次数", trigger: "blur" }],
    bonus: [{ required: true, message: "请输入绩效奖金", trigger: "blur" }],
    address: [{ required: true, message: "请输入地址", trigger: "blur" }],
    industryId: [{ required: true, message: "请选择职位类型", trigger: "blur" }],
    details: [{ required: true, message: "请输入职位描述", trigger: "blur" }],
})
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),
});
function dialogClose() {
    form.value = {};
    proxy.$refs.addRef.resetFields()
}
function dialogOpen(){
    if (props.detailInfo.id) {
        form.value = {
            id: props.detailInfo.id,
            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,
            industryId: props.detailInfo.industryId,
            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}
        submitForm.recruitType = recruitAllList.find(item => item.id == submitForm.recruitTypeId).name
        submitForm.experience = experienceList.find(item => item.id == submitForm.experienceId).name
        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
        submitForm.industryName = industryList.find(item => item.id == submitForm.industryId).name
        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-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%;
    }
}
</style>
