<template>
  <!-- 系统首页 介绍页 -->
  <div class="doorPage">
    <!-- 头部 -->
    <div class="doorHead">
      <img src="@/assets/images/login/logo.png" alt="logo" class="logo" />
      <div class="part">
        <p @click="gotoLogin" :class="ifExpand ? 'green' : ''">登录</p>
        <span>{{ dateTime }}</span>
      </div>
    </div>
    <!-- 按钮区域 -->
    <div class="btnList">
      <p :class="activeIndex == '1' ? 'active' : ''" @click="changeTab('1')">新闻资讯</p>
      <p :class="activeIndex == '2' ? 'active' : ''" @click="changeTab('2')">典型项目工程</p>
      <p :class="activeIndex == '3' ? 'active' : ''" @click="changeTab('3')">城市宣传片</p>
    </div>
    <!-- 内容区 -->
    <div class="doorCont">
      <!-- 新闻资讯 -->
      <div class="newsPage" v-if="activeIndex == '1'">
        <div class="contentNews">
          <div class="part" v-for="item in newsDataList" :key="item.id" @click="goNewsUrl(item)">
            <img :src="item.coverPhotosFileList.length > 0 ? item.coverPhotosFileList[0].url : newsBg" alt="缩略图" />
            <div class="content ellipsis">
              <h2 class="ellipsis">{{ item.newsTitle }}</h2>
              <p class="ellipsis title">{{ item.newsContent }}</p>
              <p class="date">{{ item.publishTime }}</p>
            </div>
          </div>
          <!-- 暂无数据 -->
          <el-empty :image-size="200" v-if="newsDataList.length == 0" />
        </div>
      </div>
      <!-- 典型项目工程 -->
      <div class="doorCarou" v-if="activeIndex == '2'">
        <div class="caroCont">
          <h1>槐荫公园文体设施项目(海绵系统化改造项目)</h1>
          <h3>项目简要介绍：</h3>
          <p>-智慧园林科普服务中心。总用地面积4335.43㎡，新建2层智慧园林科普服务中心，建筑面积1457.87㎡</p>
          <p>-休闲服务项目。新建3处景观及2处园路。</p>
          <p>
            -海绵系统化改造项目。主要包括客水引入工程、湿地改造提升工程、水质净化工程、雨水井修复工程、园林景观提升工程及宣教馆海绵系统化改造工程。
          </p>
        </div>
        <el-carousel class="carousel">
          <el-carousel-item>
            <img src="@/assets/images/login/show1.png" alt="底图" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="@/assets/images/login/show2.png" alt="底图" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="@/assets/images/login/show3.png" alt="底图" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="@/assets/images/login/show4.png" alt="底图" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 城市宣传片 -->
      <div class="videoPage" v-if="activeIndex == '3'">
        <el-carousel class="carouselV" :autoplay="false">
          <el-carousel-item v-for="item in videoList" :key="item.id">
            <video
              id="videos"
              :src="item.coverPhotosFileList.length > 0 ? item.coverPhotosFileList[0].url : ''"
              type="video/mp4"
              autoplay
              loop
              controls
            ></video>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!-- 底部 -->
    <div class="doorFooter">
      <div class="footCon">
        <img src="@/assets/images/transition/bzIcon.png" alt="国徽" class="bzImg" />
        <div class="part">
          <p>技术支持：开封市门户网站管理中心</p>
          <p>主办：开封市住房和城乡建设局</p>
          <p>地址：湖北省开封市交通大道262号建设大厦</p>
          <p>投稿信箱：xgszjjbgs@163.com</p>
          <p>联系电话：0712-2314358</p>
        </div>
        <div class="part">
          <img src="https://www.pgyer.com/app/qrcode/bp0qZc" alt="安卓APP扫码" />
          <p>安卓APP下载</p>
        </div>
        <div class="part">
          <img src="https://www.pgyer.com/app/qrcode/bp0qZc" alt="微信公众号关注" />
          <p>微信公众号关注</p>
        </div>
      </div>
    </div>
    <!-- 登录框 -->
    <div :class="['loginPages animate__animated', ifExpand ? 'animate__bounceInRight' : 'animate__bounceOutRight']" v-if="showLogin">
      <LoginPage v-if="showLogin"></LoginPage>
    </div>
  </div>
</template>

<script setup name="系统首页">
import LoginPage from './login.vue';
import { manageNewsPage, manageVideoPage } from '@/api/publicService/index';
import newsBg from '@/assets/images/login/loginBg.png';

