<template>
  <div class="timePeriodDialogPage">
    <el-form>
      <el-row :gutter="20">
        <el-col :span="5">
          <el-form-item label="监测时间:" prop="time">
            <el-date-picker
              v-model="form.time"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="对比时间:" prop="compareTime">
            <el-date-picker
              v-model="form.compareTime"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-button type="primary" @click="constrastData">
            <el-icon><DataLine /></el-icon> 对比分析
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- Echarts数据展示 -->
    <div class="echarts-content flex flex-v" v-loading="loading">
      <!-- 监测因子数据 -->
      <div class="echart-height flex flex-1 flex-v" style="height: 100%; background: #ffffff">
        <div class="echart-title">监测时间分析</div>
        <Line
          :echart-data="apiData.graphicReportDataInfo"
          v-if="apiData?.graphicReportDataInfo && apiData?.graphicReportDataInfo?.propertyMonitorXList?.length"
        />
        <empty emptyText="暂无统计数据" :width="100" :height="100" style="margin-top: 50px" v-else></empty>
      </div>
      <!-- 累计排水量数据 -->
      <div class="flex flex-1 flex-v" style="height: 100%; background: #ffffff">
        <div class="echart-title">对比时间分析</div>
        <Line
          :echart-data="apiData.compareGraphicReportDataInfo"
          v-if="apiData?.compareGraphicReportDataInfo && apiData?.compareGraphicReportDataInfo?.propertyMonitorXList?.length"
        />
        <empty emptyText="暂无统计数据" :width="100" :height="100" style="margin-top: 50px" v-else></empty>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, shallowRef, computed, onMounted } from 'vue';
import { monitorPropertyGraphicTimeCompare } from '@/api/sponeScreen/syntherticData';
import Line from './Line';
const props = defineProps({
  stationTimePeriodDBInfo: Object,
});
const { stationTimePeriodDBInfo } = props;
console.log('stationTimePeriodDBInfo------', stationTimePeriodDBInfo);
const { proxy } = getCurrentInstance();
const loading = ref(false);
const form = reactive({
  time: [
    //前3天到今天
    proxy.moment().subtract('3', 'day').format('YYYY-MM-DD'),
    proxy.moment().format('YYYY-MM-DD'),
  ],
  compareTime: [
    //前6天到前3天
    proxy.moment().subtract('6', 'day').format('YYYY-MM-DD'),
    proxy.moment().subtract('3', 'day').format('YYYY-MM-DD'),
  ],
});

const params = computed(() => {
  return {
    stCode: stationTimePeriodDBInfo.stCode,
    startTime: form.time[0] ? form.time[0] + ' 00:00:00' : '',
    endTime: form.time[1] ? form.time[1] + ' 23:59:59' : '',
    compareStartTime: form.compareTime[0] ? form.compareTime[0] + ' 00:00:00' : '',
    compareEndTime: form.compareTime[1] ? form.compareTime[1] + ' 23:59:59' : '',
  };
});

const apiData = shallowRef({});

const constrastData = async () => {
  loading.value = true;
  apiData.value = {};
  try {
    const res = await monitorPropertyGraphicTimeCompare(params.value);
    loading.value = false;
    if (res?.code !== 200) return;
    console.log(res.data);
    apiData.value = res.data;
  } catch (error) {
    console.log(error);
    loading.value = false;
  }
};

onMounted(() => {
  constrastData();
});
</script>

<style lang="scss" scoped>
.timePeriodDialogPage {
  padding-bottom: 30px;
  .searchBox {
    margin-bottom: 10px;
    .el-button {
      margin-left: 10px;
      margin-top: -5px;
    }
  }
  .echart-title {
    font-size: 22px;
    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
    font-weight: 500;
    line-height: 17px;
    padding: 20px;
    color: #f5f5f5;
    background: #003044;
  }
}
</style>