<template>
  <div id="scrollDIV" class="message_list_box" style="height: 100%">
    <div v-for="(item, index) in list" :key="index" id="message_item_box" class="message_item">
      <!-- 对方的消息 -->
      <div class="item_left" v-if="item.type == 1">
        <div class="df_avator">{{ item.name.substring(0, 1) }}</div>
        &nbsp;
        <div>
          <div style="margin-bottom: 2vw">
            <span>{{ item.time }}</span>&emsp;<span>{{ item.name }}</span>
          </div>
          <!-- 图片文件 -->
          <van-image width="100px" height="100px" fit="cover" :src="baseUrl + item.fjid"
            v-if="item.fjid && item.fileFormat == 'png'" @click="onClickImg(item.fjid)">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
          <!-- 文档文件 -->
          <div class="left_message" v-if="item.fileFormat == 'file'">
            <a style="text-decoration: underline" :href="baseUrl + item.fjid">{{
                          item.text
                          }}</a>
          </div>
          <!-- 消息 -->
          <div class="left_message" v-if="item.text && !item.fjid">
            {{ item.text }}
          </div>
          <!-- 语音消息  -->
          <div class="audio-detail-msg" v-if="item.fileFormat == 'mp3'">
            <div class="audio-style" style="margin-right: 8px"
              :class="{ 'add-animation': isPlay && audioId == item.fjid }" :style="{
                              width: handleAudioStyleWidth(item.yysc ? item.yysc : 1),
                            }" @click="playAudio(item.fjid, item.yysc ? item.yysc : 1)">
              <div class="small"></div>
              <div class="middle"></div>
              <div class="large"></div>
            </div>
            <div class="duration-seconds">{{ item.yysc ? item.yysc : 1 }}s</div>
            <audio :id="item.fjid" style="display: none"></audio>
          </div>
          <!-- 视频 -->
          <div class="videos_box" v-if="item.fileFormat == 'mp4'">
            <video :src="item.videoUrl" class="video_image"></video>
            <!-- <img :src="`${baseUrl}${item.sptpid}`" alt="" class="video_image" /> -->
            <!-- <div class="yysc left_video_time">{{ item.yysc }}s</div> -->
            <img class="play_box left_video_play" src="../../../../assets/images/play.png" alt=""
              @click="onClickVideo(item.videoUrl)" />
          </div>
        </div>
      </div>
      <!-- 自己的消息 -->
      <div class="item_right" v-if="item.type == 2">
        <!-- 图片文件 -->
        <div>
          <div style="margin-bottom: 2vw">{{ item.time }}</div>
          <van-image width="100px" height="100px" fit="cover" :src="baseUrl + item.fjid"
            v-if="item.fjid && item.fileFormat == 'png'" @click="onClickImg(item.fjid)">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
          <!-- 文档文件 -->
          <div class="right_message" v-if="item.fileFormat == 'file'">
            <a style="text-decoration: underline" @click="getPreviewText(item)">{{ item.text }}</a>
          </div>
          <!-- 消息 -->
          <div class="right_message" v-if="item.text && !item.fjid">
            {{ item.text }}
          </div>
          <!-- 语音消息  -->
          <div class="audio-detail-msg msgRight_box" v-if="item.fileFormat == 'mp3'">
            <div class="duration-seconds">{{ item.yysc ? item.yysc : 1 }}s</div>
            <div style="margin-left: 8px" class="audio-style msgRight"
              :class="{ 'add-animation': isPlay && audioId == item.fjid }" :style="{
                              width: handleAudioStyleWidth(item.yysc ? item.yysc : 1),
                            }" @click="playAudio(item.fjid, item.yysc ? item.yysc : 1)">
              <div class="small"></div>
              <div class="middle"></div>
              <div class="large"></div>
            </div>
            <audio :id="item.fjid" style="display: none"></audio>
          </div>
          <!-- 视频 -->
          <div class="videos_box" v-if="item.fileFormat == 'mp4'">
            <video :src="item.videoUrl" class="video_image"></video>
            <!-- <img :src="`${baseUrl}${item.sptpid}`" alt="" class="video_image" /> -->
            <!-- <div class="yysc right_video_time">{{ item.yysc }}s</div> -->
            <img class="play_box right_video_play" src="../../../../assets/images/play.png" alt=""
              @click="onClickVideo(item.videoUrl)" />
          </div>
        </div>
        &nbsp;
        <div class="df_avator">{{ item.name.substring(0, 1) }}</div>
      </div>
    </div>
    <Iframe :url="fillFrams" :isPreviw="isPreviw" @closePre="isPreviw = false"></Iframe>
  </div>
