<template>
  <div class="opt-wrap">
    <div class="msg-content">
      <ChatFrame
        className="hp"
        @sendMsg="sendMsg"
        :informMsgList="informMsgList"
        :detail="detail"
      />
      <div class="recommend-img" v-show="showRecommend" @click="toActivityPage">
        <img :src="activityObj.imgUrl" alt="" srcset="" />
        <i @click.stop="closeActivity"></i>
      </div>
    </div>

    <div class="input-area">
      <input
        type="text"
        maxlength="200"
        :placeholder="
          detail.liveStatus === $liveStatusObj.FinishPlay
            ? '直播结束，暂不支持互动哟~'
            : isSpeak
            ? '互动已关闭...'
            : '与老师互动...'
        "
        v-model.trim="text"
        @focus="inputMsg"
        :disabled="
          isSpeak || [$liveStatusObj.FinishPlay].includes(detail.liveStatus)
        "
        @keyup.enter="sendMsg(1, { text })"
      />
      <button
        class="send"
        :disabled="!text || sendTextLoading"
        @click="sendMsg(1, { text })"
      >
        发送
      </button>
      <button class="share" @click="sendMsg(5)"></button>
      <button
        class="clear"
        v-if="detail.liveStatus === $liveStatusObj.InLive"
        @click.stop="clearScreenFn"
      ></button>
      <button class="shop" @click.stop="openProductList"></button>
      <button
        v-if="detail.liveStatus !== $liveStatusObj.NotStart"
        :class="['star', detail.isFavor === 1 ? 'active' : '']"
        @click.stop="sendMsg(4)"
      >
        <span v-if="detail.favorUserCount">{{
          bigNumberTransform(detail.favorUserCount)
        }}</span>
      </button>
    </div>
  </div>
  <Share ref="shareRef" :detail="detail" />
  <ProductList ref="productListRef" :tgId="detail.advisorBasic?.id" />
</template>

<script setup>
import { ref, defineProps, watch, defineEmits } from "vue";
import { useStore } from "vuex";
import { showToast } from "vant";
import BScroll from "@better-scroll/core";
import PullDown from "@better-scroll/pull-down";
import Share from "@/components/Share.vue";
import ProductList from "./ProductList.vue";

import { likeVideo } from "@/api/video";
import emitter from "@/utils/emitter";
import useGetLiveStatusObj from "@/hooks/useGetLiveStatusObj";
import ChatFrame from "./ChatFrame.vue";
import { userLogin } from "@/utils/login";
const $liveStatusObj = useGetLiveStatusObj();

BScroll.use(PullDown);
const store = useStore();
const props = defineProps({
  detail: {
    // 视频详情
    ype: Object,
    default: () => ({}),
  },
  activityObj: {
    // 活动内容
    type: Object,
    default: () => ({}),
  },
  informMsgList: {
    // 聊天互动信息
    type: Array,
    default: () => [],
  },
  isSpeak: {
    // 是否关闭互动
    type: Boolean,
    default: false,
  },
});

const showRecommend = ref(false); // 展示活动模块
watch(
  () => props.activityObj,
  () => {
    if (props.activityObj && Object.keys(props.activityObj).length) {
      showRecommend.value = true;
    }
  }
);

function toActivityPage() {
  location.href = props.activityObj.url;
}

const text = ref();
const shareRef = ref();
const sendTextLoading = ref(false);
const emit = defineEmits(["sendMsg", "clearScreenFn", "closeActivity"]);
const sendMsg = (type, params = {}) => {
  if (![1, 4].includes(type)) {
    // 不是聊天互动
    emit("sendMsg", type, params);
  }
  switch (type) {
    case 1:
      if (text.value) {
        sendTextLoading.value = true;
        emit("sendMsg", type, {
          ...params,
          callBack: () => {
            sendTextLoading.value = false;
            text.value = "";
          },
          errorBack: () => {
            sendTextLoading.value = false;
          },
        });
      } else {
        showToast("请输入互动内容！");
      }

      break;
    case 4:
      dblclickLive();
      break;
    case 5:
      shareRef.value.showPopup = true;
      break;
    default:
      break;
  }
};

function inputMsg() {
  if (!store.state.token) {
    userLogin();
  }
}

const productListRef = ref();
const openProductList = () => {
  // 购物车列表弹窗
  productListRef.value.showPopup = true;
};

// 清屏
const clearScreenFn = () => {
  emit("clearScreenFn");
};

// 关闭活动弹窗
const closeActivity = () => {
  showRecommend.value = false;
  emit("closeActivity");
};

let liveIndex = 0;
const liveIcon = [
  require("@/assets/images/liveIcon/icon1.png"),
  require("@/assets/images/liveIcon/icon2.png"),
  require("@/assets/images/liveIcon/icon3.png"),
  require("@/assets/images/liveIcon/icon4.png"),
];

const sendLikeVideo = async (liveNum) => {
  const ret = await likeVideo({
    id: props.detail.id,
    option: 1,
    num: liveNum,
  });
  if (ret.code === 0) {
    emitter.emit("updateVideoDetail", {
      isFavor: 1,
      favorUserCount: ret.data.count,
    });
  }
};
let sendLiveTime = null;

const dblclickLive = () => {
  const img = document.createElement("img");
  img.setAttribute("src", liveIcon[liveIndex % 4]);
  img.setAttribute("class", "live-icon");
  document.querySelector(".star").appendChild(img);
  liveIndex++;
  ((img) => {
    setTimeout(() => {
      let star = document.querySelector(".star");
      star && star.removeChild(img);
    }, 2000);
  })(img);
  clearTimeout(sendLiveTime);
  sendLiveTime = setTimeout(() => {
    sendLikeVideo(liveIndex);
    liveIndex = 0;
  }, 1000);
};

