<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-09-19 10:44:47
 * @LastEditors: 无尘
 * @LastEditTime: 2019-11-12 19:47:53
 -->
<!--
<chat-log-list :brandId="brandId" :itemRow="itemRow" :showFlag='showFlag' @hideDetail="hideDetail"></chat-log-list>
import chatLogList from '@/components/app/chat-log-list.vue';
components: {
  chatLogList
}
-->

<template>
  <div :class="['chat-log-detail', !showFlag ? 'hide-detail' : '']">
    <div v-if="showFlag" class="log-mask" @click="hideLog"></div>
    <div class="chat-log-wrap">
      <div class="chat-log-detail_top border-box" @click="hideLog">
        <i class="iconfont icon-zhankai"></i>
      </div>
      <ul class="chat-log-list border-box" v-infinite-scroll="load">
        <li v-for="(item, index) in chatDetailData" class="infinite-list-item" :key="index">
          <div v-if="item.type == 0" class="chat-list-cell flex">
            <div class="chat-list-cell_img"><img :src="item.headPic" alt="" /></div>
            <div class="chat-list-right p-l-3 flex flex-column flex-space-between">
              <div class="chat-list-user font-12 color-909399">
                <span>{{ item.name }} </span> <span>{{ item.createTime | formatTimeYmdHms }}</span>
              </div>
              <div class="chat-list-msg font-14 color-303133 m-t-3">
                <div v-if="item.msgType == 'image'" class="img"><img class="w-100" :src="item.content" alt="" /></div>
                <div v-if="item.msgType == 'text'" class="text">{{ item.content }}</div>
                <div v-if="item.msgType == 'wechat_news' || item.msgType == 'wechat_app'" class="no-consist">收到一条图文消息，请在手机上查看</div>
              </div>
            </div>
          </div>
          <div v-if="item.type == 1" class="chat-list-cell flex flex-end">
            <div class="chat-list-right p-r-3 flex flex-column flex-space-between">
              <div class="chat-list-user font-12 color-909399 text-right ">
                <span>{{ item.name }} </span> <span>{{ item.createTime | formatTimeYmdHms }}</span>
              </div>
              <div class="chat-list-msg font-14 color-303133 text-right ">
                <div v-if="item.msgType == 'image'" class="img"><img class="w-100" :src="item.content" alt="" /></div>
                <div v-if="item.msgType == 'text'" class="text">{{ item.content }}</div>
                <div v-if="item.msgType == 'wechat_news' || item.msgType == 'wechat_app'" class="no-consist">收到一条图文消息，请在手机上查看</div>
              </div>
            </div>
            <div class="chat-list-cell_img"><img :src="item.headPic" alt="" /></div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
// import EXIF from 'exif-js';
import { postRequest } from '@/api/api';
import errMsg from '@/common/js/error';
export default {
  name: 'chat-log-list',
  props: {
    brandId: {
      type: String,
      default() {
        return '';
      }
    },
    activeGroupId: {
      type: String,
      default() {
        return '';
      }
    },
    showFlag: {
      type: Boolean,
      default() {
        return false;
      }
    },
    itemRow: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      chatDetailData: [],
      pageSize: 20,
      pageNum: 1,
      total: 0,
      currentRow: this.itemRow
    };
  },
  methods: {
    /**
     * 隐藏详情
     */
    hideLog() {
      const that = this;
      that.chatDetailData = [];
      that.pageNum = 1;
      that.total = 0;
      that.currentRow = {};
      that.$emit('hideDetail');
      that.$nextTick(() => {
        document.body.style.overflow = 'auto';
      });
    },
    load() {
      const that = this;
      if (that.chatDetailData[that.chatDetailData.length - 1]) {
        that.getData(that.chatDetailData[that.chatDetailData.length - 1].userMessageId);
      }
    },
    /**
     * 获取消息详情
     */
    getData(userMessageId) {
      const that = this;
      let para = {
        brandId: that.brandId,
        size: that.pageSize,
        messageId: that.currentRow.messageId,
        userMessageId: userMessageId,
        userId: that.currentRow.userId
      };
      postRequest('/haoban-app-member-web/customer/find_message_detail', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            if (resData.result && resData.result.length) {
              // resData.result.forEach(ele => {
              for (let i = 0; i < resData.result.length; i++) {
                /* if (resData.result[i].msgType == 'image') {
                  let img = new Image();
                  let orientation;
                  img.src = resData.result[i].content;
                  img.setAttribute('crossOrigin', 'Anonymous');
                  let canvas = document.createElement('canvas');
                  let ctx = canvas.getContext('2d');
                  img.onload = function() {
                    console.log(img, img.width);
                    ctx.drawImage(img, 0, 0);
                    let baseUrl = canvas.toDataURL('image/png');
                    console.log(baseUrl);
                    EXIF.getData(img, function() {
                      //获取图片原数据orientation
                      orientation = EXIF.getTag(img, 'Orientation');
                    });
                    console.log(orientation);
                  };
                } */
                that.chatDetailData.push(resData.result[i]);
              }

              // });
            }
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    brandId: function(newData, oldData) {
      const that = this;
      if (!!newData) {
        that.activeBrand = newData;
      }
    },
    activeGroupId: function(newData, oldData) {
      const that = this;
      if (!!newData) {
        that.activeGroup = newData;
      }
    },
    // showFlag: function(newData, oldData) {
    //   const that = this;
    //   if (!!newData) {
    //     // that.getData();
    //   }
    // },
    itemRow: function(newData, oldData) {
      const that = this;
      document.body.style.overflow = 'hidden';
      that.chatDetailData = [];
      if (Object.keys(newData).length) {
        that.currentRow = newData;
        that.getData();
      }
    }
  },
  mounted() {
    const that = this;
    that.chatDetailData = [];
    if (Object.keys(that.itemRow).length) {
      that.currentRow = that.itemRow;
      that.getData();
    }
  }
};
</script>
<style lang="less" scoped>
.m-t-3 {
  margin-top: 3px;
}
.p-l-3 {
  padding-left: 3px;
}
.p-r-3 {
  padding-right: 3px;
}
.w-100 {
  width: 100px;
}
.chat-log-detail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 399px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;
  overflow: hidden;
  z-index: 100;
  background: #fff;
  .log-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
    opacity: 0.5;
    background: #000;
    z-index: 9;
  }
  &.hide-detail {
    right: -399px;
  }
  .chat-log-wrap {
    position: relative;
    background: #fff;
    z-index: 101;
  }
  .chat-log-detail_top {
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding-left: 15px;
    border-bottom: 1px solid #e4e7ed;
    cursor: pointer;
    i {
      font-size: 13px;
      color: #c0c4cc;
    }
  }
  .chat-log-list {
    height: calc(100vh - 50px);
    padding: 8px 10px 0 12px;
    overflow-y: auto;
    overflow-x: hidden;
    li {
      margin-bottom: 40px;
      .chat-list-cell {
        text-overflow: ellipsis;
        overflow: hidden;
        .chat-list-right {
          .chat-list-msg {
            word-break: break-all;
          }
          .chat-list-user {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
        .chat-list-cell_img {
          width: 36px;
          min-width: 36px;
          max-width: 36px;
          height: 36px;
          border-radius: 50%;
          img {
            width: 36px;
            height: 36px;
            border-radius: 50%;
          }
        }
        &.flex-end {
          -webkit-justify-content: flex-end;
          -moz-justify-content: flex-end;
          -ms-justify-content: flex-end;
          -o-justify-content: flex-end;
          justify-content: flex-end;
          .chat-list-user {
            padding-right: 8px;
          }
        }
      }
    }
  }
}
</style>
