<template>
  <div class="integralAdd">
    <div class="item">
      <div class="left">事件类型</div>
      <AiSelect class="right" :list="dictList" v-model="form.applyItemId"></AiSelect>
    </div>
    <div class="items">
      <p>详情描述</p>
      <textarea v-model="form.content" :maxlength="300" placeholder="请输入详细描述..."></textarea>
      <div class="tips">{{ form.content.length }}/300</div>
    </div>
    <div class="items">
      <p>上传图片</p>
      <div class="upload">
        <AiUploader v-model="form.files" placeholder="上传图片" type="image" :limit="9" multiple></AiUploader>
      </div>
      <div class="tips left">可上传图片，最多上传9张。</div>
    </div>
    <div class="items">
      <p>上传视频</p>
      <div class="upload">
        <AiUploader v-model="form.files" placeholder="上传视频" type="video" :limit="9" multiple :size="30 * 1024 * 1024"></AiUploader>
      </div>
      <div class="tips left">可上传视频，最大30M。</div>
    </div>

    <div class="item">
      <div class="left">所属网格</div>
      <AiPagePicker type="gird" v-model="form.girdId" :params="{ formType: 2 }" @select="handleSelectGrid" nodeKey="id">
        <AiMore v-model="form.girdName"/>
      </AiPagePicker>
    </div>

    <div class="btn-wrapper">
      <div class="btn" hover-class="text-hover" @click="submit">提交申请</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "integralAdd",
  appName: '积分申请',
  data() {
    return {
      form: {
        applyItemId: 0,
        applyIntegral: '',
        applyItemName: '',
        content: '',
        files: [],
        girdId: '',
        girdName: '',
      },
      list: [],
      dictList: [],
    }
  },
  onLoad(o) {
    this.$dict.load(['clapEventStatus'])
    this.getType()
  },
  watch: {
    'form.applyItemId'(v) {
      if(v) {
        this.form.applyItemName = this.list.filter(e=> (e.id==v))[0].ruleName
        this.form.applyIntegral = this.list.filter(e => (e.id == v))[0].integral
      }
    }
  },
  methods: {
    submit() {
      this.$instance.post(`/app/appintegraluserapply/addOrUpdate`,{
        ...this.form
      }).then(res=> {
        if(res?.data) {
          console.log(res);
        }
      })
    },
    // 事件类型
    getType() {
      this.$instance.post(`/app/appintegralrule/listByFD`).then(res=> {
        if(res?.data) {
          this.list = res.data
          this.dictList = res.data.map(v => {
            return {
              value: v.id,
              label: v.ruleName
            }
          })
        }
      })
    },
    handleSelectGrid(v) {
      this.form.girdName = v.girdName
      this.form.girdId = v.girdId
    }
  }
}
</script>

<style lang="scss" scoped>
.integralAdd {
  padding-bottom: 140px;
  box-sizing: border-box;
  .item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: #FFF;
    padding: 24px 32px;
    box-sizing: border-box;
    margin-top: 24px;
    .left {
      width: 250px;;
    }
    .right {
      width: calc(100% - 200px);
      text-align: right;
    }
    ::v-deep .AiSelect {
      float: right;
    }
  }
  .items {
    width: 100%;
    background: #FFF;
    margin-top: 24px;
    p {
      padding: 24px 32px;
      box-sizing: border-box;
      border: 1px solid #EEEEEE;
    }
    textarea {
      padding: 24px 32px;
      box-sizing: border-box;
    }

    .tips {
      padding: 12px 32px;
      box-sizing: border-box;
      text-align: right;
      color: #999999;
      font-size: 24px;
      font-weight: 400;
    }
    .left {
      text-align: left;
    }
    .upload {
      padding: 24px 32px;
      box-sizing: border-box;

      // .fodder_alls {
      //   display: flex;
      //   margin-top: 16px;
      //   align-items: center;
      //   .fodder_add {
      //     border: 2px solid #DBDCDF;
      //     padding: 20px 24px;
      //     box-sizing: border-box;
      //     border-radius: 8px;
      //   }
      //   .fodder_title {
      //     color: #8E8F91;
      //     margin-left: 20px;
      //   }
      // }
    }
  }

  ::v-deep .btn-wrapper {
    background: #FFF;
  }

  ::v-deep .btn-wrapper .btn {
    height: 80px;
    line-height: 80px;
    border-radius: 40px;
  }

}
</style>