<template>
  <div class="">
    <div class="box forPc ">
      <el-breadcrumb class="mt20 mb20" :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">
          <el-icon>
            <HomeFilled />
          </el-icon>
          首页
        </el-breadcrumb-item>
        <el-breadcrumb-item to="/authAccurate">认证查询</el-breadcrumb-item>
        <el-breadcrumb-item>精准查询</el-breadcrumb-item>
      </el-breadcrumb>

    </div>
    <div ref="pc" class="card box forPc">
      <el-tabs v-model="activeName" tab-position="left">
        <el-tab-pane label="团体会员查询" name="1">
          <template #label>
            <span class="custom-tabs-label">
              <img src="@/assets/images/query/btn01@2x.png">
              <span class="tabFont">团体会员查询</span>
            </span>
          </template>
          <member ref="memberRef" />
        </el-tab-pane>
        <el-tab-pane label="个人会员查询" name="2">
          <template #label>
            <span class="custom-tabs-label">
              <img src="@/assets/images/query/btn02@2x.png">
              <span class="tabFont">个人会员查询</span>
            </span>
          </template>
          <person ref="personRef" />
        </el-tab-pane>
        <el-tab-pane label="级位证书查询" name="3">
          <template #label>
            <span class="custom-tabs-label">
              <img src="@/assets/images/query/btn03@2x.png">
              <span class="tabFont">级位证书查询</span>
            </span>
          </template>
          <cert-ji ref="certJiRef" />
        </el-tab-pane>
        <el-tab-pane label="级位记录查询" name="4">
          <template #label>
            <span class="custom-tabs-label">
              <img src="@/assets/images/query/btn03@2x.png">
              <span class="tabFont">级位记录查询</span>
            </span>
          </template>
          <record-ji ref="recordJiRef" />
        </el-tab-pane>
        <el-tab-pane label="段位证书查询" name="5">
          <template #label>
            <span class="custom-tabs-label">
              <img src="@/assets/images/query/btn03@2x.png">
              <span class="tabFont">段位证书查询</span>
            </span>
          </template>
          <cert-duan ref="certDuanRef" />
        </el-tab-pane>
        <el-tab-pane label="级位考官查询" name="6">
          <template #label>
            <span class="custom-tabs-label">
              <img src="@/assets/images/query/btn08@2x.png">
              <span class="tabFont">级位考官查询</span>
            </span>
          </template>
          <examiner-ji ref="examinerJiRef" />
        </el-tab-pane>
        <el-tab-pane label="段位考官查询" name="7">
          <template #label>
            <span class="custom-tabs-label">
              <img src="@/assets/images/query/btn08@2x.png">
              <span class="tabFont">段位考官查询</span>
            </span>
          </template>
          <examiner-duan ref="examinerDuanRef" />
        </el-tab-pane>
        <el-tab-pane label="大众教练员查询" name="8">
          <template #label>
            <span class="custom-tabs-label">
              <img src="@/assets/images/query/btn08@2x.png">
              <span class="tabFont">大众教练员查询</span>
            </span>
          </template>
          <coach ref="coachRef" />
        </el-tab-pane>
        <el-tab-pane label="大众裁判员查询" name="9">
          <template #label>
            <span class="custom-tabs-label">
              <img src="@/assets/images/query/btn08@2x.png">
              <span class="tabFont">大众裁判员查询</span>
            </span>
          </template>

          <referee ref="refereeRef" />
        </el-tab-pane>

        <router-link to="/authQuery" class="goldstr">
          <img src="@/assets/v1/btn000@2x.png">
          模糊搜索
          <el-icon><ArrowRight /></el-icon>
        </router-link>
      </el-tabs>
    </div>
    <div ref="wei" class="forWei">
      <el-tabs v-model="activeName" class="wTabtop">
        <el-tab-pane label="团体会员查询" name="1">
          <member ref="memberRef2" />
        </el-tab-pane>
        <el-tab-pane label="个人会员查询" name="2">
          <person ref="personRef2" />
        </el-tab-pane>
        <el-tab-pane label="级位证书查询" name="3">
          <cert-ji ref="certJiRef2" />
        </el-tab-pane>
        <el-tab-pane label="级位记录查询" name="4">
          <record-ji ref="recordJiRef2" />
        </el-tab-pane>
        <el-tab-pane label="段位证书查询" name="5">
          <cert-duan ref="certDuanRef2" />
        </el-tab-pane>
        <el-tab-pane label="级位考官查询" name="6">
          <examiner-ji ref="examinerJiRef2" />
        </el-tab-pane>
        <el-tab-pane label="段位考官查询" name="7">
          <examiner-duan ref="examinerDuanRef2" />
        </el-tab-pane>
        <el-tab-pane label="大众教练员查询" name="8">
          <coach ref="coachRef2" />
        </el-tab-pane>
        <el-tab-pane label="大众裁判员查询" name="9">
          <referee ref="refereeRef2" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="mb20" />
  </div>

