<template>
  <div>

    <div class="box">
      <div v-if="examSiteList?.length>0" class="nakedTitle">
        <h3>考点展示</h3>
        <a class="more" @click="goExamPoints">MORE⇀</a>
      </div>
      <div class="mb20">
        <el-row class="topNews newsimgcover" :gutter="20">
          <el-col v-for="n in examSiteList" :key="n.memId" :lg="8" :sm="24" :md="8">
            <el-card class="item">
              <div class="imgbox">
                <img :src="fillImgUrl(n.pictures?.split(',')[0])">
              </div>
              <div class="info">
                <h2 class="esp">{{ n.name }}</h2>
                <p class="esp">
                  <el-icon>
                    <LocationFilled />
                  </el-icon>
                  {{ n.adress }}
                </p>
                <p class="esp">
                  <el-icon>
                    <PhoneFilled />
                  </el-icon>
                  {{ n.contact }} —— {{ n.phone }}
                </p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <el-row :gutter="20" class="mb20">
        <el-col :lg="12" :xs="24" :sm="12">
          <div class="flex-panel">
            <div class="pxPanel" @click="goTrain">
              <div>
                <h3>培训报名</h3>
                <a><i />进入报名</a>
              </div>
            </div>
            <div class="jsPanel" @click="goMatch">
              <div>
                <h3>竞赛报名</h3>
                <a><i />进入报名</a>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :lg="12" :xs="24" :sm="12">
          <div class="black-pic-bg">
            <div class="item" @click="goCoach(1)">
              <div>
                <h3>教练员</h3></div>
            </div>
            <div class="item" @click="goCoach(2)">
              <div>
                <h3>裁判员</h3></div>
            </div>
            <!--            <div class="item" @click="goNationalTeam('t1')">-->
            <!--              <div><img src="@/assets/v1/hy_btn03.png"><h3>运动员</h3></div>-->
            <!--            </div>-->
            <div class="item" @click="goCoach(3)">
              <div>
                <h3>考官</h3></div>
            </div>
          </div>
        </el-col>
      </el-row>

      <div class="nakedTitle">
        <h3>团体会员
          <el-select>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </h3>
        <a class="more" @click="goTeamVip">MORE⇀</a>
      </div>
      <el-card class="mb20">
        <div v-for="n in 3" class="teamVipItem">
          <div class="imgbox"><img></div>
          <div class="info">
            <h3 class="esp">北京市跆拳道协会1</h3>
            <p class="esp">
              <el-icon>
                <LocationFilled />
              </el-icon>
              北京市丰台区芳城园一区日月天地大厦B座506 拷贝
            </p>
            <p class="esp">
              <span><el-icon><PhoneFilled /></el-icon>13912345678</span>
              <span><el-icon><Checked /></el-icon>注册时间: 2021-08-05</span>
              <span><el-icon><Failed /></el-icon>到期时间：2023-11-05<i class="text-info">（正常）</i></span>
            </p>
          </div>
        </div>
      </el-card>


      <!--      <el-row :gutter="20" class="mb20">-->
      <!--        <el-col :lg="8" :sm="24" :xs="24">-->
      <!--          <div class="nakedTitle">-->
      <!--            <h3>奥林匹克积分排行-->
      <!--            </h3>-->
      <!--            <a class="more">MORE⇀</a>-->
      <!--          </div>-->
      <!--          <el-card>-->
      <!--            <table class="points-table" cellspacing="0" cellpadding="0">-->
      <!--              <tr class="gold-th">-->
      <!--                <th>级别</th>-->
      <!--                <th>姓名</th>-->
      <!--                <th>积分</th>-->
      <!--              </tr>-->
      <!--              <tr v-for="r in 8">-->
      <!--                <td>M-58kg</td>-->
      <!--                <td>-->
      <!--                  <div class="flex-td">-->
      <!--                    <div class="imgbox"><img/></div>-->
      <!--                    <span class="name">许多多</span>-->
      <!--                  </div>-->
      <!--                </td>-->
      <!--                <td class="text-danger">333.0</td>-->
      <!--              </tr>-->
      <!--            </table>-->
      <!--          </el-card>-->
      <!--        </el-col>-->
      <!--        <el-col :lg="16" :sm="24" :xs="24">-->
      <!--          <div class="nakedTitle">-->
      <!--            <h3>全运会积分排行-->
      <!--            </h3>-->
      <!--            <a class="more">MORE⇀</a>-->
      <!--          </div>-->
      <!--          <el-card>-->
      <!--            <el-row>-->
      <!--              <el-col :span="12" style="border-right: 1px dashed #eee;">-->
      <!--                <table class="points-table" cellspacing="0" cellpadding="0">-->
      <!--                  <tr class="gold-th">-->
      <!--                    <th>级别</th>-->
      <!--                    <th>姓名</th>-->
      <!--                    <th>积分</th>-->
      <!--                  </tr>-->
      <!--                  <tr v-for="r in 8">-->
      <!--                    <td>M-58kg</td>-->
      <!--                    <td>-->
      <!--                      <div class="flex-td">-->
      <!--                        <div class="imgbox"><img/></div>-->
      <!--                        <span class="name">许多多</span>-->
      <!--                      </div>-->
      <!--                    </td>-->
      <!--                    <td class="text-danger">333.0</td>-->
      <!--                  </tr>-->
      <!--                </table>-->
      <!--              </el-col>-->
      <!--              <el-col :span="12">-->
      <!--                <table class="points-table" cellspacing="0" cellpadding="0">-->
      <!--                  <tr class="gold-th">-->
      <!--                    <th>级别</th>-->
      <!--                    <th>姓名</th>-->
      <!--                    <th>积分</th>-->
      <!--                  </tr>-->
      <!--                  <tr v-for="r in 8">-->
      <!--                    <td>M-58kg</td>-->
      <!--                    <td>-->
      <!--                      <div class="flex-td">-->
      <!--                        <div class="imgbox"><img/></div>-->
      <!--                        <span class="name">许多多</span>-->
      <!--                      </div>-->
      <!--                    </td>-->
      <!--                    <td class="text-danger">333.0</td>-->
      <!--                  </tr>-->
      <!--                </table>-->
      <!--              </el-col>-->
      <!--            </el-row>-->

      <!--          </el-card>-->
      <!--        </el-col>-->
      <!--      </el-row>-->


    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getExamSiteList } from '@/apiPc/common'
