<template>
  <div id="yuliangjiance">
    <div class="topdate">
      <!-- 日期和时间选择: -->
      <DateSelect
        style="width: 320px"
        v-model:dateTime="dateTimearr"
        :format="'YYYY-MM-DD HH:mm'"
        :valueFormat="'YYYY-MM-DD HH:mm'"
        @change="changeTime"
      />
    </div>
    <div class="toptable">
      <div class="nametitle">降雨统计信息</div>
      <div style="display: flex; flex-wrap: wrap">
        <div class="tablebox">
          <div class="label">降雨开始时间到结束时间</div>
          <div class="value">
            {{ parseTime(dateTimearr[0], '{y}-{m}-{d} {h}:{i}') }}
            至
            {{ parseTime(dateTimearr[1], '{y}-{m}-{d} {h}:{i}') }}
          </div>
        </div>
        <div class="tablebox two">
          <div class="labeltwo">累计降雨量</div>
          <div class="valuetwo">{{ getDetail.rainTotal }}</div>
        </div>
        <div class="tablebox two">
          <div class="labeltwo">降雨时长</div>
          <div class="valuetwo">{{ getDetail.rainHour }}</div>
        </div>
        <div class="tablebox two">
          <div class="labeltwo">最大小时雨强</div>
          <div class="valuetwo">{{ getDetail.maxRain }}</div>
        </div>
        <div class="tablebox two">
          <div class="labeltwo">最大小时雨强时间</div>
          <div class="valuetwo">{{ getDetail.maxRainTime }}</div>
        </div>
      </div>
    </div>
    <el-divider />
    <div class="bottomecharts">
      <div class="nametitle">降雨过程线</div>
      <!-- <div class="posiechart">
        <span v-if="dateTimearr">
          {{ parseTime(dateTimearr[0], '{y}-{m}-{d} {h}:{i}') }}
          至
          {{ parseTime(dateTimearr[1], '{y}-{m}-{d} {h}:{i}') }}
        </span>
        {{ echartstitle }} 雨量
      </div> -->
      <div class="echartbody" v-if="showecharts">
        <RainfallEcharts :data="chartData2" :refresh="chartData2.refresh"></RainfallEcharts>
      </div>
    </div>
  </div>
</template>

<script setup name="yuliangjiance">
import RainfallEcharts from '@/views/pictureOnMap/page/components/DialogTabs/component/RainfallEcharts.vue';
const { proxy } = getCurrentInstance();

import { GettHourDataechart, getRainDetail } from '@/api/MonitorAssetsOnMap';

const props = defineProps({
  // 数据id
  dataID: {
    type: String,
  },
  dataCode: {
    type: String,
  },
  // 默认打开tabs的key
  RefreshName: {
    type: String,
  },
  tabsType: {
    type: String,
  },
  typeName: {
    type: String,
  },
});

const echartstitle = ref('');
const getDetail = ref({});
const showecharts = ref(false);
const dateTimearr = ref([proxy.moment().format('YYYY-MM-DD 00:00'), proxy.moment().format('YYYY-MM-DD HH:mm')]);
const chartData2 = ref({
  // xAxis: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
  // yAxis: [28.5, 43.8, 68.3, 78.5, 116.6, 149.6, 188.8, 171.2, 90.3, 61, 47.7, 22.7],
  // yAxis2: [7, 9, 10, 9, 11, 10, 12, 12, 10, 9, 8, 6],
  xAxis: [],
  yAxis: [],
  yAxis2: [],
  refresh: 1,
});

// 获得头部详情
function getList() {
  let data = {
    stCode: props.dataID,
  };
  if (dateTimearr.value) {
    data.start = dateTimearr.value[0];
    data.end = dateTimearr.value[1];
  } else {
    data.start = null;
    data.end = null;
  }

  getRainDetail(data).then(response => {
    getDetail.value = response.data;
  });
}

function changeTime() {
  getList();
  Getecharts();
}

// 获取降雨过程线echart
function Getecharts() {
  chartData2.value = {
    xAxis: [],
    yAxis: [],
    yAxis2: [],
  };
  chartData2.value.refresh = Math.random();

  let data = {
    stCode: props.dataID,
  };
  if (dateTimearr.value) {
    data.start = dateTimearr.value[0];
    data.end = dateTimearr.value[1];
  } else {
    data.start = null;
    data.end = null;
  }

  GettHourDataechart(data).then(res => {
    console.log(res);

    chartData2.value = {
      xAxis: res.data.date,
      yAxis: res.data.rainData,
      yAxis2: res.data.totalRainData,
    };

    chartData2.value.refresh = Math.random();
  });
}

onMounted(() => {
  changeTime();
  console.log('chartInfo2', props, chartData2.value);
  setTimeout(() => {
    showecharts.value = true;
    chartData2.value.refresh = Math.random();
  }, 100);
});
</script>

<style lang="scss" scoped>
@import '@/assets/styles/mapcss.scss';

#yuliangjiance {
  width: 100%;
  height: 100%;
  color: #ccefff;

  .topdate {
    height: 32px;
    padding: 0 10px;
    text-align: right;
  }

  .toptable {
    height: 100px;
    padding: 0 30px;
    color: #fff;

    .tablebox {
      width: 100%;
      display: flex;
      margin-bottom: 4px;
      // justify-content: space-between;

      .label,
      .value {
        width: 50%;
        text-align: left;
      }

      .labeltwo {
        width: 40%;
      }
      .valuetwo {
        width: 60%;
      }
    }

    .two {
      width: 50%;
    }
  }

  .nametitle {
    height: 30px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    padding: 0 10px;
    color: #fff;
  }

  .bottomecharts {
    position: relative;
    height: calc(100% - 182px);

    .posiechart {
      position: absolute;
      left: 50px;
      width: 100%;
    }

    .echartbody {
      width: 100%;
      height: calc(100% - 30px);
    }
  }
}
</style>