<template>
  <div :style="{width:boxWH.width,height:boxWH.height}" class="marginbox" :key="keynum">

    <div tabIndex="1" :class="data.gateway?'botton-footer red':'botton-footer green'" @click="clickBotton">
        <div tabIndex="2" :class="data.gateway?'botton-header red':'botton-header green'" @click="clickBotton">
            <h2>{{ data.title }}:{{ data.num }}</h2>
        </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue"
import { useRouter } from "vue-router";
import {useMechanicsStore} from "@/store/module/Mechanics"
const store = useMechanicsStore()
const router=useRouter()
let keynum=ref(0)
let boxWH=reactive({
    width:'0px',
    height:'0px'
  })
  let data=reactive({
    index:null,
    title:null,
    num:null,
    gateway:null
  })

  const clickBotton=()=>{
    store.changePage(data.index)
    router.push({
    name:'Mechanicschild',
    params:{
      id:data.index
    }
})
  }

  function setchartWH(width: any, height: any) {
    boxWH.height=height + "px";
    boxWH.width=width + "px";
  }
function setdata(val:any){
    data=val
    keynum.value++
}
  defineExpose({
    setchartWH,
    setdata
  });
</script>

<style scoped>
.marginbox{
    display: flex;
    align-items: center;
    justify-content: center;
    perspective:500px;
}
.botton-footer{
    width: 60%;
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    /* box-shadow: 0 0 10px 10px rgba(228,57,97, .5); */
    transform-style:preserve-3d;
    transform: rotateX(30deg);
    cursor:pointer;
}
.botton-header{
    width: 70%;
    height: 70%;
    border-radius: 5px;
    /* box-shadow: 0 0 10px 10px rgba(32,174,197, .5); */
    transform: translateZ(50px);
    transition: transform 1s linear 0s;
    cursor:pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
}
.botton-footer:hover .botton-header{
    transform: translateZ(20px);
}
.botton-footer:focus .botton-header{
    background-color: rgba(228,57,97, .5);
    border: none;
}
.botton-header:focus{
    background-color: rgba(228,57,97, .5);
    border: none;
}
.red{
    box-shadow: 0 0 10px 10px rgba(228,57,97, .5);
}
.green{
    box-shadow: 0 0 10px 10px rgba(32,174,197, .5);
}
</style>
