<template>
  <div>
    <div class="title">
      原始数据
      <div class="title_time">{{ currentDate }}</div>
    </div>
    <div class="card">
      <div class="screen">
        <div>
          电站&ensp;&ensp;
          <el-select v-model="status" placeholder="选择电站" size="large" style="width: 240px" @change="postemsDevice">
            <el-option v-for="item in cities" :key="item.id" :label="item.stationName" :value="item.id" />
          </el-select>
        </div>
        <div>
          &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;所属设备&ensp;&ensp;
          <el-select
            v-model="emsDeviceId"
            placeholder="请先选择电站在选择所属设备"
            size="large"
            style="width: 240px"
            clearable
            @change="getpostdeviceClass"
          >
            <el-option v-for="item in emsDevice" :key="item.id" :label="item.emsDeviceId" :value="item.id" />
          </el-select>
        </div>
        <div>
          &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;设备类型&ensp;&ensp;
          <el-select v-model="quipment" placeholder="请选择设备类型" size="large" style="width: 240px" clearable>
            <el-option v-for="item in quipmentlist" :key="item.peek" :label="item.peek" :value="item.peek" />
          </el-select>
        </div>
      </div>
      <div class="screen1">
        <div>
          时间范围&ensp;&ensp;
          <el-date-picker
            size="large"
            v-model="timevalue"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :default-value="timevalue"
            :disabled-date="pickerOptions"
            value-format="YYYY-MM-DD"
          />
        </div>
        &ensp;&ensp; &ensp;&ensp;
        <div>
          <el-button type="primary" size="large" color="#0052d9" @click="query(0)">查询</el-button>
          <el-button type="primary" size="large" color="#0052d9" @click="newaddition">导出</el-button>
          <el-button size="large" @click="query(1)">重置</el-button>&ensp;&ensp;
        </div>
      </div>
    </div>
    <div class="card cardbottom">
      <div>&ensp;</div>
      <el-table :data="tableData.list" style="width: 100%" border>
        <el-table-column width="250" :show-overflow-tooltip="true" v-for="item in head" :key="item" :prop="item" :label="item" />
      </el-table>
      <!-- 分页组件 -->
      <div class="pagination">
        <div></div>
        <slot name="pagination">
          <Pagination :pageable="pageable" :handle-size-change="handleSizeChange" :handle-current-change="handleCurrentChange" />
        </slot>
      </div>
    </div>
  </div>
</template>

<!-- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
                                                                                                                                                                                                                          
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->

<script setup lang="ts">
import {
  tdengineyuanshilURL,
  stationstationName,
  postemsSystemsingleStation,
  listexcellURL,
  powerlistURL
} from "@/api/home/Multisite";
import { onMounted, Ref, ref } from "vue";
// import { useAuthButtons } from "@/hooks/useAuthButtons";
// const { BUTTONS } = useAuthButtons();
import { Station } from "@/api/interface";
import Pagination from "@/components/ProTable/components/Pagination.vue";

// import { useRouter } from "vue-router";
// const router = useRouter();
const emsDeviceId = ref("");
const quipment = ref("");
const quipmentlist = ref();

const emsDevice: Ref<any[]> = ref([]);

const cities: Ref<Station.todo[]> = ref([]);
const timevalue: Ref<any> = ref([]);

const poststationstationName = async () => {
  const { data } = await stationstationName({});
  cities.value = data;
};
const postemsDevice = async (value: any) => {
  console.log(value);

  emsDevice.value = [];
  emsDeviceId.value = "";
  const { data } = await postemsSystemsingleStation({}, value);
  // emsDeviceId.value = data[0].id;
  emsDevice.value = data;
};
const pickerOptions = (time: { getTime: (arg0: Date) => number }) => {
  return time.getTime(new Date()) > Date.now();
};
// 设备类型
const getpostdeviceClass = async () => {
  const { data } = await powerlistURL({ eId: emsDeviceId.value });

  quipmentlist.value = data;
};
const query = (val: any) => {
  if (val == 0) {
    getplatformuserlist();
  } else {
    (quipment.value = ""), (status.value = "");
    (emsDeviceId.value = ""), getplatformuserlist();
  }
};

const newaddition = async () => {
  console.log(1);
  let obj = {
    powerId: status.value,
    eId: emsDeviceId.value,
    peek: quipment.value,
    startTime: timevalue.value[0],
    endTime: timevalue.value[1]
  };
  const { data } = await listexcellURL(obj);

  downloadxlsx(data);
};
const downloadxlsx = (data: any) => {
  let fileUrl = `download/${data.msg}`;
  const date = new Date();
  const hours = formatTime(date.getHours());
  const minutes = formatTime(date.getMinutes());
  const seconds = formatTime(date.getSeconds());
  let fileName = `${currentDate.value} ${hours}：${minutes}：${seconds}故障报表.xlsx`;
  fetch(fileUrl)
    .then(response => response.blob())
    .then(blob => {
      // 创建一个临时的URL对象
      const url = URL.createObjectURL(blob);
      // 创建一个隐藏的<a>标签，并设置其href属性为临时URL
      const a = document.createElement("a");
      a.href = url;
      a.download = fileName; // 设置下载的文件名
      a.style.display = "none";
      // 将<a>标签添加到文档中，并模拟点击下载
      document.body.appendChild(a);
      a.click();
      // 下载完成后，移除<a>标签和临时URL对象
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    })
    .catch(error => {
      console.error("下载文件时出错:", error);
    });
};
const formatTime = (time: number) => {
  return time < 10 ? `0${time}` : time; // 如果时间小于 10，在前面加上 0
};
const tableData = ref();

const status = ref("");
const head = ref();
const pageable = ref({
  pn: 1,
  ps: 10,
  total: 0
});
// 表格操作 Hooks
const handleSizeChange = async (e: any) => {
  pageable.value.ps = e;
  getplatformuserlist();
};
const handleCurrentChange = async (e: any) => {
  pageable.value.pn = e;

  getplatformuserlist();
};
const getplatformuserlist = async () => {
  let obj = {
    powerId: status.value,
    eId: emsDeviceId.value,
    startTime: timevalue.value[0],
    endTime: timevalue.value[1],
    peek: quipment.value,
    pageNum: pageable.value.pn,
    pageSize: pageable.value.ps
  };
  const { data } = await tdengineyuanshilURL(obj);
  tableData.value = data;

  head.value = Object.keys(tableData.value.list[0]);
  pageable.value.total = tableData.value.page.totald;
};
const currentDate = ref();
onMounted(() => {
  const current = localStorage.getItem("currentDate");
  if (current) {
    currentDate.value = current;
  }
  getplatformuserlist();
  poststationstationName();
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
<!-- -->
