<template>
  <div id="erweima">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="info">
          <el-button @click="keep()">
            <el-image style="width:25px;height:25px;" :src="shoucang"></el-image>
          </el-button>
          <el-button type="text" @click="qrDialog()">
            <el-image style="width:25px;height:25px;" :src="erweimas"></el-image>
          </el-button>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog title="本站二维码" :visible.sync="dialog" center append-to-body width="30%">
      <el-row>
        <el-col :span="24" style="text-align:center">
          <img :src="url" style="zoom:2" />
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from 'qrcode';

export default {
  name: 'erweima',
  props: {},
  components: {},
  data: () => ({
    erweimas: require('../../assets/二维码.png'),
    shoucang: require('../../assets/收藏.png'),
    dialog: false,
    url: '',
  }),
  created() {},
  async mounted() {
    await this.initQrcode();
  },
  computed: {},
  methods: {
    keep() {
      var url = window.location;
      var title = document.title;
      var ua = navigator.userAgent.toLowerCase();
      if (ua.indexOf('360se') > -1) {
        alert('由于360浏览器功能限制，请按 Ctrl+D 手动收藏！');
      } else if (ua.indexOf('msie 8') > -1) {
        window.external.AddToFavoritesBar(url, title); //IE8
      } else if (document.all) {
        //IE类浏览器
        try {
          window.external.addFavorite(url, title);
        } catch (e) {
          alert('您的浏览器不支持,请按 Ctrl+D 手动收藏!');
        }
      } else if (window.sidebar) {
        //firfox等浏览器；
        window.sidebar.addPanel(title, url, '');
      } else {
        alert('您的浏览器不支持,请按 Ctrl+D 手动收藏!');
      }
    },
    async qrDialog() {
      this.dialog = true;
    },
    async initQrcode() {
      let url = window.location.href;
      this.url = await QRCode.toDataURL(url);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-button {
  width: 60px;
  height: 60px;
  padding: 0;
  background-color: #a90d0d;
  border: none;
  margin: 6px 0;
}
/deep/.el-message-box__btns {
  text-align: center;
}
/deep/.el-dialog__body {
  padding: 0;
}
</style>
