<template>
  <section class="chat">
    <el-row align="middle">
      <div class="modelInfo">
        <img :src="config.model.avatar" alt=""/>
        <div class="fill mar-l8">
          <b v-text="config.model.name"/>
          <div class="desc" v-text="config.model.desc"/>
        </div>
      </div>
      <el-row justify="end" class="fill mar-l8 gap-8">
        <!--聊天操作栏-->
        <div class="optIcon clear"/>
        <div class="optIcon setting" @click="$emit('setting')"/>
      </el-row>
    </el-row>
    <thinking-bar v-show="loading"/>
    <chat-content class="fill"/>
    <chat-input/>
  </section>
</template>

<script>
import ChatContent from "../components/chatContent";
import ChatInput from "../components/chatInput";
import ThinkingBar from "../components/thinkingBar";

export default {
  name: "chat",
  components: {ChatContent, ChatInput, ThinkingBar},
  props: {
    config: {default: () => ({})}
  },
  data() {
    return {
      loading: true
    }
  },
  methods: {
    handleResize() {
      if (window.innerWidth <= 700) {
        this.$nextTick(() => {
          document.querySelectorAll('.chat-content')[0].style.height = '93%';
          this.buttonStatus = false
          const textareaMsg = document.getElementById("textareaMsg");
          textareaMsg.style.marginLeft = "0px";
          this.personInfoSpan = [14, 0, 10];
          const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
          if (isMobile) {
            document.querySelectorAll('.chatInputs')[0].style.margin = '0%';
          } else {
            document.querySelectorAll('.chatInputs')[0].style.margin = '3%';
          }
        });
      } else {
        this.$nextTick(() => {
          document.querySelectorAll('.chat-content')[0].style.height = '88%';
          this.buttonStatus = true
          this.personInfoSpan = [1, 17, 6];
        });
      }
    },
  },
  created() {
    window.addEventListener('resize', this.handleResize)
  },
  unmounted() {
    window.removeEventListener('resize', this.handleResize)
  }
}
</script>

<style lang="scss" scoped>
.chat {
  color: #fff;
  display: flex;
  flex-direction: column;

  .modelInfo {
    display: flex;
    align-items: center;
    line-height: 1.4;

    & > img {
      border: 2px solid #fff;
      border-radius: 50%;
      padding: 4px;
      width: 45px;
      height: 45px;
    }

    b {
      font-size: 20px;
    }

    .desc {
      color: #999;
      font-size: 14px;
    }
  }

  .optIcon {
    box-sizing: border-box;
    height: 40px;
    min-width: 40px;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: top center;
    cursor: pointer;
    opacity: .6;
    padding-top: 24px;

    &:after {
      font-size: 12px;
      display: block;
      text-align: center;
    }

    &:hover {
      opacity: 1;
    }

    &.clear {
      background-image: url("../assets/clear.svg");

      &:after {
        content: "清空历史";
      }
    }

    &.setting {
      background-image: url("../assets/setting.svg");

      &:after {
        content: "设置";
      }
    }
  }
}
</style>
