<template>
  <div class="wrapper">
    <div class="card">
      <div class="form">
        <em>*</em>
        <label>标题</label>
      </div>
      <u-input type="textarea" trim placeholder="请输入标题" maxlength="100"
               placeholder-style="color: #999999;font-size: 15px;" v-model="form.title"/>
      <div class="form" style="border-top: 1px solid #dddddd;">
        <em>*</em>
        <label>详细描述</label>
      </div>
      <u-input type="textarea" trim placeholder="请输入详细描述信息" maxlength="500"
               placeholder-style="color: #999999;font-size: 15px;" v-model="form.content"/>
    </div>

    <div class="card">
      <div class="form">
        <em>*</em>
        <label>农产品类型</label>
        <AiSelect class="right" v-model="form.type" dict="agriculturalType"/>
      </div>
    </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">
        <label>联系人</label>
        <div class="right">
          <u-input trim placeholder="请输入" input-align="right"
                   placeholder-style="color:#999;font-size: 17px;" v-model="form.contactPerson"></u-input>
        </div>
      </div>
      <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;" :maxlength="11" v-model="form.phone"></u-input>
        </div>
      </div>
      <div class="form">
        <label>地址</label>
        <div class="right">
          <u-input trim placeholder="请输入" input-align="right" style="flex: 1;margin-left: 16px;"
                   placeholder-style="color:#999;font-size: 17px;" v-model="form.address"></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: "agAdd",
  appName: "发布晒农产品",
  data() {
    return {
      form: {
        title: "",
        content: "",
        type: "",
        typeName: "",
        files: [],
        contactPerson: "",
        phone: "",
        address: "",
      },
      flag: false
    }
  },
  onLoad() {
    this.$dict.load("agriculturalType");
  },

  methods: {
    submit() {
      if (!!!this.form.title) return this.$u.toast("请输入标题");
      if (!!!this.form.content) return this.$u.toast("请输入详细描述");
      if (!!!this.form.type) return this.$u.toast("请选择农产品类型");
      if (!!!this.form.phone) return this.$u.toast("请输入联系方式");
      if (this.flag) return
      this.flag = true
      this.$loading()
      this.$instance.post("/app/appshowagriculturalproduce/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: 500;
      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 {
    border-bottom: 1px solid #DDDDDD;
  }
}

</style>
