<template>
  <div class="detail-real-box">
    <div class="realbox-top">
      <div class="tiemflex">
        <div class="timeSearch">
          <span> 时间选择</span>
          <el-date-picker clearable
                          v-model="locationTime"
                          type="datetime"
                          @change="onLoadData"
                          value-format="YYYY-MM-DD HH:mm:ss"
                          placeholder="请选择时间">
          </el-date-picker>
        </div>

        <div class="timeSearch">
          <span> 时间类型</span>
          <el-radio-group v-model="undergoname"
                          @change="onLoadData">
            <el-radio-button v-for="item in timelist"
                             :key="item.id"
                             :label="item.id">{{ item.name }}</el-radio-button>
          </el-radio-group>
        </div>

      </div>

      <div id="yqfxmap">
        <img class="center"
             :src="image.src">
        <img class="center"
             src="/img/boundary.png">
        <!-- <jyfxmap></jyfxmap> -->
      </div>

    </div>

    <div class="realbox-bottom">
      <el-table v-loading="loading"
                height='100%'
                :data="allData.listData"
                @row-click="handleSelectionChange"
                :row-class-name="clickRowclassName">
        <el-table-column label="开始时间"
                         align="center"
                         prop="startTime" />
        <el-table-column label="雨量站名称"
                         align="center"
                         prop="areaName" />
        <el-table-column label="最强一小时降雨(mm)"
                         align="center"
                         prop="maxOneHour" />
        <el-table-column label="累计降雨(mm)"
                         align="center"
                         prop="totalRainfall" />
        <el-table-column label="统计时间(小时)"
                         align="center"
                         prop="undergoTime" />
      </el-table>
    </div>

  </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 jyfxmap from "@/components/Detailbox/jyfxmap.vue";

import {
  rainAnalyse,
} from "@/api/cockpit";


const weatherpop = ref(false)

const props = defineProps({
  pointfeature: {
    type: Object,
    default: {},
  },
});
const image = ref({});
const vehicleTrajectoryList = ref([]);
const loading = ref(false);
const locationTime = ref(moment().format("YYYY-MM-DD HH:mm:ss")) //

const undergoname = ref(1) //存在一起会改其它值，所以单独存储
const timelist = ref([
  { id: 1, name: "1小时", },
  { id: 2, name: "2小时", },
  { id: 3, name: "3小时" },
  { id: 6, name: "6小时" },
  { id: 12, name: "12小时" },
  { id: 24, name: "24小时" },
])

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

const recordTime = ref('')
const ylzlist = ref([])
const ylzcode = ref('')

const allData = reactive({
  yuqingicon: getImageUrl('yujing_icon', 'cockpit'),
  jsdList: [
    {
      name: '站点名称',
      value: 'XXX积水点',
    },
    {
      name: '站点编号',
      value: '039600001',
    },
    {
      name: '地址',
      value: '周口市川汇区XXX街道',
    },
    {
      name: ' 安  装  人',
      value: '张三 136****8659',
    },
    {
      name: '当前降雨量',
      value: '0.18m',
    },
    {
      name: '当月累计降雨量',
      value: '0.18m',
    },
    {
      name: '本年累计降雨量',
      value: '0.18m',
    },
    {
      name: '去年累计降雨量',
      value: '0.18m',
    },

    // {
    //   name: '安装照片',
    //   type: 'src',
    //   value: getImageUrl('install', 'cockpit'),
    // },


  ],
  url: getImageUrl('install', 'cockpit'),
  srcList: [getImageUrl('install', 'cockpit')],

  chartData: {
    data: [
      { value: '120', name: '医疗', },
      { value: '150', name: '餐饮', },
      { value: '50', name: '工业', },
      { value: '65', name: '建筑', },
      { value: '115', name: '其他', },
    ],
    refresh: 1
  },
  listData: [],
})
const GetObj = ref({})
const clickrowindex = ref('')

function showpic () {

};

function fuzhiobj () {
  GetObj.value = props.pointfeature
  switch (Number(GetObj.value.pointType)) {
    // 雨量站
    case 2:
      // allData.jsdList = [
      //   {
      //     name: '站点名称',
      //     value: GetObj.value.stName,
      //   },
      //   {
      //     name: '站点编号',
      //     value: GetObj.value.stCode,
      //   },
      //   {
      //     name: '地址',
      //     value: ,
      //   },
      //   {
      //     name: ' 安  装  人',
      //     value: GetObj.value.person,
      //   },
      //   {
      //     name: '当前降雨量',
      //     value: GetObj.value.geneValue + GetObj.value.geneUnit,
      //   },
      //   {
      //     name: '累计降雨量(当月)',
      //     value: '',
      //   },
      //   {
      //     name: '累计降雨量(本年)',
      //     value: '',
      //   },
      //   {
      //     name: '累计降雨量(去年)',
      //     value: '',
      //   },

      //   // {
      //   //   name: '安装照片',
      //   //   type: 'src',
      //   //   value: getImageUrl('install', 'cockpit'),
      //   // },

      // ],


      onLoadData()
      break;
  }
}

function clickRowclassName ({ row, rowindex }) {
  console.log(row, rowindex);
  if (row.stCode == clickrowindex.value) {
    return 'table-click-row'
  }
}

// 多选框选中数据
function handleSelectionChange (selection) {
  console.log(selection);
  clickrowindex.value = selection.stCode
}

//请求数据
function onLoadData () {
  let pamas = {
    locationTime: locationTime.value, //定位时间
    minutRainParam: 5, //分钟级降雨量参数
    undergoTime: undergoname.value //经历时间(小时)
  };

  rainAnalyse(pamas).then(response => {
    allData.listData = response.data.rainTableInfos;
    image.value = window.newfiberMapUtils.krigingImages(allData.listData.map(i => ({ lon: i.x, lat: i.y, geneValue: Number(i.totalRainfall) })));
    allData.listData.map(item => {
      item.areaName = item.areaName.substring(5)
      item.maxOneHour = item.maxOneHour.toFixed(2)
      item.totalRainfall = item.totalRainfall.toFixed(2)
    })


  }).catch(() => {
    allData.loading = false;
  })
}




// onMounted(() => {
//   console.log(props.pointfeature);
// })

fuzhiobj()


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

.detail-real-box {
  display: block;
}

.realbox-top {
  height: 268px;

  #yqfxmap {
    width: 100%;
    height: calc(100% - 42px);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    img {
      height: 100%;
      max-width: 100%;
    }
  }
}

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.realbox-bottom {
  height: calc(100% - 268px);
}

.tiemflex {
  display: flex;
  justify-content: space-between;

  .timeSearch {
    width: auto;

    span {
      min-width: 60px;
    }
  }
}

::v-deep .el-table .table-click-row {
  background: rgba(33, 85, 109) !important;
}
</style>