<template>
  <div id="errorPage" class="errPageDiv">
    <div class="errImgDiv">
      <img class="errImg" :style="errImgStyle" :src="imgSrc"/>
    </div>
    <div :style="errPromptStyle">
      <span v-html="errPrompt"></span>
    </div>
    <div class="gotoShop" @click="btnClick">去看看</div>
  </div>
</template>

<script>
import errDataJson from '../../src/data.json';

import buttonCom from '../components/basisComponent/button/buttonCom.vue';
import { styleUtil,goToShopPage,getUrlQueryValueByKey } from '../util/tools.js';
import store from "../store/store";

export default {
  name: 'ErrorPage',
  components: {
    buttonCom
  },
  data() {
    return {
      errPrompt: '',//提示文字
      btnText: '',//按钮文字
      errPromptStyle: '',//提示样式
      buttonStyle: '',//按钮样式
      errImgStyle: '',//图片样式
      imgSrc:'',//图片路径
    };
  },
  created() {
    if(getUrlQueryValueByKey('soHot',location.href) == '1'){
      this.imgSrc = '//img10.360buyimg.com/imgzone/jfs/t1/221027/36/28495/25298/646e0f90F781b544c/3aef2d8dc8c5157e.png'
      this.errImgStyle = 'width: 3.57rem;height: 2.57rem;margin-top:60%;';
      if(getUrlQueryValueByKey('ajcode',location.href) == '555'){
        //限流
        this.errPrompt = '当前活动过于拥挤，请稍后再来哦~';
      }else if(getUrlQueryValueByKey('ajcode',location.href) == '500'){
        // 服务器接口没通/报错
        this.errPrompt = '当前的活动过于拥挤，请稍后再来哦~';
      }else if(getUrlQueryValueByKey('ajcode',location.href) == '101'){
        this.errImgStyle = 'width: 1.68rem;height: 2.06rem;margin-top:40%;';
        this.imgSrc = '//img10.360buyimg.com/imgzone/jfs/t1/130689/20/19792/29086/5fd56d6dE66162b5d/cd1db77e734eb248.png'
        this.errPrompt = `活动异常火爆~<br>先去店里看看吧~`;
      }
      this.errPromptStyle = errDataJson.errPageData.errPromptStyle;
    }else{
      this.imgSrc = errDataJson.errPageData.imagesStyle.imgSrc;
      this.errImgStyle = errDataJson.errPageData.imagesStyle.errImage1;
      if(getUrlQueryValueByKey('ajcode',location.href) == '70000'){
        this.errPrompt = '我们的' + errDataJson.errPageData.textStyle.errPrompt;
      }else {
        this.errPrompt = errDataJson.errPageData.textStyle.errPrompt;
      }
      this.btnText = errDataJson.errPageData.textStyle.btnText;
      this.errPromptStyle = errDataJson.errPageData.errPromptStyle;
      this.buttonStyle = errDataJson.errPageData.errPageButton;
    }
    
  },
  mounted() {},
  methods: {
    initAppData(){
    },
    btnClick(){
      let shopId = sessionStorage.getItem('shopId') //store.state.shopId
      console.log(shopId,'shopId')
      goToShopPage(shopId)
    }

  }
};
</script>

<style lang="scss">
  .gotoShop{
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/171255/25/8970/1911/603f3657E7dbedfc7/b19431c77c9a47d1.png);
    background-size: 100%;
     width: 3.7rem;
    height: 0.8rem;
     font-size: 0.42rem;
    color: #fff;
    margin: 0.2rem auto 0;
    line-height: .8rem;
  }
</style>
