<template>
  <div>
    <el-button
      @click="dialogToggle"
      size="mini" type="primary" plain>聊天记录
    </el-button>

    <el-dialog title="聊天记录" append-to-body :visible.sync="show">
      <div v-loading="loading" style="height: 500px; overflow: auto;" class="liaotian-content">
        <div v-if="list.length">
          <div class="real-time">{{ startAt || chatStartAt }}</div>
          <div class="chat-record" v-for="item in list" :key="item.id">
            <div class="le">
              <div class="le-content" v-if="item.author == 'left'">
                <div class="le-content-image">
                  <img :src="item.headimg" alt="">
                </div>
                <div class="le-content-box">
                  <div class="le-content-box-title">{{ item.nick }} {{ item.gmt_create }}</div>
                  <!-- 聊天内容 -->
                  <div class="chat-record-content" v-if="item.image_type == 1000" v-html="item.sentence"></div>
                  <!-- 聊天图片 -->
                  <div class="chat-record-content-image" v-if="item.image_type == 3">
                    <img :src="'https://hjapi.aihujing.com/ims/file/down?file_path='+item.image_osskey" alt="">
                  </div>
                  <!-- 聊天语音 -->
                  <div class="chat-record-content-audio" v-if="item.image_type == 34">
                    <audio controls="controls" width="260px" height="40px" class="le-content-audio" @play="audioClick('sourceFile'+item.id)" :id="'sourceFile'+item.id" :data-id="'sourceFile'+item.id">
                      <source :src="'https://hjapi.aihujing.com/ims/file/down?file_path='+item.image_osskey" type="audio/mp3">
                    </audio>
                  </div>
                  <!-- 分享名片 -->
                  <div class="share-business-card" v-if="item.image_type == 42">
                    <div class="share-business-card-image">
                      <div class="share-business-card-image-avtive">
                        <img :src="item.sentence.small_headimg" alt="">
                      </div>
                      <div class="share-business-card-name">{{ item.sentence.nickname }}</div>
                    </div>
                    <div class="card">
                      个人名片
                    </div>
                  </div>
                  <!-- 发送视频 -->
                  <div class="video-news" style="width: 65%;" v-if="item.image_type == 42"> <!--  v-if="item.image_type == 42" -->
                    <video class="my-video" @play="videoClick('sourceFile'+item.id)" :data-id="'sourceFile'+item.id" :src="item.sentence.video_url" :poster="item.sentence.img_url" style="width: 100%;outline: none" controls="controls"></video>
                  </div>
                  <!-- 聊天动态图 -->
                  <div class="chat-record-content" style="width: 20%" v-if="item.image_type == 47">
                    <img width="100%" :src="item.sentence" alt="">
                  </div>
                  <!-- 分享内容 -->
                  <div class="share-kuang" v-if="item.image_type === 49">
                    <div class="title">
                      {{ item.sentence.des }}
                    </div>
                    <div class="share-kuang-content">
                      <div class="kuang-content">
                        {{ item.sentence.title }}
                      </div>
                      <div class="kuang-image">
                        <img :src="item.sentence.img_url" width="100%" height="100%" alt="">
                      </div>
                    </div>
                  </div>
                  <!-- 红包 -->
                  <div class="red-envelopes" v-if="item.image_type == 436207665 || item.image_type == 419430449">
                    <div class="red-envelopes-content">
                      <div class="red-envelopes-content-image">
                        <img v-if="item.image_type == 436207665" src="https://wx.gtimg.com/hongbao/1800/hb.png" alt="">
                        <img v-if="item.image_type == 419430449" src="../../assets/gou.png" alt="">
                      </div>
                      <div class="red-envelopes-content-gongxi">
                        {{ item.sentence.des }}
                      </div>
                    </div>
                    <div class="title">{{ item.sentence.title }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="ri" v-show="item.author == 'right'">
              <div class="ri-content">
                <div class="le-content-image">
                  <img :src="item.headimg" alt="">
                </div>
                <div class="le-content-box">
                  <div class="le-content-box-title">{{ item.gmt_create }} {{ item.nick }}</div>
                  <!-- 聊天内容 -->
                  <div class="chat-record-content" v-if="item.image_type == 1000">{{ item.sentence }}</div>
                  <!-- 聊天图片 -->
                  <div class="chat-record-content-image" v-if="item.image_type == 3">
                    <img :src="'https://hjapi.aihujing.com/ims/file/down?file_path='+item.image_osskey" alt="">
                  </div>
                  <!-- 聊天语音 -->
                  <div class="chat-record-content-audio" v-if="item.image_type == 34">
                    <audio controls="controls" width="260px" height="40px" class="le-content-audio" @play="audioClick('sourceFile'+item.id)" :id="'sourceFile'+item.id" :data-id="'sourceFile'+item.id">
                      <source :src="'https://hjapi.aihujing.com/ims/file/down?file_path='+item.image_osskey" type="audio/mp3">
                    </audio>
                  </div>
                  <!-- 分享名片 -->
                  <div class="share-business-card" v-if="item.image_type == 42">
                    <div class="share-business-card-image">
                      <div class="share-business-card-image-avtive">
                        <img :src="item.sentence.small_headimg" alt="">
                      </div>
                      <div class="share-business-card-name">{{ item.sentence.nickname }}</div>
                    </div>
                    <div class="card">
                      个人名片
                    </div>
                  </div>
                  <!-- 发送视频 -->
                  <div class="video-news" style="width: 65%; float:right;" v-if="item.image_type == 43">
                    <video class="my-video" @play="videoClick('sourceFile'+item.id)" :data-id="'sourceFile'+item.id" :src="item.sentence.video_url" :poster="item.sentence.img_url" style="width: 100%;outline: none" controls="controls"></video>
                  </div>
                  <!-- 聊天动态图 -->
                  <div class="chat-record-content" style="width: 20%" v-if="item.image_type == 47">
                    <img width="100%" :src="item.sentence" alt="">
                  </div>
                  <!-- 分享内容 -->
                  <div class="share-kuang" v-if="item.image_type === 49">
                    <div class="title">
                      {{ item.sentence.des }}
                    </div>
                    <div class="share-kuang-content">
                      <div class="kuang-content">
                        {{ item.sentence.title }}
                      </div>
                      <div class="kuang-image">
                        <img :src="item.sentence.img_url" width="100%" height="100%" alt="">
                      </div>
                    </div>
                  </div>
                  <!-- 红包 -->
                  <div class="red-envelopes" v-if="item.image_type == 436207665 || item.image_type == 419430449">
                    <div class="red-envelopes-content">
                      <div class="red-envelopes-content-image">
                        <img v-if="item.image_type == 436207665" src="https://wx.gtimg.com/hongbao/1800/hb.png" alt="">
                        <img v-if="item.image_type == 419430449" src="../../assets/gou.png" alt="">
                      </div>
                      <div class="red-envelopes-content-gongxi">
                        {{ item.sentence.des }}
                      </div>
                    </div>
                    <div class="title">{{ item.sentence.title }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else style="display: flex;align-items: center;justify-content: center;color: #999999;height: 100%;">
          暂无数据
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {getChatrecordApi} from '@api';
  import Util from '@util/Za'

  export default {
    name: "ChatRecord",
    props: {
      friendId: {
        type: Number,
        default: 0,
        required: true
      },
      startAt: {
        type: String,
        default: '',
        required: false // 与 chatStartAt chatEndAt 两个字段互斥
      },
      chatStartAt: {
        type: String,
        default: '',
        required: false
      },
      chatEndAt: {
        type: String,
        default: '',
        required: false
      },
    },
    data() {
      return {
        show: false,
        loading: true,
        list: []
      }
    },
    watch: {
      'show'(value) {
        if (value) {
          this.getData();
        }
      }
    },
    methods: {
      dialogToggle() {
        this.show = !this.show;
      },
      getData() {
        this.loading = true;
        var json = {};
        if (this.startAt) {
          json = {start_at: this.startAt}
        } else if (this.chatStartAt && this.chatEndAt) {
          json = {
            chat_start_at: this.chatStartAt,
            chat_end_at: this.chatEndAt,
          }
        }
        getChatrecordApi(this.friendId, json).then(res => {
          if (res.length > 0) {
            res.map(item => {
              if (!Util.isJSON(item.sentence) && String(item.image_type).toUpperCase() === 'NULL') {
                item.image_type = 1000
              }
            })
            this.list = res
          } else {
            // this.$message.error('没有聊天记录');
            this.list = []
          }
          this.loading = false;
        })
      }
    }
  }
</script>

<style lang="less">
  .chat-record {
    width: 100%;
    overflow: hidden;
    .le {
      text-align: left;
      /* 右边的样式 */

      .le-content {
        width: 100%;
        padding-top: 40px;
        .le-content-image {
          width: 30px;
          height: 30px;
          float: left;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .chat-record-content-image {
          width: 40%;
          float: left;
          img {
            width: 100%;
          }
        }

        .share-business-card {
          width: 30%;
          height: 100px;
          background: #EDEDED;
          float: left;
          padding: 0 10px;
          box-sizing: border-box;
          .share-business-card-image {
            width: 100%;
            height: 70px;
            padding-top: 15px;
            box-sizing: border-box;
            border-bottom: 1px solid #B8B8B8;
            .share-business-card-image-avtive {
              width: 40px;
              height: 40px;
              background: green;
              display: inline-block;
              vertical-align: middle;
            }
            .share-business-card-name {
              padding-left: 5px;
              display: inline-block;
              vertical-align: middle;
              font-size: 14px;
              font-weight: 600;
            }
          }
          .card {
            font-size: 13px;
            color: #A1A1A1;
            line-height: 30px;
          }
        }

        .red-envelopes {
          width: 200px;
          height: 75px;
          border-radius: 5px;
          float: left;
          box-sizing: border-box;
          background: #F7F7F7;
          .title {
            font-size: 10px;
            color: #999;
            line-height: 20px;
            padding-left: 10px;
            text-align: left;
          }
          .red-envelopes-content {
            width: 100%;
            height: 55px;
            background: #ff9f4b;
            padding: 0 10px;
            box-sizing: border-box;
            padding-top: 8px;
            border-radius: 5px 5px 0 0;
            .red-envelopes-content-image {
              width: 40px;
              height: 40px;
              display: inline-block;
              vertical-align: middle;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .red-envelopes-content-gongxi {
              width: calc(100% - 45px);
              display: inline-block;
              font-size: 13px;
              vertical-align: middle;
              color: #ffffff;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;

            }
          }
        }

        .le-content-box {
          float: left;
          width: calc(100% - 40px);
          padding-left: 10px;

          .le-content-box-title {
            font-size: 12px;
            color: #999;
            padding-bottom: 20px;
          }
          .chat-record-content {
            width: 75%;
            float: left;
            padding-top: 3px;
          }
          .share-kuang {
            width: 45%;
            height: 120px;
            background: #EDEDED;
            float: left;
            padding: 10px;
            box-sizing: border-box;
            border-radius: 5px;
            .title {
              width: 100%;
              font-size: 13px;
              color: #000;
            }
            .share-kuang-content {
              width: 100%;
              overflow: hidden;
              .kuang-content {
                float: left;
                width: calc(100% - 40px);
                font-size: 10px;
                color: #8B8682;
              }
              .kuang-image {
                float: left;
                width: 40px;
                height: 40px;
                background: red;
              }
            }
          }
        }
      }
    }

    .ri {
      text-align: right;
      .ri-content {
        width: 100%;
        padding-top: 40px;
        .le-content-image {
          width: 30px;
          height: 30px;
          float: right;
          img {
            width: 100%;
            height: 100%;
          }
        }

        .chat-record-content-image {
          width: 40%;
          float: right;
          img {
            width: 100%;
          }
        }

        .share-business-card {
          width: 30%;
          height: 100px;
          background: #EDEDED;
          float: left;
          padding: 0 10px;
          box-sizing: border-box;
          .share-business-card-image {
            width: 100%;
            height: 70px;
            padding-top: 15px;
            box-sizing: border-box;
            border-bottom: 1px solid #B8B8B8;
            .share-business-card-image-avtive {
              width: 40px;
              height: 40px;
              background: green;
              display: inline-block;
              vertical-align: middle;
            }
            .share-business-card-name {
              padding-left: 5px;
              display: inline-block;
              vertical-align: middle;
              font-size: 14px;
              font-weight: 600;
            }
          }
          .card {
            font-size: 13px;
            color: #A1A1A1;
            line-height: 30px;
          }
        }

        .red-envelopes {
          width: 200px;
          height: 75px;
          border-radius: 5px;
          float: right;
          box-sizing: border-box;
          background: #F7F7F7;
          .title {
            font-size: 10px;
            color: #999;
            line-height: 20px;
            padding-left: 10px;
            text-align: left;
          }
          .red-envelopes-content {
            width: 100%;
            height: 55px;
            background: #ff9f4b;
            padding: 0 10px;
            box-sizing: border-box;
            padding-top: 8px;
            border-radius: 5px 5px 0 0;
            .red-envelopes-content-image {
              width: 40px;
              height: 40px;
              display: inline-block;
              vertical-align: middle;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .red-envelopes-content-gongxi {
              width: calc(100% - 45px);
              display: inline-block;
              font-size: 13px;
              vertical-align: middle;
              color: #ffffff;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;

            }
          }
        }

        .le-content-box {
          float: right;
          width: calc(100% - 40px);
          padding-right: 10px;
          .le-content-box-title {
            font-size: 12px;
            color: #999;
            padding-bottom: 20px;
          }
          .chat-record-content {
            width: 75%;
            float: right;
            padding-top: 3px;
          }
          .share-kuang {
            width: 45%;
            height: 120px;
            background: #EDEDED;
            float: right;
            padding: 10px;
            box-sizing: border-box;
            text-align: left;
            border-radius: 5px;
            .title {
              width: 100%;
              font-size: 13px;
              color: #000;
            }
            .share-kuang-content {
              width: 100%;
              overflow: hidden;
              .kuang-content {
                float: left;
                width: calc(100% - 40px);
                font-size: 10px;
                color: #8B8682;
              }
              .kuang-image {
                float: left;
                width: 40px;
                height: 40px;
              }
            }
          }
        }
      }
    }
  }
</style>
