<template>
  <div :class="inPage ? 'page active' : 'page'">
    <div id="top"></div>
    <top />
    <video
      @play="videoPlayBtn = false"
      class="videoBox"
      id="video"
      v-if="loading"
      :src="videoUrl"
      ref="video"
      autoplay
      muted="muted"
      loop="loop"
      playsinline
      :style="'width:100%;height:' + screenHeight + 'px;'"
    ></video>

    <div class="controlBox" :style="'width:' + screenWidth + 'px;'">
      <div :class="isExpend ? 'chatBox' : 'chatBox expand'">
        <div class="item top">聊天记录</div>
        <div class="item left">我：{{ 123456 }}</div>
        <div class="item right">{{ 123456 }}：你</div>
        <div class="item left">我：{{ 123456 }}</div>
        <div class="item right">{{ 123456 }}：你</div>
        <div class="item left">我：{{ 123456 }}</div>
        <div class="item right">{{ 123456 }}：你</div>
        <div class="item left">我：{{ 123456 }}</div>
        <div class="item right">{{ 123456 }}：你</div>
        <div class="item left">我：{{ 123456 }}</div>
        <div class="item right">{{ 123456 }}：你</div>
        <div class="item left">我：{{ 123456 }}</div>
        <div class="item right">{{ 123456 }}：你</div>
        <div class="item center">已经到底啦</div>
      </div>

      <div class="itemBox left" @click="sendMessage">
        <img src="../../assets/icon/enter.png" alt="" />
      </div>

      <input
        v-model="inputText"
        class="inputInside"
        type="text"
        placeholder="输入文字聊天"
      />

      <img
        :class="isExpend ? 'arrow' : 'arrow active'"
        src="../../assets/icon/arrow-down-bold.png"
        @click="expendChatBox"
      />

      <div class="itemBox right" @click="setVoice">
        <img v-if="!isVoiceClose" src="../../assets/icon/voice.png" alt="" />
        <img
          v-if="isVoiceClose"
          src="../../assets/icon/voice_close.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
// 组件
import Vue from "vue";
import { Toast } from "vant";
import { mapState, mapActions } from "vuex";
import top from "../../components/common/top";
// 工具
import { scrollToID } from "../../utils";
// import io from "socket.io";

Vue.use(Toast);
export default {
  components: {
    top,
  },
  data() {
    return {
      inPage: false,
      videoUrl: "",
      videoPlayBtn: true,
      loading: false, // 加载状态
      isVoiceClose: false,
      isExpend: true,
      inputText: "",
      screenWidth: document.documentElement.clientWidth,
      screenHeight: document.documentElement.clientHeight,
    };
  },
  computed: {
    ...mapState({
      characters: (state) => state.publicObj.characters,
    }),
  },

  methods: {
    ...mapActions(["setCharacters"]),

    go(url) {
      this.$router.push(url);
    },

    setVoice() {
      this.isVoiceClose = !this.isVoiceClose;
      Toast.success(this.isVoiceClose ? "麦克风已关闭" : "麦克风已开启");
    },

    sendMessage() {},

    expendChatBox() {
      this.isExpend = !this.isExpend;
    },
  },
  created() {},
  mounted() {
    this.inPage = true;
    scrollToID("top");
    this.videoUrl =
      "https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4";
    this.loading = true;
  },
};
</script>

<style lang="scss" scoped>
.page {
  position: relative;
  transform: translateX(30%);
  opacity: 0;
  transition: all 0.5s; // global-transition
  &.active {
    opacity: 1;
    transform: translateX(0);
  }
  .videoBox {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    object-fit: fill;
  }
  .controlBox {
    position: absolute;
    bottom: -670px;
    height: 300px;
    .chatBox {
      position: relative;
      width: 100%;
      height: 160px;
      color: #ffffff;
      padding: 15px 30px 15px 30px;
      overflow: scroll;
      background-color: #00000054;
      opacity: 1;
      transition: all 0.3s;
      .item {
        margin-bottom: 8px;

        &.top {
          position: sticky;
          top: 0px;
          text-align: center;
        }
        &.left {
          text-align: left;
        }
        &.right {
          text-align: right;
        }
        &.center {
          text-align: center;
        }
      }

      &.expand {
        transform: translateY(100px);
        opacity: 0;
        z-index: -1;
      }
    }
    .itemBox {
      position: absolute;
      bottom: 50px;
      width: 60px;
      height: 60px;
      border: 3.5px solid #ffffff;
      border-radius: 50%;
      text-align: center;
      padding: 10px;
      transition: all 0.3s;
      cursor: pointer;
      &.left {
        left: 295px;
      }
      &.right {
        right: 295px;
      }
      img {
        width: 100%;
        height: 100%;
      }
      &.active {
        opacity: 0.8;
      }
    }

    .arrow {
      position: absolute;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
      width: 30px;
      height: 30px;
      transition: all 0.2s;

      &.active {
        transform: translateX(-50%) rotate(180deg);
      }
    }

    .inputInside {
      position: absolute;
      bottom: 60px;
      left: 50%;
      transform: translateX(-50%);
      width: 170px;
      height: 35px;
      border: 3.5px solid #ffffff;
      border-radius: 7px;
      padding-left: 10px;
      color: #ffffff;
      caret-color: #ffffff;
      &::-webkit-input-placeholder {
        color: #ffffffbb;
      }
    }
  }
}
</style>
