<template>
  <div class="main-box" @click="handleItemShow">
    <navbar title="数据中心">
      <template #rightBtn>
        <div class="btn-box">
          <span
            class="btn"
            :class="activeBtn == '0' ? 'activeBtn' : ''"
            @click="handleClick('0')"
            >零售部</span
          >
          <span
            class="btn"
            :class="activeBtn == '1' ? 'activeBtn' : ''"
            @click="handleClick('1')"
            >公司部</span
          >
        </div>
      </template>
    </navbar>
    <div class="wrapper">
      <div class="main-tab">
        <div
          class="tab"
          :class="
            activeTab == '0' || activeTab == '1' || activeTab == '2'
              ? 'activeTab'
              : ''
          "
        @click.stop="handleShowItem1">
          {{tableName}} <van-icon name="arrow-down" />
          <div class="down-item-box" v-if="showItem1">
            <div class="item" :class="activeTab == '0' ? 'activeItem' : ''" @click="handleClickTab('0','行政区域报表')">
              行政区域报表
            </div>
            <div class="item" :class="activeTab == '1' ? 'activeItem' : ''" @click="handleClickTab('1','自建名单')">
              自建名单
            </div>
            <div class="item" :class="activeTab == '2' ? 'activeItem' : ''" @click="handleClickTab('2','自绘地图')">
              自绘地图
            </div>
          </div>
        </div>
        <div class="tab" :class="activeTab == '3' ? 'activeTab' : ''" @click.stop="handleShowItem2">
          {{hotMapName}} <van-icon name="arrow-down" />
          <div class="down-item-box" v-if="showItem2">
            <div class="item" :class="activeTab == '3' ? 'activeItem' : ''" @click="handleClickTab('3','行政区域热力图')">
              行政区域热力图
            </div>
          </div>
        </div>
        <div class="tab" :class="activeTab == '4' ? 'activeTab' : ''" @click="handleClickTab('4')">
          走访热力图
        </div>
      </div>
      <!-- 报表 -->
      <GridTable :activeTab="activeTab" :activeBtn="activeBtn" v-if="activeTab == '0' || activeTab == '1' || activeTab == '2'" />
      <!-- 网格热力图 -->
      <GridHotMap :activeBtn="activeBtn" v-if="activeTab == '3'"/>
      <!-- 走访热力图 -->
      <VisitHotMap v-if="activeTab == '4'"/>
      <div></div>
    </div>
  </div>
</template>
<script>
import navbar from "../../components/navbar/navbar.vue";
import GridTable from './component/gridTable.vue';
import GridHotMap from './component/gridHotMap.vue';
import VisitHotMap from './component/visitHotMap.vue';
import {} from "@/service/api/myGrid.js";

import {
  Tab,
  Tabs,
  Icon,
  Button,
  Search,
  RadioGroup,
  Radio,
  List,
  PullRefresh,
  Dialog,
  Toast,
} from "vant";
export default {
  data() {
    return {
      activeBtn: "0",
      activeTab: "0",
      showItem1: false,
      showItem2: false,
      tableName:'行政区域报表',
      hotMapName:'行政区域热力图',
    };
  },
  filters: {},
  components: {
    navbar: navbar,
    VanTab: Tab,
    VanTabs: Tabs,
    VanIcon: Icon,
    VanButton: Button,
    VanSearch: Search,
    VanRadioGroup: RadioGroup,
    VanRadio: Radio,
    VanList: List,
    VanPullRefresh: PullRefresh,
    VanToast: Toast,
    [Dialog.Component.name]: Dialog.Component,
    GridTable:GridTable,
    GridHotMap:GridHotMap,
    VisitHotMap:VisitHotMap,
  },

  created() {
     const str1 = sessionStorage["gridCustomItem"] || "{}";
    const str2 = sessionStorage["gridTotalInfo"] || "{}";
    const itemJson1 = JSON.parse(str1);
    const itemJson2 = JSON.parse(str2);
    if(itemJson1.activeTab || itemJson2.activeTab){
      this.activeBtn = itemJson1.activeBtn || itemJson2.activeBtn;
      this.activeTab = itemJson1.activeTab || itemJson2.activeTab;
      if(this.activeTab == '0'){
        this.tableName = '行政区域报表'
      }else if(this.activeTab == '1'){
        this.tableName = '自建名单'
      }else if(this.activeTab == '2'){
        this.tableName = '自绘地图'
      }else if(this.activeTab == '3'){
        this.hotMapName = '行政区域热力图'
      }
      sessionStorage.setItem('gridCustomItem','');
      sessionStorage.setItem('gridTotalInfo','');
    }

  },
  mounted() {
    
  },
  methods: {
    handleClick(btn) {
      this.activeBtn = btn;
    },
    handleItemShow(){
      if(this.showItem1 || this.showItem2){
        this.showItem1=false;
        this.showItem2=false;
      }
    },
    handleClickTab(type,name){
      this.activeTab=type;
      if(type == '0' || type == '1' || type == '2'){
        this.tableName = name;
      }else if(type == '3'){
        this.hotMapName = name;
      }
    },
    handleShowItem1(){
      this.showItem1 = !this.showItem1;
      this.showItem2=false;
    },
    handleShowItem2(){
      this.showItem2 = !this.showItem2;
      this.showItem1=false;
    },
  },
};
</script>
<style lang="less" scoped>
.main-box {
  .wrapper {
    padding-top: 46px;
    min-height: 100vh;
    font-size: 16px;
    padding-bottom: 60px;
  }
  .btn-box {
    position: relative;
    background: #ededef;
    border-radius: 10px;
    .btn {
      display: inline-block;
      width: 64px;
      height: 24px;
      font-size: 14px;
      border-radius: 14px;
      line-height: 24px;
    }
    .activeBtn {
      background: #1990ff;
      color: #fff;
    }
  }
  .main-tab {
    display: flex;
    justify-content: space-between;
    background: #fff;
    .tab {
      height: 40px;
      line-height: 40px;
      font-size: 12px;
      color: rgba(0, 0, 0, 0.65);
      padding: 0 5px;
      width: 30%;
      text-align: center;
      position: relative;
      .down-item-box {
        position: absolute;
        z-index: 300;
        background: #fff;
        width: 100%;
        min-height: 125px;
        border-radius: 8px;
        padding-left: 10px;
        // padding-bottom: 20px;
        .item {
          text-align: left;
          color: rgba(0, 0, 0, 0.65);
          height: 35px;
          line-height: 35px;
        }
        .activeItem {
          color: #4682ff;
        }
      }
    }
    .activeTab {
      color: #4682ff;
      border-bottom: 2px solid #4682ff;
      font-weight: 600;
    }
  }
}
</style>