<template>
  <div class="dialog-mask-container" v-if="showGoUpdate">
    <div class="dialog-mask"></div>
    <div class="dialog-container">
      <div class="dialog-content">更新至最新版本才能观看视频哦更新至最新版本才能观看视频哦</div>
      <div class="dialog-footer v-hairline-top">
        <span @click.stop.prevent="goUpdateHandler(1)">取消</span>
        <span class="confirm-btn v-hairline-left" @click.stop.prevent="goUpdateHandler(2)">立即更新</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'update-dialog',
  data() {
    return {

    }
  },
  props: {
    showGoUpdate: {
      type: Boolean,
      default: false
    },
  },
  methods: {
    goUpdateHandler(type) {
      this.$emit("goUpdateHandler",type);
    }
  }
}
</script>
<style lang="less" scoped>
  .dialog-mask-container{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 2019;
    .dialog-mask{
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,.5);
      z-index: 2020;
    }
    .dialog-container{
      z-index: 2021;
      position: absolute;
      top: 50%;
      left: 50%;
      overflow: hidden;
      width: 300px;
      font-size: 18px;
      -webkit-transition: .3s;
      transition: .3s;
      border-radius: 4px;
      background-color: #fff;
      -webkit-transform: translate3d(-50%,-50%,0);
      transform: translate3d(-50%,-50%,0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      .dialog-content{
        padding: 30px 22px;
        text-align: center;
        font-size: 18px;
        color: #373839;
      }
      .dialog-footer{
        height: 50px;
        display: flex;
        align-items: center;
        &.v-hairline-top::after{
          border-top-width: 1px;
        }
        span{
          display: inline-block;
          width: 50%;
          height: 50px;
          line-height: 50px;
          font-size: 17px;
          text-align: center;
          color: #979899;
          &.v-hairline-left::after{
            border-left-width: 1px;
          }
          &.confirm-btn{
            color: #449284;
          }
        }
      }
    }
    [class*=v-hairline] {
      position: relative;
      &::after{
        content: ' ';
        position: absolute;
        pointer-events: none;
        box-sizing: border-box;
        top: -50%;
        left: -50%;
        right: -50%;
        bottom: -50%;
        -webkit-transform: scale(.5);
        transform: scale(.5);
        border: 0 solid #F0F1F2;
      }
    }
  }
</style>
