<template>
  <div class="wrapper">
    <div class="card">
      <div class="form">
        <em>*</em>
        <label>标题</label>
      </div>
      <u-input type="textarea" trim placeholder="请输入标题" maxlength="100" v-model="form.title"
               placeholder-style="color: #999999;font-size: 17px;font-weight:normal;"
               :custom-style="{color:'#333',fontSize:'17px',paddingLeft:'12px'}"/>
      <div class="form border-top">
        <em>*</em>
        <label>详细描述</label>
      </div>
      <u-input type="textarea" trim placeholder="请输入详细描述信息…" maxlength="500" v-model="form.remark"
               placeholder-style="color: #999999;font-size: 17px;font-weight:normal;"
               :custom-style="{color:'#333',fontSize:'17px',paddingLeft:'12px'}"/>
    </div>
    <div class="card" style="padding-bottom: 20px">
      <div class="form">
        <label>图片上传
          <span>(最多9张)</span>
        </label>
      </div>
      <AiUploader :limit="9" v-model="form.files"></AiUploader>
    </div>
    <div class="card">
      <div class="form border">
        <em>*</em>
        <label>联系人</label>
        <div class="right">
          <u-input trim placeholder="请输入" input-align="right"
                   placeholder-style="color:#999;font-size: 17px;font-weight:normal;" v-model="form.linkName"
                   :custom-style="{fontWeight:600,color:'#333',fontSize:'17px'}"></u-input>
        </div>
      </div>
      <div class="form">
        <em>*</em>
        <label>联系方式</label>
        <div class="right">
          <u-input trim placeholder="请输入" input-align="right"
                   placeholder-style="color:#999;font-size: 17px;font-weight:normal;" v-model="form.linkPhone"
                   :custom-style="{fontWeight:600,color:'#333',fontSize:'17px'}" maxlength="11"></u-input>
        </div>
      </div>
    </div>
    <div class="btn-wrapper">
      <div class="btn" @click="submit" hover-class="text-hover">提交</div>
    </div>
  </div>
</template>
<script>

export default {
  name: "pubJob",
  appName: "我要找工作",
  data() {
    return {
      form: {
        title: "",
        remark: "",
        files: [],
        linkName: "",
        linkPhone: "",
        type: 1,
      },
      flag: false
    }
  },
  methods: {
    submit() {
      if (!!!this.form.title) return this.$u.toast("请输入标题");
      if (!!!this.form.remark) return this.$u.toast("请输入详细描述");
      if (!!!this.form.linkName) return this.$u.toast("请输入联系人");
      if (!!!this.form.linkPhone) return this.$u.toast("请输入联系方式");
      if (this.flag) return
      this.flag = true
      this.$loading()
      this.$instance.post("/app/appjob/addOrUpdate", {
        ...this.form
      }).then(res => {
        this.$hideLoading()
        this.flag = false
        if (res.code == 0) {
          this.$u.toast("提交成功");
          setTimeout(_ => {
            uni.navigateBack();
          }, 500)
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.wrapper {
  padding-bottom: 150px;
}

.card {
  box-sizing: border-box;
  padding-left: 32px;
  background-color: #fff;
  margin-bottom: 24px;

  .form {
    height: 112px;
    background: #FFFFFF;
    display: flex;
    align-items: center;

    & > em {
      width: 16px;
      height: 44px;
      font-weight: 400;
      color: #FF4466;
      line-height: 54px;
      font-style: normal;
      margin-right: 8px;
    }

    & > label {
      font-size: 32px;
      font-weight: 600;
      color: #666666;

      & > span {
        font-size: 28px;
        font-weight: 400;
        color: #999999;
      }
    }

    .right {
      flex: 1;
      display: flex;
      align-items: center;
      flex-direction: row-reverse;
      margin-right: 32px;

      .value {
        font-size: 34px;
        font-weight: 600;
        color: #333333;
      }
    }
  }

  .border-top {
    border-top: 1px solid #DDDDDD;
  }

  .border {
    border-bottom: 1px solid #DDDDDD;
  }
}
</style>
