<template>
  <div class="container">
    <!-- 遮罩层区域 -->
    <div class="mask" @click="handleClose"></div>
    <!-- 列表弹窗内容区域 -->
    <div class="newsList">
      <!-- 标题区域 -->
      <div class="title">
        <div class="title_text">新闻详情</div>
        <div class="title_icon" @click="handleClose"></div>
      </div>

      <!-- 条件搜索区域 -->
      <div class="serach">
        <div class="serach_box">
          <el-date-picker
            v-model="timeValue"
            type="daterange"
            large="large"
            unlink-panels
            range-separator="至"
            start-placeholder="请选择开始日期"
            end-placeholder="请选择结束日期"
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="changeTime"
          />
        </div>
      </div>

      <!-- 新闻列表区域 -->
      <div class="list">
        <!-- 每一条新闻区域 -->
        <div class="list_item" v-for="item in newsList" :key="item.id">
          <!-- 图片区域 -->
          <div class="item_img">
            <img :src="item.image" />
          </div>
          <!-- 新闻信息区域 -->
          <div class="item_info">
            <div class="info_name">{{ item.title }}</div>
            <div class="info_time">{{ item.publishTime }}</div>
          </div>
          <!-- 箭头图标区域 -->
          <div class="item_icon" @click="handleLookDetail(item)">
            <img src="@/assets/images/right.png" />
          </div>
          <!-- 底部边框区域 -->
          <div class="item_line"></div>
        </div>
      </div>

      <!-- 分页器区域 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="curPage"
          v-model:page-size="pageSize"
          hide-on-single-page
          :pager-count="5"
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>

      <!-- 每一条新闻详情弹窗区域 -->
      <Transition name="fade">
        <NewsDetailDialog
          v-show="showDetail"
          :detailObj="detailObj"
          @closeDetail="closeDetail"
        />
      </Transition>
    </div>
  </div>
</template>

<script setup lang="ts">
import NewsDetailDialog from "./newsDetailDialog.vue";
import { onMounted, ref } from "vue";
// 引入新闻相关的接口
import { reqGetNewsList } from "@/api/news/index";

const $emit = defineEmits(["changeShowClose"]);

// 时间搜索框绑定数据
const timeValue = ref("");

// 新闻列表数据
const newsList = ref<any>([]);

// 当前页
const curPage = ref<number>(1);
// 每页多少条
const pageSize = ref<number>(7);
// 总条数
const total = ref<number>(0);
// 新闻详情弹窗显示隐藏控制
const showDetail = ref<boolean>(false);
// 新闻详情数据
const detailObj = ref({});

onMounted(() => {
  // 获取新闻列表数据
  getData();
});

// 获取新闻列表数据
const getData = async () => {
  const res = await reqGetNewsList({
    curPage: curPage.value,
    pageSize: pageSize.value,
    startTime: timeValue.value ? timeValue.value[0] : "",
    endTime: timeValue.value ? timeValue.value[1] : "",
  });
  // console.log(res);

  // 新闻列表数据
  newsList.value = res.data.list;
  // 总条数
  total.value = res.data.totalCount;
};

// 时间选择框选择时间时的回调
const changeTime = () => {
  curPage.value = 1;
  getData();
};

// 改变分页器当前页数时的回调
const handleCurrentChange = (v: number) => {
  curPage.value = v;
  getData();
};

// 点击每一个新闻箭头图标的回调
const handleLookDetail = (item: any) => {
  detailObj.value = item;
  showDetail.value = true;
};

// 点击关闭按钮图标回调
const handleClose = () => {
  $emit("changeShowClose", false);
};

// 自定义事件回调
const closeDetail = (data: boolean) => {
  showDetail.value = data;
};
</script>

<style lang="scss" scoped>
.container {
  z-index: 9999;
  position: absolute;
  top: -254px;
  left: -1526px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 7072px;
  height: 1872px;
  background-color: rgba($color: #000000, $alpha: 0.6);

  .mask {
    position: absolute;
    top: 0;
    width: 7072px;
    height: 1872px;
  }
  .newsList {
    position: relative;
    width: 1704px;
    height: 1302px;
    background-image: url(@/assets/images/news-list-background.png);
    background-size: 100% 100%;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 56px;
      width: 1704px;
      height: 87px;

      .title_text {
        margin-left: 161px;
        font-size: 40px;
        font-family: "庞门正道标题体";
        background-image: linear-gradient(#00dbff, #00b3ff);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .title_icon {
        margin-right: 48px;
        width: 82px;
        height: 82px;
        cursor: pointer;
      }
    }

    .serach {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 42px 46px 0;
      width: 100%;
      height: 100px;

      .serach_box {
        display: flex;
        width: 520px;
      }
    }

    .list {
      padding: 0 46px;
      width: 100%;
      height: 910px;

      .list_item {
        position: relative;
        display: flex;
        align-items: center;
        height: 130px;

        .item_img {
          width: 112px;
          height: 72px;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .item_info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 28px;
          height: 72px;
          font-size: 28px;

          .info_name {
            font-weight: bold;
          }
        }
        .item_icon {
          width: 27px;
          height: 27px;
          cursor: pointer;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .item_line {
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 6px;
          background-image: url(@/assets/images/news-list-bottomLine.png);
          background-size: 100% 100%;
        }
      }
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 0 46px;
      width: 100%;
      height: 132px;
    }
  }
}

::v-deep(.el-input__wrapper) {
  font-size: 18px;
  background-color: transparent;
  box-shadow: none;
  border: 1px solid #9c9c9c;
}

::v-deep(.el-pagination.is-background .el-pager li),
::v-deep(.el-pagination.is-background .btn-next),
::v-deep(.el-pagination.is-background .btn-prev) {
  color: #b0b0b0;
  border: 1px solid #b0b0b0;
  background-color: transparent;
}

::v-deep(.el-pagination.is-background .el-pager li.is-active) {
  color: #70b7fa;
}

::v-deep(.el-pagination__goto),
::v-deep(.el-pagination__classifier),
::v-deep(.el-input__inner) {
  color: #b0b0b0;
}

::v-deep(.el-range-separator),
::v-deep(.el-range-input) {
  color: #fff;
}
</style>
