<template>
  <j-modal
    :maskClosable="false"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    :title="title"
    :visible="visible"
    :width="800"
    switchFullscreen @cancel="handleCancel">
    <div v-infinite-scroll="handleInfiniteOnLoad" :infinite-scroll-disabled="busy" :infinite-scroll-distance="10"
         class="demo-infinite-container">
      <a-list :data-source="data" class="comment-list" item-layout="vertical">
        <a-list-item slot="renderItem" slot-scope="item, index">
          <a-comment :author="Base64.decode(item.wxUser.nickName)" :avatar="item.wxUser.avatarUrl">
            <p slot="content">
              {{ item.content }}
            </p>
            <a-tooltip slot="datetime">
              <span>{{ item.createTime }}</span>
            </a-tooltip>
            <a-comment v-for="(reply,i) in item.replys" :key="i">
              <a slot="author">{{ reply.realname }}</a>
              <a-avatar slot="avatar" :size="32" icon="user" />
              <p slot="content">
                {{ reply.content }}
              </p>
              <a-tooltip slot="datetime">
                <span>{{ reply.createTime }}</span>
              </a-tooltip>
            </a-comment>
            <a-comment class="reply_box">
              <div slot="content">
                <a-textarea :rows="4" :value="replyContent" @change="handleReplyChange" />
                <div v-if="showTips" class="ant-form-explain" style="color: #f5222d">请输入回复内容！</div>
                <a-button :loading="submitting" html-type="submit" type="primary" @click="handleSubmitReply(item.id)">
                  回复
                </a-button>
              </div>
            </a-comment>
          </a-comment>
        </a-list-item>
      </a-list>
    </div>
  </j-modal>
</template>

<script>
import infiniteScroll from 'vue-infinite-scroll'
import { getAction, putAction } from '@api/manage'
import { Base64 } from 'js-base64'

const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo'
export default {
  name: 'WhisperingsModal',
  components: {},
  directives: { infiniteScroll },
  data() {
    return {
      submitting: false,
      data: [],
      loading: false,
      busy: false,
      title: '',
      width: 800,
      visible: false,
      disableSubmit: false,
      replyContent: '',
      Base64,
      showTips: false,
      model: ''
    }
  },
  methods: {
    handleSubmitReply(id) {
      const that = this
      if (null == that.replyContent || '' == that.replyContent) {
        that.showTips = true
      } else {
        putAction('inspect/whisperings/reply', {
          whisperingsId: id,
          content: that.replyContent
        }).then((res) => {
          console.log(res)
          if (res.success) {
            that.getDatas()

          } else {
            that.$message.warning(res.message)
          }
        })
      }

    },
    handleReplyChange(e) {
      this.replyContent = e.target.value
    },
    handleInfiniteOnLoad() {
      const data = this.data
      this.loading = true
      if (data.length > 14) {
        this.$message.warning('Infinite List loaded all')
        this.busy = true
        this.loading = false
        return
      }
      this.fetchData(res => {
        this.data = data.concat(res.results)
        this.loading = false
      })
    },
    edit(record) {
      const model = Object.assign({}, record)
      console.log(model)
      const that = this
      that.model = model
      that.getDatas()
      this.visible = true
    },
    getDatas: function() {
      const that = this
      that.data = []
      getAction('inspect/whisperings/queryWhisperingsReplyByMainId', {
        id: that.model.id
      }).then((res) => {
        console.log(res)
        if (res.success) {
          var model = that.model
          const replys = res.result.replys
          model.replys = replys
          model.wxUser = res.result.wxUser
          that.data.push(model)
          that.replyContent = ''
          console.log(that.data)
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.data = []
    },
    submitCallback() {
      this.$emit('ok')
      this.visible = false
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>
<style scoped>

.ant-comment-actions > li {
  width: 95% !important;
}

.demo-infinite-container {
  max-height: 600px;
  padding-right: 10px;
  overflow-y: auto;
}

.demo-loading-container {
  position: absolute;
  bottom: 40px;
  width: 100%;
  text-align: center;
}

.ant-comment-content-detail p {
  margin-top: 10px;
  margin-bottom: 0;
  white-space: normal !important;
  line-height: 2;
}

.reply_box button {
  margin-top: 15px;
  float: right;
}
</style>

<style>
.reply_box .ant-comment-avatar {
  display: none;
}
</style>