<template>
  <div class="app-container">
    <div class="box">
      <el-breadcrumb class="mt20" :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">
          <el-icon>
            <HomeFilled />
          </el-icon>
          首页
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/competition' }">竞赛</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ name: 'calendar' }">竞赛日程</el-breadcrumb-item>
        <el-breadcrumb-item>竞赛详情</el-breadcrumb-item>
      </el-breadcrumb>

      <el-card class="mt20">
        <el-row :gutter="30">
          <el-col :span="8" :xs="24" :lg="8">
            <div class="imgbox">
              <el-image fit="cover" style="aspect-ratio: 16/9" :src="fillImgUrl_webSite(activity.cover)" />
            </div>
          </el-col>
          <el-col class="info" :span="16" :xs="24" :lg="16">
            <h3> {{ activity.name }}</h3>

            <div>
              <div>
                <el-tag v-for="(t,i) in activity.level?.split(',')" :key="i" type="danger" class="mr10">{{ t }}</el-tag>
              </div>
              <div class="date">竞赛时间：{{ activity.rangeStr }}</div>
              <div class="date">竞赛地点：{{ activity.address }}</div>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="mt20 mb20">
        <el-tabs v-model="activeName">
          <el-tab-pane label="详情" name="first">
            <div v-html="activity.introduce" />
          </el-tab-pane>
          <el-tab-pane label="精彩照片" name="second">
            <el-row :gutter="30" class="jcbox">
              <el-col
                v-for="(img,i) in activity.images" :key="i" :sm="8" :xl="7" :xs="12"
                :lg="8"
              >
                <div class="imgbox">
                  <el-image
                    fit="cover"
                    :src="img"
                    :preview-src-list="activity.images"
                  />
                  <!--                  <img :src="img">-->
                  <!--                  <h3 class="esp">name</h3>-->
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="参赛运动员" name="third">
            <el-table v-loading="loading" :data="playerList" border stripe>
              <el-table-column type="index" width="55" align="center" label="序号" />
              <el-table-column label="姓名" align="center" prop="name" show-overflow-tooltip />
              <el-table-column label="性别" align="center" prop="sex" />
              <el-table-column label="级别" align="center" prop="level" show-overflow-tooltip />
              <el-table-column label="所属地区" align="center" prop="areas" show-overflow-tooltip />
            </el-table>
            <div v-if="total>0" class="pc-page-box">
              <PaginationPc v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getPlayer" />
            </div>
            <el-empty v-if="total == 0" description="暂无数据" />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, ref, watch } from 'vue'
import { onMounted } from '@vue/runtime-core'
import { useRoute } from 'vue-router'
import { getMatchInfo, getMatchPlayerList } from '@/apiPc/webSite'
import { ArrowRight } from '@element-plus/icons-vue'
import _ from 'lodash'

const route = useRoute()
const { proxy } = getCurrentInstance()

const activeName = ref('first')
const activity = ref({})
const playerList = ref([])
const total = ref(0)
const loading = ref(true)
const queryParams = ref({
  pageNum: 1,
  pageSize: 10
})

onMounted(() => {
  initData()
})

async function initData() {
  if (!route.params.id) {
    return
  }

  queryParams.value.noteId = route.params.id

  const res = await getMatchInfo(route.params.id)
  activity.value = res.data
  activity.value.images = _.map(res.data.photos.split(','), (img) => proxy.fillImgUrl_webSite(img))
}

watch(activeName, (val) => {
  if (val === 'third' && playerList.value.length == 0) {
    getPlayer()
  }
})

function getPlayer() {
  loading.value = true
  getMatchPlayerList(queryParams.value).then((res) => {
    loading.value = false
    playerList.value = res.rows
    total.value = res.total
  })
}

</script>

<style lang="scss" scoped>
:deep(.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th){
  background: #f4f4f4!important;
}
.jcbox{
  .imgbox {
    aspect-ratio: 16/9;
    position: relative;
    margin-bottom: 24px;
    cursor: pointer;
    overflow: hidden;

    img {
      transform: scale(1);
      transition: all 0.2s;
      height: 100%;
      object-fit: cover;
    }

    &:hover img {
      transform: scale(1.1);
      transform-origin: center;
    }

    h3 {
      color: #fff;
      position: absolute;
      margin: 0;
      padding: 15px;
      bottom: 0;
      width: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      font-family: SC-song, serif;
      z-index: 1;
    }

    &::before {
      content: '';
      width: 100%;
      height: 25%;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
      position: absolute;
      z-index: 1;
      left: 0;
      bottom: 0;
    }
  }
}

.info {
  h3 {
    font-size: 24px;
    color: #AD181F;
  }
  .date{    line-height: 1.6;font-size: 16px;
    color: #666;margin: 15px 0 0}
}

.btns {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;

  a {
    width: 48%;
    display: block;
    text-align: center;
    color: #fff;
    height: 45px;
    line-height: 45px;
    background: linear-gradient(270deg, #FCD258 0%, #D3AA5A 0%, #E4C889 99%);
    border-radius: 2px;
    font-size: 18px;
  }

  i {
    padding: 0 15px;
  }

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

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

  a:hover {
    background: linear-gradient(90deg, #FCD258 0%, #D3AA5A 0%, #E4C889 99%);
  }
}

.tab1 {
  background: url("@/assets/v1/about/tab1.png") no-repeat right bottom #FEFDFB;
  background-size: contain;
}


.forWei {
  display: none;
}

@media (max-width: 500px) {
  .forWei {
    display: block;
  }
  .box {
    display: none;
  }

}
</style>