<template>
  <div id="bottom-category" :class="[type=='categoryShow'?'inShow':'outShow']" ref="bottom_category" :style="{left:showLeft+'px'}">
    <div class="bottom-content">
      <ul class="category-list">
        <li v-for="(item,index) in categoryList" :style="{marginTop:item.top}" @click="chooseCategory(item)" :key="index">
          <img :src="imgSrc(item)" class="tool-img" />
          <span :class="[item.chosen?'chosenState':'unchosenState']">{{item.name}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {createNamespacedHelpers} from "vuex";
import {CHANGE_MAIN_CATEGORY_ACTION} from "@/view/show-platform/store/action-constant";
const {mapState,mapActions} = createNamespacedHelpers('platform')
export default {
  name: "BottomCategory",
  data(){
    return{
      screenWidth:0,
      showLeft :0,
      categoryList:[
        {
          name:'全市基础',
          code:'基础地理',
          chosen:true,
          top:'140px'
        },
        {
          name:'地下空间',
          code:'地下空间',
          chosen:false,
          top:'70px'
        },
        {
          name:'城市规划',
          code:'规划土地',
          chosen:false,
          top:'10px'
        },
        {
          name:'建设管理',
          code:'城乡建设',
          chosen:false,
          top:'-30px'
        },
        {
          name:'房屋管理',
          code:'房屋管理',
          chosen:false,
          top:'-50px'
        },
        {
          name:'城市管理',
          code:'城市管理',
          chosen:false,
          top:'-50px'
        },
        {
          name:'综合交通',
          code:'综合交通',
          chosen:false,
          top:'-30px'
        },
        {
          name:'环境保护',
          code:'环境保护',
          chosen:false,
          top:'10px'
        },
        {
          name:'水务海洋',
          code:'水务海洋',
          chosen:false,
          top:'70px'
        },
        {
          name:'绿化市容',
          code:'绿化市容',
          chosen:false,
          top:'140px'
        },
      ]
    }
  },
  computed:{
    ...mapState({
      mainCategory:'mainCategory'
    })
  },
  mounted() {
    this.changeWidth()
  },
  methods:{
    ...mapActions({
      [CHANGE_MAIN_CATEGORY_ACTION]:CHANGE_MAIN_CATEGORY_ACTION
    }),
    imgSrc(item){
      if(item.chosen){
        return require('../../../assets/imgs/mainPage/'+item.name+'2.png')
      }else{
        return require('../../../assets/imgs/mainPage/'+item.name+'1.png')
      }
    },
    changeWidth(){
      this.screenWidth = document.documentElement.clientWidth;
      this.showLeft =(this.screenWidth - this.$refs.bottom_category.offsetWidth) /2;
      // 监听窗口大小变化
      let layerSelf = this;
      window.onresize = function() {
        layerSelf.screenWidth = document.documentElement.clientWidth;
        layerSelf.showLeft =(this.screenWidth - this.$refs.bottom_category.offsetWidth) /2;
      }
    },
    chooseCategory(item){
      for(let i=0;i<this.categoryList.length;i++){
        if(item.code ==this.categoryList[i].code){
          this.categoryList[i].chosen = true;
          this.$emit('setLeftShow','Menu');
          this[CHANGE_MAIN_CATEGORY_ACTION](item.code)
        }else{
          this.categoryList[i].chosen = false
        }
      }
    }
  },
  props:{
    type:{},
  }
}
</script>

<style scoped lang="scss">
#bottom-category{
  position: absolute;
  bottom:0px;
  z-index: 1;
  text-align: center;
  width: 1360px;
  height: 220px;
  overflow: hidden;
  .bottom-content{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: url('../../../assets/imgs/mainPage/big_circle.png');
    background-size: 100% 100%;
    .category-list{
      display: flex;
      justify-content: center;
      padding:0;
      margin: 0;
    }
    .category-list li{
      cursor:pointer;
      list-style:none;
      width: 110px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .tool-img{
      width: 53px;
      height: 53px;
    }
    .unchosenState{
      color: #00ccff;
      font-size: 14px;
    }
    .chosenState{
      color: #ffc600;
      font-size: 14px;
    }
  }

  .small-c{
    position: absolute;
    left: 50%;
    width: 830px;
    height: 71px;
    transform: translate(-50%,0);
    background-image: url('../../../assets/imgs/mainPage/small_circle.png');
    bottom: 0;
    .down-a{
      cursor: pointer;
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translate(-50%,0);
    }
    .down-a.isHide{
      transform: translate(-50%,0) rotate(180deg) ;
    }
  }
}
.inShow{
  transition-property: transform;
  transition-duration:1s;
}
.outShow{
  transition-property: transform;
  transition-duration:1s;
  transform: translateY(220px);
}
</style>
