<template>
  <div style="background: #F5F5FA;">
    <a-carousel class="carousel">
      <div class="first-carousel">
        <div class="first-carousel-content-div">
          <div class="title">公开、公平、公正、诚实信用</div>
          <div class="sub-title">以透明接受监督，以公平维系秩序，以公正树立权威，以信用铸就基石</div>
          <div class="icon"></div>
        </div>
      </div>
      <div></div>
      <div></div>
    </a-carousel>
    <div class="list-div">
      <div class="menu-div">
        <div class="title">招标专区</div>
        <div :class="`menu-button ${type == 0? 'menu-active': ''}`" @click="changeMenu(0)">招标公告</div>
        <div :class="`menu-button ${type == 1? 'menu-active': ''}`" @click="changeMenu(1)">变更公告</div>
        <div :class="`menu-button ${type == 3? 'menu-active': ''}`" @click="changeMenu(3)">中标公告</div>
        <div :class="`menu-button ${type == 2? 'menu-active': ''}`" @click="changeMenu(2)">废标公告</div>
      </div>
      <div class="content-div">
        <div class="content-menu">
          <div class="menu-item" @click="changeContentMenu(null)">
            全部
            <div v-if="bidtype == null" class="menu-item-active"></div>
          </div>
          <div class="menu-item" @click="changeContentMenu('材料类招标')">
            材料
            <div v-if="bidtype == '材料类招标'" class="menu-item-active"></div>
          </div>
          <div class="menu-item" @click="changeContentMenu('工程类招标')">
            工程
            <div v-if="bidtype == '工程类招标'" class="menu-item-active"></div>
          </div>
          <div class="menu-item" @click="changeContentMenu('服务类招标')">
            服务
            <div v-if="bidtype == '服务类招标'" class="menu-item-active"></div>
          </div>
        </div>
        <a-spin tip="加载中..." :spinning="loading">
          <div class="content-list">
            <div class="content-list-item" v-for="item in showList">
              <div style="display: flex; align-items: center;">
                <div class="list-icon"></div>
                <div class="list-title">{{getShowType(item.BiddingType)}}｜{{ item.Title }}</div>
              </div>
              <div class="list-time">[ {{dayjs(item.CreateTime).format('YYYY-MM-DD')}} ]</div>
            </div>
          </div>
        </a-spin>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import { LoadBidAnnouncement } from '@/api/demo/announcement'
import dayjs from "dayjs"
onMounted(() => {
  query()
})

const type = ref(0)
const bidtype = ref(null)
const showList = ref([])
const loading = ref(false)
const changeMenu = (value) => {
  type.value = value
  query()
}
const changeContentMenu = (type) => {
  bidtype.value = type
  query()
}
const query = () => {
  let requestParams = {
    type: type.value,
    bidtype: bidtype.value,
  }
  loading.value = true
  LoadBidAnnouncement(requestParams).then(res => {
    showList.value = res.items
  }).finally(() => {
    loading.value = false
  })
}
const getShowType = (type) => {
  switch(type){
    case '材料类招标':
      return '材料'
    case '工程类招标':
      return '工程'
    case '服务类招标':
      return '服务'
    default:
      return type
  }
}
</script>

<style lang="scss" scoped>


:deep(.slick-slide h3) {
  color: #fff;
}
.carousel{
  margin-bottom: 36px;
  :deep(.slick-slide) {
    text-align: center;
    height: 621px;
    // line-height: 160px;
    background: #364d79;
    overflow: hidden;
  }
  :deep(.slick-dots){
    li{
      width: 62px;
    }
  }
  .first-carousel{
    position: relative;
    width: 100%;
    height: 621px;
    aspect-ratio: 1920 / 621;
    background-image: url('/public/homepage/homepage_first_carousel.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    .first-carousel-content-div{
      position: absolute;
      top: 62px;
      left: 135px;
      .title{
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        font-size: 80px;
        color: #FFFFFF;
        line-height: 112px;
        text-align: left;
        font-style: normal;
        margin-bottom: 13px;
      }
      .sub-title{
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        font-size: 30px;
        color: #FFFFFF;
        line-height: 42px;
        text-align: left;
        margin-bottom: 50px;
      }
      .icon{
        width: 68px;
        height: 4px;
        background: #FFFFFF;
      }
    }
  }
}
.list-div{
  margin: auto;
  width: 1440px;
  height: 756px;
  margin-bottom: 66px;
  display: flex;
  .menu-div{
    width: 394px;
    height: 756px;
    padding-top: 31px;
    padding-left: 43px;
    background-image: url('/public/homepage/homepage_menu.png');
    background-size: 100% 100%;
    .title{
      font-family: PingFangSC-Semibold;
      font-weight: 600;
      font-size: 46px;
      color: #FFFFFF;
      line-height: 65px;
      text-align: left;
      margin-bottom: 42px;
    }
    .menu-button{
      width: 100%;
      height: 74px;
      margin-bottom: 16px;
      font-family: PingFangSC-Semibold;
      font-weight: 600;
      font-size: 30px;
      color: #FFFFFF;
      line-height: 42px;
      padding-left: 42px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    .menu-active{
      border-radius: 37px 0px 0px 37px;
      background: linear-gradient( 126deg, #F5F7FB 0%, #F8F9FF 100%);
      border-radius: 37px 0px 0px 37px;
      color: #175DD6;
    }
  }
  .content-div{
    width: 1046px;
    padding: 22px 38px 69px 35px;
    background: #FFFFFF;
    box-shadow: 0px 5px 10px 0px rgba(241,242,250,0.5);
    border-radius: 0px 12px 12px 0px;
    .content-menu{
      height: 65px;
      background: #F5F7FB;
      padding-top: 16px;
      padding-left: 19px;
      display: flex;
      margin-bottom: 7px;
      .menu-item{
        width: 94px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 22px;
        color: #1C1C1C;
        line-height: 34px;
        text-align: left;
        // margin-bottom: 9px;
        margin-right: 74px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        cursor: pointer;
      }
      .menu-item-active{
        margin-top: 9px;
        width: 100%;
        height: 6px;
        background: #0081FF;
        border-radius: 5px 5px 0px 0px;
      }
    }
    .content-list{
      padding-left: 17px;
      height: 600px;
      overflow: auto;
      scrollbar-width: none;
      ::-webkit-scrollbar{
        width: 0;
        height: 0;
      }
      .content-list-item{
        width: 100%;
        height: 65px;
        border-bottom: 1px dashed rgba(87, 112, 134, 0.3);
        display: flex;
        padding-left: 4px;
        padding-right: 6px;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        .list-icon{
          width: 6px;
          height: 6px;
          background: #0081FF;
          margin-right: 11px;
          border-radius: 50%;
        }
        .list-title{
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 16px;
          color: #1C1C1C;
          line-height: 34px;
        }
        .list-time{
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 16px;
          color: #1C1C1C;
          line-height: 34px;
          opacity: 0.48;
        }
      }
      .content-list-item:hover{
        background: #F5F7FB;
        .list-title{
          color: #0081FF;
        }
        .list-time{
          opacity: 1;
        }
      }
    }
  }
}
</style>
