<template>
  <div class="wrapper">
    <div class="card">
      <div class="form">
        <em>*</em>
        <label>类型</label>
        <div class="right" @click="show=true">
          <u-icon name="arrow-right" color="#999999" size="28"></u-icon>
          <span class="value" style="color: #999999;font-weight:normal;" v-if="!form.typeName">请选择</span>
          <span class="value" style="color: #333333;font-weight:normal;" v-else>{{ form.typeName }}</span>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="form border">
        <em>*</em>
        <label>事主姓名</label>
        <div class="right">
          <u-input trim placeholder="请输入" input-align="right" v-model="form.name"
                   placeholder-style="color:#999;font-size: 16px;"></u-input>
        </div>
      </div>
      <div class="form border">
        <em>*</em>
        <label>联系方式</label>
        <div class="right">
          <u-input trim placeholder="请输入" input-align="right" v-model="form.phone"
                   placeholder-style="color:#999;font-size: 16px;" maxlength="11"></u-input>
        </div>
      </div>
      <div class="form">
        <em>*</em>
        <label>活动地点</label>
        <div class="right">
          <u-input trim placeholder="请输入" input-align="right" v-model="form.address"
                   placeholder-style="color:#999;font-size: 16px;" style="flex: 1;margin-left: 16px;"></u-input>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="form">
        <em></em>
        <label>详细描述</label>
      </div>
      <u-input type="textarea" trim v-model="form.content" placeholder="请输入详细描述信息…" maxlength="500"
               placeholder-style="color: #999999;font-size: 15px;"/>
    </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="btn-wrapper">
      <div class="btn" @click="submit" hover-class="text-hover">提交</div>
    </div>
    <u-select v-model="show" :list="$dict.getDict('marriageType')" value-name="dictValue"
              label-name="dictName" @confirm="confirm"></u-select>
  </div>
</template>

<script>

export default {
  name: "marAdd",
  appName: "我要上报",
  data() {
    return {
      form: {
        type: "",
        typeName: "",
        name: "",
        phone: "",
        address: "",
        content: "",
        personType: 0,
        files: [],
      },
      show: false,
      flag: false
    }
  },
  methods: {
    submit() {
      if (!!!this.form.typeName) return this.$u.toast("请选择类型");
      if (!!!this.form.name) return this.$u.toast("请输入事主姓名");
      if (!!!this.form.phone) return this.$u.toast("请输入联系方式");
      if (!!!this.form.address) return this.$u.toast("请输入活动地点");
      if (this.flag) return
      this.flag = true
      this.$loading()
      this.$instance.post("/app/appmarriagefuneralinfo/addOrUpdate", {
        ...this.form
      }).then(res => {
        this.$hideLoading()
        this.flag = false
        if (res.code == 0) {
          uni.$emit('update')
          this.$u.toast("提交成功");
          setTimeout(_ => {
            uni.navigateBack();
          }, 500)
        }
      })
    },
    confirm(val) {
      this.form.type = val[0].value;
      this.form.typeName = val[0].label;
    },
  },
}
</script>

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

.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>
