<template>
  <div v-loading="loading">
    <el-form
      ref="form"
      :rules="formRules"
      :model="formData"
      class="form"
      label-width="100px"
    >
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="职位名称" prop="jobName">
            <el-input
              v-model="formData.jobName"
              placeholder="请输入职位名称"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工作地点" prop="jobLocation">
            <el-input
              v-model="formData.jobLocation"
              placeholder="请输入工作地点"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="薪资" prop="salary">
            <el-input
              v-model="formData.salary"
              placeholder="请输入薪资"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资历" prop="seniority">
            <el-input
              v-model="formData.seniority"
              placeholder="请输入资历"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="福利" prop="benefit">
            <el-select
              style="width: 100%"
              v-model="formData.benefit"
              placeholder="请选择福利"
              multiple
              clearable
            >
              <el-option
                v-for="dict in benefitOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.label"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="招聘状态" prop="status">
            <el-select
              style="width: 100%"
              v-model="formData.status"
              placeholder="请选择招聘状态"
              clearable
            >
              <!-- <el-option
              v-for="dict in dict.type.sys_job_group"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            /> -->
              <el-option
                v-for="dict in statusOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="岗位要求" prop="jobRequire">
            <el-input
              v-model="formData.jobRequire"
              type="textarea"
              :rows="4"
              placeholder="请输入岗位要求"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="工作职责" prop="jobDuty">
            <el-input
              v-model="formData.jobDuty"
              type="textarea"
              :rows="4"
              placeholder="请输入工作职责"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input
              v-model="formData.remark"
              type="textarea"
              placeholder="请输入备注"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" style="text-align: right">
          <el-button type="primary" @click="handleConfirm">确 定</el-button>
          <el-button @click="handleCancel">取 消</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  dicts: [],
  props: {
    infoData: {
      type: Object,
      default: () => {},
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formData: {
        jobName: "",
        jobLocation: "",
        salary: "",
        seniority: "",
        jobRequire: "",
        jobDuty: "",
        benefit: [],
        status: "",
        remark: "",
      },
      benefitOptions: [
        { value: "1", label: "六险一金" },
        { value: "2", label: "双休" },
        { value: "3", label: "年终奖" },
        { value: "4", label: "调薪" },
        { value: "5", label: "带薪年假" },
        { value: "6", label: "节日礼品" },
        { value: "7", label: "体检" },
        { value: "8", label: "下午茶" },
        { value: "9", label: "团建活动" },
      ],
      statusOptions: [
        { value: "0", label: "招聘中" },
        { value: "1", label: "招聘结束" },
      ],
      formRules: {
        jobName: [
          { required: true, message: "请输入职位名称", trigger: "blur" },
        ],
        jobLocation: [
          { required: true, message: "请输入工作地点", trigger: "blur" },
        ],
        salary: [{ required: true, message: "请输入薪资", trigger: "blur" }],
        seniority: [{ required: true, message: "请输入资历", trigger: "blur" }],
        // benefit: [
        //   {
        //     type: "array",
        //     required: true,
        //     message: "请至少选择一个福利",
        //     trigger: "change",
        //   },
        // ],
        benefit: [{ required: true, message: "请选择福利", trigger: "change" }],
        status: [
          { required: true, message: "请选择招聘状态", trigger: "change" },
        ],
        jobRequire: [
          { required: true, message: "请填写岗位要求", trigger: "blur" },
        ],
        jobDuty: [
          { required: true, message: "请填写工作职责", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    infoData: {
      handler(newVal) {
        if (newVal) {
          this.formData = {
            hireInfoId: newVal.hireInfoId || "",
            jobName: newVal.jobName || "",
            jobLocation: newVal.jobLocation || "",
            salary: newVal.salary || "",
            seniority: newVal.seniority || "",
            jobRequire: newVal.jobRequire || "",
            jobDuty: newVal.jobDuty || "",
            benefit: newVal.benefit ? newVal.benefit.split(",") : [],
            status: newVal.status || "",
            remark: newVal.remark || "",
          };
          this.$nextTick(() => {
            this.$refs.form && this.$refs.form.clearValidate();
          });
        }
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    handleConfirm() {
      let benefit = this.formData.benefit.join();
      let obj = {
        ...this.formData,
        benefit,
      };
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.$emit("save", obj);
        } else {
          this.$message.warning("表单校验不通过，请检查");
        }
      });
    },
    handleCancel() {
      this.formData = {
        jobName: "",
        jobLocation: "",
        salary: "",
        seniority: "",
        jobRequire: "",
        jobDuty: "",
        benefit: [],
        status: "",
        remark: "",
      };
      this.$refs.form.clearValidate();
      this.$emit("cancel");
    },
  },
};
</script>
