<template>
  <div class="home">
    <div class="btn-group">
      <button @click="onClickBegin">
        开始探索
      </button>
      <button
        id="copy-text"
        :data-clipboard-text="shareUrl"
        data-clipboard-action="copy"
        @click="onClickCopy"
      >
        分享
      </button>
    </div>
  </div>
</template>

<script setup>
import Clipboard from "clipboard"
import { showToast } from "@/store/index.js"
import { useRoute, useRouter } from "vue-router"
const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()

const route = useRoute()
const router = useRouter()

const shareUrl = location.origin + location.pathname
function onClickBegin() {
  router.push({
    name: 'EntryList'
  })
}
function onClickCopy() {
  let clipboard = new Clipboard("#copy-text")
  clipboard.on("success", function() {
    showToast('地址已复制到剪贴板')
  })
}


</script>

<style lang="less" scoped>
.home{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  >.btn-group{
    position: absolute;
    left: 50%;
    bottom: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    transform: translateX(-50%);
    >button{

    }
    >button:first-of-type{
      margin-right: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    }
  }
}
</style>