<template>
    <div class="main">
      <div style="position: fixed;right: 0;top: 20%;z-index:99999999999">
        <commercial-type :have="4"/>
      </div>
      <div style="position: fixed;right: 0;top: 20%;z-index:99999999999">
<!--        <commercial-type :have="4"/>-->
      </div>
<!--        <header-top :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :analyseInfo="analyseInfo" :topBg="topBg" :page="page" :backType="backType"-->
<!--                    :serverpartName="serviceInfo.SERVERPART_NAME" :spregionTypeName="serviceInfo.SPREGIONTYPE_NAME" :serviceInfo="serviceInfo"/>-->
        <div class="header" :style="{height:`${status.screenWidth / 1.37}px`}">
          <div class="box" :style="{top:(menu.bottom - (menu.height / 2)) + 'px'}">
            <div class="icon" @click="handleBack">
              <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"></image>
            </div>
            <input class="search" confirm-type="search" placeholder="请输入品牌名称" v-model="searchText" @confirm="onSearch" />
          </div>
<!--          <div class="serviceArea" :style="{top : (menu.bottom + 14) + 'px'}" >-->
<!--&lt;!&ndash;            @click="handleGoSelectService"&ndash;&gt;-->
<!--            <div class="picker">-->
<!--              <div class="selectService">-->
<!--                <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>-->
<!--                <view class="select">-->
<!--                  <view class="content">-->
<!--                    &lt;!&ndash;                            <view class="uni-input">{{serviceArray[serviceIndex]}}</view>&ndash;&gt;-->
<!--                    <view class="uni-input">安徽驿达</view>-->
<!--                    &lt;!&ndash;                            <text class="area">{{area}}</text>&ndash;&gt;-->
<!--&lt;!&ndash;                    <text class="area">{{serviceInfo.SPREGIONTYPE_NAME}}</text>&ndash;&gt;-->
<!--                    <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>-->
<!--                  </view>-->
<!--                </view>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
        </div>

        <div class="charts" :style="{height:`calc(100vh - ${status.screenWidth / 1.37}px)`}">
          <div class="top">
            <div :class="selectTab===item.value?'topItem bg':'topItem'" v-for="(item,index) in tabList" :key="index" @click="handleChangeTab(item.value)">
              <image class="icon"  :src="item.img"></image>
              <text class="text">{{item.label|| '-'}}</text>
            </div>
          </div>

          <div class="nav">
            <scroll-view scroll-x="true" class="navList" :scrollIntoView="currentNav" :scroll-with-animation="true">
              <div :id="'item'+item.value" :class="selectNav===item.value?'navItem bg':'navItem'" v-for="(item,index) in navList" :key="index" @click="handleChangeNavSelect(item.value)">
                {{item.label || '-'}}
                <span v-if="item.count" class="count">{{`(${item.count})`}}</span>
              </div>
            </scroll-view>
            <div class="filter">
              <image class="more" src="https://eshangtech.com/ShopICO/ahyd-BID/brand/more.svg" @click="handleShowFilter($event)"></image>
            </div>
          </div>

<!--          height: calc(100vh - 404px);-->
          <scroll-view class="list" :style="{height: `calc(100vh - ${status.screenWidth / 1.37}px - 132px)`}" :show-scrollbar="false" scroll-y="true" :scroll-top="scrollTop" @scroll="handleScroll" :scroll-with-animation="true">
            <div class="listItem" v-for="(item,index) in tableList" :key="index" @click="handleToDetail(item)">
              <div class="left">
                <image class="logo" :src="item.BRAND_INTRO"></image>
              </div>
              <div class="right">
                <text class="title" :style="{fontSize:item.BRAND_NAME.length>8?'14px':'16px'}">{{item.BRAND_NAME}}</text>
                <div class="labelList">
<!--                  <div class="labelItem" v-for="(item,index) in labelItemList" :key="index">{{item.label}}</div>-->
                  <div class="labelItem">{{item.BUSINESSTRADE_NAME}}</div>
                  <div class="labelItem">{{item.BRAND_TYPENAME}}</div>
                </div>
                <view style="display: flex;justify-content: flex-end">
                  <div class="suggest" @click.stop="handleShopDetail(item)" v-if="item.MerchantName">
                    <view style="width: 100%;display: inline-block;text-align: right">
                      {{item.MerchantName || ''}}
                    </view>
                    <!--                  <text class="value">{{item.COMMISSION_RATIO || '-'}}</text>-->
                    <!--                  <text class="text">建议提成比例</text>-->
                  </div>
                </view>

              </div>
              <div class="type">
                <image class="typeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/brand/foodIcon.svg"></image>
                <text class="text">服务区</text>
                <text class="number">{{item.ServerpartList.length}}</text>
              </div>
            </div>
            <div style="height: 1px"></div>
          </scroll-view>
        </div>
      <div v-if="showFilterBox" class="meng" @click="handleClose">
        <div class="filterBox" :style="{top: filterTop + 'px'}">
          <div :class="selectNav===item.value?'filterItem bg':'filterItem'" v-for="(item,index) in navList" @click.stop="handleChangeNavSelect(item.value)">
            {{item.label || '-'}}
            <span v-if="item.count" class="count">{{`(${item.count})`}}</span>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import request from '@/util/index.js'
