<template>
  <div>
    <div class="box">
      <el-breadcrumb class="mt20 forPc" :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">
          <el-icon>
            <HomeFilled />
          </el-icon>
          首页
        </el-breadcrumb-item>
        <el-breadcrumb-item>会员服务</el-breadcrumb-item>
        <el-breadcrumb-item>培训计划</el-breadcrumb-item>
      </el-breadcrumb>

      <el-card class="mt20">
        <div class="filterBar">
          <label class="text-primary-l-border">年份：</label>
          <ul>
            <li v-for="y in years" :key="y" :class="{'active':y==currYear}" @click="currYear=y">{{ y }}年</li>
          </ul>
        </div>
      </el-card>
      <el-card v-loading="loading" class="mt20 mb20">
        <h1 class="text-center">{{ currYear }}年度大众跆拳道培训计划表</h1>
        <br>
        <h3 class="text-center">{{ currYear }}年度中国跆拳道协会<br>
          大众跆拳道培训计划表</h3>
        <table class="table table-striped">
          <thead>
            <tr class="bg-gold">
              <td>序号</td>
              <td>培训名称</td>
              <td>期数</td>
              <td>培训项目</td>
              <td>月份</td>
              <td>培训地点</td>
              <td>负责人</td>
              <td>联系电话</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(p,i) in ztxPlanList" :key="p.id">
              <td>{{ i+1 }}</td>
              <td>{{ p.planName }}</td>
              <td>第{{ szToHz(p.qiNum) }}期</td>
              <td>{{ p.projectsStr }}</td>
              <td>{{ p.targetMonth }}</td>
              <td>{{ p.address }}</td>
              <td>{{ p.personInCharge }}</td>
              <td>{{ p.contact }}</td>
            </tr>
            <tr v-if="ztxPlanList.length==0">
              <td colspan="8">
                <el-empty />
              </td>
            </tr>
          </tbody>
        </table>

        <br><br>
        <h3 class="text-center">{{ currYear }}年度各省跆拳道协会<br>
          大众跆拳道培训计划表</h3>
        <table class="table table-striped">
          <thead class="bg-gold">
            <tr>
              <td>序号</td>
              <td>省份</td>
              <td>培训活动期数</td>
              <td>培训项目</td>
              <td>月份</td>
              <td>培训地点</td>
              <td>培训单位</td>
              <td>负责人</td>
              <td>联系电话</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(p,i) in planList" :key="p.id">
              <td>{{ i+1 }}</td>
              <td>{{ p.provinceName }}</td>
              <td>第{{ szToHz(p.qiNum) }}期</td>
              <td>{{ p.projectsStr }}</td>
              <td>{{ p.targetMonth }}</td>
              <td>{{ p.address }}</td>
              <td>{{ p.memName }}</td>
              <td>{{ p.personInCharge }}</td>
              <td>{{ p.contact }}</td>
            </tr>
            <tr v-if="planList.length==0">
              <td colspan="9">
                <el-empty />
              </td>
            </tr>
          </tbody>
        </table>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { getPlanYears, getYearZtxPlanList } from '@/apiPc/train'
import { ArrowRight } from '@element-plus/icons-vue'
import { dayjs } from 'element-plus'
import { szToHz } from '@/utils/ruoyi'

const years = ref([])
const currYear = ref(null)
const ztxPlanList = ref([])
const planList = ref([])
const loading = ref(false)


onMounted(() => {
  currYear.value = dayjs().year()
  getPlanYears().then(res => {
    years.value = res.data
  })
})

watch(currYear, (val) => {
  if (val) {
    getPlanList()
  }
})

function getPlanList() {
  loading.value = true

  Promise.all([
    getYearZtxPlanList({
      year: currYear.value,
      type: 1// 中跆协
    }),
    getYearZtxPlanList({
      year: currYear.value,
      type: 0 // 省
    })
  ]).then(res => {
    loading.value = false
    ztxPlanList.value = res[0].rows
    planList.value = res[1].rows
  })
}

</script>

<style scoped lang="scss">
.table {    border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
  td,th{    padding: 8px;    font-size: 14px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;}
}
.filterBar{display: flex;align-items: center;
  label{color: #000;}
  ul{display: flex;margin: 0;
    li{padding: 4px 15px;margin-left: 15px;cursor: pointer;}
    .active{background: var(--el-color-primary);color: #fff;cursor: default}
  }
}
</style>