<template>
  <div class="page">
    <div class="header-bg"></div>
    <div class="add-form">
      <div class="form-item">
        <span class="item-tips">*</span>
        <span class="label">活动总结</span>
        <div class="item-input fs-32">
          <u-input type="textarea" height="140" placeholder="填写本次活动参与心得体会（1000字以内）" placeholder-style="color:#999;"
                   maxlength="1000" v-model="content"/>
        </div>
      </div>
      <div class="form-item">
        <span class="item-tips"></span>
        <span class="label">活动照片<span class="mini-label">（最多9张）</span></span>
        <div class="upload">
          <AiUploader :limit="9" v-model="files"></AiUploader>
        </div>
      </div>
    </div>
    <div class="fixed-bottom confirm-btn" @click="confirm">提交</div>
  </div>
</template>
<script>
import {mapState} from 'vuex'

export default {
  name: "addContent",
  computed: {
    ...mapState(['user'])
  },
  data() {
    return {
      content: '',
      files: [],
      flag: false,
      id: '',
      reportId: ''
    }
  },
  onLoad(option) {
    this.id = option.id
    this.reportId = option.reportId
  },
  methods: {
    confirm() {
      if (this.flag) return
      this.$loading()

      var fileIds = []
      if (this.files.length) {
        this.files.map((item) => {
          fileIds.push(item.id)
        })
      }

      var params = {
        reportId: this.reportId,
        id: this.id,
        content: this.content,
        files: this.files,
        fileIds: fileIds
      }
      if (!params.content) {
        return this.$toast('请输入本次活动参与心得体会')
      }
      this.flag = true
      this.$instance.post(`/app/apppartyreport/log-add`, params).then(res => {
        if (res && res.code == 0) {
          this.$hideLoading()
          this.$toast('日志填写成功！')
          setTimeout(() => {
            uni.navigateBack()
          }, 1000)
        } else {
          this.flag = false
        }
      }).catch(err => {
        console.log(err)
        this.flag = false
      })
    },
  }
}
</script>
<style scoped lang="scss">
@import "../../common/common.scss";

.page {
  width: 100%;
  background-color: #F3F6F9;

  .header-bg {
    width: 100%;
    height: 112px;
    background: #197DF0;
  }

  .add-form {
    margin: -96px 0 0 32px;
    border-radius: 8px;
    background-color: #fff;
    width: 686px;
  }

  .form-item {
    padding: 34px 32px 34px 12px;
    line-height: 44px;

    .item-tips {
      display: inline-block;
      width: 12px;
      font-size: 32px;
      color: #FF4466;
    }

    .label {
      display: inline-block;
      min-width: 126px;
      color: #333;
      font-size: 32px;
      margin-left: 8px;

      .mini-label {
        color: #999;
        font-size: 28px;
      }
    }

    .value {
      display: inline-block;
      width: 518px;
      text-align: right;
    }

    .text {
      display: inline-block;
      width: 520px;
      text-align: right;
    }

    .color-333 {
      color: #333 !important;
    }

    .right-icon {
      width: 32px;
      height: 32px;
      margin-left: 8px;
      vertical-align: middle;
    }

    .item-input {
      padding-bottom: 4px;
      margin-left: 24px;
      margin-top: 32px;

      input {
        line-height: 42px;
        font-size: 32px;
      }

    }

    .upload {
      margin: 32px 0 0 24px;
    }
  }

  .mar-b8 {
    margin-bottom: 16px;
  }
}
</style>
