<template>
  <div id="game-page" style="opacity: 1;" class="game">
    <div style="min-height: 100px; opacity: 1;" class="tabs-container">
      <GameHeader :gameInfo="gameInfo" :gameDetail="gameDetail"></GameHeader>
      <!-- <Tabs v-model:active="activeName" ref="tabs" v-show="gameInfo.id" @click-tab="onTabClick" @change="onTabChange" sticky lazy-render swipeable :offset-top="TabsHeight"
        title-active-color="rgb(34, 122, 255)"> -->
        <Tabs v-model:active="activeName" ref="tabs" v-show="gameInfo.id" @click-tab="onTabClick" @change="onTabChange" swipe-threshold="1000" sticky lazy-render :offset-top="TabsHeight" title-active-color="rgb(34, 122, 255)">
        <lazy-component>
        <!-- <Tab  class="acce-render" title="动态" name="GameSituationNm" key="situation" :to="common_data.isApp ? '' : '/schedule' + `${league_id ? `/${league_id}` : ''}` + '/game/'+gameInfo.id+'/situation'">
          <GameSituationNm v-if="gameInfo.id && !app_is_back" class="acce-render" :gameInfo="gameInfo" :gameLive="gameLive" :gameDetail="gameDetail" :activeName="activeName"></GameSituationNm>
        </Tab> -->
        <Tab title="动态" name="GameSituationNm" key="situation" :to="common_data.isApp ? '' : '/schedule' + `${league_id ? `/${league_id}` : ''}` + '/game/'+gameInfo.id+'/situation'">
          <GameSituationNm v-if="gameInfo.id && !app_is_back" :gameInfo="gameInfo" :gameLive="gameLive" :gameDetail="gameDetail" :activeName="activeName"></GameSituationNm>
        </Tab>
        <Tab class="acce-render" title="阵型" name="GameLineup" key="lineup" v-if="show_tab.lineup" :to="common_data.isApp ? '' :  '/schedule' + `${league_id ? `/${league_id}` : ''}` + '/game/'+gameInfo.id+'/lineup'">
          <GameLineup v-if="gameInfo.id && show_tab.lineup" class="acce-render" :gameInfo="gameInfo" :gameDetail="gameDetail" :activeName="activeName"></GameLineup>
        </Tab>
        <!-- <Tab title="分析" name="GameAnalysis" key="analysis" v-if="show_tab.analysis" :to="common_data.isApp ? '' : '/schedule' + `${league_id ? `/${league_id}` : ''}` +  '/game/'+gameInfo.id+'/analysis'">
          <GameAnalysis v-if="gameInfo.id && !app_is_back" :gameInfo="gameInfo" :activeName="activeName"></GameAnalysis>
        </Tab> -->
        <!-- <Tab class="acce-render" title="分析" name="GameAnalysisNm" key="analysis" v-if="show_tab.analysis" :to="common_data.isApp ? '' :  '/schedule' + `${league_id ? `/${league_id}` : ''}` + '/game/'+gameInfo.id+'/analysisnm'">
          <GameAnalysisNm v-if="gameInfo.id" class="acce-render" :gameInfo="gameInfo" :gameDetail="gameDetail" ></GameAnalysisNm>
        </Tab> -->
        <Tab title="分析" name="GameAnalysisNm" key="analysis" v-if="show_tab.analysis" :to="common_data.isApp ? '' : '/schedule' + `${league_id ? `/${league_id}` : ''}` + '/game/'+gameInfo.id+'/analysisnm'">
          <GameAnalysisNm v-if="gameInfo.id" :gameInfo="gameInfo" :gameDetail="gameDetail" ></GameAnalysisNm>
        </Tab>
        <Tab class="acce-render" title="方案" name="GameProposal" key="proposal" v-if="(show_tab.proposal || gameInfo.is_jingcai || gameInfo.is_beidan) && !common_data.isXiaoMiApp" :to="common_data.isApp ? '' :  '/schedule' + `${league_id ? `/${league_id}` : ''}` + '/game/'+gameInfo.id+'/proposal'">
          <GameProposal ref="GameProposalRef" class="acce-render"  v-show="yiqiu_id && !app_is_back && activeName == 'GameProposal' && !common_data.isXiaoMiApp" :yiqiu_id="yiqiu_id" :gameInfo="gameInfo" :gameDetail="gameDetail" ></GameProposal>
        </Tab>
        <!-- <Tab title="预测" name="GamePredict" key="predict" v-if="!(common_data.isIos && common_data.isApp) && !common_data.isXiaoMiApp" :to="common_data.isApp ? '' :  '/schedule' + `${league_id ? `/${league_id}` : ''}` + '/game/'+gameInfo.id+'/predict'">
          <GamePredict v-if="gameInfo.id" :yiqiu_id="yiqiu_id" :activeName="activeName"></GamePredict>
        </Tab> -->
        <!-- <Tab title="专家" name="GameExperts" key="experts" v-if="(show_tab.experts || gameInfo.is_jingcai || gameInfo.is_beidan) && !(common_data.isIos && common_data.isApp) && !common_data.isXiaoMiApp" :to="common_data.isApp ? '' :  '/schedule' + `${league_id ? `/${league_id}` : ''}` + '/game/'+gameInfo.id+'/experts'">
          <keep-alive>
            <GameExperts v-show="yiqiu_id && !app_is_back && activeName == 'GameExperts' && !common_data.isXiaoMiApp" :yiqiu_id="yiqiu_id" :activeName="activeName"></GameExperts>
          </keep-alive>
        </Tab> -->
        <Tab class="acce-render" title="情报" name="GameInfo" key="info" v-if="show_tab.info" :to="common_data.isApp ? '' :  '/schedule' + `${league_id ? `/${league_id}` : ''}` + '/game/'+gameInfo.id+'/info'">
          <GameInfo v-if="gameInfo.id" class="acce-render" :gameInfo="gameInfo"></GameInfo>
        </Tab>
        <Tab class="acce-render" title="红利" name="GameBonus" key="bonus" v-if="gameInfo.id && gameInfo.is_jingcai && !common_data.isQianHai" :to="common_data.isApp ? '' :  '/schedule' + `${league_id ? `/${league_id}` : ''}` + '/game/'+gameInfo.id+'/bonus'">
          <GameBonus v-if="gameInfo.id && gameInfo.is_jingcai && !common_data.isQianHai" class="acce-render" :sporttery_id="gameInfo.sporttery_match_id"></GameBonus>
        </Tab>
        <!-- <Tab title="指数" name="GameOdds" key="odds" v-if="gameInfo.id && show_tab.odds && userInfo?.is_test_user" :to=" '/schedule' + `${league_id ? `/${league_id}` : ''}` + '/game/'+gameInfo.id+'/odds'">
          <GameOdds v-if="gameInfo.id && !common_data.isQianHai" :yiqiu_id="gameInfo.id"></GameOdds>
        </Tab> -->
        <Tab class="acce-render" title="指数" name="GameOddsNm" key="odds" v-if="gameInfo.id && show_tab.odds && !common_data.isQianHai" :to="common_data.isApp ? '' :  '/schedule' + `${league_id ? `/${league_id}` : ''}` + '/game/'+gameInfo.id+'/odds'">
          <GameOddsNm v-if="gameInfo.id && !common_data.isQianHai" class="acce-render" :yiqiu_id="gameInfo.id" :activeName="activeName"></GameOddsNm>
        </Tab>
        <Tab class="acce-render" title="进球" name="GameGoal" key="goal" v-if="show_tab.analysis" :to="common_data.isApp ? '' :  '/schedule' + `${league_id ? `/${league_id}` : ''}` + '/game/'+gameInfo.id+'/goal'">
          <GameGoal v-if="gameInfo.id" class="acce-render" :gameInfo="gameInfo" :gameDetail="gameDetail" :activeName="activeName"></GameGoal>
        </Tab>
        <!-- <Tab title="聊球" name="GameTalk" key="talk" v-if="userInfo?.is_test_user && show_tab.talk" :to=" '/schedule' + `${league_id ? `/${league_id}` : ''}` + '/game/'+gameInfo.id+'/talk'">
          <GameTalk v-if="userInfo?.is_test_user && gameInfo.id" :yiqiu_id="gameInfo.id"></GameTalk>
        </Tab> -->
      </lazy-component>
      </Tabs>
    </div>
    <div v-if="!show_tab.talk" style="line-height: 50px;color: #c7c7c7;text-align: center;">—— 我是有底线的 ——</div>
  </div>
