<template>
  <el-dialog
    :close-on-click-modal="false"
    draggable
    v-model="dialogVisible"
    :title="title"
    width="80%"
  >
    <el-form :inline="true" class="formFlex">
      <div>
        <el-form-item label="运维单位">
          <el-select
            v-model="deptsIndex"
            placeholder="请选择运维单位"
            size="small"
            clearable
            style="width: 150px"
          >
            <el-option
              v-for="item in deptsList"
              :label="item.deptsname"
              :value="item.deptsIndex"
              :key="item.deptsIndex"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="供电区域">
          <el-select
            v-model="gdIndex"
            placeholder="请选择供电区域"
            size="small"
            clearable
            style="width: 150px"
          >
            <el-option
              v-for="item in gdList"
              :label="item.name"
              :value="item.gdIndex"
              :key="item.gdIndex"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="变电站">
          <el-input
            clearable
            style="width: 150px"
            v-model="searchValue"
            size="small"
            placeholder="请输入变电站"
          ></el-input>
        </el-form-item>

        <el-form-item label="终端名称">
          <el-input
            clearable
            style="width: 150px"
            v-model="devName"
            size="small"
            placeholder="请输入终端名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="通讯状态">
          <el-select
            v-model="status"
            placeholder="请选择"
            size="small"
            clearable
            style="width: 100px"
          >
            <el-option label="在线" value="1"></el-option>
            <el-option label="离线" value="0"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="mt5">
        <el-button type="primary" :icon="Search" @click="init" size="small"
          >查询
        </el-button>
        <el-button  :icon="RefreshLeft" @click="reset" size="small"
          >重置
        </el-button>
        <el-button
          type="primary"
          :icon="Download"
          @click="exportTable"
          size="small"
          >导出
        </el-button>
      </div>
    </el-form>
    <div class="tableBox" style="padding: 0">
      <el-table
        :scrollbar-always-on="true"
        :data="dataList"
        height="500px"
        stripe
        size="small"
        v-loading="loading"
        element-loading-background="#343849c7"
        :header-cell-style="{ textAlign: 'center' }"
        border
      >
        <el-table-column label="序号" align="center" type="index" width="70">
          <template #default="scope">
            <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="deptName"
          label="运维单位"
          align="center"
          width="130"
        />
        <el-table-column
          show-overflow-tooltip
          prop="gdName"
          label="供电区域"
          align="center"
          width="140"
        />

        <el-table-column
          show-overflow-tooltip
          prop="stationName"
          label="变电站"
          align="center"
          width="140"
        />

        <el-table-column
          show-overflow-tooltip
          prop="devName"
          label="终端名称"
          align="center"
          width="150"
        />

        <el-table-column
          show-overflow-tooltip
          prop="ip"
          label="终端IP"
          align="center"
          width="130"
        />
        <el-table-column
          show-overflow-tooltip
          prop="manufacturerName"
          label="厂家"
          align="center"
          width="130"
        />
        <!-- <el-table-column prop="gdName" label="运维单位" align="center" width="100" />
        <el-table-column   show-overflow-tooltip prop="gdName" label="检测周期" align="center" width="100" /> -->
        <el-table-column
          show-overflow-tooltip
          prop="status"
          label="通讯状态"
          align="center"
          width="100"
        >
          <template #default="scope">
            <el-tag
              v-if="scope.row.status == 1"
              type="success"
              size="small"
              :disable-transitions="false"
              effect="dark"
              >在线</el-tag
            >
            <el-tag
              v-else
              type="danger"
              size="small"
              :disable-transitions="false"
              effect="dark"
              >离线</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="onLineRate"
          label="终端在线率(%)"
          align="center"
          width="120"
          sortable
        />
        <el-table-column
          prop="integrityRate"
          label="数据完整性(%)"
          align="center"
          width="120"
          sortable
        />
        <el-table-column
          show-overflow-tooltip
          prop="logonTime"
          label="投运时间"
          align="center"
          width="170"
          sortable
        />
        <el-table-column
          show-overflow-tooltip
          prop="thisTimeCheck"
          label="本次定检时间"
          align="center"
          width="170"
          sortable
        />
        <el-table-column
          show-overflow-tooltip
          prop="nextTimeCheck"
          label="下次定检时间"
          align="center"
          width="170"
          sortable
        />
      </el-table>
      <el-pagination
        style="margin-top: 10px"
        :currentPage="pageNum"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100, 200]"
        size="small"
        background
        :layout="'sizes,total, ->, prev, pager, next, jumper'"
        :total="total"
        @size-change="onTableSizeChange"
        @current-change="onTableCurrentChange"
      />
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch, nextTick } from "vue";
import table2excel from "js-table2excel";
import * as XLSX from "xlsx";
import { devicePage, gdSelect } from "@/api/statistics/index";
import { Download, Search,RefreshLeft } from "@element-plus/icons-vue";
import { regionDevCount } from "@/api/statistics/index";
import { useStore } from "vuex";
const store = useStore();
const dialogVisible = ref(false);
const loading = ref(false);
const title = ref("终端_详情");
const dataList = ref([]); // 存储原始数据
const columns: any = ref([]);
const pageNum = ref(1); // 当前页
const pageSize = ref(20); // 每页条数
const total = ref(0); // 总条数
const key: any = ref("");
const searchValue = ref("");
const devName = ref("");