</template>
<script setup>
import emitter from "@/utils/eventBus";
import {
  ref,
  onMounted,
  defineProps,
  defineEmits,
  watch,
  onBeforeUnmount,
} from "vue";
import { baseUrl2 } from "../../../../utils/request.js";
import { ImagePreview } from "vant";
import { dataQc } from "../../../../utils/tools.js";
import { getFjInfo } from "../../../../api/rwzx.js";
import Iframe from "../../../../assets/html/filePreview.vue";
import axios from "axios";
const props = defineProps({
  list: {
    type: Boolean,
    default: [],
  }, //消息数据
  mesHeight: Number, //盒子高度
});
const baseUrl = `${baseUrl2}/mosty-api/mosty-base/minio/image/download/`;
const emits = defineEmits(["update:scroll", "click:video"]);
const isPlay = ref(false); //开始语音播放动画
const playAudioTimer = ref(null); //语音播放定时器
const audioId = ref(""); //被选中播放的音频ID
const divHeight = ref(0);
const timeValue = ref(null);
const fillFrams = ref(null);
const isPreviw = ref(false);
watch(
  () => props.list,
  (newVal) => {
    newVal.forEach((item) => {
      if (item.fileFormat == "mp3" || item.fileFormat == "mp4") {
        axios
          .get(
            `${baseUrl2}/mosty-api/mosty-base/minio/file/download/${item.fjid}`,
            {
              params: {},
            }
          )
          .then((res) => {
            if (res) {
              let url = res.data.data.url.replace(
                "http://80.93.7.13:9009",
                "/zyminio"
              );
              // let url = res.data.data.url;
              if (item.fileFormat == "mp3") {
                let au = document.getElementById(item.fjid);
                au.src = `${baseUrl2 + url}`;
              } else {
                item.videoUrl = `${baseUrl2 + url}`;
              }
            }
          });
      }
    });
  },
  { immediate: true, deep: true }
);
onMounted(() => {
  dataQc(props.list, "id");
  scrollDIV();
  timeValue.value = setInterval(() => {
    if (divHeight.value <= 50) scrollDIV();
  }, 1.5e3);
  scrollBotton();
});
onBeforeUnmount(() => {
  clearTimeout(playAudioTimer.value);
  playAudioTimer.value = null;
  clearTimeout(timeValue.value);
  timeValue.value = null;
});
//  获取预览文件
function getPreviewText(item) {
  getFjInfo(item.fjid).then((res) => {
    let url = res.url; //要预览文件的访问地址
    let Base64Url = Base64.encode(url);
    fillFrams.value =
      "http://10.64.201.126:8012/onlinePreview?url=" +
      encodeURIComponent(Base64Url);
    isPreviw.value = true;
  });
}
//点击视频
function onClickVideo(url) {
  emits("click:video", url);
}
//播放语音
function playAudio(id, yysc) {
  let au = document.getElementById(id);
  audioId.value = id;
  if (isPlay.value) {
    isPlay.value = false;
    au.pause();
    return;
  }
  isPlay.value = true;
  playAudioTimer.value = setTimeout(() => {
    isPlay.value = false;
  }, parseInt(yysc * 1000));
  au.play();
}
// 设置语音条宽度样式
function handleAudioStyleWidth(yycs) {
  if (yycs === 1) {
    return "38px";
  } else if (yycs > 1 && yycs < 20) {
    return `${38 + (yycs / 10) * 36}px`;
  } else if (yycs >= 20) {
    return `${106.39 + (yycs / 10) * 18.935}px`;
  }
}
//预览图片
function onClickImg(fjid) {
  let url = baseUrl + fjid;
  ImagePreview([url]);
}
//滚动到元素底部
function scrollDIV() {
  try {
    const div = document.getElementById("scrollDIV");
    div.scrollTop = div.scrollHeight;
  } catch (error) {}
}
//监听是否到达底部
function scrollBotton() {
  const div = document.getElementById("scrollDIV");
  div.addEventListener("scroll", () => {
    const clientHeight = div.clientHeight;
    const scrollTop = div.scrollTop;
    const scrollHeight = div.scrollHeight;
    const dist = scrollHeight - scrollTop - clientHeight;
    divHeight.value = dist;
    // emits("update:scroll", dist);
  });
}
</script>
<style lang="scss" scoped>
@import "../../../../assets/styles/mixin.scss";

