<template>
  <div class="customer-details">
    <!-- <v-nav :navpath="navpath" /> -->
    <div class="customer-contain-wrap" v-loading="fullscreenLoading">
      <div class="customer-info-item" v-for="section in customerInfoItemList" :key="section">
        <div class="info-item-header">
          <h2 class="item-title">
            <i class="vertical-line" /><span>{{ section.title }}</span>
          </h2>
          <el-button type="text" v-if="section.name==='basic' && getCodeAuth('memberEditInfo')"
            @click="baseinfoDialogVisible=true" :limit-code="getCode('memberEditInfo')">
            编辑
          </el-button>
        </div>
        <div :class="[section.class]">
          <!-- 基本信息 -->
          <template v-if="section.name==='basic'">
            <div class="flex-wrap max1600">
              <div class="left">
                <div class="user-avatar" v-loading="imgLoading">
                  <div class="tag" v-if="member.frozenStatus">
                    冻结
                  </div>
                  <div class="maskOperation">
                    <!-- <span @click="updateImgUrl">刷新头像</span><i class="vertical-line" /> -->
                    <router-link tag="span" :to="`/photo-album?memberId=${memberId}&from=1`">
                      客户相册
                    </router-link>
                  </div>
                  <el-image
                    fit="cover"
                    class="user-avatar-img"
                    :src="member.thirdImgUrl ? member.thirdImgUrl : defaultImg"
                  >
                    <div slot="error" class="image-slot">
                      <img width="120" :src="require('../../../static/img/broke-img.png')" alt="">
                    </div>
                  </el-image>
                </div>
              </div>
              <div class="right">
                <el-descriptions
                  :column="3"
                  labelClassName="info-lebel"
                  contentClassName="info-content"
                >
                  <el-descriptions-item label="姓名">
                    {{ member.memberName||'--' }}<span
                      class="gray-font"
                    >（昵称:{{ member.thirdNickname||'--' }}）</span>
                    <el-tag type="success" v-if="member.customerType" class="tag">
                      {{ member.customerType|customerTypeFilter }}
                    </el-tag>
                    <span title="取消关注公众号" v-if="member.status==0" style="margin-right: 6px;">
                      <icon-svg icon-class="icon-weixinquguan" class="status-icon" />
                    </span><i
                      :title="member.status==1?'已关注公众号':'未关注公众号'"
                      v-if="member.status==1"
                      class="iconfont status-icon icon-weixin1 follow"
                    /><i
                      title="已使用小程序"
                      v-if="member.wxStatus==1"
                      class="iconfont status-icon icon-xiaochengxu1"
                    />
                  </el-descriptions-item>
                  <el-descriptions-item label="性别">
                    {{ member.memberGender|genderFilter }}
                  </el-descriptions-item>
                  <el-descriptions-item :label="`出生日期（${member.birthType==0?'农历':'阳历'}）`">
                    {{ member.memberBirthdayValue||'--' }}
                  </el-descriptions-item>
                  <el-descriptions-item label="手机号">
                    {{ member.phoneNumber ||'--' }}
                  </el-descriptions-item>
                  <el-descriptions-item label="常驻城市">
                    {{ member.memberMainStoreArea||'--' }}
                  </el-descriptions-item>
                  <el-descriptions-item label="关注来源">
                    {{ member.attentionChannelDict||'--' }}
                  </el-descriptions-item>
                  <el-descriptions-item label="首次关注时间">
                    {{ member.attentionTime|formatTime }}
                  </el-descriptions-item>
                  <el-descriptions-item label="达摩同意协议时间">
                    {{ member.memberProtocolInfo.consentPrivacyProtocolTime|formatTime }}
                  </el-descriptions-item>
                  <el-descriptions-item label="微盟同意协议时间">
                    <p style="margin:0;line-height:20px;">
                      访问：{{ member.memberProtocolInfo.visitConsentPrivacyProtocolTime|formatTime }}
                    </p>
                    <p style="margin:0;line-height:20px;">
                      登录：{{ member.memberProtocolInfo.loginConsentPrivacyProtocolTime|formatTime }}
                    </p>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
            <div class="extended-field-wrap">
              <div class="flex-header">
                <div class="tab-button-wrap">
                  <el-button
                    type="text"
                    @click="changeExtendFieldTab(1)"
                    :class="showFieldType===1?'':'no-active'"
                  >
                    开卡拓展字段
                  </el-button><span
                    class="line"
                  />
                  <el-button
                    type="text"
                    @click="changeExtendFieldTab(2)"
                    :class="showFieldType===2?'':'no-active'"
                  >
                    会员信息字段
                  </el-button>
                </div>
                <div class="vertical-line" />
                <!-- <div class="toggleTag" @click="toggleTag=!toggleTag">
                  {{ toggleTag?'收起':'展开' }}<i
                    :class="toggleTag ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
                </div>-->
              </div>
              <div class="max1600">
                <div :class="['extend-description']">
                  <!-- 开卡拓展字段 -->
                  <div :class="[toggleTag?'':'shrink']"
                    v-if="showFieldType===1&&(extendInfo.openField||extendInfo.openChildrenField)">
                    <el-descriptions :column="3" labelClassName="info-lebel"
                      contentClassName="info-content">
                      <el-descriptions-item v-for="item in extendInfo.openField" :key="item"
                        :label="item.fieldName">
                        {{ (typeof item.fieldValue == 'string' && item.fieldValue.length > 0) || typeof item.fieldValue == 'number' ? item.fieldValue : '--' }}
                      </el-descriptions-item>
                      <el-descriptions-item label="宝宝信息" v-if="babyStr">
                        {{ babyStr }} <el-tooltip
                          class="item"
                          effect="dark"
                          open-delay="200"
                          content="编辑宝宝信息"
                          placement="top-start"
                        >
                          <span class="edit-span" @click="babyDialogVisible=true">
                            <!-- <icon-svg
                              icon-class="icon-chakanxiangqing-copy"
                              style="width:13px;height:14px;"
                            /> -->
                            <i class="el-icon-edit"></i>
                          </span>
                        </el-tooltip>
                      </el-descriptions-item>
                    </el-descriptions>

                  </div>
                  <!-- 会员信息字段 -->
                  <div  :class="[toggleTag?'':'shrink']" v-if="showFieldType===2&&extendInfo.fieldList">
                    <el-descriptions
                      :column="3"
                      labelClassName="info-lebel"
                      contentClassName="info-content"
                    >
                      <el-descriptions-item
                        v-for="item in extendInfo.fieldList"
                        :key="item"
                        :label="item.fieldName"
                      >
                        {{ item.fieldValue }}
                      </el-descriptions-item>
                    </el-descriptions>

                  </div>
                  <div
                    class="empty-block"
                    v-if="(showFieldType===1&&!extendInfo.openField&&!extendInfo.openChildrenField)||(showFieldType===2&&!extendInfo.fieldList)"
                  >
                    <!-- <img :src="require('../../../static/img/no-data_icon.png')" alt=""> -->
                    <p>暂无数据</p>
                  </div>
                  <div class="toggleTag" @click="toggleTag=!toggleTag" v-if="toggleShow">
                      {{ toggleTag?'收起':'展开更多' }}<i
                        :class="toggleTag ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 基本信息end -->

          <!-- 会员卡信息 -->
          <template v-if="section.name==='card'">
            <el-descriptions
              :column="3"
              :colon="false"
              labelClassName="info-lebel"
              contentClassName="info-content"
            >
              <template v-if="showClique">
                <el-descriptions-item label="集团会员卡号:">
                  {{ memberInfo.cliqueCardNo||'--' }}
                </el-descriptions-item>
                <el-descriptions-item label="集团会员等级:">
                  {{ memberInfo.cliqueGradeName||'--' }}
                  <el-tooltip
                    v-if="showEditClique"
                    class="item"
                    effect="dark"
                    open-delay="200"
                    content="编辑集团会员等级"
                    placement="top-start"
                  >
                    <span class="edit-span" @click="showGradeDialog(true)"><i
                      class="el-icon-edit"
                    /></span>
                  </el-tooltip>
                </el-descriptions-item>
                <el-descriptions-item></el-descriptions-item>
                <!-- <el-descriptions-item label="集团会员积分:">
                  {{ memberInfo.cliqueMemberIntegral||'--' }}
                </el-descriptions-item> -->
              </template>
              <el-descriptions-item label="会员卡号:">
                {{ memberInfo.cardNum||'--' }}
              </el-descriptions-item>
              <el-descriptions-item label="会员等级:">
                {{ memberInfo.gradeName||'--' }}
                <template v-if="memberInfo.gradeName && getCodeAuth('memberEditGrade')">
                  <el-popconfirm v-if="memberInfo.erpCalcGrade" popper-class="grade-confirm-wrap"
                    placement="top" width="184" @confirm="showGradeDialog(false)"
                    confirm-button-text="继续修改" title="等级由ERP计算，建议前往ERP修改等级，以确保双方等级一致">
                    <el-tooltip slot="reference" class="item" effect="dark" open-delay="200"
                      content="编辑商户会员等级" placement="top-start">
                      <span class="edit-span"><i class="el-icon-edit"
                          :limit-code="getCode('memberEditGrade')" /></span>
                    </el-tooltip>
                  </el-popconfirm>
                  <el-tooltip v-else class="item" effect="dark" open-delay="200" content="编辑商户会员等级"
                    placement="top-start">
                    <span class="edit-span" @click="showGradeDialog(false)"><i class="el-icon-edit"
                        :limit-code="getCode('memberEditGrade')" /></span>
                  </el-tooltip>
                </template>
              </el-descriptions-item>
              <el-descriptions-item label="认证时间:">
                {{ memberInfo.authTime|formatTime }}
              </el-descriptions-item>
              <el-descriptions-item label="开卡方式:">
                {{ memberInfo.openCardChannelDict||'--' }}
              </el-descriptions-item>
              <el-descriptions-item label="开卡时间:">
                {{ memberInfo.cardGivingTime|formatTime }}
              </el-descriptions-item>
              <el-descriptions-item label="等级到期时间:">
                <template v-if="memberInfo.limitTime == -1">永久有效</template>
                <template v-else>{{memberInfo.limitTime|formatTime}}</template>
              </el-descriptions-item>
            </el-descriptions>
          </template>
          <!-- 会员卡信息end -->

          <!-- 客户记录 -->
          <template v-if="section.name==='customerRecord'">
            <div class="flex-wrap">
              <!-- 资产信息 -->
              <div class="flex-moudle-item">
                <template v-for="item in section.childrenList.assets">
                  <div
                    :class="['flex-item line-item assets-item',item.path||(item.iconTheme==='balance'&&memberInfo.storedValueFlag)?'hover':'', {'other-assets-item': !showClique}]"
                    v-if="item.iconTheme!=='integral_clique'||(item.iconTheme==='integral_clique'&&showClique)"
                    :key="item"
                    @click="item.iconTheme==='balance'?goStoreValue():goLink(item.path)">
                    <div class="left">
                      <p :class="['icon-wrap', item.iconTheme]">
                        <i :class="['iconfont', item.icon]" />
                      </p>
                      <div class="label">
                        {{ item.iconTheme==='integral'&&!showClique?'积分':item.label }}
                      </div>
                      <div class="num">
                        {{ memberInfo[item.key]
                          ?(item.key==='storedValue'?(memberInfo[item.key]|storedValue):(memberInfo[item.key]))
                          :0 }}
                      </div>
                    </div>
                    <div class="el-icon-arrow-right"
                      v-if="item.path||(item.iconTheme==='balance'&&memberInfo.storedValueFlag)" />
                  </div>
                </template>
              </div>
              <!-- 交易记录 -->
              <div class="flex-moudle-item">
                <div class="flex-item line-item hover transaction-item" @click="goLink(item.path)"
                  v-for="item in section.childrenList.transaction" :key="item">
                  <div class="left">
                    <p class="icon-wrap">
                      <i v-if="item.icon" :class="['iconfont',item.icon]" />
                      <img v-else :src="require('../../../static/img/logo-blue.png')" alt="">
                    </p>
                    <div class="label">
                      {{ item.label }}
                    </div>
                    <div class="num">
                      {{ memberInfo[item.key]||0 }}
                    </div>
                  </div>
                  <div class="el-icon-arrow-right" />
                </div>
              </div>
              <!-- 交互记录 -->
              <ul class="flex-column-wrap">
                <li
                  v-for="item in section.childrenList.interactive"
                  :class="['flex-column-item flex-item',item.path?'hover':'']"
                  :key="item"
                  @click="goLink(item.path)"
                >
                  <div class="left">
                    <p :class="['icon-wrap', item.iconTheme]">
                      <i :class="['iconfont', item.icon]" />
                    </p>
                    <div class="middle">
                      <div class="label">
                        {{ item.label }}
                       <el-tooltip v-if="item.key == 'numOfMarket'" content="只统计近半年的数据" placement="top">
                          <i class="iconfont icon-QuestionCircleOutlined" style="color: #909399" />
                       </el-tooltip>
                      </div>
                      <div class="num">
                        {{
                          memberInfo[item.key]
                            ? item.key === "storedValue"
                              ? memberInfo[item.key] || storedValue
                              : item.key == "numOfMarket"
                              ? marketingRecordNum
                              : memberInfo[item.key]
                            : 0
                        }}
                      </div>
                    </div>
                  </div>
                  <div class="el-icon-arrow-right" />
                </li>
              </ul>
            </div>
          </template>
          <!-- 客户记录end -->

          <!-- 归属信息 -->
          <template v-if="section.name==='ascription'">
            <div class="max1600">
              <el-descriptions
                :column="1"
                labelClassName="info-lebel"
                contentClassName="info-content"
              >
                <el-descriptions-item label="开卡门店">
                  {{ member.openStoreName||'--' }}<el-tag
                    v-if="member.openStoreClerkName"
                    type="info"
                  >
                    开卡导购：{{ member.openStoreClerkName }}<span
                      v-if="member.openStoreClerkCode"
                    >（{{ member.openStoreClerkCode }}）</span>
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="服务门店">
                  {{ member.mainStoreName }}<el-tag
                    v-if="member.mainClerkName"
                    :type="member.clerkInStore==0?'warning':'info'"
                    :title="member.clerkInStore==0?'非服务门店下导购':''"
                  >
                    专属导购：{{ member.mainClerkName }}<span
                      v-if="member.mainClerkCode"
                    >（{{ member.mainClerkCode }}）</span>
                  </el-tag>
                  <el-tooltip v-if="$getButtonLimit($buttonCode.memberEditStore)" class="item" effect="dark" open-delay="200" content="修改服务门店"
                    placement="top-start">
                    <span :limit-code="$buttonCode.memberEditStore" class="edit-span" @click="mainStoreDialogVisible=true"><i
                        class="el-icon-edit" /></span>
                  </el-tooltip>
                </el-descriptions-item>
                <el-descriptions-item label="协管门店">
                  <div class="assist-store-list">
                    <template v-for="(item,index) in member.shopNames">
                      <span v-if="index>0" :key="item" class="vertical-line" />
                      <p :key="item" class="store-name">
                        {{ item.storeName }}
                      </p>
                    </template>
                    <el-tooltip v-if="$getButtonLimit($buttonCode.memberEditStore)" class="item" effect="dark" open-delay="200" content="修改协管门店"
                      placement="top-start">
                      <span :limit-code="$buttonCode.memberEditStore" class="edit-span" @click="subStoreDialogVisible=true"><i
                          class="el-icon-edit" /></span>
                    </el-tooltip>
                  </div>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </template>
          <!-- 归属信息end -->

          <!-- 标签备注 -->
          <template v-if="section.name==='label'">
            <div class="tabs-wrap max1600">
              <el-tabs
                tab-position="left"
                style="height: 200px;"
                v-model="labelTabsActive"
                stretch
              >
                <!-- 客户分组 -->
                <el-tab-pane label="客户分组" name="memberTagGroup">
                  <div class="hand-label-item member-tag-group" :key="item">
                    <p>金字塔分层：</p>
                    <div
                      class="flex-tag-wrap"
                      v-if="tagAndRemarkInfo.memberGroup.memberGradeGroup.groupName"
                    >
                      <el-tag type="info">
                        {{ tagAndRemarkInfo.memberGroup.memberGradeGroup.groupName }}
                      </el-tag>
                    </div>
                    <div class="no-data" v-else>
                      无
                    </div>
                  </div>
                  <div class="hand-label-item member-tag-group" :key="item">
                    <p>其他分组：</p>
                    <div
                      class="flex-tag-wrap"
                      v-if="tagAndRemarkInfo.memberGroup.memberTagGroupList.length"
                    >
                      <el-tag
                        type="info"
                        v-for="item in tagAndRemarkInfo.memberGroup.memberTagGroupList"
                        :key="item"
                      >
                        {{ item.groupName }}
                      </el-tag>
                    </div>
                    <div class="no-data" v-else>
                      无
                    </div>
                  </div>
                </el-tab-pane>
                <!-- 手工标签 -->
                <el-tab-pane label="手工标签" name="tag">
                  <div style="padding:0 0 23px;text-align: right;">
                    <el-button type="text" v-if="getCodeAuth('memberEditManualTag')"
                      @click="labelDialogVisible=true" :limit-code="getCode('memberEditManualTag')">
                      编辑手工标签
                    </el-button>
                  </div>
                  <template v-for="item in section.childrenList">
                    <div
                      v-if="tagAndRemarkInfo.tag[item.key]&&tagAndRemarkInfo.tag[item.key].length"
                      class="hand-label-item"
                      :key="item"
                    >
                      <p>{{ item.title }}：</p>
                      <div class="flex-tag-wrap">
                        <el-tag
                          type="info"
                          v-for="tag in tagAndRemarkInfo.tag[item.key]"
                          :key="tag"
                        >
                          {{ tag.tagsName }}
                        </el-tag>
                      </div>
                    </div>
                  </template>
                  <div
                    class="empty-block"
                    style="height:131px;"
                    v-if="!tagAndRemarkInfo.tag.tagsList.length&&!tagAndRemarkInfo.tag.otherTagsList.length&&!tagAndRemarkInfo.tag.weimobTagsList.length"
                  >
                    <img :src="require('../../../static/img/no-data_icon.png')" alt="">
                    <p>暂无数据</p>
                  </div>
                </el-tab-pane>
                <!--活动标签-->
                <el-tab-pane label="活动标签" name="activeTag">
                  <template v-for="item in section.childrenList">
                    <div
                      v-if="tagAndRemarkInfo.activityTag[item.key]&&tagAndRemarkInfo.activityTag[item.key].length"
                      class="hand-label-item"
                      :key="item"
                    >
                      <p>{{ item.title }}：</p>
                      <div class="flex-tag-wrap">
                        <el-tag
                          type="info"
                          v-for="tag in tagAndRemarkInfo.activityTag[item.key]"
                          :key="tag"
                        >
                          {{ tag.tagsName }}
                        </el-tag>
                      </div>
                    </div>
                  </template>
                  <div v-if="!tagAndRemarkInfo.activityTag.marketingTagList.length&&!tagAndRemarkInfo.activityTag.sourceTagList.length" class="empty-block" style="height:186px;">
                    <img :src="require('../../../static/img/no-data_icon.png')" alt="">
                    <p>暂无数据</p>
                  </div>
                </el-tab-pane>
                <!-- 导购备注 -->
                <el-tab-pane label="导购备注" name="remarkList">
                  <ul v-if="tagAndRemarkInfo.remarkList.length" class="clerk-remarks-wrap">
                    <li
                      class="clerk-remarks-item"
                      v-for="remark in tagAndRemarkInfo.remarkList"
                      :key="remark"
                    >
                      <div class="one-line">
                        <p class="store-name">
                          {{ remark.storeName }}
                        </p>
                        <el-tag type="info">
                          {{ remark.clerkName }}
                        </el-tag>
                        <p class="create-time">
                          {{ remark.createTime|formatTime }}
                        </p>
                      </div>
                      <div class="remark-content">
                        {{ remark.remark }}
                      </div>
                    </li>
                  </ul>
                  <div v-else class="empty-block" style="height:186px;">
                    <img :src="require('../../../static/img/no-data_icon.png')" alt="">
                    <p>暂无数据</p>
                  </div>
                </el-tab-pane>
                <!-- 身形字段 -->
                <el-tab-pane label="身形字段" name="dictFigureList">
                  <ul v-if="tagAndRemarkInfo.dictFigureList.length" class="dictFigure-wrap">
                    <template v-for="item in tagAndRemarkInfo.dictFigureList">
                      <li :key="item" class="dictFigure-item">
                        <div v-if="item.imageUrl" class="img-wrap">
                          <el-image
                            style="width: 68px; height: 68px"
                            :src="require(`../../../static/img/body-shape-woman/${item.imageUrl}`)"
                            fit="contain"
                          >
                            <div slot="error" class="image-slot">
                              <img style="width:100%;height:100%;" :src="require('../../../static/img/failed-load_img.png')" alt="">
                            </div>
                          </el-image>
                        </div>
                        <div class="right">
                          <p class="dict-name">
                            {{ item.dictName }}
                          </p>
                          <p class="dictFigure-name">
                            {{ item.dictFigureName }}
                          </p>
                        </div>
                      </li>
                    </template>
                  </ul>
                  <div v-else class="empty-block" style="height:186px;">
                    <img :src="require('../../../static/img/no-data_icon.png')" alt="">
                    <p>暂无数据</p>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </template>
          <!-- 标签备注end -->

          <!-- 客户日志 -->
          <template v-if="section.name==='log'">
            <el-table :data="tableData" v-loading="tableLoading" style="width: 100%">
              <el-table-column prop="createTime" label="时间">
                <template slot-scope="scope">
                  {{ scope.row.createTime | formatTime }}
                </template>
              </el-table-column>
              <el-table-column prop="operType" label="日志类型" />
              <el-table-column prop="operContent" label="日志详情" />
              <el-table-column prop="operReason" label="事由" />
              <el-table-column prop="operRemark" label="备注">
                <template slot-scope="{ row }">
                  <span v-html="row.operRemark" />
                </template>
              </el-table-column>
            </el-table>
            <div class="page mTop20" v-if="totalCount > 0">
              <dm-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="logPageParam.currentPage"
                :page-sizes="[20, 40, 60, 80]"
                :page-size="logPageParam.pageSize"
                layout="total, sizes, prev, pager, next"
                :total="totalCount"
              />
            </div>
          </template>
          <!-- 客户日志end -->
        </div>
      </div>
    </div>
    <!-- 基本信息修改弹窗 -->
    <baseinfo-dialog
      :dialogVisible.sync="baseinfoDialogVisible"
      :baseInfo="member"
      :nationCodeList="nationCodeList"
      @refresh="initData"
    />
    <!-- 宝宝信息弹窗 -->
    <babyinfo-dialog
      :dialogVisible.sync="babyDialogVisible"
      :childFieldsList="extendInfo.openChildrenField||[]"
      :babyConfigTemplate="extendInfo.babyConfigTemplate || {}"
    />
    <!-- 等级修改弹窗 -->
    <customergrade-dialog
      :dialogVisible.sync="gradeDialogVisible"
      :memberId="memberId"
      :isClique="isClique"
      :gradeId="memberInfo.gradeId"
      :cliqueGradeId="memberInfo.cliqueGradeId"
      :gradeList="gradeList"
      :cliqueGradeList="cliqueGradeList"
      @refresh="initData"
    />
    <!-- 服务门店、专属导购修改弹窗 -->
    <customermainstore-dialog
      :dialogVisible.sync="mainStoreDialogVisible"
      @refresh="initData"
      :obj="{...member}"
    />
    <!-- 协管门店修改弹窗 -->
    <customersubstore-dialog
      :dialogVisible.sync="subStoreDialogVisible"
      @refresh="initData"
      :obj="{...member}"
    />
    <!-- 手工标签修改弹窗 -->
    <customerlabel-dialog
      :dialogVisible.sync="labelDialogVisible"
      :memberId="memberId"
      @refresh="initData"
    />
  </div>
</template>
<script>
import action from './info.js';
export default { ...action };
</script>
<style lang="less" scoped>
@import './customerDetail.less';
</style>
<style lang="less">
.grade-confirm-wrap {
  .el-popconfirm__main {
    align-items: flex-start;
    .el-popconfirm__icon.el-icon-question {
      margin-top: 2px !important;
    }
  }
}
.label-remarks-contain .el-tabs--left .el-tabs__active-bar.is-left {
  height: 22px !important;
  top: 9px;
}
</style>
