<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-04-14 09:50:16
 * @LastEditors: 无尘
 * @LastEditTime: 2020-07-24 09:38:33
 -->
<!--
  到期提醒
  <expired-dialog ></expired-dialog>
  import expiredDialog from '@/components/company/expired-dialog.vue';
 -->
<template>
  <el-dialog class="hide-close-dialog" style="top:88px;" title="到期提醒" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
    <div class="m-b-20 text-center">
      <div class="img-tip-wrap text-center"><img src="../../assets/expired.png" alt="" /></div>
      <div class="font-18 color-303133 m-t-17 text-center">使用已到期</div>
      <div class="font-14 color-909399 m-t-10 line-h-20 text-center"><span class="font-14 color-909399">服务已到使用期限，请升级 </span><span class="color-2f54eb cursor-pointer" @click="toDamo">达摩服务</span></div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'ExpiredDialog',
  props: {
    syncData: {
      type: Object,
      default() {
        return {
          syncStatus: '0'
        };
      }
    }
  },
  data() {
    return {
      dialogVisible: true
    };
  },
  mounted() {
    const that = this;
    that.$nextTick(() => {
      document.querySelector('.v-modal').style.top = '88px';
    });
  },
  beforeDestroy() {
    document.querySelector('.v-modal').style.top = '0px';
  },
  methods: {
    handleClose(done) {
      const that = this;
      that.dialogVisible = true;
    },
    toDamo() {
      window.open('https://www.demogic.com/');
    }
  }
};
</script>
<style lang="less" scoped>
.m-b-20 {
  margin-bottom: 20px;
}
.m-t-17 {
  margin-top: 17px;
}
.m-t-10 {
  margin-top: 10px;
}
.line-h-20 {
  line-height: 20px;
}
.font-18 {
  font-size: 18px;
}
.img-tip-wrap {
  img {
    width: 112px;
  }
}
</style>
