<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\Mechanics\child\components\devItemStyle.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-23 13:30:56
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div class="devbox" @click="devclick">
    <div style="width: 80%; height: 80%;" :class="props.status=='H_E_STOP'?'devboxborder':props.status=='H_OFF'?'devboxborder2':props.status=='H_ON'?'devboxborder3':'devboxborder4'">
        <el-image style="width: 100%; height: 80%;" :src="props.url"  :fit="'scale-down'" lazy>
      </el-image>
      <h2>{{ props.devName}}</h2>
    </div>
    
  </div>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue"
import {useRoute,useRouter} from "vue-router";
import {useMechanicsStore} from "@/store/module/Mechanics"
const store = useMechanicsStore()
const route = useRoute()
const router = useRouter()
let props=defineProps<{
      status:string,
      url:string,
      devName:string,
      dev:string
      }>()
// let dev=reactive({
//     status:1,
//     url:'',
//     devName:''
// })
// function setdata(val:any){
//     dev=val
// }
//   defineExpose({
//     setdata
//   });
const devclick =()=>{
router.push({
    name:'Mechanicsson',
  params:{
    id:store.page||route.params.id,
    dev:props.dev
    // dev:'03e2c050-460b-11ed-b6af-15994988a6b3'
  }
})
store.changeloading(false)
}
</script>

<style  scoped>
 .devbox{
    width: 20rem;
    height: 20rem;
    /* background-color: red; */
    display: flex;
    justify-content: center;
    align-items: center;
 }
 .devboxborder{
    border-radius: 10px;
    /* box-shadow: rgba(238, 102, 102, 0.4) 5px 5px, rgba(238, 102, 102, 0.3) 10px 10px, rgba(238, 102, 102, 0.2) 15px 15px, rgba(238, 102, 102, 0.1) 20px 20px, rgba(238, 102, 102, 0.05) 25px 25px; */
    animation: redstart 2s infinite;
 }
 .devboxborder2{
    border-radius: 10px;
    box-shadow: rgba(250, 200, 88, 0.4) 5px 5px, rgba(250, 200, 88, 0.3) 10px 10px, rgba(250, 200, 88, 0.2) 15px 15px, rgba(250, 200, 88, 0.1) 20px 20px, rgba(250, 200, 88, 0.05) 25px 25px;
    /* box-shadow:rgba(250, 200, 88, 0.35) 0px -50px 36px -28px inset; */

 }
  .devboxborder3{
    border-radius: 10px;
    box-shadow: rgba(145, 204, 117, 0.4) 5px 5px, rgba(145, 204, 117, 0.3) 10px 10px, rgba(145, 204, 117, 0.2) 15px 15px, rgba(145, 204, 117, 0.1) 20px 20px, rgba(145, 204, 117, 0.05) 25px 25px;
    /* box-shadow:rgba(145, 204, 117, 0.35) 0px -50px 36px -28px inset; */

 }
 .devboxborder4{
    border-radius: 10px;
    box-shadow: rgba(120, 120, 120, 0.4) 5px 5px, rgba(120, 120, 120, 0.3) 10px 10px, rgba(120, 120, 120, 0.2) 15px 15px, rgba(120, 120, 120, 0.1) 20px 20px, rgba(120, 120, 120, 0.05) 25px 25px;
    /* box-shadow:rgba(145, 204, 117, 0.35) 0px -50px 36px -28px inset; */

 }
 h2{
    color: #fff;
}

@keyframes redstart {
    0% {
        
      }
      50% {
        box-shadow: rgba(238, 102, 102, 0.4) 5px 5px, rgba(238, 102, 102, 0.3) 10px 10px, rgba(238, 102, 102, 0.2) 15px 15px, rgba(238, 102, 102, 0.1) 20px 20px, rgba(238, 102, 102, 0.05) 25px 25px;
        /* box-shadow:rgba(238, 102, 102, 0.35) 0px -50px 36px -28px inset; */
    }
      100% {
       
      }
}
</style>
