<template>
  <div id="app">
    <el-row class="home">
      <chat class="fill" :config="setting" @setting="showSettings=!showSettings"/>
      <settings class="mar-l16" v-show="showSettings" v-model="setting"/>
    </el-row>
  </div>
</template>

<script>
import Chat from "./components/chat";
import Settings from "./components/settings";
import {ChatGLM} from "./utils/models";

export default {
  name: 'App',
  components: {Settings, Chat},
  data() {
    return {
      showSettings: false,
      setting: {
        model: new ChatGLM(),
        stream: true
      },
    }
  },
  methods: {
    handleResize() {
      this.showSettings = window.innerWidth > 1150;
    }
  },
  created() {
    window.addEventListener('resize', this.handleResize)
    this.handleResize()
  },
  unmounted() {
    window.removeEventListener('resize', this.handleResize)
  }
}
</script>

<style lang="scss">
@each $v in (333, 666, 888, 999, '26f', 'f46') {
  .color-#{$v} {
    color: \##{$v};
  }
}

@each $v in (8, 10, 12, 14, 16, 20, 24, 32, 48, 56, 64, 80) {
  //gap
  .gap-#{$v} {
    gap: #{$v}px
  }
  .font-#{$v} {
    font-size: #{$v}px;
  }
  @each $padMar, $pm in (mar:margin, pad:padding) {
    .#{$padMar}-#{$v} {
      #{$pm}: #{$v}px
    }
    //纵向
    .#{$padMar}-v#{$v} {
      #{$pm}-top: #{$v}px;
      #{$pm}-bottom: #{$v}px;
    }
    //横向
    .#{$padMar}-h#{$v} {
      #{$pm}-left: #{$v}px;
      #{$pm}-right: #{$v}px;
    }
    @each $pos, $p in (l:left, r:right, t:top, b:bottom) {
      .#{$padMar}-#{$pos+$v} {
        #{$pm}-#{$p}: #{$v}px
      }
    }
  }
}

@each $where in (sticky, fixed) {
  @each $pos, $p in (l:left, r:right, t:top, b:bottom) {
    .#{$where}-#{$pos} {
      position: fixed;
      #{$p}: 0;
      z-index: 202301031019;
      width: 100%;
    }
  }
}

.w100 {
  width: 100%;
}

* {
  padding: 0;
  margin: 0;
}

#app {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  position: absolute;
}

.home {
  width: 100vw;
  height: 100vh;
  padding: 16px;
  background-color: #272A37;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.fill {
  flex: 1;
  min-height: 0;
  min-width: 0;
}

.flexWrap {
  flex-wrap: wrap;
}
</style>