import { getNewsListById } from '@/apiPc/webSite'

const route = useRoute()
const router = useRouter()
const options = ref([{ value: '0', label: '一级团体会员' }])
const examSiteList = ref([])


onMounted(() => {
  getExamSiteList({ pageSize: 3, pageNum: 1 })
    .then(res => {
      examSiteList.value = res.rows
    })
})
const goCoach = (n) => {
  // 123
  router.push({
    path: `/vip/pplist/${n}`
  })
}
const goNationalTeam = (n) => {
  router.push({
    path: `/nationalTeam/index`,
    query: {
      activeName: n
    }
  })
}
const goTeamVip = () => {
  router.push({
    name: 'teamVip'
  })
}
const goExamPoints = () => {
  router.push({
    name: 'examPoints'
  })
}
const goMatch = () => {
  router.push({
    name: 'matchList'
  })
}

function goTrain() {
  router.push({
    name: 'trainList'
  })
}

</script>
<style lang="scss" scoped>
.flex-panel{display: flex;}
.pxPanel, .jsPanel {
  text-align: center;
  padding: 1px;
  cursor: pointer;
  width:50%;height: 240px;
  //aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;

  & > div {
  }

  h3 {
    color: #fff;
    font-size: 30px;
    margin: 0 0 30px
  }

  a {
    background: #fff;
    border-radius: 20px;
    padding: 10px 20px;

    i {
      padding: 0 15px;
    }
  }

  &:hover {
    filter: grayscale(0.5) drop-shadow(0 0 5px #999);
  }
}

.pxPanel {
  background: url("@/assets/v1/ss01.png") no-repeat center;
  background-size: cover;margin-right: 10px;
  a {
    color: var(--el-color-golden);

    i {
      background: url("@/assets/v1/js_btn01.png") no-repeat;
      background-size: contain
    }
  }
}

.jsPanel {margin-left: 10px;
  background: url("@/assets/v1/ss02.png") no-repeat center;
  background-size: cover;

  a {
    color: var(--el-color-primary);

    i {
      background: url("@/assets/v1/js_btn02.png") no-repeat;
      background-size: contain
    }
  }
}

</style>