<template>
  <div class="live-header" :style="`padding-top:${common_data.appHeight}px;`">
    <div id="live-header">
      <div id="live-head" :style="`padding-top:${common_data.appHeight}px;z-index:100`">
        <div class="tool-left">
          <span v-if="common_data.isApp" class="back" @click="backHome"><svg-icon iconName="back"></svg-icon></span>
          <span style="display: none" @click="showFilter = !showFilter"><svg-icon iconName="shaixuan"></svg-icon>筛选</span>
        </div>
        <div class="live-head-title">赛事比分</div>
        <div class="tool-right">
          <span @click="showSetUp = !showSetUp"><svg-icon iconName="shezhi"></svg-icon></span>
        </div>
      </div>
      <van-popup z-index="99" overlay-class="van-overlay-set" round v-model:show="showSetUp" position="top">
        <div class="set-box">
          <!-- 提示设置 -->
          <van-row class="set-box-label">提示设置</van-row>
          <van-row class="set-box-item">
            <span>提示声音</span>
            <van-switch size="large" active-color="#FF1818" inactive-color="#E1E1E1" v-model="set_config.switch" />
          </van-row>
          <!-- 提示类型 -->
          <van-row class="set-box-label">提示类型</van-row>
          <van-row class="set-box-item">
            <span>进球</span>
            <van-switch size="large" active-color="#FF1818" inactive-color="#E1E1E1" v-model="set_config.goal" />
          </van-row>
          <van-row class="set-box-item">
            <span>红牌</span>
            <van-switch size="large" active-color="#FF1818" inactive-color="#E1E1E1" v-model="set_config.red" />
          </van-row>
          <van-row class="set-box-item">
            <span>黄牌</span>
            <van-switch size="large" active-color="#FF1818" inactive-color="#E1E1E1" v-model="set_config.yellow" />
          </van-row>
          <!-- 提示范围 -->
          <van-row class="set-box-label">提示范围</van-row>
          <van-row class="set-box-item">
            <span class="type-btn" :class="set_config.type == 'all' ? 'sel' : ''" @click="set_config.type = 'all'">全部比赛</span>
            <span class="type-btn" :class="set_config.type == 'jz' ? 'sel' : ''" @click="set_config.type = 'jz'">竞足</span>
            <span class="type-btn" :class="set_config.type == 'follow' ? 'sel' : ''" @click="set_config.type = 'follow'">关注比赛</span>
          </van-row>
        </div>
      </van-popup>

      <van-popup z-index="101" overlay-class="van-overlay-filter" v-model:show="showFilter" position="left">
        <div class="filter-box" :style="`top:${common_data.appHeight}px;`">
          <div class="filter-top">
            <div class="filter-title"><span @click="showFilter = !showFilter"><svg-icon iconName="back"></svg-icon></span>赛事筛选</div>
            <tabs v-model:active="tabFilterName" swipeable :ellipsis="false" title-active-color="#333333" title-inactive-color="#aaaaaa">
              <tab name="全部" title="全部" />
              <tab name="一级" title="一级" />
              <tab name="竞足" title="竞足" />
              <tab name="单场" title="单场" />
            </tabs>
          </div>
          <div class="filter-center">
            <div class="filter-content">
              <div class="filter-item" v-for="(item, key) in competitionFilterAll" :key="key" v-show="itemFilterShow(item)">
                <div class="filter-item-title">{{ key }}</div>
                <div class="filter-item-box">
                  <div v-for="(item2) in item" v-show="filterShow(item2)" :key="item2.name">
                    <span>{{ item2.name }}</span>
                    <span v-if="tabFilterName == '全部'">{{ item2.num }}</span>
                    <span v-if="tabFilterName == '一级'">{{ item2.yj_num }}</span>
                    <span v-if="tabFilterName == '竞足'">{{ item2.jz_num }}</span>
                    <span v-if="tabFilterName == '单场'">{{ item2.dc_num }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="indexBar"><span v-for="(item, index) in indexList" :key="item" v-html="item" :class="index == 0 ? 'sel' : ''"></span></div>
          </div>
          <div class="filter-bottom"></div>
        </div>
      </van-popup>

      <Row id="live-nav" align="center">
        <Col span="24">
        <tabs v-model:active="tabName" swipeable :ellipsis="false" title-active-color="#333333" title-inactive-color="#aaaaaa">
          <tab name="全部" title="全部" to="/" />
          <tab name="赛程" title="赛程" to="/live_fixture" />
          <tab name="赛果" title="赛果" to="/live_result" />
          <tab name="关注" to="/live_attention">
            <template #title>
              <span v-if="badge > 0">
                <Badge :content="badge">关注</Badge>
              </span>
              <span v-else>关注</span>
            </template>
          </tab>
        </tabs>
        </Col>
      </Row>
      <template v-if="!['/live_attention'].includes(route.path)">
        <div class="fitter-box">
          <div class="fitter-type">
            <template v-for="item in fitter" :key="item.value">
              <span :class="item.value == fitterIndex ? 'choice' : ''" @click="changeFitterIndex(item.value)">
                {{ item.label }}
              </span>
            </template>
          </div>
          <template v-if="['/live_fixture', '/live_result'].includes(route.path)">
            <div class="fitter-time">
              <span class="svg-box" @click="changeDate(-1)"><svg-icon iconName="zuo" :style="{ color: getColor(true) }"></svg-icon></span>
              <span @click="is_show_calendar = true">{{ formatFitterTime(fitterTime) }}</span>
              <span class="svg-box" @click="changeDate(1)"><svg-icon iconName="you" :style="{ color: getColor(false) }"></svg-icon></span>
            </div>
            <Calendar v-model:show="is_show_calendar" color="#da2323" :default-date="new Date(fitterTime)" :min-date="minDate" :max-date="maxDate"
              @confirm="changeFitterTime" />
          </template>
        </div>
      </template>
      <template v-else>
        <div class="fitter-time-box">
          <div class="fitter-type">
            <template v-for="(item, i) in fitter_time" :key="item.value">
              <div :class="item.value == attentionIndex ? 'choice' : ''" @click="changeAttentionIndex(item.value)">
                <span>{{ moment(item.time).format('MM/DD') }}</span>
                <span>{{ i == 4 ? '今天' : '星期' + ['日', '一', '二', '三', '四', '五', '六'][moment(item.time).day()] }}</span>
              </div>
            </template>
          </div>
        </div>
      </template>
    </div>
    <div class="reserve-box" :class="!['/live_attention'].includes(route.path) ? '' : 'attention-box'"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, computed, defineProps } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import moment from 'moment';
