<template>
  <div class="detail-real-box historyBox">
    <div class="timeSearch">
      <span> 时间范围</span>
      <el-date-picker v-model="dateRange"
                      value-format="YYYY-MM-DD"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      @change="GetdeviceAlarmHistoty"
                      end-placeholder="结束日期"
                      style="width: 150px"></el-date-picker>
    </div>
    <el-table :data="allData.HistoryTableData"
              style="width: 100%; height: calc(100% - 45px)"
              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 type="index"
                       label="序号"
                       width="50px">
      </el-table-column>

      <el-table-column prop='alarmLevel'
                       label="等级"
                       width="50px">
        <template #default="scope">
          <span class="ellipsis"
                :title="scope.row.alarmLevel">{{scope.row.alarmLevel}}</span>
        </template>
      </el-table-column>

      <el-table-column prop='name'
                       label="报警名称"
                       width="130px">
        <template #default="scope">
          <span class="ellipsis"
                :title="scope.row.name">{{scope.row.name}}</span>
        </template>
      </el-table-column>

      <el-table-column prop='address'
                       label="报警地址"
                       width="130px">
        <template #default="scope">
          <span class="ellipsis"
                :title="scope.row.address">{{scope.row.address}}</span>
        </template>
      </el-table-column>

      <el-table-column prop='alarmDesc'
                       label="报警内容"
                       width="130px">
        <template #default="scope">
          <span class="ellipsis"
                :title="scope.row.alarmDesc">{{scope.row.alarmDesc}}</span>
        </template>
      </el-table-column>

      <el-table-column prop='recordTime'
                       width="110px"
                       label="报警时间">
      </el-table-column>

      <el-table-column prop='state'
                       label="状态">
        <template #default="scope">
          <span :class="GetstateColor(scope.row.state)">{{Getstate(scope.row.state)}}</span>
          <!-- {{Getstate(scope.row.state)}} -->
        </template>
      </el-table-column>

      <!-- <div v-for="(col, index) in allData.NFSNowDataTableHead"
           :key="index+99">
        <el-table-column :prop="col.field"
                         :label="col.title"
                         :width="col.width?col.width:''"
                         show-overflow-tooltip
                         :render-header="labelHead">
        </el-table-column>
      </div> -->

      <el-table-column label="解决方案">
        <template #default="scope">
          <el-button size="small"
                     @click="handleEdit(scope.$index, scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </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 {
  deviceAlarmHistoty
} from "@/api/cockpit";

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

const weatherpop = ref(false);
const allData = reactive({
  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")
])
function handleEdit (index, row) {

};

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 ''
  }
}

// 获取内涝点的历史报警
function GetdeviceAlarmHistoty () {
  let prams = {
    startTime: dateRange.value[0],
    endTime: dateRange.value[1],
    siteNo: props.pointfeature.stCode
  }

  deviceAlarmHistoty(prams).then(res => {
    console.log(res.data);
    allData.HistoryTableData = res.data

  })
}

console.log(props.pointfeature);
switch (Number(props.pointfeature.pointType)) {
  // 内涝点
  case 1:
    GetdeviceAlarmHistoty()
    break;
}
</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>