<template>
    <div class="typeBigList">
      <view class="bigBox">
        <view :class="expand?'ItemBox second':'ItemBox first'">
          <view class="item" @click="handleChangeExpand">
            <view class="iconBox">
              <image class="icon" src="/static/images/user/expand.svg"/>
            </view>
            <text class="text">展开</text>
          </view>
        </view>

        <view :class="expand?'ItemBox first':'ItemBox second'" :style="{opacity: show?1:0}">
          <div class="item" @click="handleChangeExpand">
            <view class="iconBox">
              <image style="transform: rotate(-180deg)" class="icon" src="/static/images/user/expand.svg"/>
            </view>
            <text class="text">隐藏</text>
          </div>
          <div class="item" v-for="(item,index) in showTypeList" :key="index" @click="handleGo(item.url)">
            <image class="icon" :src="item.img"/>
            <text class="text">{{item.text}}</text>
          </div>
        </view>

      </view>
    </div>
</template>

<script>

export default {
  name: "commercialType",
  data(){
    return {
      typeList:[
          {img:'https://eshangtech.com/ShopICO/ahyd-BID/index/car.svg',url:'/pages/commercialBINew/carPortrait',text:'车流'},
          {img:'https://eshangtech.com/ShopICO/ahyd-BID/index/guest.svg',url:'/pages/commercialBI/guestPortrait',text:'客群'},
          {img:'https://eshangtech.com/ShopICO/ahyd-BID/index/business_icon.svg',url:'/pages/commercialBI/managePortrait',text:'经营'},
          {img:'https://eshangtech.com/ShopICO/ahyd-BID/index/trade.svg',url:'/pages/commercialBI/businessPortrait',text:'交易'},
          {img:'https://eshangtech.com/ShopICO/ahyd-BID/index/brand.svg',url:'/pages/commercialBI/formatPortraitBI',text:'品牌'},
          {img:'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/newExamineIcon.svg',url:`/pages/examine/detail?type=${1}`,text:'考核'},
          {img:'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/inspectionIcon.svg',url:`/pages/examine/detail?type=${2}`,text:'巡检'},
      ],
      showTypeList:[],
      selectIndex: 7,
      pageList : [],// 页面栈数组
      expand: false,// 是否展开
      show:false,
    }
  },
  props:{
    have:{
      type:Number,
      default:7
    },
    time:{
      type: String,
      default: ''
    }
  },
  watch:{
    have:{
      handler(value){
        this.selectIndex = value
        let list = []
        this.typeList.forEach((item,index)=>{
          if (index !== this.selectIndex){
            list.push(item)
          }
        })
        this.showTypeList = list
        setTimeout(()=>{
          this.show = true
          console.log('this.show',this.show)
        },2000)
      },
      deep:true,
      immediate:true
    }
  },
  onLoad(){

  },
  onShow(){

  },
  methods:{
    handleChangeExpand(){
      this.expand = !this.expand
    },
    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: 12%;
    .bigBox{
      width: 100%;
      height: 100%;
      position: relative;
      .ItemBox,.ItemBox2{
        .item{
          width: 150rpx;
          height: 80rpx;
          border-radius: 20px 0 0 20px;
          box-sizing: border-box;
          padding: 14rpx;
          background: rgba(255,255,255,0.8);
          box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(88,82,82,0.3);
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          border: 1px solid #ccc;
          .icon{
            width: 52.5rpx;
            height: 52.5rpx;
            border-radius: 50%;
          }
          .iconBox{
            width: 52.5rpx;
            height: 52.5rpx;
            border-radius: 50%;
            margin-right: 10rpx;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            .icon{
              width: 30rpx;
              height: 30rpx;
            }
          }
          .text{
            font-size: 24rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #786B6C;
            line-height: 36rpx;
          }
        }

        .firstItem{
          animation:toLeft 2s;
        }
        .secondItem{
          animation:toRight 2s;
        }
        @keyframes toLeft {
          0%{
            transform: translateX(0px);
          }
          100%{
            transform: translateX(150rpx);
          }
        }
        @keyframes toRight {
          0%{
            transform: translateX(0px);
          }
          100%{
            transform: translateX(150rpx);
          }
        }
      }
      .first{
        position: absolute;
        top: 0;
        animation: second 1.5s;
        animation-fill-mode:forwards;
      }
      .second{
        position: absolute;
        top: 0;
        animation: first 1.5s;
        animation-fill-mode:forwards;
      }
      @keyframes first {
        0%{
          left: -150rpx;
        }
        100%{
          left: 0;
        }
      }
      @keyframes second {
        0%{
          left: 0;
        }
        100%{
          left: -150rpx;
        }
      }
    }
  }
</style>
