<template>
  <div>
    <div class="box">
      <el-breadcrumb class="mt20 forPc mb20" :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">
          <el-icon>
            <HomeFilled/>
          </el-icon>
          首页
        </el-breadcrumb-item>
        <el-breadcrumb-item>规章制度</el-breadcrumb-item>
      </el-breadcrumb>
<!--      <el-card class="mt20 mb20" :body-style="{ padding: '0px' }">-->
        <div class="flexBody">
          <el-tabs class="forPc" v-model="activeName" tab-position="left" @tab-change="changeTab" @tab-click="clickTab">
            <el-tab-pane v-for="(tab,index) in list" :label="tab.name" :name="index">
              <template #label>
                <span class="custom-tabs-label">
                  <span class="tabFont">{{ tab.name }}</span>
                </span>
              </template>
            </el-tab-pane>
          </el-tabs>
          <el-tabs class="forWei wTabtop" v-model="activeName" @tab-change="changeTab" @tab-click="clickTab">
            <el-tab-pane v-for="(tab,index) in list" :label="tab.name" :name="index">
              <template #label>
                <span class="custom-tabs-label">
                  <span class="tabFont">{{ tab.name }}</span>
                </span>
              </template>
            </el-tab-pane>
          </el-tabs>
          <div class="infoPart">
            <h3 class="forPc">{{ nowTab.name }}</h3>
            <Fee v-if="showVipFee"/>
            <div v-else class="newsLine">
              <div v-for="n in newsList" :key="n.id" class="item" @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>
                <div class="item-body">
                  <h3>{{ n.name }}</h3>
                </div>
                <a class="go"/>
              </div>
              <div class="pc-page-box" v-if="total>9">
                <PaginationPc v-model:page="query.pageNum" v-model:limit="query.pageSize" :total="total"
                              @pagination="getList"
                />
              </div>
              <el-empty v-if="newsList?.length == 0" description="暂无数据"/>
            </div>
          </div>
        </div>

<!--      </el-card>-->

    </div>
  </div>
</template>
<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { getNewsListById, getRuleKind } from '@/apiPc/webSite'
import { useRouter } from 'vue-router'
import Fee from './components/fee'
const router = useRouter()
const activeName = ref(0)
const showVipFee = ref(false)
const list = ref([])
const newsList = ref([])
const nowTab = ref({
  tag: ''
})
const total = ref(0)
const query = ref({
  pageSize: 10,
  pageNum: 1
})
onMounted(() => {
  getKindList()
})
const getKindList = () => {
  getRuleKind().then(res => {
    list.value = res.data
    var obj = {
      name: "会费标准",
      tag: "fee"
    }
    list.value.push(obj)
    nowTab.value = list.value[0]
    changeTab(0)
  })
}
const changeTab = (n) => {
  nowTab.value = list.value[n]
  if (nowTab.value.tag == 'fee') {
      showVipFee.value = true
  } else {
    showVipFee.value = false
    query.value.sortId = list.value[n].sortId
    query.value.code = list.value[n].code
    getList()
  }
}
const clickTab = () => {

}
const getList = () => {
  getNewsListById(query.value).then(res => {
    newsList.value = res.rows
    total.value = res.total
  })
}
const goDetail = (n) => {
  if (n.isOut == '1') {
    window.open(n.jumpUrl)
  } else {
    router.push({
      path: `/news/detail/${n.noteId}`
    })
  }
}
</script>
<style lang="scss" scoped>
.custom-tabs-label {
  display: flex;
  align-items: center;
}

:deep(.el-tabs--left .el-tabs__item.is-left) {
  margin: 0 0 20px;
}

:deep(.el-tabs--left .el-tabs__active-bar.is-left) {
  left: 0 !important;
  right: auto !important;
}

:deep(.el-tabs--left .el-tabs__nav-wrap.is-left::after) {
  display: none;
}

:deep(.el-tabs__item.is-active) {
  font-size: 15px;background: #fff;
}

:deep(.el-tabs--left .el-tabs__header.is-left) {
  padding: 30px 0 30px 30px;
  background: #f6f6f5;
  min-width: 280px;
}

.tabFont {
  margin-left: 20px;
}

.flexBody {
  display: flex;background: #fff;margin-bottom: 20px;
}

.infoPart {
  padding: 20px;
  flex: 1;

  & > h3 {
    font-size: 24px;
    color: var(--el-color-primary);
  }
}
.forWei {
  display: none;
}
@media (max-width: 500px) {
  .box{width: 100%}
  .forWei {
    display: block;
  }
  .forPc{display: none}
  :deep(.el-tabs__nav-scroll){overflow: auto;}
  .flexBody{display: block;background: transparent;}
  .infoPart{background: #fff;padding: 10px;margin:0 15px}
  .newsLine{
    .item{height: 50px;
      .date{height: 34px;width: 44px;margin: 0;
        .day{font-size: 16px;}
        p{font-size: 12px;}
      }
      h3{font-size: 14px;}
    }
    .go{display: none;}
    .item-body{width: 80%;}
  }
}
.wTabtop{
  :deep(.el-tabs__header){background: #fff;padding:10px 15px 0;}
  :deep(.el-tabs__content){padding:0 10px;}

}

</style>