<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><img src="@/assets/v1/hy_btn01.png">
                <h3>教练员</h3></div>
            </div>
            <div class="item" @click="goCoach(2)">
              <div><img src="@/assets/v1/hy_btn02.png">
                <h3>裁判员</h3></div>
            </div>
            <div class="item" @click="goCoach(3)">
              <div><img src="@/assets/v1/hy_btn04.png">
                <h3>考官</h3></div>
            </div>
          </div>
        </el-col>
      </el-row>
      
      <div class="nakedTitle">
        <h3 style="display: flex;align-items: center;white-space: nowrap">单位会员
          <el-select v-model="queryParams.deptAType" class="ml20 mr10" clearable @change="getMemList">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input v-model="queryParams.name" clearable placeholder="请输入单位名称关键字" @keyup.enter="getMemList" />
        </h3>
        <a class="more" @click="goTeamVip">MORE⇀</a>
      </div>
      <el-card class="mb20">
        <div v-for="m in memList" :key="m.memId" class="teamVipItem">
          <div class="imgbox"><img :src="fillImgUrl_webSite(m.pictures)"></div>
          <div class="info">
            <h3 class="esp">{{ m.name }}</h3>
            <p class="esp">
              <el-icon>
                <LocationFilled />
              </el-icon>
              {{ m.certAddress }}
            </p>
            <p class="esp">
              <span><el-icon><PhoneFilled /></el-icon>{{ m.certSiteTel }}</span>
              <span><el-icon><Checked /></el-icon>注册时间: {{ m.beginTime?.substr(0, 10) }}</span>
              <span><el-icon><Failed /></el-icon>到期时间：{{ m.validityDate?.substr(0, 10) }}
                <i :class="{'text-info':m.valiStatus=='1','text-danger':m.valiStatus=='2'}">（{{ m.valiStr }}）</i>
              </span>
            </p>
          </div>
        </div>
        <el-empty v-if="memList.length == 0" description="暂无数据" />
      
      </el-card>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getExamSiteList, getMemberList } from '@/apiPc/common'


const router = useRouter()
const queryParams = ref({
  pageNum: 1,
  pageSize: 4,
  deptAType: '',
  name: ''
})
const options = ref([
  { value: '1', label: '一级单位会员' },
  { value: '2', label: '二级单位会员' },
  { value: '3', label: '三级单位会员' },
  { value: '4', label: '职业性单位会员' }
])
const examSiteList = ref([])
const memList = ref([])

onMounted(() => {
  getExamSiteList({ pageSize: 3, pageNum: 1 })
    .then(res => {
      examSiteList.value = res.rows
    })
  
  getMemList()
})
const goCoach = (n) => {
  router.push({
    path: `/vip/pplist/${n}`
  })
}
const goTeamVip = () => {
  router.push({
    name: 'teamVip'
  })
}

const getMemList = () => {
  getMemberList(queryParams.value).then((res) => {
    memList.value = res.rows
  })
}


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>