<template>
  <div id="bottom-category-button" ref="bottom_category_button" :style="{left:showLeft+'px'}">
    <div class="small-c">
      <div class="down-a" :class="[type=='categoryShow'?'':'isHide']" @click="changeCategoryShowState">
        <img src="../../../assets/imgs/mainPage/矩形1.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BottomCategoryButton",
  data(){
    return{
      screenWidth:0,
      showLeft :0
    }
  },
  mounted() {
    this.changeWidth()
  },
  methods:{
    changeWidth(){
      this.screenWidth = document.documentElement.clientWidth;
      this.showLeft =(this.screenWidth) /2;
      // 监听窗口大小变化
      let layerSelf = this;
      window.onresize = function() {
        layerSelf.screenWidth = document.documentElement.clientWidth;
        layerSelf.showLeft =(this.screenWidth) /2;
      }
    },
    changeCategoryShowState(){
      if(this.type=='categoryShow'){
        this.$emit('setType','categoryHide')
      }else{
        this.$emit('setType','categoryShow')
      }
    }
  },
  props:{
    type:{

    }
  }
}
</script>

<style scoped lang="scss">
#bottom-category-button{
  position: absolute;
  //@media screen and(max-width: 1921px){
  //  left:1040px;
  //}
  //@media screen and(min-width: 1921px){
  //  left:1920px;
  //}
  bottom:0px;
  z-index: 1;
  text-align: center;
  width: 830px;
  height: 71px;
  overflow: hidden;
  transform: translate(-50%,0);
  background-image: url('../../../assets/imgs/mainPage/small_circle.png');
  .down-a{
    cursor: pointer;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translate(-50%,0);
  }
  .down-a.isHide{
    transform: translate(-50%,0) rotate(180deg) ;
  }
}

</style>