const status = ref("");
const deptsIndex = ref("");
const gdIndex = ref("");
const deptsList = ref([]);
const gdList = ref([]);

const open = async (deptID: string = "", type: string = "") => {
  reset();
  dialogVisible.value = true;
  loading.value = true;
  await regionDevCount({
    deptId: store.state.deptId,
    type: store.state.timeType,
    startTime: store.state.timeValue[0],
    endTime: store.state.timeValue[1],
  }).then((res: any) => {
    deptsList.value = res.data;
  });
  await gdSelect().then((res: any) => {
    gdList.value = res.data;
  });
  pageNum.value = 1;
  pageSize.value = 20;
  searchValue.value = ""; // 清空搜索框
  deptsIndex.value = deptID; // 清空搜索框
  status.value = type; // 清空搜索框
  gdIndex.value = "";

  await init();
};
const init = async () => {
   loading.value = true;
  await devicePage({
    deptId: deptsIndex.value || store.state.deptId,
    gdIndex: gdIndex.value,
    devName: devName.value,
    type: store.state.timeType,
    startTime: store.state.timeValue[0],
    endTime: store.state.timeValue[1],
    state: status.value,
    searchValue: searchValue.value,
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }).then((res) => {
    dataList.value = res.data.records;
    total.value = res.data.total;
    loading.value = false;
  });
};

const onTableSizeChange = (size: number) => {
  pageSize.value = size;
  pageNum.value = 1;
  init();
};

const onTableCurrentChange = (page: number) => {
  pageNum.value = page;
  init();
};

// 导出
const exportTable = async () => {
  // 示例数据

  let columnExpor: any = [
    [
      "运维单位",
      "供电区域",
      "变电站",
      "终端名称",
      "终端IP",
      "厂家",
      "通讯状态",
      "终端在线率(%)",
      "数据完整性(%)",
      "投运时间",
      "本次定检时间",
      "下次定检时间",
    ],
  ];

  let list = [];

  await devicePage({
    deptId: store.state.deptId,
    type: store.state.timeType,
    devName: devName.value,
    startTime: store.state.timeValue[0],
    endTime: store.state.timeValue[1],
    state: status.value,
    searchValue: searchValue.value,
    pageNum: 1,
    pageSize: total.value,
  }).then((res) => {
    let data = res.data.records.map((item) => {
      return [
        item.deptName,
        item.gdName,
        item.stationName,
        item.devName,
        item.ip,
        item.manufacturerName,
        item.status == 1 ? "在线" : "离线",
        item.onLineRate,
        item.integrityRate,
        item.logonTime,
        item.thisTimeCheck,
        item.nextTimeCheck,
      ];
    });
    list = [...columnExpor, ...data];
    // 创建工作表
    const worksheet = XLSX.utils.aoa_to_sheet(list);

    worksheet["!cols"] = list.map((col) => ({ wch: 20 }));

    // 创建工作簿
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, title.value);

    // 写出文件
    XLSX.writeFile(workbook, title.value + ".xlsx");
  });
};
// 重置
const reset = () => {
deptsIndex.value = "";
gdIndex.value = "";
searchValue.value = "";
devName.value = "";
status.value = "";
};
defineExpose({
  open,
});
</script>

<style lang="scss" scoped>
@use "@/assets/scss/index.scss";
.form {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
:deep(.el-form-item) {
  margin-bottom: 10px;
}
.formFlex {
  display: flex;
  justify-content: space-between;
}
</style>