import { default as _ } from 'lodash';
import { Tab, Tabs, Col, Row, Calendar, Badge } from 'vant';
import { events } from '@/until/eventBus';
import { getWeek } from '@/until/index';
import { nm_competition_list } from '@/api/live_api';

const route = useRoute();
const store = useStore();
const bus = events;
const common_data = ref(store.state.common_data);

const backHome = () => {
  let origin = (window as any).location.origin.includes('localhost') ?
    'https://app-test.ydniu.com/' : (window as any).location.origin;
  (window as any).location.href = origin + (common_data.value.isApp ? '?ydn_back' : '');
};

const fitter = [
  { label: '重要', value: 4 },
  { label: '全部', value: 0 },
  { label: '竞足', value: 1 },
  { label: '单场', value: 2 },
  { label: '十四场', value: 3 }
];
const fitter_time: any = ref([]);

const props: any = defineProps({
  fitterTimeFixture: {
    type: Object,
    required: false,
    default: () => { return {}; }
  },
  fitterTimeResult: {
    type: Object,
    required: false,
    default: () => { return {}; }
  }
});

// tab选择
const tabName: any = ref('全部');
const getTabName = (value: any) => {
  let name = '';
  switch (value) {
    case '/':
      name = '全部';
      break;
    case '/live_fixture':
      name = '赛程';
      break;
    case '/live_result':
      name = '赛果';
      break;
    case '/live_attention':
      name = '关注';
      break;
    default:
      name = '全部';
      break;
  }
  return name;
};

