<template>
  <div
    class="p-[20px] flex h-[270px] relative mb-[20px] shadow rounded-[6px] shadow-blue-500"
  >
    <el-form class="" :inline="true" :model="queryForm">
      <el-form-item label="子表名">
        <el-input class="" v-model="queryForm.tableName" placeholder="标签名" />
      </el-form-item>
      <el-form-item label="时间">
        <el-date-picker
          v-model="timedata"
          type="datetimerange"
          start-placeholder="开始"
          end-placeholder="结束"
          format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <div class="nb">
        <div>
          <el-checkbox v-model="queryForm.checked1"></el-checkbox>
          <span>一段时间内的存储值</span>
        </div>
        <div>
          <el-checkbox v-model="checked2"></el-checkbox>
          <span>一段时间的等间隔插值（数量） 数量：</span>
          <el-input class="w-20 m-2" size="small" />
        </div>
        <div>
          <el-checkbox v-model="checked2"></el-checkbox>
          <span>一段时间的等间隔插值（时间） 时间间隔：</span>
          <el-input class="w-20 m-2" size="small" />
          <el-select
            v-model="value"
            class="w-20 m-2"
            placeholder="Select"
            size="small"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div>
          <el-checkbox v-model="checked2"></el-checkbox>
          <span>某个时刻的历史 取值方式：</span>
          <el-radio-group v-model="radio">
            <el-radio :label="3">上一个</el-radio>
            <el-radio :label="6">下一个</el-radio>
            <el-radio :label="9">准确</el-radio>
            <el-radio :label="9">插值</el-radio>
          </el-radio-group>
        </div>
        <div>
          <el-checkbox v-model="checked2"></el-checkbox>
          <span>一段时间的等间隔插值（数量） 数量：</span>
          <el-input class="w-20 m-2" size="small" />
        </div>
        <div>
          <el-checkbox v-model="checked2"></el-checkbox>
          <span>一段时间的统计值</span>
        </div>
      </div>
      <el-form-item>
        <el-button type="primary" @click="looksubmit">查询</el-button>
        <el-button type="primary" @click="onSubmit">导出</el-button>
      </el-form-item>
    </el-form>

  </div>

  <div
    class="relative shadow rounded-[6px] shadow-blue-500 px-[10px] pt-[20px] pb-[10px]">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" label="#" width="100" align="center" />
      <el-table-column prop="ts" label="时间" width="200" align="center" />
      <el-table-column prop="val" label="值" align="center" />
    </el-table>
  </div>
</template>

<script setup name="look">
import { onMounted, ref, reactive } from "vue";
import request from "@/api/axios.js";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { baseURL, socketURL } from "@/api/axios.js";

//表单数据
const queryForm = reactive({
  tableName: "",
  databaseName: "",
  checked1: "",
  checked1:true
});

// 日期数据
const timedata = ref([
  new Date(2023, 3, 14, 11, 10),
  new Date(2023, 3, 14, 12, 10),
]);
let myData = JSON.parse(sessionStorage.getItem('myData'));
//  表格数据
const tableData = ref([]);
const looksubmit = async (point) => {
  if (timedata.value == "") {
    ElMessage.error("时间不能为空");
  } else {
    const res = await request.post(
      "/rest/sql",
      `select * from ${myData.nxxy}.${
        queryForm.tableName
      } where ts between ${new Date(
        timedata.value[0]
      ).getTime()} and ${new Date(timedata.value[1]).getTime()}`
    );

    //映射数组中的数据，做数据处理相对应的结果
    let newdata = [];
    const map = {
      0: "ts",
      1: "val",
    };
    res.data.forEach((ele) => {
      let dateItem = {};
      for (let key in ele) {
        dateItem[map[key]] = ele[key];
      }
      newdata.push(dateItem);
    });

    // console.log(6666,newdata);
    tableData.value = newdata;
    console.log(88, tableData.value);
    ElMessage.success("查询成功");
  }
};

const route = useRoute();
onMounted(() => {
  //路由传过来的数据
  queryForm.databaseName = route.query.databaseName;
  queryForm.tableName = route.query.tableName;
  
  // console.log(666666666666,queryForm.databaseName);
  // console.log(666666666666,queryForm.tableName);
});
</script>

<style scoped>
.nb {
  width: 600px;
  height: 220px;
  position: absolute;
  top: 50px;
  font-size: 15px;
  padding-left: 10px;
}
.nb span {
  margin: 10px 10px;
}
</style>
