<template>
  <div class="container">
    <div class="mask" @click="handleClose"></div>
    <!-- 主体内容区域 -->
    <div class="smoke">
      <!-- 标题区域 -->
      <div class="smoke_title">
        <div class="title_name">冒烟警告</div>
      </div>

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

      <!-- 表格区域 -->
      <div class="smoke_table">
        <el-table :data="tableData" height="968px" style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="100"
          />
          <el-table-column
            prop="place"
            label="播发地点"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column
            label="处置情况"
            show-overflow-tooltip
            align="center"
          >
            <template #default="{ row }">
              {{ row.handleStatus == 1 ? "处置中" : "已处置" }}
            </template>
          </el-table-column>
          <el-table-column prop="publishTime" label="发生时间" align="center" />
          <el-table-column label="操作" align="center">
            <template #default="{ row }">
              <div class="table_btn" @click="lookDetail(row)">查看详情</div>
            </template>
          </el-table-column>
        </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="cur"
          v-model:page-size="pageSize"
          @current-change="handleCurrentChange"
        />
      </div>

      <Transition name="fade">
        <SmokeDetailDialog
          v-if="showDetail"
          :showObj="showObj"
          @close="close"
        />
      </Transition>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import SmokeDetailDialog from "./smokeDetailDialog.vue";
// 引入防火相关的数据接口
import { reqFireData } from "@/api/fire/index";

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

// 冒烟警告详情弹窗数据
const showObj = ref({});
// 冒烟警告详情弹窗显示隐藏控制
const showDetail = ref(false);
// 冒烟警告列表数据
const tableData = ref([]);
// 每页多少条
const pageSize = ref(12);
// 当前页
const cur = ref(1);
// 总条数
const total = ref(0);

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

// 获取冒烟警告列表数据
const getData = async () => {
  const res = await reqFireData({
    cur: cur.value,
    pageSize: pageSize.value,
  });
  // console.log(res);
  tableData.value = res.data.list;
  total.value = res.data.totalCount;
};

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

// 点击查看详情回调
const lookDetail = (row: any) => {
  showDetail.value = true;
  showObj.value = row;
};

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

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

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

  .mask {
    position: absolute;
    top: -151px;
    width: 7072px;
    height: 1872px;
  }

  .smoke {
    position: relative;
    width: 1804px;
    height: 1302px;
    background-image: url(@/assets/images/9.png);
    background-size: 100% 100%;

    .smoke_title {
      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;
      }
    }

    .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%;
    }

    .smoke_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;
    }
  }
}

/*最外层透明*/
.smoke_table ::v-deep(.el-table),
.smoke_table ::v-deep(.el-table__expanded-cell) {
  background-color: transparent;
  color: white;
  border: none;
}
/* 表格内背景颜色 */
.smoke_table ::v-deep(.el-table th),
.smoke_table ::v-deep(.el-table tr),
.smoke_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>
