<template>
  <div id="scanQRCode">
    <!-- <h1>{{activeTab}}</h1> -->
    <!-- <van-notice-bar v-if="isShowNoticeBar" :scrollable="false" text="请点击左上角按钮，使用默认浏览器打开本页面！">
      <div slot="right-icon">
      </div>
    </van-notice-bar> -->
    <div class="head" v-if="isShowNoticeBar">
      <!-- <div style="width:100%;height:100%;"></div> -->
      <div class="headTitle">
        请点击右上角按钮，使用默认浏览器打开本页面！
      </div>
      <div class="headimage">
        <img style="height: 40px;width: 35px; margin-top: 0px" :src="guideImage" alt="">
      </div>
    </div>
    <div class="customEmpty" :image="sphImage"
         :style="{backgroundImage: 'url(' + bagImage + ')' }" style="background-repeat: no-repeat;background-size: contain;">
      <img class='subImg' :src="sphImage"/>
      <div class="subTitle">上药移动</div>
      <div class="updateTime">
        <span style="margin-right: 10px;">版本：{{versionNumber}}</span> | 
        <span style="margin-left: 10px;">大小：28 MB</span>
      </div>
      <div class="updateTime">更新时间：{{updateonTime}}</div>
      <img class='qrImg' :src="qrImage"/>
      <van-button @click="getJudgeBrowserAction()" round type="info" class="bottom-button">安 装</van-button>
      <!-- <van-button @click="versionUpdateHttpAction('42')" round type="info" class="bottom-button">iOS版下载(V.{{this.iosInfo.title}})</van-button> -->
      <!-- <van-button @click="versionUpdateHttpAction('43')" round type="info" style="margin-top: 10px" class="bottom-button">Android下载(V.{{this.androidInfo.title}})</van-button> -->
    </div>
  </div>
</template>

<script>
import {activityQueryDocList} from '@/api/scanQRCode'
import {getFormateDate} from '@/utils/common'
import {bridge} from '@/utils'

