<template>
    <div class="typeBigList">
      <div class="item" v-for="(item,index) in showTypeList" :key="index" @click="handleGo(item.url)">
        <image class="icon" :src="item.img"/>
      </div>
    </div>
</template>

<script>

export default {
  name: "commercialType",
  data(){
    return {
      typeList:[
          {img:'https://eshangtech.com/ShopICO/ahyd-BID/index/car.svg',url:'/pages/commercialBI/carPortrait'},
          {img:'https://eshangtech.com/ShopICO/ahyd-BID/index/guest.svg',url:'/pages/commercialBI/guestPortrait'},
          {img:'https://eshangtech.com/ShopICO/ahyd-BID/index/business_icon.svg',url:'/pages/commercialBI/managePortrait'},
          {img:'https://eshangtech.com/ShopICO/ahyd-BID/index/trade.svg',url:'/pages/commercialBI/businessPortrait'},
          {img:'https://eshangtech.com/ShopICO/ahyd-BID/index/brand.svg',url:'/pages/commercialBI/formatPortrait'},
      ],
      showTypeList:[],
      selectIndex: 5,
      pageList : [],// 页面栈数组
    }
  },
  props:{
    have:{
      type:Number,
      default:5
    }
  },
  watch:{
    have:{
      handler(value){
        this.selectIndex = value
        let list = []
        this.typeList.forEach((item,index)=>{
          if (index !== this.selectIndex){
            list.push(item)
          }
        })
        this.showTypeList = list

      },
      deep:true,
      immediate:true
    }
  },
  onLoad(){

  },
  onShow(){

  },
  methods:{
    handleGo(url){
      let pageList = getCurrentPages()
      if (pageList.length>=2){
          uni.redirectTo({
              url:url
          })
      }  else{
          uni.navigateTo({
              url:url
          })
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .typeBigList{
    position: fixed;
    right: 0;
    top: 15%;
    .item{
      width: 45px;
      height: 40px;
      border-radius: 20px 0 0 20px;
      background: rgba(255,255,255,0.8);
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      .icon{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-left: 10px;
      }
    }
  }
</style>