.message_list_box {
  // padding: 2.5vw;
  @include font_color($font-color-theme);
  @include font_size($font_medium_s);
  overflow: auto;

  .message_item {

    .item_left,
    .item_right {
      display: flex;
      margin-bottom: 4vw;

      .left_message {
        background: #fff;
        box-shadow: -1px 1px 1px 1px rgba(0, 0, 0, 0.1);
      }
    }

    .item_left {
      justify-content: flex-start;
      text-align: left;
    }

    .item_right {
      text-align: right;
      justify-content: flex-end;

      .right_message {
        background: rgba(149, 236, 105, 0.5);
        box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
        text-align: left;
      }
    }
  }
}

.left_message,
.right_message {
  padding: 1.5vw;
  display: inline-block;
  border-radius: 3px;
  color: #333;
  word-break: break-all;
}

img {
  width: 25vw;
  height: 25vw;
}

.df_avator {
  @include font_size($font_medium_s);
  display: inline-block;
  height: 35px;
  min-width: 35px;
  border-radius: 50%;
  background-color: #0078e0;
  text-align: center;
  line-height: 35px;
  color: #fff;
  overflow: hidden;
  overflow-x: auto;
}

// 语音条
.audio-detail-msg {
  display: flex;
  align-items: center;

  .msgRight {
    transform: rotate(180deg);
  }

  .audio-style {
    display: flex;
    align-items: center;
    height: 32px;

    padding: 0 10px;
    border-radius: 4px;
    background: rgba(149, 236, 105, 0.5);

    .small {
      border: 4px solid #4c4c4c;
      border-top-color: transparent;
      border-left-color: transparent;
      border-bottom-color: transparent;
    }

    .middle {
      width: 16px;
      height: 16px;
      margin-left: -11px;
      opacity: 1;
    }

    .large {
      width: 24px;
      height: 24px;
      margin-left: -19px;
      opacity: 1;
    }

    &>div {
      border: 2px solid #4c4c4c;
      border-top-color: transparent;
      border-left-color: transparent;
      border-bottom-color: transparent;
      border-radius: 50%;
      box-sizing: border-box;
    }

    &.add-animation {
      .middle {
        animation: show2 1.2s ease-in-out infinite;
      }

      .large {
        animation: show3 1.2s ease-in-out infinite;
      }
    }
  }

  // 语音播放动画
  @keyframes show2 {
    0% {
      opacity: 0;
    }

    10% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  @keyframes show3 {
    0% {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    60% {
      opacity: 0;
    }

    100% {
      opacity: 0;
    }
  }

  // 语音录制动画
  @keyframes backgroundInfinite2 {
    0% {
      background: #666;
    }

    20% {
      background: #f5f5f5;
    }

    95% {
      background: #f5f5f5;
    }

    100% {
      background: #666;
    }
  }

  @keyframes backgroundInfinite3 {
    0% {
      background: #666;
    }

    30% {
      background: #f5f5f5;
    }

    85% {
      background: #f5f5f5;
    }

    100% {
      background: #666;
    }
  }

  @keyframes backgroundInfinite4 {
    0% {
      background: #666;
    }

    55% {
      background: #f5f5f5;
    }

    75% {
      background: #f5f5f5;
    }

    100% {
      background: #666;
    }
  }

  @keyframes backgroundInfinite5 {
    0% {
      background: #666;
    }

    45% {
      background: #666;
    }

    60% {
      background: #f5f5f5;
    }

    75% {
      background: #f5f5f5;
    }

    100% {
      background: #666;
    }
  }

  @keyframes backgroundInfinite6 {
    0% {
      background: #666;
    }

    65% {
      background: #666;
    }

    85% {
      background: #f5f5f5;
    }

    100% {
      background: #666;
    }
  }

  @keyframes backgroundInfinite7 {
    0% {
      background: #666;
    }

    75% {
      background: #666;
    }

    95% {
      background: #f5f5f5;
    }

    100% {
      background: #666;
    }
  }
}

.msgRight_box {
  justify-content: flex-end;
}

.videos_box {
  position: relative;

  .yysc {
    position: absolute;
    bottom: 1.5vw;
    color: #fff;
  }

  .play_box {
    position: absolute;
    width: 10vw;
    height: 10vw;
    top: 50%;
    margin-top: -5vw;
  }

  .right_video_time {
    right: 1vw;
  }

  .left_video_time {
    left: 1vw;
  }

  .right_video_play {
    right: 11vw;
    margin-right: -5vw;
  }

  .left_video_play {
    left: 11vw;
    margin-left: -5vw;
  }
}

.video_image {
  height: 40vw;
}
</style>