<!--
  @name: 错误提示框
  @description: -
  @author 张文
  @date: 2022-01-25
-->
<template>
  <div
    v-if="show"
    :style="{height:height}"
    class="ty-error-msg-box"
  >

    <div
      :style="{
        background:background,
        color:color
      }"
      class="ty-error-msg-body"
    >
      <div class="ty-error-msg-content">{{ message }}</div>
    </div>

    <div class="ty-global-flex-center ty-error-msg-close" @click="offError">
      <van-icon size="40px" name="close" />
    </div>

  </div>
</template>

<script>
import {tyCloseErrorMsg} from "./index";

/* 注意此组件不能使用 this.$XXX 的方法，因为没有注册组件是通过指令调用的 */

export default {
  name: "tyErrorMsg",
  /*props:{
    message:[String,Number]
  },*/
  data() {
    return {
      show:false,
      height:0,
      message:'',
      background:'',
      color:''
    }
  },
  watch:{
    show(n){
      if (n){
        // 让当前获取焦点的输入框失去焦点
        this.getInput('blur')
      }
    }
  },
  mounted() {
    setTimeout(()=>{
      this.height = '100vh'
    },5)
  },
  methods: {
    // 通过点击关闭按钮关闭弹窗
    offError(){
      tyCloseErrorMsg()
    },

    // 关闭弹框
    close(){
      this.height=0
      const dom = document.getElementsByClassName('ty-error-msg-box')[0]
      dom.addEventListener('transitionend', ()=>{
        // 让原输入框获取焦点
        this.getInput('focus')
        this.show=false
      })
      this.$emit('close')
    },

    // 获取当前存放的输入框
    getInput(fn){
      const inp = window.tyWindowGlobalData.get('input').dom
      inp && inp[fn]()
    }
  }
}
</script>

<style scoped lang="less">

@import "../../assets/css/var.less";

.ty-error-msg-box{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100vw;
  height: 0;
  background: rgba(0,0,0,0.6);
  z-index: 2147483584;
  transition: all .3s;
  overflow: hidden;
}

.ty-error-msg-body{
  width: 100%;
  height: 50%;
  padding: 10px;
  box-sizing: border-box;
  color: @errorMsgColor;
  background: @errorMsgBackgroundColor;
  overflow: hidden;
}

.ty-error-msg-content{
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  text-align: center;
}

.ty-error-msg-close{
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translateX(-50%);
}

.err-msg-btn{
  opacity: 0;
}

</style>