function bigNumberTransform(value) {
  let param = {};
  let k = 10000,
    sizes = ["", "万", "亿", "万亿"],
    i;
  if (value < k) {
    param.value = value;
    param.unit = "";
  } else {
    i = Math.floor(Math.log(value) / Math.log(k));
    param.value = value / Math.pow(k, i);
    param.unit = `${sizes[i]}+`;
  }
  let number = param.value + param.unit;
  return number;
}
</script>
<style scoped lang="scss">
.opt-wrap {
  position: absolute;
  bottom: 40px;
  padding: 20px 20px;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
}
.input-area {
  display: flex;
  align-items: center;
  input {
    height: 64px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 32px;
    font-weight: 500;
    font-size: 24px;
    letter-spacing: 0;
    line-height: 24px;
    padding: 0 16px;
    flex: 1;
    color: #cccccc;
  }

  input::placeholder {
    color: #cccccc; /* 设置颜色为灰色 */
  }
  button {
    width: 64px;
    height: 64px;
    margin-left: 20px;
  }
  button.send {
    width: auto;
    height: 64px;
    padding: 0 20px;
    font-size: 28px;
    border-radius: 32px;
    color: #fff;
    background-image: linear-gradient(270deg, #2e78fa 0%, #45acff 100%);
    white-space: nowrap;
    &[disabled] {
      opacity: 0.6;
    }
  }
  .star {
    position: relative;
    background: url(../../../assets/images/like-icon1.png) no-repeat center;
    background-size: cover;
    &.active {
      background: url(../../../assets/images/like-icon2.png) no-repeat center;
      background-size: cover;
    }
    span {
      position: absolute;
      top: 0;
      right: 0;
      min-width: 20px;
      transform: translateX(18px) translateY(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px;
      flex-direction: column;
      border-radius: 13px 13px 13px 4px;
      background: linear-gradient(
        128deg,
        #fff2dc -25.5%,
        #ffd9a7 89.14%,
        #605a52 89.14%
      );
      color: rgb(142, 81, 5);
      font-size: 18px;
      font-style: normal;
      font-weight: 500;
    }
  }
  .clear {
    background: url(../../../assets/images/clear.png) no-repeat center;
    background-size: cover;
  }
  .share {
    background: url(../../../assets/images/share.png) no-repeat center;
    background-size: cover;
  }
  .shop {
    background: url(../../../assets/images/shop.png) no-repeat center;
    background-size: cover;
  }
}
.interact-scroll {
  position: relative;
  max-height: 360px;
  overflow: hidden;
  text-align: left;
  width: calc(100% - 238px);
  margin-right: 20px;
  li > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0;
    text-align: left;
    color: #fff;
    margin-bottom: 12px;
    label {
      color: rgba(154, 191, 255, 1);
    }
    &.product-item {
      flex-direction: column;
      align-items: flex-start;
    }
  }
  p,
  .reply-content {
    line-height: 28px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 16px;
    word-break: break-all;
  }
  .reply {
    line-height: 40px;
    margin-right: 10px;
  }
  button {
    height: 44px;
    line-height: 44px;
    border: none;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.3);
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 20px auto;
    padding-left: 32px;
    font-size: 24px;
    padding: 0 20px 0 30px;
    &.share {
      color: #ff3d36;
      background-image: url(../../../assets/images/share-icon2.png);
    }
    &.attention {
      color: #ff7d26;
      background-image: url(../../../assets/images/attention.png);
    }
  }
}
.msg-content {
  display: flex;
  align-items: flex-end;
  margin-bottom: 20px;
  .recommend-img {
    position: relative;
    width: 208px;
    height: 280px;
    margin-right: 10px;
    img {
      width: 100%;
      height: 100%;
    }
    i {
      position: absolute;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      top: 0;
      right: 0;
      transform: translateX(50%) translateY(-50%);
      background: url(../../../assets/images/close-icon.png) no-repeat center;
      background-size: 100%;
    }
  }
}
.top-tip {
  color: #fff;
  font-size: 24px;
  text-align: center;
  line-height: 28px;
  border-radius: 20px;
  // background: rgba(0, 0, 0, 0.3);
  padding: 8px 8px;
  animation-delay: 2s;
}

::v-deep .live-icon {
  position: absolute;
  left: 50%;
  top: 0;
  width: 60px;
  height: auto;
  z-index: 2;
  transform: translateX(-50%) translateY(-75%);
  animation: mymove 2.5s;
  -webkit-animation: mymove 2.5s; /*Safari and Chrome*/
}

@keyframes mymove {
  from {
    top: 0;
    opacity: 1;
  }
  to {
    top: -200px;
    opacity: 0;
  }
}

@-webkit-keyframes mymove /*Safari and Chrome*/ {
  from {
    top: 0;
    opacity: 1;
  }
  to {
    top: -200px;
    opacity: 0;
  }
}

.question {
  width: 100%;
  background: #fff;
  border-radius: 8px;
  color: #000;
  padding: 16px;
  h5 {
    font-size: 30px;
    margin-bottom: 20px;
  }
  span {
    color: #ff3d36;
    font-size: 28px;
  }
}
::v-deep .item-wrap {
  margin-bottom: 0;
}

.pulldown-wrapper {
  position: absolute;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  transform: translateY(-100%) translateZ(0);
  text-align: center;
  color: #999;
  font-size: 24px;
}
</style>
