<template>
  <div class="hackathon clear">
    <div class="container">
      <!-- 标题 title -->
      <BigTitleComVue :bigTitle="titleInfo.title" :subTitle="titleInfo.subTitle" />
      <!-- 分割线 Devider -->
      <LineComVue />
      <!-- 二级标题 Secondary title -->
      <div class="secondary" v-html="HackathonDesc.content">

      </div>
    </div>

    <div class="hackathon-option container clear">
      <ul>
        <li v-for="(option) in options" :key="option.id" style="cursor: pointer" :class="option.id == activeLi ? 'li-active' : ''"
          @click="changeActive(option.id)">{{ option.text }}
        </li>
      </ul>
    </div>
    <div class="container hackathon-content">
      <NewsComVue flag="Hackathon" v-for="data in dataList" :key="data.id" :data="data" />
    </div>

    <div class="container pagination">
      <PaginationComVue :page="page" @changePage="changePage" :total="total" :per="per" :dataList="dataList" />
    </div>
  </div>
</template>

<script setup>
import BigTitleComVue from '../components/BigTitleCom.vue';
import LineComVue from '../components/LineCom.vue';
import NewsComVue from '../components/NewsCom.vue';
import PaginationComVue from '../components/PaginationCom.vue';
import { hackathonData } from '../assets/datas/Datas'
import {onMounted, reactive, ref} from "vue";
import {getHackathonApi, getPageApi} from "../api/manage.js";
import useTitleInfo from "../utils/useTitleInfo.js";

const titleInfo = useTitleInfo()
const emit = defineEmits(['backTop'])

// 选项
const options = [
  { id: 0, text: 'All' },
  { id: 1, text: 'Ongoing' },
  { id: 2, text: 'Upcoming' },
  { id: 3, text: 'Past' }
]

// 选中选项状态
// 0 All 1 onGoing 2 upComing 3 Past
let activeLi = ref(0);

// 数据总数 Total databases count
let total = ref(0);
// 页码 page number
let page = ref(1);
// 每页显示数量  displays the number per page
let per = ref(30);

let isMid = ref(false);

// 数据列表
let dataList = ref([]);

const HackathonDesc = reactive({})

onMounted(() => {
  function changeSize() {
    const pageSize = window.innerWidth;
    if (pageSize >= 1440) {
      per.value = 30;
      isMid.value = false;
    } else if (pageSize > 431 && pageSize < 1440) {
      per.value = 20;
      isMid.value = true;
    } else if (pageSize <= 431) {
      per.value = 10;
      isMid.value = false;
    }
  }

  window.onresize = changeSize
  changeSize()

  // 获取数据
  getData(activeLi.value)
  emit('backTop');

  getPageApi({title: 'Hackathon Hero Section'}).then(res=>{
    console.log(res)
    HackathonDesc.content = res.data.content;
  })
})

// 切换选项
const changeActive = (id) => {
  activeLi.value = id
  page.value = 1
  getData(activeLi.value)
}

// 切换页码
const changePage = (data) => {
  page.value = data
  getData(activeLi.value)
  emit('backTop');

}

// 获取数据
const getData = (option) => {
  console.log(option);
  dataList.value = [];
  if (option === 0) {
    getHackathonApi({page: page.value, limit: per.value}).then(({data})=>{
      if (data) {
        per.value = data.per_page;
        page.value = data.current_page;
        total.value = data.total;
        dataList.value = data.data;
      }
    })
    // hackathonData.forEach((item) => {
    //   dataList.value.push(item);
    // })
  } else {
    console.log(options.find(it=> it.id === option).text)
    getHackathonApi({status: options.find(it=> it.id === option).text, page: page.value, limit: per.value}).then(({data})=>{
      if (data) {
        per.value = data.per_page;
        page.value = data.current_page;
        total.value = data.total;
        dataList.value = data.data;
      }
    })
    // hackathonData.forEach((item) => {
    //   if (option == item.status) {
    //     dataList.value.push(item);
    //   }
    // })
  }

  total.value = dataList.value.length;
  // 获取数据渲染
  dataList.value = dataList.value.slice((page.value - 1) * per.value, page.value * per.value);
  emit('backTop');
}

</script>

<style lang="scss" scoped>
.hackathon {
  max-width: 1000px;
  margin: 0 auto;

  .secondary {
    margin: 28px 0;

    .secondary-title {
      font-family: 'Cinzel';
      font-style: normal;
      font-weight: 400;
      font-size: 28px;
      line-height: 32px;
      text-align: center;
      color: #000000;
      margin-bottom: 12px;
    }

    .secondary-subtitle {
      font-family: 'Cinzel';
      font-style: normal;
      font-weight: 400;
      font-size: 14Px;
      line-height: 129%;
      text-align: center;
      color: rgba(0, 0, 0, 0.5);
    }
  }

  .hackathon-option {

    ul {
      margin-right: -4px;
      float: right;
      display: flex;
      justify-content: space-between;

      li {
        width: 70px;
        text-align: center;
        padding: 10px 0;
        margin: 0 4px;
        font-family: 'Raleway';
        font-style: normal;
        font-weight: 400;
        font-size: 14Px;
        text-align: center;
        background-color: #ffffff;
        color: #000000;
      }

      .li-active {
        font-weight: 700;
        background-color: #ff6d00;
        color: #fff;
      }
    }

    @media screen and (min-width: 1440Px) and (max-width: 100vw) {
      padding: 0 52px !important;

      ul {
        margin-right: -12Px;
      }

      li {
        width: 82px !important;
        padding: 12Px 0 !important;
        margin: 0 10px !important;
      }
    }

    @media screen and (min-width: 0Px) and (max-width: 431Px) {
      ul {
        width: 100%;
        margin: 0 !important;
      }

      li {
        width: 76Px !important;
        padding: 8px 0 !important;
        margin: 0 !important;
      }
    }

  }

  .hackathon-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0 30Px;

    @media screen and (min-width:1440Px) and (max-width: 100vw) {
      margin: 0px;
      padding: 20px 28px !important;
    }

    @media screen and (min-width:0Px) and (max-width: 431Px) {
      width: 100%;
      margin: 0;
      margin-top: -30px;
      padding-bottom: 0px !important;
    }
  }

  @media screen and (min-width: 1440Px) and (max-width: 100vw) {
    margin-top: 40px !important;

    .secondary-title {
      font-size: 42px !important;
      line-height: 48px !important;
    }

    .secondary-subtitle {
      font-size: 16Px !important;
    }
  }

  @media screen and (min-width: 0Px) and (max-width: 431Px) {
    .secondary {
      margin-bottom: 0;
    }

    .secondary-title {
      font-size: 26px !important;
      line-height: 30px !important;
    }

    .secondary-subtitle {
      font-size: 12Px !important;
    }
  }

  .pagination {
    float: right;
    margin: 20px 0px 20px;

    @media screen and (min-width:1440Px) and (max-width: 100vw) {
      padding-top: 0 !important;
      margin: 0px 0px 36px !important;
    }

    @media screen and (min-width:0Px) and (max-width: 431Px) {
      padding-top: 0px !important;
      margin: 0 0 20px !important;
    }
  }
}
</style>
