<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: 100%">
              <el-input placeholder="请输入" size="small" v-model="formData.title" maxlength="30" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="linkName" style="width: 100%">
              <el-input size="small" placeholder="请输入联系人" v-model="formData.linkName" maxlength="20" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="linkPhone" style="width: 100%">
              <el-input size="small" placeholder="请输入联系方式" :maxlength="20" 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',
    props: {
      instance: Function,
      dict: Object,
      params: Object,
    },
    data() {
      return {
        info: {},
        id: '',
        formData: {
          title: '',
          linkPhone: '',
          linkName: '',
          type: 1
        },
        formRules: {
          title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
          linkPhone: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
          linkName: [{ required: true, message: '请输入联系方式', trigger: 'blur' }]
        },
      }
    },

    created() {
      this.dict.load('JobGender').then(() => {})
      if (this.params && this.params.id) {
        this.id = this.params.id
        this.getInfoList(this.params.id)
      }
    },

    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`, {
              ...this.formData,
              type: 1,
              id: this.id || ''
            })
            .then((res) => {
              if (res.code == 0) {
                this.$message.success('提交成功')
                setTimeout(() => {
                  this.cancel(true)
                }, 600)
              }
            })
          }
        })
      },

      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>