// 赛事类型
const fitterIndex: any = ref(4);
const changeFitterIndex = (value: any) => {
  fitterIndex.value = value;
  bus.emit('changeFitterIndex', fitterIndex);
};

// 日期
const defaultTimeDay = moment(store.state.server_time);
const is_show_calendar: any = ref(false);
const minDate: any = computed(() => { // 最小时间
  let time = {};
  if (route.path == '/live_fixture') time = moment(defaultTimeDay).add(1, 'days').toDate();
  else if (route.path == '/live_result') time = moment(defaultTimeDay).subtract(30, 'days').toDate();
  return time;
});
const maxDate: any = computed(() => { // 最大时间
  let time = {};
  if (route.path == '/live_fixture') time = moment(defaultTimeDay).add(7, 'days').toDate();
  else if (route.path == '/live_result') time = moment(defaultTimeDay).toDate();
  return time;
});
const fitterTimeFixture: any = computed(() => { // 赛程时间
  let date = props.fitterTimeFixture;
  return JSON.stringify(date) != '{}' ? date : moment(defaultTimeDay).add(1, 'days');
});
const fitterTimeResult: any = computed(() => { // 赛果时间
  let date = props.fitterTimeResult;
  return JSON.stringify(date) != '{}' ? date : moment(defaultTimeDay);
});
const fitterTime: any = ref(moment(defaultTimeDay));
const getFitterTime = (value: any) => {
  let time = null;
  if (value == '/live_fixture') time = fitterTimeFixture.value;
  else if (value == '/live_result') time = fitterTimeResult.value;
  else time = moment(defaultTimeDay).toDate();
  return time;
};
const formatFitterTime = (value: any) => {
  let day = moment(value).format('MM/DD');
  let week = getWeek(value);
  return `${day} ${week}`;
};
const changeFitterTime = (value: any) => {
  fitterTime.value = value;
  let type = route.path == '/live_fixture' ? 0 : 1;
  bus.emit('changeFitterTime', { date: value, type });
  is_show_calendar.value = false;
};
const changeDate = (add: any) => {
  let type = route.path == '/live_fixture' ? 0 : 1;
  let time = moment(fitterTime.value).add(add, 'days');
  if (type) { // 赛果
    let startDate = moment().add(-31, 'days').format('YYYY-MM-DD');
    let endDate = moment().add(1, 'days').format('YYYY-MM-DD');
    if (!moment(moment(time).format('YYYY-MM-DD')).isBetween(startDate, endDate)) return;
  } else { // 赛程
    let startDate = moment().format('YYYY-MM-DD');
    let endDate = moment().add(8, 'days').format('YYYY-MM-DD');
    if (!moment(moment(time).format('YYYY-MM-DD')).isBetween(startDate, endDate)) return;
  }
  fitterTime.value = time;
  bus.emit('changeFitterTime', { date: fitterTime.value, type });
};

const getColor = (is_left: any) => {
  let colorName = '#333333';
  let type = route.path == '/live_fixture' ? 0 : 1;
  let time = moment(fitterTime.value).format('YYYY-MM-DD');
  if (is_left) {
    let time1 = moment().add(type ? -30 : 1, 'days').format('YYYY-MM-DD');
    if (moment(time) <= moment(time1)) colorName = 'rgb(221, 221, 221)';
  } else {
    let time1 = moment().add(type ? 0 : 7, 'days').format('YYYY-MM-DD');
    if (moment(time) >= moment(time1)) colorName = 'rgb(221, 221, 221)';
  }
  return colorName;
};

// 关注
const attentionIndex: any = ref(4);
const changeAttentionIndex = (value: any) => {
  attentionIndex.value = value;
  bus.emit('changeAttentionIndex', value);
};
// 关注数量
const badge = computed(() => {
  let key = defaultTimeDay.format('YYYY-MM-DD');
  let badge = 0;
  let attention = _.clone(store.state.match_list_attention[key]) || [];
  attention.forEach((item: any) => {
    if ([1, 2, 3, 4, 5, 6, 7].includes(item.status)) badge++;
  });
  return badge;
});

