<template>
  <div class="reply">
    <div class="reply_content">
      <span class="icon">*</span>
      <text class="msgfont">回复内容</text>
      <textarea :maxlength="500" placeholder="请输入内容(500字以内)" v-model="msg" class="textarea"></textarea>
      <!-- <u-input
        type="textarea"
        height="50"
        :auto-height="false"
        placeholder="请输入内容（500字以内）"
        placeholder-style="color:#999;"
        maxlength="500"
        v-model="msg"
        class="textarea"
      /> -->
    </div>
    <div class="reply_img">
      <text class="img">图片资料</text>
      <text class="img_text">(最多9张)</text>
      <div class="upload">
        <div class="info">
          <ai-uploader multiple @data="data" @change="change" :limit="9" action="/admin/file/add2"></ai-uploader>
        </div>
      </div>
    </div>
    <ai-back/>
    <div class="submit">
      <button class="btn" @click="btn">提交</button>
    </div>
  </div>
</template>

<script>
import AiUploader from '../../components/AiUploader'
import AiBack from "../../components/AiBack";

export default {
  // name: '',
  // 组件
  components: {AiBack, AiUploader},
  props: {},
  data() {
    return {
      msg: '',
      files: [],
      msgCode: '',
    }
  },
  onLoad(options) {
    this.msgCode = options.msgCode
  },
  // 计算
  computed: {},
  // 监听
  watch: {},
  // 实例创建后
  onShow() {
    this.$dict.load('leaveMessageType').then(() => {
      this.dictList = this.$dict.getDict('leaveMessageType')
    })
  },
  // 实例渲染后
  mounted() {
  },
  // 方法
  methods: {
    data(e) {
      this.files.push(e)
    },
    // selectEventType(selecteds) {
    //   this.eventType = selecteds?.[0]?.value
    // },
    change(e) {
      this.files = e
    },
    btn() {
      if (this.msg == '') {
        return uni.showToast({
          title: '请输入留言内容',
          icon: 'none',
        })
      }
      this.$http
      .post(`/app/appleavemessagereply/addOrUpdate`, {
        images: JSON.stringify(this.files),
        content: this.msg,
        msgCode: this.msgCode,
        userType: '1',
      }).then(res => {
        if (res?.code == 0) {
          uni.navigateTo({
            url: `/pages/casuallyask/truemsg?flag=1`,
          })
        }
      }).catch(err => {
        uni.navigateTo({
          url: `/pages/casuallyask/truemsg?flag=0`,
        })
        this.$u.toast(err || '网络异常')
      })
    },
  },
}
</script>

<style scoped lang="scss">
.reply {
  width: 100%;
  // height: 100%;
  .reply_content {
    height: 288px;
    padding: 0 20px 0 20px;
    background-color: #fff;

    .icon {
      display: inline-block;
      width: 16px;
      height: 44px;
      line-height: 44px;
      font-size: 42px;
      vertical-align: middle;
      color: red;
      margin-top: 10px;
    }

    .msgfont {
      // overflow: auto;
      // word-wrap: break-word;
      // word-break: break-all;
      display: inline-block;
      width: 226px;
      height: 44px;
      margin-top: 34px;
      line-height: 44px;
      font-size: 32px;
      // font-weight: 800;
      margin-left: 10px;
    }

    .textarea {
      height: 190px;
      width: 700px;
      // overflow: auto;
      // word-wrap: break-word;
      // word-break: break-all;
    }
  }

  .reply_img {
    margin-top: 20px;
    background-color: #fff;
    padding: 0 20px;
    box-sizing: border-box;

    .img {
      display: inline-block;
      margin-top: 20px;
      font-size: 32px;
      // font-weight: 800;
    }

    .img_text {
      font-size: 32px;
      color: #999;
      margin-left: 10px;
    }

    .upload {
      width: 100%;
      margin-top: 10px;
      padding: 12px 12px 12px 0;
      box-sizing: border-box;

      .info {
        width: 100%;
        text-align: center;
      }

      ::v-deep .ai-uploader .fileList .default {
        width: 160px;
        height: 160px;
      }
    }
  }

  .submit {
    padding: 50px 32px;

    .btn {
      background-color: #1365dd;
      color: #fff;
      font-size: 36px;
    }
  }
}
</style>
