<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-old ref="certJiOldRef" />
        </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>
          <cert-ji ref="certJiRef" />
        </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>
          <record-ji ref="recordJiRef" />
        </el-tab-pane>
        <el-tab-pane label="国际段位证书查询" name="6">
          <template #label>
            <span class="custom-tabs-label">
              <img src="@/assets/images/query/btn03@2x.png">
              <span class="tabFont">国际段位证书查询</span>
            </span>
          </template>
          <cert-duan-old ref="certDuanOldRef" />
        </el-tab-pane>
        <el-tab-pane label="中国段位证书查询" name="7">
          <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="8">
          <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="9">
          <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="10">
          <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="11">
          <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>
        <el-tab-pane label="培训讲师查询" name="12">
          <template #label>
            <span class="custom-tabs-label">
              <img src="@/assets/images/query/btn08@2x.png">
              <span class="tabFont">培训讲师查询</span>
            </span>
          </template>
          <lecturer ref="lecturerRef" />
        </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-old ref="certJiOldRef2" />
        </el-tab-pane>
        <el-tab-pane label="新版级位证书查询" name="4">
          <cert-ji ref="certJiRef2" />
        </el-tab-pane>
        <el-tab-pane label="级位记录查询" name="5">
          <record-ji ref="recordJiRef2" />
        </el-tab-pane>
        <el-tab-pane label="国际段位证书查询" name="6">
          <cert-duan-old ref="certDuanOldRef2" />
        </el-tab-pane>
        <el-tab-pane label="中国段位证书查询" name="7">
          <cert-duan ref="certDuanRef2" />
        </el-tab-pane>
        <el-tab-pane label="级位考官查询" name="8">
          <examiner-ji ref="examinerJiRef2" />
        </el-tab-pane>
        <el-tab-pane label="段位考官查询" name="9">
          <examiner-duan ref="examinerDuanRef2" />
        </el-tab-pane>
        <el-tab-pane label="大众教练员查询" name="10">
          <coach ref="coachRef2" />
        </el-tab-pane>
        <el-tab-pane label="大众裁判员查询" name="11">
          <referee ref="refereeRef2" />
        </el-tab-pane>
        <el-tab-pane label="培训讲师查询" name="12">
          <lecturer ref="lecturerRef2" />
        </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,
  CertJiOld,
  CertJi,
  CertDuanOld,
  CertDuan,
  RecordJi,
  Lecturer
} from './components/accurate'


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

function getType() {
  try {
    const href = window.location.href
    const arr = href.split('?')
    if (arr.length > 1) {
      const params = new URLSearchParams(arr[1])
      return params.get('type') || '1'
    }
  } catch (e) {}
  return '1'
}

onMounted(() => {
  setTimeout(() => {
    const type = getType()
    activeName.value = type
  }, 500)
})

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['certJiOldRef'].init()
        break
      case '4':// 新版级位证书查询
        proxy.$refs['certJiRef'].init()
        break
      case '5':// 级位记录查询
        proxy.$refs['recordJiRef'].init()
        break
      case '6':// 国际段位证书查询
        proxy.$refs['certDuanOldRef'].init()
        break
      case '7':// 中国段位证书查询
        proxy.$refs['certDuanRef'].init()
        break
      case '8':// 级位考官查询
        proxy.$refs['examinerJiRef'].init()
        break
      case '9':// 段位考官查询
        proxy.$refs['examinerDuanRef'].init()
        break
      case '10':// 大众教练员查询
        proxy.$refs['coachRef'].init()
        break
      case '11':// 大众裁判员查询
        proxy.$refs['refereeRef'].init()
        break
      case '12':// 培训讲师查询
        proxy.$refs['lecturerRef'].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['certJiOldRef2'].init()
        break
      case '4':// 新版级位证书查询
        proxy.$refs['certJiRef2'].init()
        break
      case '5':// 级位记录查询
        proxy.$refs['recordJiRef2'].init()
        break
      case '6':// 国际段位证书查询
        proxy.$refs['certDuanOldRef2'].init()
        break
      case '7':// 中国段位证书查询
        proxy.$refs['certDuanRef2'].init()
        break
      case '8':// 级位考官查询
        proxy.$refs['examinerJiRef2'].init()
        break
      case '9':// 段位考官查询
        proxy.$refs['examinerDuanRef2'].init()
        break
      case '10':// 大众教练员查询
        proxy.$refs['coachRef2'].init()
        break
      case '11':// 大众裁判员查询
        proxy.$refs['refereeRef2'].init()
        break
      case '12':// 培训讲师查询
        proxy.$refs['lecturerRef2'].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;
    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>