</template>

<script lang="ts">
import { ref, computed,onActivated, watch, onMounted, onDeactivated } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import GameHeader from './game/GameHeader.vue';
// import GameAnalysis from './game/GameAnalysis.vue';
import GameProposal from './game/GameProposal/index.vue';
import GameAnalysisNm from './game/GameAnalysisNm/index.vue';
import GameBonus from './game/GameBonus.vue';
import GameInfo from './game/GameInfo.vue';
import GameSituationNm from './game/GameSituationNm.vue';
import GameLineup from './game/GameLineup.vue';
// import GameTalk from './game/GameTalk.vue';
// import GamePredict from './game/GamePredict.vue';
// import GameExperts from './game/GameExperts.vue';
// import GameOdds from './game/GameOdds.vue';
import GameOddsNm from './game/GameOddsNm.vue';
import GameGoal from './game/GameGoal.vue';
import { Tab, Tabs } from 'vant';
import * as game_api from '@/api/game_api';
import * as nm_match_api from '@/api/nm_match_api';
// import * as user_api from '@/api/user_api';
import { default as moment } from 'moment';
export default {
  name: "Game",
  components: {
    GameHeader,
    // GameAnalysis,
    GameProposal,
    GameAnalysisNm,
    GameBonus,
    GameInfo,
    GameSituationNm,
    GameLineup,
    // GameTalk,
    // GamePredict,
    // GameExperts,
    GameOddsNm,
    GameGoal,
    Tab,
    Tabs,
  },
  setup () {
    const store: any = useStore();
    const route = useRoute();
    // const router = useRouter();
    // const GameProposalRef: any = ref();
    const tabs: any = ref();
    const game_info: any = ref({});
    const game_live: any = ref({});
    const game_detail:any = ref({});
    const yiqiu_id:any = ref(0);
    const league_id:any = ref(null);
    const game_info_session:any = ref(null);
    const userInfo:any = computed(() => store.state.userInfo);
    const app_is_back:any = computed(() => store.state.app_is_back);
    const gameDetail:any =  computed(() => {
      let data = JSON.parse(JSON.stringify(game_detail.value));
      if (!data) {
        return {};
      }
      return data;
    });
    const gameInfo: any = computed(() => {
      let data = JSON.parse(JSON.stringify(game_info.value));
      if (!data) {
        return {};
      }
      if (nm_live_message.value) {
        let nm_game_info = nm_live_message.value;
        if (nm_game_info.score) {
          let score: any = nm_game_info?.score;
          if((data.nm_status < 1 || data.nm_status >= 8) && score[1] != data.nm_status){
            return data;
          }
          data.nm_status = score[1];
          data.score = [score[2][0], score[3][0]];//比分
          data.half = [score[2][1], score[3][1]];//半场比分
          data.red_card = [score[2][2], score[3][2]];//红牌
          data.yellow_card = [score[2][3], score[3][3]];//黄牌
          data.corner_kicks = [score[2][4], score[3][4]];//角球
          data.score_all = [score[2][5], score[3][5]];//加时比分
        }
      }
      return data;
    });
    const gameLive: any = computed(() => {
      let data = JSON.parse(JSON.stringify(game_live.value));
      // if (!data) {
      //   return {};
      // }
      if (nm_live_message.value) {
        let nm_game_info = nm_live_message.value;
        if (nm_game_info?.score)
          data.score = nm_game_info?.score;
        if (nm_game_info?.stats)
          data.stats = nm_game_info?.stats;
        if (nm_game_info?.tlive)
          data.tlive = nm_game_info?.tlive;
        if (nm_game_info?.incidents)
          data.incidents = nm_game_info?.incidents;
      }
      return data;
    });
    const common_data: any = computed(() => store.state.common_data);
    //ws list中的game的game信息
    // const nm_find_game:any = computed(() => {  
    //     if(store.state?.match_list_all){
    //       let yiqiuid = route.query.yiqiuid || route.params.yiqiuid;
    //       let find_store_game = _.find(store.state.match_list_all, (item) => item?.id == yiqiuid);
    //       return find_store_game;
    //     }
    //     return null;
    //   });
    // ws live_list中的game信息
    const nm_live_message: any = computed(() => {  
      let message = store.state.nm_live_message; 
      if(game_info.value){
        let data = JSON.parse(JSON.stringify(game_info.value));
        if (message && message[data.id]) {
          return message[data.id];
        }
      }
      return null;
    });
    const activeName: any = ref('');
    const TabsHeight: any = ref('0px');
    const show_tab: any = ref({
      lineup: true,
      info: true,
      odds: true,
      proposal: true,
      // experts: true,
      analysis: true,
      talk: true,
    });
    const init_data = async () => {
      const yiqiuid:any = route.query.yiqiuid || route.params.yiqiuid;
      yiqiu_id.value = yiqiuid;
      league_id.value = route.query.league || route.params.league;
      const gameid = route.query.gameid;
      const infoid = route.query.infoid;
      try {
        //如果sessionStorage里有值，先获取其中的值
        // let match_detail:any = store.state.match_detail;
        // if(match_detail[`game_info_${yiqiu_id.value}`]){
        //   game_info_session.value = match_detail[`game_info_${yiqiu_id.value}`];
        // }

        // let find_store_game = nm_find_game.value;
        // if (store.state.match_list_all && find_store_game && find_store_game?.status) {
        //     find_store_game.host_name = find_store_game.host_short_name || find_store_game.host_name;
        //     find_store_game.away_name = find_store_game.away_short_name || find_store_game.away_name;
        //     find_store_game.nm_status = find_store_game.status;
        //     game_info.value = find_store_game;
        // } else {
            let result = await get_soccer_game_info_and_nm_match_detail({ yiqiuid: yiqiuid, gameid: gameid, infoid: infoid });
            let soccer_game_info = result?.get_soccer_game_info || {};
            formatGameInfo(soccer_game_info);
            game_detail.value = result.nm_match_detail;
        // }
        if (game_info.value?.id) {
          //show_tab.value.odds = game_info.value?.odds_count > 0;  //这里获取指数数据有问题
          show_tab.value.experts = game_info.value?.experts_count > 0;
          show_tab.value.lineup = game_info.value?.host_formation || game_info.value?.away_formation;
          show_tab.value.info = game_info.value?.info_count > 0;
          document.title = `${game_info.value?.host_name} VS ${game_info.value?.away_name}`;
          get_active_name(game_info.value);
        }
        
      } catch (error) {
        console.info(error);
      }

      try {
        // game_detail.value = await get_nm_match_detail(yiqiuid);
        await get_nm_match_live_detail(yiqiuid);
      } catch (error) {
        console.info(error)
      }
      store.commit('updateAppIsBack', false);
    };

    const handleGameInfo = (game: any) => {
      game.competition_short_name =
        game?.competition?.short_name || game?.competition?.name;
      game.host_photo = game?.host_team?.logo;
      game.away_photo = game?.away_team?.logo;
      game.host_name = game?.host_team?.short_name || game?.host_team?.name;
      game.away_name = game?.away_team?.short_name || game?.away_team?.name;
      if (game?.handicap) {
        let bar_left = 50 - (game?.handicap / 0.5) * 10;
        game.home_rate = bar_left;
        game.away_rate = 100 - bar_left;
      }
      game.nm_status = changeNmState(game.status); //转换为nm的比赛状态
      return game;
    };

    const init_game_data = async () => {
      const yiqiuid: any = route?.query?.yiqiuid || route?.params?.yiqiuid;
      yiqiu_id.value = yiqiuid;
      league_id.value = route?.query?.league || route?.params?.league;
      const gameid = route.query.gameid;
      const infoid = route.query.infoid;
      try {
        // 优先使用缓存数据，缓解内容空白加载
        let game_info_cache:any = store.state.game_info_cache;
        if(game_info_cache[`game_info_${yiqiu_id.value}`]){
          game_info.value = game_info_cache[`game_info_${yiqiu_id.value}`];
        }
        let game_detail_cache:any = store.state.game_detail_cache;
        if(game_detail_cache[`game_detail_${yiqiu_id.value}`]){
          game_detail.value = game_detail_cache[`game_detail_${yiqiu_id.value}`];
        }

        let result = await get_soccer_game_info_and_nm_match_detail({
          yiqiuid: yiqiuid,
          gameid: gameid,
          infoid: infoid,
        });
        let soccer_game_info = result?.get_soccer_game_info || {};
        game_info.value = handleGameInfo(soccer_game_info);
        game_detail.value = result?.nm_match_detail;
        
        if (game_info.value?.id) {
          //show_tab.value.odds = game_info.value?.odds_count > 0;  //这里获取指数数据有问题
          show_tab.value.experts = game_info.value?.experts_count > 0;
          show_tab.value.lineup =
            game_info.value?.host_formation || game_info.value?.away_formation;
          show_tab.value.info = game_info.value?.info_count > 0;
          document.title = `${game_info.value?.host_name} VS ${game_info.value?.away_name}`;
          get_active_name(game_info.value);
        }
        await get_nm_match_live_detail(yiqiuid);
      } catch (error) {
        console.info(error);
      } finally {
        store.commit("updateAppIsBack", false);
        const timer = setTimeout(() => {
          let game_info_cache = store.state.game_info_cache;
          let game_detail_cache = store.state.game_detail_cache;
          game_info_cache[`game_info_${yiqiu_id.value}`] = game_info.value;
          game_detail_cache[`game_detail_${yiqiu_id.value}`] = game_detail.value;
          store.commit('updateGameInfoCache', game_info_cache);
          store.commit('updateGameDetailCache', game_detail_cache);
          clearTimeout(timer);
        }, 500);
      }
    };

    const init_other = () => {
      try{
        // setTimeout(function(){
          // if(game_info.value?.id){
          //   get_active_name(game_info.value);
          // }
          TabsHeight.value = document.getElementById('header')?.offsetHeight;
          tabs?.value?.resize();
        // },500)
      }catch(e){
        console.info(`init other error`,e)
      }
    }

    // onBeforeMount(init_data);
    onMounted(init_other);

    // 缓存后再次被激活
    onActivated(() => {
      const yiqiuid:any = route?.query?.yiqiuid || route?.params?.yiqiuid;
      league_id.value = route?.query?.league || route?.params?.league;
      if(game_info.value.id == yiqiuid){
        console.info('访问相同赛事active激活');
        const timer = setTimeout(() => {
          init_game_data();
          clearTimeout(timer);
        }, 800);
      } else {
        init_game_data();
        // GameProposalRef?.value?.resetComponent?.();
      }
      init_other()
    });

    onDeactivated(() => {
      // alert(game_info.value.id)
      // game_info.value = {};
      // game_detail.value = {};
      // game_live.value = {};
    });

    const get_active_name = (game_info:any) => {
      if (route.name && route.name != 'Game') {
        activeName.value = route.name;
      }else{
        //开打的和打完的比赛都跳转 赛况
        //未开打的比 1，有专家的跳专家。 2，没有专家的跳分析
        if (game_info?.match_time && moment() > moment(game_info?.match_time) && (game_info?.nm_status > 1 && game_info?.nm_status <= 8)) {
          activeName.value = 'GameSituationNm';
        }else if((show_tab.value.proposal || game_info?.is_jingcai || game_info?.is_beidan) && !common_data.value.isXiaoMiApp){
          activeName.value = 'GameProposal';
        }else {
          activeName.value = 'GameAnalysisNm';
        }
      }
    }
    const get_soccer_game_info_and_nm_match_detail = async (args: any) => {
      if(!args?.yiqiuid||args?.yiqiuid=='0'){
        return {}
      }
      try {
        let result = await game_api.get_soccer_game_info_and_nm_match_detail({ yiqiu_id: args.yiqiuid, game_id: args.gameid, info_id: args.infoid });
        if (!result?.get_soccer_game_info?.id) {
          result.get_soccer_game_info = await game_api.get_soccer_game_info({ yiqiu_id: args.yiqiuid, game_id: args.gameid, info_id: args.infoid });
        }
        return result;
      } catch (error) {
        console.info("game_api.get_soccer_game_info_and_nm_match_detail", error);
      }
    };

    const get_nm_match_live_detail = async (yiqiu_id:any) => {
      if(!yiqiu_id||yiqiu_id=='0'){
        return {}
      }
      try {
        if(moment() > moment(game_info.value?.match_time) && moment() < moment(game_info.value?.match_time).add(150, 'minutes')){
          let live_detail = await nm_match_api.nm_match_live_detail({ yiqiu_id: yiqiu_id });
          if (live_detail) {
            game_live.value = live_detail;
          }
          if (live_detail && live_detail?.score && live_detail?.score[1] != 8) {
            game_info.value = {
              ...game_info.value,
              nm_status : live_detail?.score[1],//比赛状态
              time_stamp : live_detail?.score[4]//开球时间戳
            }
          }
        }
      } catch (error) {
        console.info("nm_match_api.nm_match_live_detail", error);
      }
    };


    // const get_nm_match_detail = async(yiqiu_id:any) => {
    //   try {
    //     let nm_result = await nm_match_api.nm_match_detail({yiqiu_id: yiqiu_id});
    //     return nm_result;
    //   } catch (error) {
    //     console.info("nm_match_api.nm_match_detail", error);
    //   }
    // };

    const formatGameInfo = (game: any) => {
      game.competition_short_name = game.competition?.short_name || game.competition?.name;
      game.host_photo = game?.host_team?.logo;
      game.away_photo = game?.away_team?.logo;
      game.host_name = game?.host_team?.short_name || game?.host_team?.name;
      game.away_name = game?.away_team?.short_name || game?.away_team?.name;
      if (game?.handicap) {
        let bar_left = 50 - (game?.handicap / 0.5) * 10;
        game.home_rate = bar_left;
        game.away_rate = 100 - bar_left;
      }
      // if(game.live_link){
      //   console.info('game.live_link',game.live_link);
      // }
      game.nm_status = changeNmState(game.status);//转换为nm的比赛状态
      //如果未开赛的情况就存到sessionStorage
      if(game.nm_status == 1){
        // let match_detail = store.state.match_detail;
        // if(!match_detail[`game_info_${game.id}`]){
        //   match_detail[`game_info_${game.id}`] = {
        //     id:game.id,
        //     away_name:game.away_name,
        //     host_name:game.host_name,
        //     away_photo:game.away_photo,
        //     host_photo:game.host_photo,
        //     competition_short_name:game.competition_short_name,
        //     nm_status:game.nm_status,
        //     home_rate:game.home_rate,
        //     away_rate:game.away_rate,
        //     host_rank:game.host_rank,
        //     away_rank:game.away_rank,
        //   }
        //   store.commit('updateMatchDetail', match_detail);
        // }
      }
      game_info.value = game;
    };

    const onTabClick = async (tabName: any) => {
      activeName.value = tabName.name;
      // router.push('/some-page');
    };

    const onTabChange = async () => {
      // console.info(tabName)
      get_active_name(game_info.value);
    };

    // const tong_ji = async (tabName: any) => {
    //   await user_api.toupiao_vote({
    //     lottery_id: 999,
    //     play_type: "live2_game",
    //     issue_name: `${moment().format('YYYY-MM-DD')}`,
    //     number: tabName,
    //     vote_type: 1
    //   });
    // };

    const changeNmState = (status: any) => {
      if (status == 0 || status == 17) {
        status = 1;
      } else if (status == 1 || status == 2 || status == 3) {
        status = status + 1;
      } else if (status == 4 || status == 10 || status == 12) {
        status = 8;
      } else if (status == 7 || status == 8 || status == 9) {
        status = 5;
      } else if (status == 13 || status == 14 || status == 15) {
        status = status - 4;
      } else if (status == 6) {
        status = 12;
      } else if (status == 15) {
        status = 13;
      } else if (status == null) {
        status = 1;
      }
      return status;
    };


    watch(() => route.query.yiqiuid || route.params.yiqiuid, (newVal: any) => {
      if(newVal){
        init_other();
        if (newVal != game_info.value.id) {
          // console.info('watch_id',newVal,game_info.value.id)
          // game_info.value = {};
          // game_detail.value = {};
          // game_live.value = {};
          init_game_data();
        }
      }
    }, { deep: true });

    return {
      tabs,
      gameInfo,
      gameLive,
      gameDetail,
      show_tab,
      common_data,
      activeName,
      TabsHeight,
      onTabChange,
      onTabClick,
      userInfo,
      app_is_back,
      yiqiu_id,
      league_id,
      game_info_session,
    };
  }
};
</script>

<style lang="scss">
#game-page {
  max-height: 100vh;
  overflow: scroll; 
  overflow: auto !important;
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch !important;
}
.van-tab {
  font-size: 16px;
}
.van-tabs__line {
  transition-property: none!important;
}
</style>