<template>
  <div v-transfer-dom>
    <popup :value="visible" @on-hide="handleCancle">
      <popup-header
        left-text="取消"
        right-text="发送"
        title="发起聊天"
        :show-bottom-border="true"
        :class="{'able-send': ableSend}"
        @on-click-left="handleCancle"
        @on-click-right="handleConfrim"
      ></popup-header>
      <div class="chat-container">
        <div class="chat-theme">
          发起消息位置
          <p>#{{ chatBaseInfo.moduleTitle }}#{{ chatBaseInfo.moduleTheme }}</p>
        </div>
        <div class="form-wrapper">
          <x-textarea placeholder="输入消息内容" :rows="4" v-model="content"></x-textarea>
          <div style="padding: 10px 15px">
            <upload-image
              :img-list="imgList"
              :oss-base-config="ossBaseConfig"
              @uploadSucc="onUplaodSucc"
            ></upload-image>
          </div>
        </div>
      </div>
    </popup>
  </div>
</template>

<script>
import { TransferDom, Popup, PopupHeader, XTextarea } from 'vux'
import ossConfig from '@/assets/ossConfig'
import ossPaths from '@/assets/ossPaths'
// 深度复制
const bussinessFileBucket = { ...ossConfig.bussinessFileBucket }
const ossCof = delete bussinessFileBucket.domain
export default {
  name: 'Chat',
  directives: {
    TransferDom
  },
  components: {
    Popup,
    XTextarea,
    PopupHeader,
    UploadImage: () => import('@/common/uploadImage/UploadImage')
  },
  props: {
    visible: {
      type: Boolean,
      requird: true,
      default: false
    },
    chatBaseInfo: {
      type: Object,
      required: true,
      default: () => ({
        moduleTitle: '',
        moduleTheme: '',
        chatToUserId: '',
        chatToUserName: ''
      }),
      validator (value) {
        const keys = Object.keys(value)
        return keys.includes('moduleTitle') && keys.includes('moduleTheme') && keys.includes('chatToUserId') && keys.includes('chatToUserName') && keys.includes('moduleRoute')
      }
    }
  },
  data () {
    return {
      content: '',
      ossBaseConfig: {
        limit: 1,
        ossCof,
        filePath: ossPaths.addressList,
        sourceType: 2
      },
      imgList: []
    }
  },
  computed: {
    ableSend () {
      const { content } = this
      return content.trim() !== ''
    }
  },
  methods: {
    // 上传图片成功
    onUplaodSucc (obj) {
      this.imgList.push(obj)
    },
    handleCancle () {
      Object.assign(this.$data, this.$options.data())
      this.$emit('update:visible', false)
    },
    handleConfrim () {
      const { content, imgList } = this
      const { moduleTitle, moduleTheme, moduleRoute, chatToUserId, chatToUserName } = this.chatBaseInfo
      const receiverList = [{ id: chatToUserId, name: chatToUserName }]
      const msgContent = {
        msg: content,
        voice: '',
        imgs: imgList.map(({ msrc }) => msrc),
        file: '',
        fileName: '',
        moduleTitle,
        moduleTheme,
        moduleRoute,
        type: 4 // 模块
      }
      this.$api.teacherAddressListApi
        .createChatRecord({
          receiver: receiverList,
          content: JSON.stringify(msgContent),
          briefly: JSON.stringify({ title: moduleTitle, text: content }),
          category: 1,
          client: 1,
          receiver_role: 1 // 接收人 教师
        })
        .then(res => {
          this.$handleResponse(res).then(() => {
            Object.assign(this.$data, this.$options.data())
            this.$emit('update:visible', false)
            this.$vux.toast.show({
              text: '发送成功'
            })
          })
        })
    }
  }
}
</script>

<style lang="stylus" scoped>
.chat-container
  // background-color #fff
  overflow hidden
  .chat-theme
    padding 10px 15px 0
    p
      margin-top 10px
      margin-bottom 0
      color #409EFF
  .form-wrapper
    margin 10px 15px
    background-color #fff
    border-radius 5px
>>> .image-item
  flex 0 0 84px !important
  height 84px !important
>>> .vux-popup-header-right
  color #828282
.able-send >>> .vux-popup-header-right
  color #04BE02
</style>
