<template>
  <!--暂降 -->
  <el-dialog :close-on-click-modal="false" draggable v-model="machineVisible" :title="title" width="1000px">
    <div class="formBox">
      <el-form label-width="100px" :model="form" inline>
        <el-form-item label="关键字查询">
          <el-input v-model="form.searchValue" clearable size="small" placeholder="请输入关键字查询" />
        </el-form-item>
        <el-form-item label="通讯状态">
          <el-select v-model="form.comFlag" clearable size="small" style="width: 160px">
            <el-option label="在线" value="1" />
            <el-option label="中断" value="0" />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="mt5">
        <el-button type="primary" :icon="Search" size="small" @click="getTableData">查询</el-button>
        <el-button type="primary" :icon="Download" @click="exportTable" size="small">导出
        </el-button>
      </div>
    </div>
    <div class="tableBox">
      <el-table :scrollbar-always-on="true" :data="tableData" height="400px" 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>{{
              (form.pageNum - 1) * form.pageSize + scope.$index + 1
              }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="lineName" align="center" label="监测点名称" width="140" />
        <el-table-column prop="stationName" align="center" label="所属电站" width="140" />
        <el-table-column prop="gdName" align="center" label="供电公司" width="120" />
        <el-table-column prop="voltageLevel" align="center" label="电压等级" width="100" />
        <el-table-column prop="comFlag" align="center" label="通讯状态" width="100">
          <template v-slot="scope">
            <el-tag v-if="scope.row.comFlag == 1" size="small" type="primary" effect="dark">在线</el-tag>
            <el-tag v-if="scope.row.comFlag == 0" size="small" type="warning" effect="dark">中断</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="objName" align="center" label="用户" show-overflow-tooltip />
      </el-table>
    </div>
    <el-pagination size="small" style="margin-top: 10px" :currentPage="form.pageNum" :page-size="form.pageSize"
      :page-sizes="[10, 20, 50, 100, 200]" background :layout="'sizes,total, ->, prev, pager, next, jumper'"
      :total="total" @size-change="onTableSizeChange" @current-change="onTableCurrentChange"></el-pagination>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, inject, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { Search, Download } from "@element-plus/icons-vue";
import { linePage } from "@/api/manage_wx";
import { useStore } from "vuex";
import * as XLSX from "xlsx";
const loading = ref(false);
const store = useStore();

const machineVisible = ref(false);
const title = ref("");
const formRef = ref();
const form = reactive({
  searchValue: "",
  pageNum: 1,
  pageSize: 20,
  deptId: "",
  comFlag: "",
});
const total = ref(0); // 假设总条数为100
const tableData = ref([]);

//form表单校验规则
const openLine = (text: string, data?: any) => {
  title.value = text;
  machineVisible.value = true;
  form.searchValue = "";
  form.pageNum = 1;
  form.pageSize = 20;
  form.comFlag = "";
  getTableData();
};
const onTableSizeChange = (size: number) => {
  form.pageSize = size;
  // 重新加载数据
  getTableData();
};
const onTableCurrentChange = (page: number) => {
  form.pageNum = page;
  // 重新加载数据
  getTableData();
};

const getTableData = async () => {
  loading.value = true;
  form.deptId = store.state.deptId;
  const res: any = await linePage(form);

  if (res.code == "A0000") {
    tableData.value = res.data.records;
    total.value = res.data.total;
  }
  loading.value = false;
};
// 导出
const exportTable = async () => {
  // 示例数据

  let columnExpor: any = [
    [
      "监测点名称",
      "所属电站",
      "供电公司",
      "电压等级",
      "通讯状态",
      "用户",
    ],
  ];

  let list = [];

  await linePage({
    ...form,
    pageNum: 1,
    pageSize: total.value,
  }).then((res) => {
    let data = res.data.records.map((item) => {
      return [
        item.lineName,
        item.stationName,
        item.gdName,
        item.voltageLevel,
        item.comFlag == 1 ? '在线' : '中断',
        item.objName,

      ];
    });
    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");
  });
};

onMounted(() => {
  // getTableData();
});

defineExpose({ openLine });
</script>
<style lang="scss" scoped>
@use "@/assets/scss/index.scss";

.tableBox {
  padding: 0px !important;
}

.formBox {
  display: flex;
  justify-content: space-between;
}

.formLeft {
  display: flex;
  align-items: center;
  color: #fff;
}
</style>
