<template>
  <div>
    <van-action-sheet
      v-model:show="show"
      title="互动区"
      :overlay="false"
      :round="false"
      :lock-scroll="false"
      :lazy-render="false"
    >
      <div class="msg-content">
        <ChatFrame
          :informMsgList="detail.interactType === 2 ? store.state.interactMsgObj.userInteractMsgList : store.state.interactMsgObj.tgInteractMsgList"
          :detail="detail"
          :isTg="detail.interactType === 1"
          @optShare="optShare"
          ref="ChatFrameRef"
        />
      </div>
      <div class="input-area">
        <input
          type="text"
          maxlength="200"
          :placeholder="
            detail.playType === 2 ||
            detail.liveStatus === $liveStatusObj.FinishPlay
              ? '直播结束，暂不支持互动哟~'
              : isSpeak
              ? '互动已关闭...'
              : '与老师互动...'
          "
          v-model.trim="text"
          @focus="inputMsg"
          :disabled="
            detail.playType === 2 ||
            isSpeak ||
            [$liveStatusObj.FinishPlay].includes(detail.liveStatus)
          "
          @keyup.enter="sendMsg(1, { text })"
        />
        <button
          class="send"
          :disabled="!text || sendTextLoading"
          @click="sendMsg(1, { text })"
        >
          发送
        </button>
      </div>
    </van-action-sheet>
  </div>
</template>

<script setup>
import { ref, defineProps, watch, defineExpose, nextTick, defineEmits } from "vue";
import { showToast } from "vant";
import emitter from "@/utils/emitter";
import useGetLiveStatusObj from "@/hooks/useGetLiveStatusObj";
import ChatFrame from "./ChatFrame.vue";
import { useStore } from "vuex";
const $liveStatusObj = useGetLiveStatusObj();

const store = useStore();
const props = defineProps({
  detail: {
    // 视频详情
    type: Object,
    default: () => ({}),
  },
  isSpeak: {
    // 是否关闭互动
    type: Boolean,
    default: false,
  },
  optShare:{
    type: Function,
    default: ()=>{}
  }
});

const show = ref(false);

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

const ChatFrameRef = ref();

const emit = defineEmits(['bsRefresh'])
watch(
  () => show.value,
  (val) => {
    nextTick(() => {
      if (val) {
        if (ChatFrameRef.value && ChatFrameRef.value.bs){
          ChatFrameRef.value.bs.refresh();
          ChatFrameRef.value.bs.scrollTo(0, ChatFrameRef.value.bs.maxScrollY, 0);
        }
      } else {
        emit('bsRefresh')
      }
    });
  }
);

function inputMsg() {
  let bs = ChatFrameRef.value.bs;
  bs && bs.stop();
  bs && bs.scrollTo(0, bs.maxScrollY, 0);
}

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

defineExpose({
  show,
});
</script>
<style scoped lang="scss">
::v-deep .van-popup {
  top: 422px;
  .van-action-sheet__header {
    background: #f5f6fa;
  }
  .van-action-sheet__content {
    height: calc(100% - 96px);
  }
}
.msg-content {
  position: relative;
  background: #f5f6fa;
  height: calc(100% - 144px);
  padding: 0 20px 10px;
}
.input-area {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 20px 20px;
  input {
    height: 64px;
    background: #9aa4b61a;
    border-radius: 32px;
    font-weight: 500;
    font-size: 24px;
    letter-spacing: 0;
    line-height: 24px;
    padding: 0 16px;
    flex: 1;
    color: #666;
    margin: 0 20px;
  }

  input::placeholder,
  input::-webkit-input-placeholder {
    color: #666; /* 设置颜色为灰色 */
  }
  button.send {
    height: 64px;
    padding: 0 20px;
    font-size: 28px;
    border-radius: 32px;
    color: #fff;
    background-image: linear-gradient(270deg, #2e78fa 0%, #45acff 100%);
    &[disabled] {
      opacity: 0.3;
    }
  }
  .share {
    width: 64px;
    height: 64px;
    margin-left: 20px;
    background: url(../../../assets/images/share1.png) no-repeat center;
    background-size: contain;
    border-radius: 50%;
  }
  .star {
    width: 64px;
    height: 64px;
    position: relative;
    background: url(../../../assets/images/h-like.png) no-repeat center;
    background-size: 52px 52px;
    margin-left: 20px;
    &.active {
      background: url(../../../assets/images/h-like1.png) no-repeat center;
      background-size: 52px 52px;
    }
    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;
    }
  }
}
</style>