// 设置
const showSetUp: any = ref(false);
const set_config: any = ref({
  switch: true,
  goal: true,
  red: true,
  yellow: true,
  type: 'all'
});
watch(set_config, (newVal: any) => {
  store.commit('updateSetConfig', newVal);
}, { deep: true });
watch(() => route.path, (newVal: any) => {
  if (route.path.includes('live_')) {
    tabName.value = getTabName(newVal);
    fitterTime.value = getFitterTime(newVal);
  }
});

// 筛选
const showFilter: any = ref(false);
const tabFilterName: any = ref("全部");
const competition_cache: any = ref([]);
const indexList: any = [
  `<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>ic_remen备份</title>
    <g id="赛事比分" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <g id="赛事比分/筛选" transform="translate(-345.000000, -226.000000)">
        <g id="ic_remen备份" transform="translate(345.000000, 226.000000)">
          <rect id="矩形" fill="#D8D8D8" opacity="0" x="0" y="0" width="12" height="12"></rect>
          <path d="M4.96263305,11 C4.96263305,11 0.527883049,10.0245 2.51000806,5.183 C2.51000806,5.183 2.96000805,5.721 2.89813305,5.979875 C2.89813305,5.979875 3.25088305,4.75787501 4.01225805,4.027875 C4.66600805,3.40062501 5.33025805,1.63725 4.71763305,1 C4.71763305,1 7.75200805,1.63725 8.08975804,4.82475 C8.08975804,4.82475 8.47788304,3.809125 9.27475804,3.70875 C9.27475804,3.70875 9.02975804,4.26675 9.27475804,5.10375 C9.27475804,5.10375 11.788258,9.40625 7.45650805,10.8605 C7.45650805,10.8605 8.75500804,9.38612501 6.00125805,6.856 C6.00125805,6.856 5.35200805,8.211 4.96375805,8.6885 C4.96263305,8.68975001 3.87950804,9.904 4.96263305,11 Z" id="路径"
            stroke="currentColor" stroke-linejoin="round" fill-rule="nonzero">
          </path>
        </g>
      </g>
    </g>
  </svg>`,
  'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
  'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
];
const competitionFilterAll = computed(() => {
  let allFilter: any = { hot: [] };
  for (let a = 0; a < competition_cache.value.length; a++) {
    let aItem = competition_cache.value[a];
    let item = { num: 0, yj_num: 0, jz_num: 0, dc_num: 0 };
    for (let b = 0; b < store.state.match_list_all.length; b++) {
      let bItem = store.state.match_list_all[b];
      if (aItem.yiqiu_id === bItem.yiqiu_competition_id) {
        item.num++;
        if (bItem.is_zucai) item.jz_num++;
        if (bItem.is_beidan) item.dc_num++;
        if (aItem.level === 1) item.yj_num++;
      }
    }
    if (item.num < 1) continue;
    let key = aItem.first_letter;
    if (!allFilter[key]) allFilter[key] = [];
    allFilter[key].push({
      ...item,
      id: aItem.yiqiu_id,
      name: aItem.yiqiu_short_name || aItem.area_name || aItem.yiqiu_name,
      islevel: aItem.level === 1 ? true : false
    });
    if (!aItem.is_hot) continue;
    allFilter['hot'].push({
      ...item,
      id: aItem.yiqiu_id,
      name: aItem.yiqiu_short_name || aItem.area_name || aItem.yiqiu_name,
      islevel: aItem.level === 1 ? true : false,
      hot_order: aItem.hot_order
    });
  }
  return allFilter;
});

const itemFilterShow = function (item: any) {
  let show = false;
  let field: any;
  switch (tabFilterName.value) {
    case '全部':
      field = 'num';
      break;
    case '一级':
      field = 'yj_num';
      break;
    case '竞足':
      field = 'jz_num';
      break;
    case '单场':
      field = 'dc_num';
      break;
  }
  for (let i = 0; i < item.length; i++) {
    if (item[i][field] > 0) {
      show = true;
      break;
    }
  }
  return show;
};
const filterShow = function (item: any) {
  let show = false;
  switch (tabFilterName.value) {
    case '全部':
      show = item.num > 0;
      break;
    case '一级':
      show = item.yj_num > 0;
      break;
    case '竞足':
      show = item.jz_num > 0;
      break;
    case '单场':
      show = item.dc_num > 0;
      break;
  }
  return show;
};