export default {
  name: 'ScanQRCode',
  components: {},
  data() {
    return {
      tabsTitle: [],
      moreSearchShow: false,
      activeTab: '',
      isFirst: false,
      isShowNoticeBar: false,
      androidInfo: {},
      iosInfo: {},
      guideImage: require('@/assets/img/guide.png'),
      sphImage: require('@/assets/img/icon_sph.png'),
      bagImage: require('@/assets/img/bagImage.png'),
      qrImage: require('@/assets/img/qr_Image.png'),
      versionNumber: '',
      updateonTime: ''
    }
  },
  computed: {
    linkInfo() {
      return this.$store.state.linkInfo
    },
    routKey() {
      return this.$route.path
    },
    searchTime() {
      let time = this.time.start + '/' + this.time.end
      return time
    }
  },
  created() {

  },
  activated() {
    // let _this = this
    // 设置标题栏关闭返回按钮
    this.$store.commit('setNavBar', {
      show: false,
      leftArrow: false,
      rightIcon: false,
      title: '上药移动',
      leftText: '',
      leftClick: this.closeAppPage,
      rightClick: this.onMoreSearch
    })
    // 给window添加一个popstate事件，拦截返回键，执行this.onBrowserBack事件，addEventListener需要指向一个方法
    window.addEventListener('popstate', this.onBrowserBack, false)
  },
  deactivated() {
    // 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
    window.removeEventListener('popstate', this.onBrowserBack, false)
  },
  mounted() {
    // this.moreSearchShow = true
    this.getJudgeBrowserAction()
    // this.tabsTitleData()
    this.versionUpdateHttpAction('42',true) // ios
    // this.versionUpdateHttpAction('43',true) // android
  },
  destroyed() {
  },
  methods: {
    getJudgeBrowserAction() {
      this.activeTab = ''
      var browser = {
        versions: (function () {
          var u = navigator.userAgent
          console.log(u)
          return {
            trident: u.indexOf('Trident') > -1, // IE内核
            presto: u.indexOf('Presto') > -1, // opera内核
            webKit: u.indexOf('AppleWebKit') > -1, // 苹果、谷歌内核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, // 火狐内核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
            android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, // android终端
            iPhone: u.indexOf('iPhone') > -1, // 是否为iPhone或者QQHD浏览器
            iPad: u.indexOf('iPad') > -1, // 是否iPad
            webApp: u.indexOf('Safari') == -1, // 是否web应该程序，没有头部与底部
            Safari: u.indexOf('Safari') > -1, // 是否web应该程序，没有头部与底部
            weixin: u.indexOf('MicroMessenger') > -1, // 是否微信 （2015-01-22新增）
            qq: u.match(/\sQQ/i) == ' qq', // 是否QQ
            isBaidu: u.indexOf('baiduboxapp') !== -1, // 是否为百度浏览器
            isqqBrowser: u.indexOf('mqqbrowser') !== -1, // 是否为qq浏览器
            isWxBrowser: u.indexOf('micromessenger') !== -1, // 是否为微信浏览器
            isUc: u.indexOf('ucbrowser') !== -1// 是否为uc浏览器
          }
        }())
      }
      this.ua = browser
      if (browser.versions.webKit) {
        this.activeTab = '苹果、谷歌内核'
        if (browser.versions.mobile) {
          this.activeTab = this.activeTab + '/移动'
          if (browser.versions.ios) {
            this.activeTab = this.activeTab + '/ios'
            if (browser.versions.weixin) {
              this.activeTab = this.activeTab + '/weixin'
              this.isShowNoticeBar = true
              this.showDialogAction()
            }
            if (browser.versions.Safari) {
              this.activeTab = this.activeTab + '/Safari'
              // window.location.href = 'https://www.baidu.com/'
              this.versionUpdateHttpAction('42',false)
            }
          }
          if (browser.versions.android) {
            if (browser.versions.weixin) {
              this.activeTab = this.activeTab + '/weixin'
              this.isShowNoticeBar = true
              this.showDialogAction()
            } else {
              this.activeTab = this.activeTab + '/android'
              this.versionUpdateHttpAction('43',false)
            }
          }
        }
      } else if (browser.versions.weixin) {
        this.activeTab = 'weixin'
      }
    },
    // 弹框提示
    showDialogAction() {
      this.$dialog.alert({
        confirmButtonColor: '#1989fa',
        message: '请点击右上角按钮，使用默认浏览器打开本页面！',
      }).then(() => {
        // on close
      });
    },
    // 版本更新接口
    versionUpdateHttpAction(type,isFirst) {
      let _this = this
      let dict = {
        'attr': {'empid': ''},
        'filters': [
          {'key': 'type', 'opt': 'LIKE', 'type': 'S', 'value': type}
        ],
        'logic': 'or',
        'sort': 'desc',
        'orderby': 'createon',
        'pageNum': 1,
        'pageSize': 10
      }
      activityQueryDocList(dict).then(rt => {
        if (rt) {
          // ios
          if (type === '42') {
            this.iosInfo = rt.list[0]
            this.versionNumber = this.iosInfo.title
            this.updateonTime = this.iosInfo.updateon
            // android
          } else if (type === '43') {
            this.androidInfo = rt.list[0]
            this.versionNumber = this.androidInfo.title
            this.updateonTime = this.androidInfo.updateon
          }
          if(!isFirst) {
            window.location.href = rt.list[0].comments
          }
          // _this.$toast(rt.list[0].comments)
        } else {
          _this.$toast(rt.message)
        }
      }).catch(e => {
        this.$toast('获取信息失败！')
      })
    },
    postDataListAction(item) {
      const removeItem = item
      removeItem.cellId = item.id + item.erp_user
      return item
    },
    openPager(path) {
      this.$router.push({
        path: path,
        query: this.$store.state.linkInfo
      })
    },
    onBrowserBack() {
      if (this.moreSearchShow) {
        this.moreSearchShow = false
        return
      }
      this.$router.go(-1)
    },
    onSearch() {

    },
    closeAppPage() {
      console.log('关闭页面')
      bridge.closeWindow_c()
    }
  }
}
</script>

<style lang="scss" scoped>
#scanQRCode {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #F5F5F5;

  .head {
    height: 80px;
    width: 100%;
    background-color: #343434;
    display: flex;
    padding: 10px;
    // position: absolute;
    // opacity: 0.2;
    // background: transparent;

    .headTitle {
      color: #dadada;
      width: 90%;
      font-size: 16px;
      font-weight: 600;
      line-height: 28px;
      margin: auto;
    }

    .headimage {
      width: 10%;
    }
  }

  .customEmpty {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    //text-align: center;
  }
  .updateTime{
    color: #999999;
    font-size: 15px;
    margin-top: 10px;
  }
  .subTitle {
    padding: 5px;
    color: #333333;
    font-size: 24px;
    font-weight: 600;
    margin-top: 15px;
  }

  .subImg {
    width:90px;
    height:90px;
    display: block;
    margin-top:25%;
    border-radius: 8px;
  }
  .qrImg{
    width:120px;
    height:120px;
    display: block;
    margin-top:40px;
    border-radius: 8px;
  }
  .bottom-button {
    width: 45%;
    margin-top:40px;
    background-color: #1989fa;
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 18px;
    .van-button__content{
      height: auto;
    }
  }

}
</style>