const { proxy } = getCurrentInstance();
const week = ref(['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']);
const dateTime = ref(proxy.moment(new Date()).format('YYYY年MM月DD日 ') + week.value[new Date().getDay()]);
const ifExpand = ref(false);
const activeIndex = ref('2');
const newsDataList = ref([]);
const videoList = ref([]);
const showLogin = ref(false);

// 登录
function gotoLogin() {
  showLogin.value = true;
  ifExpand.value = !ifExpand.value;
}
// 切换按钮
function changeTab(val) {
  activeIndex.value = val;
}
// 获取新闻列表
async function getNewsList() {
  let res = await manageNewsPage({ pageNum: 1, pageSize: 999 });
  if (res && res.code == 200) {
    newsDataList.value = res.data;
  }
  let res2 = await manageVideoPage({ pageNum: 1, pageSize: 999 });
  if (res2 && res2.code == 200) {
    videoList.value = res2.data;
  }
}
// 新闻点击跳转
function goNewsUrl(item) {
  // 新开窗口打开新闻详情
  window.open(item.newsUrl);
}

onMounted(() => {
  getNewsList(); //获取新闻列表、宣传片
});
</script>
<style lang="scss">
.doorPage {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  .loginPages {
    position: absolute;
    top: 15%;
    right: 3%;
    z-index: 100;
  }
  .btnList {
    position: absolute;
    left: 0px;
    top: 15%;
    z-index: 110;
    width: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
    p {
      background: linear-gradient(180deg, #015b9c 0%, #01466f 100%);
      font-size: 18px;
      padding: 25px 15px;
      border-radius: 0px 8px 8px 0px;
      margin-bottom: 20px;
      cursor: pointer;
      &:hover {
        color: #fff;
      }
    }
    p.active {
      background: url('@/assets/images/login/tabBg.png') no-repeat;
      background-size: 100% 100%;
      color: #fff;
    }
  }
  .doorHead {
    width: 100%;
    height: 65px;
    background: #004770;
    align-items: center;
    display: flex;
    justify-content: space-between;
    color: #99b5c6;
    font-size: 18px;
    padding: 0px 50px;
    .logo {
      width: 393px;
      height: 44px;
    }

    .part {
      width: 260px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      p {
        cursor: pointer;
      }
    }
  }
  .doorCont {
    width: 100%;
    height: calc(100vh - 225px);
    position: relative;
    .newsPage {
      width: 100%;
      height: calc(100vh - 225px);
      background: url('@/assets/images/login/newsBg.png') no-repeat;
      background-size: 100% 100%;
      overflow: hidden;
      .contentNews {
        width: 900px;
        height: 96%;
        margin-top: 1%;
        margin-left: calc((100vw - 900px) / 2);
        background: rgba(0, 77, 121, 0.6);
        padding: 10px 30px;
        overflow: auto;

        .part {
          display: flex;
          margin-top: 20px;
          width: 100%;
          padding: 10px 50px;
          cursor: pointer;
          &:hover {
            background: #006daa;
          }
          img {
            width: 150px;
            height: 100px;
            margin-right: 15px;
          }
          .content {
            font-size: 14px;
            width: 735px;
            .title {
              margin: 20px 0px;
              color: #2f8cb4;
            }
            h2 {
              color: #fff;
              font-size: 20px;
            }
            .date {
              float: right;
              color: #99b5c6;
            }
          }
        }
      }
    }
    .videoPage {
      #videos,
      .carouselV,
      .el-carousel__container {
        width: 100%;
        height: calc(100vh - 225px);
      }
    }

    .doorCarou {
      height: calc(100vh - 225px);
      width: 100%;
      background: url('@/assets/images/transition/doorBg.png') no-repeat;
      background-size: 100% 100%;
      overflow: hidden;
      display: flex;
      padding: 150px;

      .carousel {
        width: 400px;
        height: 300px;
        margin-left: 50px;
        .el-carousel__container {
          border: 5px solid #fff;
        }
        .el-carousel-item,
        .el-carousel__container {
          width: 400px;
          height: 300px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .caroCont {
        flex: 1;
        color: #003756;
        font-size: 20px;
        h3 {
          margin: 10px auto;
        }
        p {
          margin-bottom: 8px;
        }
      }
    }
  }
  .doorFooter {
    width: 100%;
    height: 160px;
    background: #004770;
    display: flex;
    justify-content: center;
    .footCon {
      width: 60%;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      color: #fff;
      font-family: PingFang SC;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      .bzImg {
        width: 78px;
        height: 84px;
      }
      .part {
        img {
          width: 90px;
          height: 90px;
          border-radius: 10px;
        }
        p {
          text-align: center;
          margin-top: 6px;
        }
      }
    }
  }
}
</style>