<template>
  <ai-detail>
    <!-- 返回按钮 -->
    <template #title>
      <ai-title title="添加招工就业信息" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
    </template>

    <!-- 内容 -->
    <template #content>
      <el-form class="ai-form" :model="formData" ref="ruleForm" :rules="formRules">
        <ai-card title="岗位信息">
          <div slot="content" class="ai-content">
            <!-- 招聘岗位 -->
            <el-form-item label="招聘岗位" prop="title" style="width: 45%">
              <el-input size="small" placeholder="请输入" v-model="formData.title" maxlength="30" show-word-limit></el-input>
            </el-form-item>

            <!-- 招聘人数 -->
            <el-form-item label="招聘人数" prop="total" style="width: 45%">
              <el-input size="small" placeholder="请输入" v-model="formData.total" show-word-limit></el-input>
            </el-form-item>

            <!-- 学历 -->
            <el-form-item label="学历" prop="education" style="width: 45%">
              <el-input size="small" placeholder="请输入" v-model="formData.education" show-word-limit></el-input>
            </el-form-item>

            <!-- 性别 -->
            <el-form-item label="招聘性别" prop="gender" style="width: 45%">
              <ai-select size="small" v-model="formData.gender" :selectList="$dict.getDict('JobGender')"></ai-select>
            </el-form-item>

            <!-- 年龄 -->
            <el-form-item label="年龄" prop="age" style="width: 45%">
              <el-input size="small" placeholder="请输入，如“18-60”" v-model="formData.age" show-word-limit></el-input>
            </el-form-item>

            <!-- 薪酬待遇 -->
            <el-form-item label="薪酬待遇" prop="salary" style="width: 45%">
              <el-input size="small" placeholder="请输入，如“5k-10k”" v-model="formData.salary" maxlength="10" show-word-limit></el-input>
            </el-form-item>

            <!-- 岗位说明 -->
            <el-form-item label="岗位说明" prop="remark" style="width: 100%">
              <el-input type="textarea" placeholder="请输入" maxlength="500" v-model="formData.remark" show-word-limit :rows="4"></el-input>
            </el-form-item>
            <!-- / -->
          </div>
        </ai-card>

        <ai-card title="企业信息">
          <div slot="content" class="ai-content">
            <!-- 单位名称 -->
            <el-form-item label="单位名称" prop="companyName" style="width: 45%">
              <el-input size="small" placeholder="请输入" v-model="formData.companyName" maxlength="30" show-word-limit></el-input>
            </el-form-item>

            <!-- 联系人 -->
            <el-form-item label="联系人" prop="linkName" style="width: 45%">
              <el-input size="small" placeholder="请输入" v-model="formData.linkName" show-word-limit></el-input>
            </el-form-item>

            <!-- 联系方式 -->
            <el-form-item label="联系方式" prop="linkPhone" style="width: 100%">
              <el-input size="small" placeholder="请输入" v-model="formData.linkPhone" show-word-limit></el-input>
            </el-form-item>
          </div>
        </ai-card>
      </el-form>
    </template>

    <!-- 底部按钮 -->
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm('ruleForm')">提交</el-button>
    </template>
  </ai-detail>
</template>

<script>
export default {
  name: 'Add',
  // 组件
  components: {},
  props: {
    instance: Function,
    dict: Object,
    params: Object,
  },
  data() {
    return {
      info: {},
      id: '',
      formData: {
        title: '',
        total: '',
        education: '',
        gender: '',
        age: '',
        salary: '',
        remark: '',
        companyName: '',
        linkName: '',
        linkPhone: '',
        status: '0',
      },
      formRules: {
        title: [{ required: true, message: '请输入招聘岗位', trigger: 'change' }],
        total: [{ required: true, message: '请输入招聘人数位', trigger: 'change' }],
        education: [{ required: true, message: '请输入招聘学历', trigger: 'change' }],
        age: [{ required: true, message: '请输入招聘年龄', trigger: 'change' }],
        gender: [{ required: true, message: '请输入招聘性别', trigger: 'change' }],
        salary: [{ required: true, message: '请输入薪酬待遇', trigger: 'change' }],
        remark: [
          { required: true, message: '请输入岗位说明', trigger: 'change' }
        ],
        companyName: [{ required: true, message: '请输入单位名称', trigger: 'change' }],
        linkName: [{ required: true, message: '请输入联系人', trigger: 'change' }],
        linkPhone: [{ required: true, message: '请输入联系方式', trigger: 'change' }],
      },
    }
  },
  // 计算
  computed: {},
  // 监听
  watch: {},
  created() {
    this.dict.load('JobGender').then(() => {})
    if (this.params && this.params.id) {
      this.id = this.params.id
      this.getInfoList(this.params.id)
    }
  },
  // 实例创建后
  onShow() {},
  // 实例渲染后
  mounted() {},
  // 方法
  methods: {
    getInfoList(id) {
      this.instance.post(`/app/appjob/detail?id=${id}`).then((res) => {
        if (res.code === 0) {
          this.formData = res.data
          window.console.log(this.info)
        }
      })
    },

    // 确定新增
    confirm() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.instance
            .post(`/app/appjob/addOrUpdate`, {
              title: this.formData.title,
              total: this.formData.total,
              education: this.formData.education,
              gender: this.formData.gender,
              age: this.formData.age,
              salary: this.formData.salary,
              remark: this.formData.remark,
              companyName: this.formData.companyName,
              linkName: this.formData.linkName,
              linkPhone: this.formData.linkPhone,
              status: this.formData.status,
              id: this.id,
              type: 0
            })
            .then((res) => {
              if (res.code == 0) {
                this.$message.success('提交成功')
                setTimeout(() => {
                  this.cancel(true)
                }, 1000)
              }
            })
        }
      })
    },

    // 返回按钮
    cancel(isRefresh) {
      this.$emit('change', {
        type: 'List',
        isRefresh: isRefresh ? true : false,
      })
    },
  },
}
</script>

<style scoped lang="scss">
::v-deep.ai-form {
  display: flex;
  flex-direction: column;
  .ai-card {
    .ai-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
  }
}
</style>