</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { onMounted, ref, watch } from 'vue'
import { getCurrentInstance } from '@vue/runtime-core'
import { Member, Person, ExaminerJi, ExaminerDuan, Coach, Referee, CertJi, CertDuan, RecordJi } from './components/accurate'


const { proxy } = getCurrentInstance()
const activeName = ref('')

onMounted(() => {
  activeName.value = '1'
})

watch(activeName, (val) => {
  if (window.getComputedStyle(proxy.$refs['pc']).display !== 'none') {
    switch (val) {
      case '1':// 团体会员查询
        proxy.$refs['memberRef'].init()
        break
      case '2':// 个人会员查询
        proxy.$refs['personRef'].init()
        break
      case '3':// 级位证书查询
        proxy.$refs['certJiRef'].init()
        break
      case '4':// 级位记录查询
        proxy.$refs['recordJiRef'].init()
        break
      case '5':// 段位证书查询
        proxy.$refs['certDuanRef'].init()
        break
      case '6':// 级位考官查询
        proxy.$refs['examinerJiRef'].init()
        break
      case '7':// 段位考官查询
        proxy.$refs['examinerDuanRef'].init()
        break
      case '8':// 大众教练员查询
        proxy.$refs['coachRef'].init()
        break
      case '9':// 大众裁判员查询
        proxy.$refs['refereeRef'].init()
        break
    }
  } else if (window.getComputedStyle(proxy.$refs['wei']).display !== 'none') {
    switch (val) {
      case '1':// 团体会员查询
        proxy.$refs['memberRef2'].init()
        break
      case '2':// 个人会员查询
        proxy.$refs['personRef2'].init()
        break
      case '3':// 级位证书查询
        proxy.$refs['certJiRef2'].init()
        break
      case '4':// 级位记录查询
        proxy.$refs['recordJiRef2'].init()
        break
      case '5':// 段位证书查询
        proxy.$refs['certDuanRef2'].init()
        break
      case '6':// 级位考官查询
        proxy.$refs['examinerJiRef2'].init()
        break
      case '7':// 段位考官查询
        proxy.$refs['examinerDuanRef2'].init()
        break
      case '8':// 大众教练员查询
        proxy.$refs['coachRef2'].init()
        break
      case '9':// 大众裁判员查询
        proxy.$refs['refereeRef2'].init()
        break
    }
  }
})

</script>

<style scoped lang="scss">
.card {
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0px 0px 46px 0px rgba(1, 16, 64, 0.08);
  :deep(.el-tabs--left .el-tabs__item.is-left){    margin: 0 0 20px;}
  :deep(.el-tabs--left .el-tabs__active-bar.is-left){left: 0!important;right: auto!important;}
  :deep(.el-tabs--left .el-tabs__nav-wrap.is-left::after){display: none;}
  :deep(.el-tabs__active-bar){background-color:var(--el-color-primary);}
  :deep(.el-tabs__item.is-active){color:var(--el-color-primary);font-size: 15px;    background: #fff;}
  :deep(.el-tabs__item:hover){color:var(--el-color-primary);}
  :deep(.el-tabs--left .el-tabs__header.is-left){    padding: 30px 0 30px 30px;
    height: 80vh; background: #f6f6f5;   margin: 0;}
  .tabFont{margin-left: 20px;}
  :deep(.el-tabs--left){}
  :deep(.el-tabs__content){padding: 30px;}
}

.mt30 {
  margin-top: 30px;
}

.custom-tabs-label {
  display: flex;
  align-items: center;

  img {
    width: 30px;
    height: 30px;
  }
}

.forWei {
  display: none;
}
@media (max-width: 500px) {
  :deep(.el-tabs__item){font-size:16px;}
  :deep(.el-tabs__active-bar){display: block;}
  .forWei {
    display: block;
  }
  .forPc{display: none}
  :deep(.el-tabs__nav-scroll){overflow: auto;}
}
.wTabtop{
  :deep(.el-tabs__header){background: #fff;padding:10px 15px 0;}
  :deep(.el-tabs__content){padding:0 10px;}
  .el-tab-pane{

  }
}
.goldstr{display: flex;align-items: center;
  color: #996C33;float: right;position: absolute;
  top: 4%;
  right: 3%;
  background: #fff;
  border: 1px solid #996c335c;
  border-radius: 50px;
  padding: 10px;
  img{width: 28px;}
}
.goldstr:hover{box-shadow:0 0 10px #eee;background: #fff6eb;}
</style>