<template>
  <div class="example">
    <div v-show="isMobile === 'pc'">
      <div class="mobile-button">
        <MobileButton :isMobile="isMobile" @mobile="(e) => isMobile = e" />
      </div>
      <div class="theme-example">
        <div
          class="example-bg"
          :style="{
            backgroundImage: `url(${themeInfo.background_status ? themeInfo.background_url : ''})`,
            backgroundRepeat:  themeInfo.background_site === 2 ? 'no-repeat' : '',
            backgroundPosition: themeInfo.background_site === 2 ? '50% 0px' : '',
            backgroundSize: themeInfo.background_site === 2 ? '' : ''
          }"
          alt
        />
        <div class="theme-example-bg">
          <Header />
          <QRadio />
          <QMatrix />
          <QInput />
          <QButton />
        </div>
      </div>
    </div>
    <!-- 手机模拟器 -->
    <div v-show="isMobile === 'mobile'" class="theme-mobile">
      <div class="mobile-button">
        <MobileButton :isMobile="isMobile" @mobile="(e) => isMobile = e" />
      </div>
      <Phone title="问卷标题">
        <!-- <div> -->
          <Header :isMobile="'mobile'" />
          <QRadio :isMobile="'mobile'" />
          <QMatrix :isMobile="'mobile'" />
          <QInput :isMobile="'mobile'" />
          <QButton :isMobile="'mobile'" />
        <!-- </div> -->
      </Phone>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import useThemeInfo from '../../hooks/theme'
import MobileButton from '../MobileButton/index.vue'
import QRadio from '../ThemeQuestion/QRadio.vue'
import QMatrix from '../ThemeQuestion/QMatrix.vue'
import QInput from '../ThemeQuestion/QInput.vue'
import QButton from '../ThemeQuestion/QButton.vue'
import Header from '../Header/index.vue'
import Phone from "../Phone/Index.vue";

const { backgroundTransparency, backgroundColor, themeInfo } = useThemeInfo()
const isMobile = ref('pc')

</script>

<style lang="scss" scoped>
@media screen and (max-width: 1440px) {
  .theme-example {
    height: 594px !important;
  }
  .example-bg {
    height: 594px !important;
  }
  .theme-example-bg {
    height: 594px !important;
  }
}
.example {
  margin-left: 290px;
  margin-right: 290px;
  background-color: #f5f5f5;
  height: 100%;
  padding: 0 15px;
}
.theme-mobile::-webkit-scrollbar {
  display: none;
}
.theme-example-bg::-webkit-scrollbar {
  width: 4px;
  background-color: #ffffff;
}
.theme-example-bg::-webkit-scrollbar-thumb {
  background-color: #D8D8D8;
  border-radius: 10px;
}
.theme-mobile {
  height: 100%;
  overflow: auto;
}
.theme-example {
  display: flex;
  flex-direction: column;
  border-radius: 8px 8px 8px 8px;
  .example-bg {
    height: 765px;
    border-radius: 10px;
    opacity: v-bind(backgroundTransparency);
  }

  .theme-example-bg {
    position: absolute;
    left: 305px;
    right: 300px;
    height: calc(100% - 104px) !important;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: v-bind(backgroundColor);
  }
}

.mobile {
  width: 425px;
  height: 856px;
  background-size: 100% 100%;
  background-image: url("../../../../../assets/img/answer/phone.png");
  margin: auto;
}
.mobile-button {
  display: flex;
  justify-content: center;
}
</style>
