<template>
  <div>
    <div class="topBannerbox">
      <el-carousel v-if="bannerlist?.length>0" class="topBanner">
        <el-carousel-item v-for="(n,index) in bannerlist" :key="index">
          <div class="imgbox" @click="goDetail(n)">
            <img :src="fillImgUrl_webSite(n.bannerUrl)">
            <h3>{{ n.name }}</h3>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div v-if="newslist.length>0" class="box forPc">
      <div class="nakedTitle">
        <h3>{{ kind }}资讯</h3>
        <a class="more" @click="goList(query1,`${kind}资讯`)">MORE⇀</a>
      </div>
      <el-card class="mb20">
        <el-row class="topNews" :gutter="20">
          <el-col :lg="12" :sm="24" :md="12">
            <el-carousel indicator-position="none">
              <el-carousel-item v-for="(n,index) in newslist?.slice(0,1)" :key="index">
                <div class="imgbox carouselImg" @click="goDetail(n)">
                  <div class="date">
                    <div class="day">{{ n.belongTime?.substring(8, 10) }}</div>
                    <p>{{ n.belongTime?.substring(0, 7).replace(/-/g, '/') }}</p>
                  </div>
                  <img :src="fillImgUrl_webSite(n.picUrl)">
                  <h3 class="esp">{{ n.name }}</h3>
                </div>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :lg="12" :sm="24" :md="12" class="news-l-r">
            <div>
              <table style="width: 100%" cellpadding="0" cellspacing="0">
                <tr v-for="(n,index) in newslist?.slice(1,3)" :key="index">
                  <td>
                    <div class="item" style="width: 600px;padding: 0" @click="goDetail(n)">
                      <div v-if="n.picUrl" class="imgbox" style="width: 220px;height: 130px;">
                        <img :src="fillImgUrl_webSite(n.picUrl)">
                      </div>
                      <div class="info" style="width: calc(100% - 220px)">
                        <div class="date">{{ n.belongTime }}</div>
                        <h2 class="esp_2">{{ n.name }}</h2>
                        <p class="esp">
                          {{ n.subName }}
                        </p>
                      </div>
                    </div>
                  </td>
                </tr>
              </table>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="news-arrow">
          <el-col
            v-for="(n ,index) in newslist" v-show="index>2" :lg="12" :xs="12"
            :sm="24" @click="goDetail(n)"
          >
            <div class="item">
              <h3 class="esp">
                <el-icon color="#7B7F83">
                  <CaretRight />
                </el-icon>
                {{ n.name }}
              </h3>
              <span class="date">04-10</span>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="box forPc">
      <div v-if="kind == '裁判员'" class="nakedTitle">
        <h3>裁委会</h3>
        <a class="more" @click="goPersonList(query2.label)">MORE⇀</a>
      </div>
      <el-card v-if="kind == '裁判员'">
        <el-row :gutter="20">
          <el-col v-for="(m,index) in personlist" v-show="index<3" :lg="8" :sm="24">
            <div class="cpItemBox mt30 mb20">
              <div class="cpItem">
                <div class="info">
                  <h3>
                    <div>{{ m.realName }}</div>
                    <span>{{ m.labelStr }}</span>
                  </h3>
                  <p class="esp_3" v-html="m.remark" />
                </div>
                <img style="object-fit: cover;" :src="fillImgUrl_webSite(m.picUrl)">
              </div>
            </div>

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

      <div class="nakedTitle">
        <h3 v-if="kind == '裁判员'">优秀{{ kind }}</h3>
        <h3 v-else>{{ kind }}</h3>
        <a class="more" @click="goPersonList(query2.label)">MORE⇀</a>
      </div>
      <el-card class="mb20">
        <el-row class="JsmemberList" :gutter="20">
          <el-col v-for="m in personlist" :lg="4" :sm="12">
            <div class="item" style="margin: 0" @click="goPersonDetail(m)">
              <div class="imgbox"><img :src="fillImgUrl_webSite(m.picUrl)"></div>
              <h3>{{ m.realName }}</h3>
            </div>
          </el-col>

        </el-row>
      </el-card>
    </div>

    <div class="forWei">
      <div class="wbg">
        <div class="nakedTitle">
          <h3>{{ kind }}资讯</h3>
          <a class="more" @click="goList(query1,`${kind}资讯`)">MORE⇀</a>
        </div>

        <div class="news-l-r">
          <div style="border-top: 1px dashed #EEE;padding: 10px 0 0;">
            <div v-for="(n,index) in newslist?.slice(0,3)" :key="index" class="item" style="padding: 0 0 10px" @click="goDetail(n)">
              <div class="info" style="width: calc(100% - 120px)">
                <h3 class="esp_2">{{ n.name }}</h3>
                <div class="date">{{ n.belongTime }}</div>
              </div>
              <div v-if="n.picUrl" class="imgbox" style="width: 110px;height: 80px;margin-left: 10px">
                <img :src="fillImgUrl_webSite(n.picUrl)">
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="wbg mt20">
        <div class="nakedTitle">
          <h3>{{ kind }}</h3>
          <a class="more" @click="goPersonList(query2.label)">MORE⇀</a>
        </div>
        <div class="autoOverflowBox">
          <div class="JsmemberList">
            <div v-for="m in personlist" :key="m.id" class="item" @click="goPersonDetail(m)">
              <div class="imgbox"><img :src="fillImgUrl_webSite(m.picUrl)"></div>
              <h3 class="esp">{{ m.realName }}</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getBannerListBySortId, getNewsListById, getPersonByLabel } from '@/apiPc/webSite'