import headerTop from "./components/headerTop.vue";
import analyse from "./components/analyse.vue";
import FillingDegree from "./components/format/fillingDegree.vue";
import BandLevel from "./components/format/bandLevel.vue";
import ConsumptionLevel from "./components/format/consumLevel.vue";
import BandNumber from "./components/format/bandNumber.vue";
import NoData from "./components/noData.vue";
import commercialType from "./commercialType.vue";
import { tableList, wrapTreeNode } from '@/util/dateTime/index'

export default {
    name: "businessPortrait",
    components: {NoData, BandNumber, ConsumptionLevel, BandLevel, FillingDegree, analyse, headerTop,commercialType},
    data() {
        return {
          topBg:'linear-gradient(180deg, #C6C1F0 0%, #CECBF3 100%);',//顶部组件的悬浮背景色
          labelList:['女性','高消费','喜爱奶茶','浙江','20-30岁','江苏'],//标签
          title:'业态品牌',//页面标题
          bgColor: '180deg, #459FFF 0%, #473AFF 100%',
          bgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/commercial/formatPortraitBg.svg',//背景图片路径
          page:'/pages/commercialBI/formatPortrait',
          time: '',//跳转携带的时间
          menu: {},//手机配置信息
          fillDegreeList:[],//业态充盈度
          bandLevelList:[],//品牌消费水平
          consumLevelList:[],//业态消费水平
          brandLabelList:[],//品牌指数标签列表
          brandLabelListNoChange:[],//把第一次进来请求到的标签列表存起来
          brandInfoList:[],//品牌指数列表
          brandInfoListNoChange:[],//把第一次请求到的全部品牌指数列表存起来
          serviceInfo:{}, //当前服务区信息
          backType:'',//返回的页面类型
          analyseInfo:{
            analysisins_type: 1501 // 传给headTop组件的
          },
          selectKey:'',//有数据的话
          str:'',
          isClick:true,//图表是否能点击
          single:'',//显示时间
          thisMonth:'',//几月
          endData:'', // 结束时间

          tabList:[{label:'餐饮主食',img:'https://eshangtech.com/ShopICO/ahyd-BID/brand/food.svg',value:1},
            {label:'休闲小吃',img:'https://eshangtech.com/ShopICO/ahyd-BID/brand/snack.svg',value:2},
            {label:'生活零售',img:'https://eshangtech.com/ShopICO/ahyd-BID/brand/lifeRetail.svg',value:3},
            {label:'汽车服务',img:'https://eshangtech.com/ShopICO/ahyd-BID/brand/carService.svg',value:4},
            {label:'司乘体验',img:'https://eshangtech.com/ShopICO/ahyd-BID/brand/drivingExperience.svg',value:5}],
          selectTab:1,
          navList:[{label:'全部',value:''},{label:'中餐馆',value:''},{label:'中式快餐',value:''},{label:'西式快餐',value:''},{label:'西式快餐',value:''},{label:'西式快餐',value:''},{label:'西式快餐',value:''},{label:'西式快餐',value:''}],
          showFilterBox:false,// 是否显示分类的悬浮框
          treeList: [],// 树列表完整内容 有子级
          selectNav:0,// 选中的type
          filterTop:'',// 点击的纵坐标
          tableList:[],// 列表数据
          brandType:[],// 品牌类型的枚举列表
          searchText:'',// 顶部搜索框的内容
          scrollTop:0,// 滚动条位置
          oldScrollTop:0,// 滚动条位置记录的
          currentNav:'',// 当前选中的nav的id
          status:{},// 设备信息
        }
    },
    onLoad(option) {
      this.handleGetTreeList()
      //枚举
      this.handleBrandType()
    },
    onShow(){
      let systemInfo = uni.getSystemInfoSync()
      this.status = systemInfo
      this.menu = uni.getMenuButtonBoundingClientRect()
      console.log('systemInfo',systemInfo)
    },
    onUnload() {
        this.$util.addUserBehavior()
    },
    methods:{
      // 拿到树状列表
      async handleGetTreeList(){
        const data = await request.$webGet('EShangApiMain/BaseInfo/GetBusinessTradeTree',{})
        const treeTable = wrapTreeNode(data.Result_Data.List);
        this.treeList = treeTable
        console.log('treeTable',treeTable)
        const list  = tableList({...data.Result_Data, List: treeTable})
        this.tabList.forEach((item,index)=>{
          item.label = list.data[index].AUTOSTATISTICS_NAME
          item.value = list.data[index].AUTOSTATISTICS_ID
        })
        // 默认选中
        this.selectTab = list.data[0].AUTOSTATISTICS_ID
        this.handleChangeTab(list.data[0].AUTOSTATISTICS_ID)
      },
      handleScroll(e){
        this.oldScrollTop = e.detail.scrollTop
      },
      //点击跳转服务区
      handleGoSelectService(){
        uni.navigateTo({
          url:`/pages/map/index?page=${this.page}&chartType=${true}&serviceInfo=${JSON.stringify(this.serviceInfo)}`
        })
      },
      handleShopDetail(item){
        console.log('item',item)
        if (item.MerchantID && item.MerchantID!=='-1'){
          uni.navigateTo({
            url:`/pages/commercialBI/shopDetail?id=${item.MerchantID}&COOPMERCHANTSID=${item.MerchantID_Encrypt}`
          })
        }
      },
      //返回上一级s
      handleBack(){
        if (this.backType==='userCenter'){
          uni.switchTab({
            url: '/pages/userCenter/userCenter'
          })
        }else{
          uni.switchTab({
            url: '/pages/index/index'
          })
        }
      },
      // 拿到枚举列表
      async handleBrandType(){
        const req ={
          FieldExplainField: 'BRAND_TYPE',
          sessionName: 'BRAND_TYPE'
        }
        const data = await request.$webGet('EShangApiMain/FrameWork/GetFieldEnumTree',req)
        const list = wrapTreeNode(data.Result_Data.List)
        console.log('枚举',list)
        this.brandType = list
      },
      handleChangeTab(value){
        this.selectTab = value
        this.scrollTop = this.oldScrollTop
        this.$nextTick(() =>{
          this.scrollTop  = 0
        });
        let list = []
        this.treeList.forEach(item=>{
          if (item.AUTOSTATISTICS_ID===value){
            list = item.children
          }
        })
        let navList = []
        let count = 0
        list.forEach(item=>{
          count+=item.STATISTICS_TYPE
          navList.push({label:item.AUTOSTATISTICS_NAME,value:item.AUTOSTATISTICS_ID,count:item.STATISTICS_TYPE})
        })
        navList.unshift({label:'全部',value: value,count: count})
        this.navList = navList
        this.selectNav = this.navList[0].value
        this.currentNav = 'item' + this.navList[0].value
        this.handleGetList(this.navList[0].value)
      },
      // 跳转详情
      handleToDetail(obj){
        uni.navigateTo({
          url: `/pages/commercialBI/formatDetail?detail=${JSON.stringify(obj)}`
        })
      },
      // 显示分类的悬浮框
      handleShowFilter(e){
        console.log('e',e)
        this.filterTop = e.detail.y + 15
        this.showFilterBox = true
      },
      // 点击蒙层关闭悬浮框
      handleClose(){
        this.showFilterBox = false
      },
      // 切换选中的类型
      handleChangeNavSelect(value){
        console.log('value',value)
        this.selectNav = value
        this.scrollTop = this.oldScrollTop
        this.$nextTick(() =>{
          this.scrollTop  = 0
        });
        this.currentNav = 'item' + value
        this.handleGetList(value)
      },
      // 拿到类型的品牌列表
      async handleGetList(id){
        uni.showLoading({
          title: '正在加载...'
        })
        const req = {
          SearchParameter:{
            BRAND_INDUSTRY: id,
            BRAND_STATE:1
          },
          PageIndex: 1,
          PageSize: 999999,
        }
        const data = await request.$webPost('EShangApiMain/BaseInfo/GetBrandList',req)
        console.log('datalist',data)
        // BRAND_TYPE
        data.Result_Data.List.forEach(item=>{
          this.brandType.forEach(subItem=>{
            if (item.BRAND_TYPE === subItem.value){
              item.BRAND_TYPENAME = subItem.label
            }
          })
        })
        this.tableList = data.Result_Data.List
        uni.hideLoading()
      },
      // 搜索框的值
      async onSearch(){
        uni.showLoading({
          title: '正在加载...'
        })
        const req = {
          keyWord: {
            Key: 'BRAND_NAME',
            value: this.searchText,
          },
          SearchParameter:{
            BRAND_STATE:1,
          },
          PageIndex: 1,
          PageSize: 999999,
        }
        const data = await request.$webPost('EShangApiMain/BaseInfo/GetBrandList',req)
        console.log('data',data)
        data.Result_Data.List.forEach(item=>{
          this.brandType.forEach(subItem=>{
            if (item.BRAND_TYPE === subItem.value){
              item.BRAND_TYPENAME = subItem.label
            }
          })
        })
        this.tableList = data.Result_Data.List
        uni.hideLoading()
      }
    }
}
</script>