onMounted(async () => {
  tabName.value = getTabName(route.path);
  store.commit('updateLivePath', route.path);
  fitterTime.value = getFitterTime(route.path);
  for (let i = 0; i < 5; i++) {
    fitter_time.value.push({
      value: i,
      time: moment().subtract((4 - i), 'days')
    });
  }
  let competition_list = await nm_competition_list();
  if (competition_list?.data?.data?.nm_competition_list) {
    competition_cache.value = competition_list.data.data.nm_competition_list;
  }
});
</script>

<style lang="scss">
.live-header {
  position: relative;

  #live-header {
    z-index: 9998;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 769Px;
    min-width: 320Px;
    margin: 0 auto;
    background-color: #ffffff;
    box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);

    #live-head {
      position: relative;
      width: 100%;
      line-height: 44px;
      background: #ffffff;

      .tool-left {
        display: flex;
        cursor: pointer;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 44px;

        span {
          padding: 12px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          line-height: 20px;

          svg {
            display: inline-block;
          }
        }
      }

      .tool-right {
        display: flex;
        cursor: pointer;
        position: absolute;
        right: 0;
        bottom: 0;
        height: 44px;

        span {
          padding: 12px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          line-height: 20px;

          svg {
            display: inline-block;
          }
        }
      }

      div.live-head-title {
        flex: 1;
        color: #333333;
        font-size: 18px;
        font-weight: 500;
      }

      // span {
      //   cursor: pointer;
      //   position: absolute;
      //   bottom: 0;
      //   height: 44px;
      //   padding: 12px;
      //   display: flex;
      //   justify-content: center;
      //   align-items: center;
      //   font-size: 14px;
      //   line-height: 20px;

      //   svg {
      //     display: inline-block;
      //   }
      // }

      // span.back svg {
      //   color: #333333;
      // }

      // span:first-child {
      //   left: 0;
      // }

      // span:last-child {
      //   right: 0;
      // }
    }

    .fitter-box {
      width: 100%;
      height: 36px;
      padding: 0 4px;
      display: flex;
      justify-content: center;
      align-items: center;

      .fitter-type {
        flex: 1;
        max-width: 90%;
        height: 28px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-radius: 4px;
        background-color: #f5f5f5;

        span {
          cursor: pointer;
          padding: 0 6px;
          margin: 0;
          width: auto;

          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          font-weight: 400;
          line-height: 22px;

          :nth-child(n+3) {
            width: 60px;
          }
        }

        span.choice {
          color: #da2323;
          font-weight: bold;
          border-radius: 4px;
          background-color: #ffffff;
          box-shadow: 0px 1px 4px 0px rgba(218, 35, 35, 0.3);
        }
      }

      .fitter-time {
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 5px;
        line-height: 28px;
        background: #f5f5f5;
        border-radius: 4px;

        .svg-box {
          padding: 0 5px;

          svg {
            width: 12px;
            height: 12px;
          }
        }

        span {
          font-size: 14px;
        }
      }
    }

    .fitter-time-box {
      width: 100%;
      height: 58px;
      padding: 0 5px;
      display: flex;
      justify-content: center;
      align-items: center;

      .fitter-type {
        flex: 1;
        max-width: 90%;
        height: 50px;
        padding: 0 4px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-radius: 8px;
        background-color: #f5f5f5;

        div {
          cursor: pointer;
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          margin-right: 4px;

          span:first-child {
            padding-top: 4px;
            color: #aaaaaa;
            font-size: 12px;
            line-height: 17px;
          }

          span:last-child {
            padding-bottom: 4px;
            color: #333333;
            font-size: 12px;
            line-height: 17px;
          }

        }

        div:last-child {
          margin-right: 0;
        }

        div.choice {
          border-radius: 4px;
          background-color: #ffffff;
          box-shadow: 0px 1px 4px 0px rgba(218, 35, 35, 0.3);

          span:first-child {
            color: #da2323;
          }

          span:last-child {
            color: #da2323;
            font-weight: bold;
          }
        }
      }
    }

    .set-box {
      padding: 0 0 28px 0;
      color: #333333;

      .set-box-label {
        padding: 0 16px;
        font-size: 16px;
        font-weight: bold;
        text-align: left;
        line-height: 36px;
      }

      .set-box-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
        font-size: 15px;
        line-height: 36px;

        .type-btn {
          cursor: pointer;
          width: 26%;
          font-size: 14px;
          border-radius: 4px;
          background: #F5F5F5;
        }

        .type-btn.sel {
          color: #ffffff;
          background: #FF1818;
        }
      }

    }
  }

  .reserve-box {
    width: 100%;
    height: 124px;
  }

  .attention-box {
    width: 100%;
    height: 146px;
  }

  .van-tab {
    z-index: 2;
    font-size: 16px;
  }

  .van-tab--active {
    font-size: 18px;
  }

  .van-tabs__nav--line {
    padding-bottom: 0 !important;
  }

  .van-tabs__line {
    z-index: 1;
    width: 24px;
    height: 4px;
    bottom: 12px;
    border-radius: 0;
    background: linear-gradient(90deg, #DA2323 0%, #F8F6F6 100%);
  }

  .van-overlay,
  .van-popup--bottom {
    right: 0;
    max-width: 769Px;
    min-width: 320Px;
    margin: 0 auto !important;
  }

  .van-overlay-set,
  .van-popup--top {
    top: 45px;
    right: 0;
    max-width: 769Px;
    min-width: 320Px;
    margin: 0 auto !important;
  }

  .van-popup--left {
    left: auto;
    max-width: 769Px;
    min-width: 320Px;
    width: 100%;
    height: 100%;
    margin: 0 auto !important;
    background: initial;
    overflow: hidden;
  }

  .filter-box {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #F8F6F6;
  }

  .filter-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #ffffff;

    .filter-title {
      color: #333333;
      font-size: 18px;
      font-weight: 500;
      line-height: 44px;
      background-color: #ffffff;

      span {
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 12px;
      }
    }

    .van-tabs__wrap {
      height: 34px;

      .van-tabs__line {
        bottom: 6px;
      }
    }
  }

  .filter-center {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 44px;
    width: 100%;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    background: #ffffff;

    .filter-content {
      max-height: 100%;
      overflow-y: auto;
      padding-right: 30px;

      .filter-item {

        .filter-item-title {
          padding: 5px 10px 0 10px;
          color: #333333;
          font-size: 14px;
          font-weight: bold;
          line-height: 30px;
          text-align: left;
        }

        .filter-item-box {
          padding: 0 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;

          div {
            margin-top: 5px;
            width: 30%;
            padding: 0 5px;
            border-radius: 4px;
            background: #F8F6F6;
            border: 1px solid #F8F6F6;
            display: flex;
            justify-content: space-between;
            align-items: center;

            span {
              color: #777777;
              font-size: 14px;
              line-height: 26px;
            }
          }

          div.sel {
            background: #FFF7F7;
            border: 1px solid #FF1818;

            span {
              color: #FF1818;
              font-size: 14px;
            }
          }
        }
      }
    }

    .indexBar {
      z-index: 100;
      width: 20px;
      padding: 4px 0;
      border-radius: 14px;
      background: #F8F6F6;
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 50%;
      right: 10px;
      -webkit-transform: translate(0, -50%);
      -moz-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      -o-transform: translate(0, -50%);
      transform: translate(0, -50%);

      span {
        cursor: pointer;
        color: #777777;

        svg {
          width: 16px;
          height: 16px;
          margin-top: -2px;
          vertical-align: middle;
        }
      }

      span.sel {
        color: #da2323;
        font-weight: bold;
      }
    }
  }

  .filter-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44px;
    background: #ffffff;
  }
}
</style>