const route = useRoute()
const router = useRouter()
const kind = ref('')
const query1 = ref({
  pageSize: 9,
  pageNum: 1
})
const query2 = ref({
  pageSize: 6,
  pageNum: 1
})
const newslist = ref([])
const personlist = ref([])
const bannerlist = ref([])


onMounted(() => {
  var val = route.params.kind
  judeKind(val)
})
watch(() => route.params.kind, (val) => {
  judeKind(val)
})
const judeKind = (val) => {
  if (val == '2') {
    kind.value = '裁判员'
    query2.value.label = 2
    query1.value.sortId = '1026'
    query1.value.code = '90000001'
    getList()
    getBannerList()
  } else if (val == '1') {
    kind.value = '教练员'
    query2.value.label = 1
    query1.value.sortId = '1027'
    query1.value.code = '90000002'
    getList()
    getBannerList()
  } else if (val == '6') {
    kind.value = '解说员'
    query2.value.label = 6
    query1.value.sortId = '1028'
    query1.value.code = '90000003'
    getList()
    getBannerList()
  } else if (val == '9') {
    kind.value = '运动员'
    query2.value.label = 9
    query1.value.sortId = '1704749631689469954'
    query1.value.code = '90000004'
    getList()
    getBannerList()
  } else if (val == '7') {
    kind.value = '宣传员'
    query2.value.label = 7
    query1.value.sortId = '1031'
    query1.value.code = '11000001'
    getList()
    getBannerList()
  } else if (val == '3') {
    kind.value = '考官'
    query2.value.label = 3
    // query1.value.sortId = '1031'
    // query1.value.code = '11000001'
    // getList()
  }
}
const getList = () => {
  getPersonByLabel(query2.value).then(res => {
    personlist.value = res.rows
  })
  getNewsListById(query1.value).then(res => {
    newslist.value = res.rows
  })
}
const getBannerList = () => {
  getBannerListBySortId(query1.value.sortId).then(res => {
    bannerlist.value = res.data
  })
}
const goDetail = (n) => {
  if (n.isOut == '1') {
    window.open(n.jumpUrl)
  } else {
    router.push({
      path: `/news/detail/${n.noteId}`
    })
  }
}
const goList = (query, name) => {
  query.sortName = name
  router.push({
    name: 'noticeList',
    query: query
  })
}
const goPersonList = (label) => {
  router.push({
    name: 'personList',
    query: {
      label: label
    }
  })
}
const goPersonDetail = (m) => {
  router.push({
    path: `/about/leader/${m.id}`,
    query: {
      name: encodeURIComponent(m.labelStr),
      from: route.params.kind
    }
  })
}
</script>
<style lang="scss" scoped>
.cpItemBox{position: relative;
  &::before{content: '';background:#d4ad62;width: 80%;height: 50%;
    position: absolute;left: -6px;top: -6px;
  }
}
.cpItem{position: relative;box-shadow: 0 0 6px #ddd;padding: 10px 15px;
    background: #fff;
  .info{width: calc(100% - 160px);
    h3{border-bottom: 1px solid #d4ad62;display: flex;align-items: center;margin: 0;
      div{border-bottom: 1px solid #d4ad62;padding: 10px 0;}
      span{font-size: 14px;color: #fff;background: #d4ad62;
      padding: 2px 6px;margin-left: 6px;position: relative;display: inline-block;height: 20px;
        &::after{content: '';width: 0;
          height: 0;right: -12px;position: absolute;top: 0;
          border-top: 21px solid #d4ad62;
          border-right: 12px solid transparent;}
      }
    }
    p{font-size: 12px;}
  }
  img{position: absolute;width: 150px;height: 200px;right: 0;bottom: 0;}
}
.news-l-r{
  .item:first-child{margin-bottom: 20px;}
  tr:nth-child(3) td{border-bottom: 1px dashed #e1e1e1;}
}
.news-arrow .item:last-child{border-bottom: 1px dashed #e1e1e1;}
.topBanner{height: 500px;
  :deep(.el-carousel__container){height: 100%;}
}
@media (max-width: 500px) {
  .forWei {
    height: 100vh;
    overflow: auto;
    background: #F6F6FA;
    padding: 1px;
    .wbg{padding:0 10px;}
    .nakedTitle h3{margin: 10px 0;}
  }
  .topBannerbox {
    background: #fff;
    padding: 1px;

    .el-carousel {
      --el-carousel-indicator-height: 4px;
      --el-carousel-indicator-width: 4px;
    }
  }
  .topBanner{height: 220px;border-radius: 10px;margin: 15px;
    h3{text-align: left;font-size: 15px;padding: 30px 15px 20px;
    }
    :deep(.el-carousel__indicators--horizontal){left: auto;right: 0;
      bottom: 12px;
    }
    :deep(.el-carousel__button){border-radius: 5px;}
    :deep(.el-carousel__indicator.is-active button){width: 12px;}
  }

}
</style>