<template>
  <div class="pumpGateworking">
    <div class="search_box1">
      <n-space>
        <n-select
          placeholder="泵站名称"
          v-model:value="searchValue1"
          filterable
          :options="options1"
          style="width: 250px"
        />
        <n-select
          v-model:value="searchValue2"
          filterable
          :options="options2"
          style="width: 250px"
        />
        <n-button type="info">历史报表</n-button>
        <n-button>历史图形</n-button>
      </n-space>
    </div>
    <div class="search_box2">
      <n-form
        inline
        :label-width="100"
        label-placement="left"
        size="medium"
        ref="queryFormRef"
        class="form"
        :model="queryForm"
      >
        <n-form-item label="开始时间：" path="timeStart">
          <n-date-picker
            v-model:value="queryForm.timeStart"
            type="datetime"
            clearable
          />
        </n-form-item>
        <n-form-item label="结束时间：" path="timeEnd">
          <n-date-picker
            v-model:value="queryForm.timeEnd"
            type="datetime"
            clearable
          />
        </n-form-item>
        <n-form-item label="频率选择：" path="frequency">
          <n-select
            v-model:value="queryForm.frequency"
            filterable
            :options="queryOptions"
            style="width: 250px"
          />
        </n-form-item>
        <div>
          <n-space>
            <n-button type="primary" @click="handelClick('search')"
              >搜索</n-button
            >
            <n-button @click="handelClick('export')">导出</n-button>
          </n-space>
        </div>
      </n-form>
    </div>
    <div class="table_box">
      <n-data-table
        ref="tableRef"
        :bordered="false"
        :max-height="700"
        striped
        :columns="columns"
        :data="data"
        :pagination="pagination"
      ></n-data-table>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted ,h} from "vue";
import { NButton } from "naive-ui";

export default {
  name: "pumpGateworking",
  setup() {
    const state = reactive({
      // 搜搜1
      searchValue1: "西渠闸门",
      searchValue2: "全部",
      options1: [
        { label: "西渠闸门", value: "0" },
        { label: "解放大道澳门路闸", value: "1" },
        { label: "中山大道前进四路闸", value: "2" },
        { label: "王家墩污水泵站", value: "3" },
        { label: "后湖二期泵站", value: "4" },
        { label: "铁路桥泵站", value: "5" },
        { label: "机场河补水泵站", value: "6" },
        { label: "常青公园地下调蓄池", value: "7" },
        { label: "黄孝河CSO调蓄", value: "8" },
        { label: "机场河CSO调蓄", value: "9" },
      ],
      options2: [{ label: "全部", value: 0 }],
      //   搜索2
      queryForm: {
        timeStart: [],
        timeEnd: [],
        frequency: "",
      },
      queryOptions: [
        { label: "五分钟", value: 0 },
        { label: "十分钟", value: 1 },
        { label: "二十分钟", value: 2 },
        { label: "三十钟", value: 3 },
        { label: "六十钟", value: 4 },
      ],
      //   表格
      columns: [
        {
          title: "泵站编号",
          key: "pumpNo",
          align: "center",
        },
        {
          title: "检测时间",
          key: "time",
          align: "center",
        },
        {
          title: "前池液位1",
          key: "liquidLevel1",
          align: "center",
        },
        {
          title: "前池液位2",
          key: "liquidLevel2",
          align: "center",
        },
        {
          title: "格栅液位1",
          key: "gridLeve1",
          align: "center",
        },
        {
          title: "格栅液位2",
          key: "gridLeve2",
          align: "center",
        },
        {
          title: "累计流量",
          key: "cumulative",
          align: "center",
        },
        {
          title: "瞬时流量",
          key: "instantaneous",
          align: "center",
        },
        {
          title: "耗电量",
          key: "power",
          align: "center",
        },
        {
          title: "操作",
          key: "actions",
          align: "center",
          render(row) {
            return h(
              NButton,
              {
                text: true,
                size: "small",
                type: "primary",
                onClick: () => handleClick("edit", row),
              },
              { default: () => "修改" }
            );
          },
        },
      ],
      data:[]
    });
    // 分页
    const paginationReactive = reactive({
      page: 1,
      pageSize: 10,
      showSizePicker: true,
      pageSizes: [10, 20, 50],
      showQuickJumper: true,
      onChange: (page) => {
        paginationReactive.page = page;
      },
      onPageSizeChange: (pageSize) => {
        paginationReactive.pageSize = pageSize;
        paginationReactive.page = 1;
      },
    });
    // 获取表格数据
    const getTableData = () => {
      state.data = Array.apply(null, { length: 46 }).map((_, index) => ({
        pumpNo: "90010010",
        time: `2021-11-17 17:45:00`,
        liquidLevel1: "52.95",
        liquidLevel2: "53.43",
        gridLeve1: "53.72",
        gridLeve2: "55.05",
        cumulative: "57.18",
        instantaneous: "53.87",
        power: "57.39",
      }));
    };
    // 按钮点击事件
    const handelClick = (type, row) => {
        
    };
    onMounted(() => {
      getTableData();
    });
    return {
      ...toRefs(state),
      pagination: paginationReactive,
      getTableData,
      handelClick,
    };
  },
};
</script>

<style lang="less" scoped>
.pumpGateworking {
  .search_box1 {
    padding: 20px 30px;
  }
}
</style>