<template>
  <div class="page">
    <div class="pad-b112">
      <div class="bg-197DF0"></div>
      <div class="add-form">
        <div class="form-item">
          <span class="item-tips">*</span>
          <span class="label">留言内容</span>
          <div class="item-input title-line">
            <u-input type="textarea" height="200" placeholder="请输入留言内容（500字以内）" placeholder-style="color:#999;"
                     maxlength="500" 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>
    <div class="fixed-bottom confirm-btn" @click="reply">提交</div>
  </div>
</template>
<script>
import {mapState} from 'vuex'

export default {
  name: "reply",
  appName: "发表回复",
  computed: {
    ...mapState(['user', 'token'])
  },
  data() {
    return {
      content: '',
      files: [],
      avatarUrl: ''
    }
  },
  onLoad(options) {
    this.msgCode = options.code
    this.avatarUrl = this.user.avatarUrl
  },
  methods: {
    reply() {
      if (!this.content) {
        return this.$toast('请输入留言内容')
      }
      var params = {
        "content": this.content,
        "images": JSON.stringify(this.files),
        "msgCode": this.msgCode,
        "userType": 0,
        'headPortrait': this.avatarUrl
      }
      this.$instance.post(`/app/appleavemessagereply/addOrUpdateForWX`, params).then(res => {
        if (res.code == 0) {
          uni.showModal({
            title: '留言回复成功',
            confirmText: "查看详情",
            confirmColor: "#197DF0",
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                uni.navigateBack()
              }
            }
          });
        }
      })
    },
  }
}
</script>
<style scoped lang="scss">
@import "~dvcp-wui/common";

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

  .pad-b112 {
    padding-bottom: 112px;
  }

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

  .add-form {
    width: 686px;
    background: #FFFFFF;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    margin: -68px 0 032px;
  }

  .form-item {
    padding: 34px 32px 012px;
    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: 520px;
      text-align: right;
    }

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

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

    .upload {
      margin: 32px 0 024px;
      padding-bottom: 32px;
    }
  }

  .mar-b8 {
    margin-bottom: 16px;
  }
}

</style>
