<template>
  <div class="mask center " v-if="maskShow">
    <div class="dialog animate__animated animate__faster" :class="dialogShow?'animate__zoomIn':'animate__zoomOut'">
      <dv-border-box-3 color="['#2567d8','#2567d8']">
        <dv-border-box-8 backgroundColor="rgba(6, 57, 111, 0.5)">
          <img class="close animate__animated" src="../../public/data/close.png"
            :class="closeEnter?'animate__heartBeat':''" @mouseenter="closeEnter=true" @mouseleave="closeEnter=false"
            @click="close" />
          <div class="content">
            <div class="title">
              <div style="display: flex;">
                <dv-decoration-1 style="width:100px;height:30px;" />
                <div style="padding:0 20px;">{{title}}</div>
                <dv-decoration-1 style="width:100px;height:30px;" />
              </div>
              <dv-decoration-5 style="width:50%;height:40px;margin-top: -10px;" />
            </div>
            <div class="info">
              <slot name="detail"></slot>
            </div>
            <div class="bottom">
              <div style="text-align: center;padding: 5px;">
                {{detail.categoryName}}
              </div>
              <div>
                <i class="el-icon-time" style="padding-right: 10px;"></i>
                <span>{{detail.releaseTime || detail.alarmTime}}</span>
              </div>
            </div>
          </div>
        </dv-border-box-8>
      </dv-border-box-3>
    </div>
  </div>
</template>

<script>
  export default {
    name: "test",
    props:{
      detail:Object,
      titleName:String
    },
    computed:{
      title:{
        get(){
          if (!this.titleName) {
            return this.detail.title
          }
          let tmp=this.detail[this.titleName]
          if (tmp) {
            return tmp
          }else{
            return "设备工单"
          }
        }
      }
    },
    data() {
      return {
        dialogShow: false,
        maskShow: false,
        closeEnter: false,
      }
    },
    methods:{
      open(){
        this.maskShow = true
        this.dialogShow = true
      },
      close() {
        let _this = this
        this.dialogShow = false
        setTimeout(() => {
          _this.maskShow = false
        }, 50)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .full {
    width: 100%;
    height: 100%;
  }

  .content {
    width: 100%;
    height: 100%;
    position: relative;

    .title {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 10%;
      width: 100%;
      font-weight: 800;
      color: #00dcfd;
      font-size: 26px;
      padding-top: 15px;
    }
    .info {
      height: 90%;
      width: 100%;
    }

    .bottom{
      color: #00dcfd;
      position: absolute;
      bottom: 20px;
      right: 20px;
    }
  }

  .mask {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(18, 98, 140, .6);
    width: 100%;
    height: 100%;
    z-index: 9999999999999;

    .dialog {
      position: relative;
      width: 46%;
      height: 56%;
      background-color: rgba(4, 25, 50, .5);

      .close {
        z-index: 999;
        position: absolute;
        right: -15px;
        top: -20px;
        width: 48px;
        height: 48px;
        font-size: 50px;
        color: #00dcfd;
        cursor: pointer;
      }

    }
  }
</style>