<style scoped lang="scss">
.main {
    width: 100vw;
    min-height: 100vh;
    background: #fff;
  .header{
    height: 272px;
    //background: linear-gradient(135deg, #7660FF 0%, #A0BAFD 31%, #B8D2FF 47%, #CAD9FF 66%, #BCB6FF 100%);
    width: 100vw;
    background: url("https://eshangtech.com/ShopICO/ahyd-BID/brand/headerBg.svg")no-repeat;
    background-size: cover;
    background-position-y: -5px;
    .box{
      padding: 0 16px;
      position: absolute;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      align-items: center;
      transform: translateY(-50%);
      .icon{
        width: 24px;
        height: 24px;
        .img{
          width: 100%;
          height: 100%;
        }
      }
      .search{
        width: 180px;
        height: 32px;
        background: #F4F4FF;
        border-radius: 17px;
        box-sizing: border-box;
        padding: 0 12px;
        border: 1px solid #F8F8FF;
        margin-left: 8px;
        line-height: 32px;
      }

    }
    .serviceArea{
      width: calc(100% - 32px);
      position: absolute;
      box-sizing: border-box;
      padding-left: 16px;
      .picker{
        .selectService{
          display: flex;
          align-items: center;
          .img{
            width: 40px;
            height: 40px;
            z-index: 2;
          }
          .select{
            //min-width: 174px;
            height: 32px;
            background: #F8F8FA;
            border-radius: 0 16px 16px 0;
            transform: translateX(-20px);
            box-sizing: border-box;
            padding-left: 25px;
            padding-right: 25px;
            display: flex;
            align-items: center;
            position: relative;
            .content{
              display: flex;
              align-items: center;
              .uni-input{
                padding: 0;
                background: transparent;
                font-size: 14px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #160002;
                height: 40px;
                line-height: 40px;
              }
              .area{
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #786B6C;
                line-height: 40px;
                margin-left: 4px;
              }
              .rightArrow{
                width: 24px;
                height: 12px;
                position: absolute;
                right: 0px;
              }
            }

          }
        }
      }
    }
  }
  .charts{
    width: 100%;
    //height: calc(100vh - 272px);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    overflow: hidden;
    background: #fff;
    transform: translateY(-16px);
    .top{
      width: 100%;
      height: 100px;
      background: linear-gradient(180deg, #F1F1FF 0%, #FEFEFF 95%, #FFFFFF 100%);
      box-shadow: 0 20px 20px 0 rgba(231,231,255,0.6);
      box-sizing: border-box;
      padding: 16px 15px;
      display: flex;
      .topItem{
        width: 20%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        padding: 10px;
        .icon{
          width: 35px;
          height: 35px;
          margin-bottom: 5px;
        }
        .text{
          font-size: 11px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 500;
          color: #5C5773;
          line-height: 18px
        }
      }
      .bg{
        background: linear-gradient(180deg, #E6DFFF 0%, #F0F0FF 100%);
        border-radius: 5px;
        .text{
          color: #683FF6!important;
          font-weight: 600;
        }
      }
    }
    .nav{
      width: 100vw;
      height: 48px;
      box-sizing: border-box;
      padding-top: 20px;
      position: relative;
      background: linear-gradient(180deg, #F1F1FF 0%,#FFFFFF 100%);
      .navList{
        width: 100%;
        box-sizing: border-box;
        padding: 0 44px 0 16px;
        white-space: nowrap;
        .navItem{
          height: 22px;
          display: inline-block;
          padding: 3px 10px;
          background: #F3F3F9;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #5C5773;
          line-height: 22px;
          border-radius: 4px;
          margin-right: 8px;
          .count{
            line-height: 22px;
            font-size: 11px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9D99B0;
            margin-left: 2px;
          }
        }
        .bg{
          background: #683FF6!important;
          color: #fff!important;
          .selectCount{
            color: #C2B2FB!important;;
          }
        }
        ::-webkit-scrollbar {
          width: 4px;
          height: 4px;
          color:transparent;
        }

        /*定义滚动条轨道 内阴影+圆角*/
        ::-webkit-scrollbar-track {
          border-radius: 10px;
          background-color:transparent;
        }

        /*定义滑块 内阴影+圆角*/
        ::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background-color:transparent;
        }
      }
      .filter{
        width: 56px;
        height: 28px;
        background: #F7F7FF;
        box-shadow: -8rpx 0rpx 8rpx 0rpx rgba(40,0,179,0.06);
        position: absolute;
        right: 0;top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
        .more{
          width: 16px;
          height: 16px;
        }
      }
    }
    .list{
      width: 100%;
      box-sizing: border-box;
      padding: 12px 16px calc( env(safe-area-inset-bottom) + 12px);
      .listItem{
        width: 100%;
        box-sizing: border-box;
        padding: 12px;
        display: flex;
        overflow: hidden;
        position: relative;
        background: linear-gradient(45deg, #F7FCFF 0%, #F8F9FF 100%);
        border-radius: 6px;
        border: 1px solid #F6F6FF;
        margin-bottom: 12px;
        .left{
          width: 88px;
          height: 88px;
          border-radius: 8px;
          overflow: hidden;
          .logo{
            width: 100%;
            height: 100%;
          }
        }
        .right{
          flex:1;
          margin-left: 12px;
          .title{
            display: inline-block;
            width: 150px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: #051433;
            line-height: 22px;
            //margin-bottom: 4px;
          }
          .labelList{
            //margin-bottom: 8px;
            display: flex;
            flex-flow: nowrap;
            .labelItem{
              white-space: nowrap;
              display: inline-block;
              padding: 1px 8px;
              margin-right: 8px;
              background: linear-gradient(270deg, rgba(90, 199, 255, 0.15) 0%, rgba(90, 193, 255, 0.15) 100%);
              border-radius: 2px;
            }
          }
          .suggest{
            display: inline-block;
            box-sizing: border-box;
            width: 100%;
            //width: 80%;
            min-height: 25px;
            padding: 0 8px;
            background: linear-gradient(270deg, RGBA(222, 231, 255, 1) 0%, RGBA(241, 246, 255, 1) 100%);
            border-radius: 2px;
            margin-top: 10px;
            .value{
              font-size: 14px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #396CFF;
              line-height: 16px;
              margin-right: 4px;
            }
            .text{
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #8995B5;
              line-height: 18px;
            }
          }
        }
        .type{
          position: absolute;
          top: 0;right: 0;
          background: linear-gradient(135deg, #77A1FF 0%, #7967FF 100%);
          border-radius: 0rpx 10rpx 0rpx 10rpx;
          padding: 0 8px;
          display: flex;
          align-items: center;
          //border-image: linear-gradient(227deg, rgba(255, 255, 255, 1), rgba(234, 240, 255, 1), rgba(255, 255, 255, 0)) 1 1;
          .typeIcon{
            width: 14px;
            height: 14px;
          }
          .text{
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #E3DEFF;
            line-height: 18px;
            margin-left: 4px;
          }
          .number{
            font-size: 14px;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #FFFFFF;
            margin-left: 8px;
          }
        }
      }
      ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
        color:transparent;
      }

      /*定义滚动条轨道 内阴影+圆角*/
      ::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color:transparent;
      }

      /*定义滑块 内阴影+圆角*/
      ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color:transparent;
      }
    }
  }
  .meng{
    position: relative;
    width: 100vw;
    height: 100vh;
    top: -100vh;left: 0;
    .filterBox{
      width: calc(100vw - 32px);
      background: #FFFFFF;
      box-shadow: 0 0 30px 0 rgba(22,4,82,0.13);
      border-radius: 6px;
      box-sizing: border-box;
      padding: 12px;
      position: fixed;
      top: 0;left: 16px;
      .filterItem{
        z-index: 200;
        display: inline-block;
        background: #F3F3F9;
        border-radius: 4px;
        padding: 3px 10px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #5C5773;
        margin-right: 8px;
        margin-bottom: 8px;
        .count{
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9D99B0;
          margin-left: 2px;
        }
      }
      .bg{
        background: #683FF6!important;
        color: #fff!important;
        .selectCount{
          color: #C2B2FB!important;;
        }
      }
    }

  }

}
</style>
