<template>
  <div class="detail-real-box historyBox">
    <div class="timeSearch">
      <span> 时间范围</span>
      <el-date-picker v-model="dateRange"
                      format="YYYY-MM-DD"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      @change="GetGetstationCode"
                      end-placeholder="结束日期"
                      style="width: 150px"></el-date-picker>
    </div>
    <el-table :data="allData.HistoryTableData"
              style="width: 100%; height: calc(100% - 85px)"
              v-loading="loading3"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255, 255, 255, 0.3)"
              :header-cell-style="{
        background: '#021533',
        height: '100px',
        color: '',
      }">
      <el-table-column v-for="(col, index) in allData.NFSNowDataTableHead"
                       :key="col.pointKey"
                       :prop="col.pointKey"
                       :label="col.pointName"
                       :width="col.pointKey=='tt'?'170':'auto'"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
    </el-table>

    <pagination v-show="(allData.total > 0)"
                :total="allData.total"
                v-model:page="allData.pageNum"
                v-model:limit="allData.pageSize"
                @pagination="GetGetstationCode"
                layout="total, prev, pager, next" />
  </div>
</template>

<script setup>
import { getImageUrl } from "@/utils/ruoyi";
import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();
import moment from "moment";
import useUserStore from "@/store/modules/user";
const appStore = useUserStore();

import {
  GetstationCode,
  GethistoryDataPage
} from "@/api/cockpit";

import {
  deviceAlarmHistoty
} from "@/api/cockpit";

const props = defineProps({
  pointfeature: {
    type: Object,
    default: {},
  },
  refreshsecond: {
    type: Number
  }
});

watch(
  () => props.refreshsecond,
  (newValue, oldValue) => {
    GetGetstationCode()
  },
  { immediate: true }
);

const weatherpop = ref(false);
const allData = reactive({
  total: '',
  pageNum: 1,
  pageSize: 10,
  yuqingicon: getImageUrl("yujing_icon", "cockpit"),
  jsdList: [
    {
      name: "站点名称",
      value: "XXX积水点",
    },
    {
      name: "站点编号",
      value: "039600001",
    },
    {
      name: "观测时间",
      value: "2023-04-23 18:00",
    },
    {
      name: "积水深度",
      value: "0.18m",
    },
    {
      name: "责任部门",
      value: "市政管理处",
    },
    {
      name: " 责  任  人",
      value: "张三 136****8659",
    },
    {
      name: "通行状态",
      value: "缓慢通行",
    },
    {
      name: "报警信息",
      value: "通行正常通行正常通行正常通行正常",
    },
    {
      name: "安装照片",
      type: "src",
      value: getImageUrl("install", "cockpit"),
    },
  ],
  NFSNowDataTableHead: [
    // { field: "level", title: "等级", width: '50px' },
    // { field: "name", title: "名称" },
    // { field: "address", title: "地址" },
    // { field: "time", title: "时间" },
    // { field: "status", title: "状态" },
    // { field: "dispatch", title: "解决方案" },
  ], //实时数据表格表头数据
  HistoryTableData: [
    // {
    //   level: "II",
    //   name: "XX积水点",
    //   address: "XX街道XX路",
    //   time: "04-24  08:00",
    //   status: "待处理",
    //   dispatch: "查看",
    // },
    // {
    //   level: "II",
    //   name: "XX积水点",
    //   address: "XX街道XX路",
    //   time: "04-24  08:00",
    //   status: "待处理",
    //   dispatch: "查看",
    // },
    // {
    //   level: "II",
    //   name: "XX积水点",
    //   address: "XX街道XX路",
    //   time: "04-24  08:00",
    //   status: "待处理",
    //   dispatch: "查看",
    // },
    // {
    //   level: "II",
    //   name: "XX积水点",
    //   address: "XX街道XX路",
    //   time: "04-24  08:00",
    //   status: "待处理",
    //   dispatch: "查看",
    // },
    // {
    //   level: "II",
    //   name: "XX积水点",
    //   address: "XX街道XX路",
    //   time: "04-24  08:00",
    //   status: "待处理",
    //   dispatch: "查看",
    // },
    // {
    //   level: "II",
    //   name: "XX积水点",
    //   address: "XX街道XX路",
    //   time: "04-24  08:00",
    //   status: "待处理",
    //   dispatch: "查看",
    // },
  ],
});

const dateRange = ref([
  moment().subtract("days", 3).format("YYYY-MM-DD 00:00:00"),
  moment().format("YYYY-MM-DD HH:mm:ss")
])

onMounted(() => {

});

// 查询工况数据头部
function GetGetstationCode () {
  let prams = {
    stationCode: props.pointfeature.pumpCode
  }
  GetstationCode(prams).then(res => {
    console.log('GetstationCode', res.data);
    allData.NFSNowDataTableHead = res.data
    GetGethistoryDataPage()
  })
}


// 查询列表数据
function GetGethistoryDataPage () {
  let prams = {
    stationCode: props.pointfeature.pumpCode,
    startTime: moment(dateRange.value[0]).format("YYYY-MM-DD HH:mm:ss"),
    endTime: moment(dateRange.value[1]).format("YYYY-MM-DD HH:mm:ss"),
    pageNum: allData.pageNum,
    pageSize: allData.pageSize
  }
  GethistoryDataPage(prams).then(res => {
    console.log('GetGethistoryDataPage', res.data);
    allData.HistoryTableData = res.data
    allData.total = res.total
  })
}

function Getstate (state) {
  if (state == 0) {
    return '报警中'
  }
  if (state == 1) {
    return '未完成'
  }
  if (state == 2) {
    return '已完成'
  }
  if (state == 3) {
    return '关闭'
  }
  if (state == 4) {
    return '报警恢复'
  }
}

function GetstateColor (state) {
  if (state == 0) {
    return 'red'
  }
  if (state == 1) {
    return ''
  }
  if (state == 2) {
    return ''
  }
  if (state == 3) {
    return ''
  }
  if (state == 4) {
    return ''
  }
}


</script>
<style lang="scss" scoped>
// //@import "@/assets/styles/floodControlDrainage.scss";
//@import "@/assets/styles/cockpit.scss";
@import "@/assets/styles/map-detail.scss";

.detail-real-box {
  flex-direction: column;
}
</style>