<template>
  <div class="container">
    <div class="mask" @click="handleClose"></div>
    <!-- 主体内容区域 -->
    <div class="broadcast">
      <!-- 标题区域 -->
      <div class="broadcast_title">
        <div class="title_name">播发统计</div>
        <div class="title_text">
          累计播发{{ numOfBroadcasts }}条&nbsp;&nbsp;&nbsp;&nbsp;播发时长{{
            broadcastDuration
          }}小时
        </div>
      </div>

      <!-- 关闭按钮区域 -->
      <div class="close_icon" @click="handleClose"></div>

      <!-- 表格区域 -->
      <div class="broadcast_table">
        <el-table :data="tableData" height="968px" style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="100"
          />
          <el-table-column
            prop="title"
            label="播发内容"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column prop="address" label="播发地点" align="center" />
          <el-table-column
            prop="broadcastType"
            label="广播类型"
            align="center"
          />
          <el-table-column prop="messageType" label="消息类型" align="center" />
          <el-table-column prop="playTime" label="播出时间" align="center" />
        </el-table>
      </div>

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

<script setup lang="ts">
import { ref, onMounted } from "vue";
// 引入广播相关的数据接口
import { reqBroadcastList } from "@/api/broadcast/index";

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

// 列表数据
const tableData = ref([]);
// 当前页
const curPage = ref(1);
// 每页多少条
const pageSize = ref(12);
// 总条数
const total = ref(0);
// 累计播发条数
const numOfBroadcasts = ref(0);
// 累计播发时长
const broadcastDuration = ref(0);

onMounted(() => {
  getData();
});

// 获取播发统计数据
const getData = async () => {
  const res = await reqBroadcastList({
    curPage: curPage.value,
    pageSize: pageSize.value,
  });
  // console.log(res);

  // 累计播发条数
  numOfBroadcasts.value = res.data.numOfBroadcasts;
  // 累计播发时长
  broadcastDuration.value = res.data.broadcastDuration;
  // 列表数据
  tableData.value = res.data.recordPage.list;
  // 总条数
  total.value = res.data.recordPage.totalCount;
};

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

// 点击关闭按钮回调
const handleClose = () => {
  $emit("closeDialog", false);
};
</script>

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

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

    .broadcast_title {
      display: flex;
      margin-top: 51px;
      margin-left: 51px;
      width: 1572px;
      height: 96px;
      background-image: url(@/assets/images/85.png);
      background-size: 100% 100%;

      .title_name {
        margin-left: 100px;
        line-height: 96px;
        font-size: 40px;
        font-family: "庞门正道标题体";
        background-image: linear-gradient(
          rgba(0, 219, 255, 1),
          rgba(0, 179, 255, 1)
        );
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .title_text {
        margin-left: 83px;
        height: 96px;
        line-height: 96px;
        font-size: 20px;
      }
    }

    .close_icon {
      position: absolute;
      top: 59px;
      right: 67px;
      width: 82px;
      height: 82px;
      cursor: pointer;
      background-image: url(@/assets/images/12.png);
      background-size: 100% 100%;
    }

    .broadcast_table {
      margin-top: 46px;
      margin-left: 53px;
      width: 1684px;
      height: 968px;

      .table_btn {
        color: #0aadda;
        font-size: 16px;
        cursor: pointer;
      }
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-left: 53px;
      width: 1684px;
      height: 100px;
    }
  }
}

/*最外层透明*/
.broadcast_table ::v-deep(.el-table),
.broadcast_table ::v-deep(.el-table__expanded-cell) {
  background-color: transparent;
  color: white;
  border: none;
}
/* 表格内背景颜色 */
.broadcast_table ::v-deep(.el-table th),
.broadcast_table ::v-deep(.el-table tr),
.broadcast_table ::v-deep(.el-table td) {
  background-color: transparent !important;
  color: white;
  font-size: 16px;
  height: 65px;
  border-color: rgba(255, 255, 255, 0.1);
}

// 表格底部白线清除
::v-deep(.el-table__inner-wrapper::before) {
  height: 0;
}

// 修改表头背景颜色
::v-deep(.el-table__header) {
  background-color: rgba(41, 67, 102, 0.7);
}

::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: #000;
  background-color: #cccccc;
}

::v-deep(.el-pagination.is-background .el-pager li.is-active) {
  color: #fff;
  background-color: #0aadda;
}
</style>
