<template>
  <PageWrapper>
    <Card>
      <Form ref="formRef" :model="formState">
        <Row :gutter="[16, 16]">
          <Col
            :xs="{ span: 24 }"
            :sm="{ span: 12 }"
            :md="{ span: 8 }"
            :lg="{ span: 6 }"
            :xl="{ span: 6 }"
            :xxl="{ span: 4 }"
          >
            <FormItem label="基地">
              <Select
                @select="onChange('base_id')"
                :fieldNames="{ label: 'name', value: 'id' }"
                :options="baseDate"
                v-model:value="formState.base_id"
                placeholder="请选择基地"
              />
            </FormItem>
          </Col>
          <Col
            :xs="{ span: 24 }"
            :sm="{ span: 12 }"
            :md="{ span: 8 }"
            :lg="{ span: 6 }"
            :xl="{ span: 6 }"
            :xxl="{ span: 4 }"
          >
            <FormItem label="检测点">
              <Select
                :options="pointDate"
                @select="onChange('device_id')"
                v-model:value="formState.device_id"
              />
            </FormItem>
          </Col>
          <Col
            :xs="{ span: 24 }"
            :sm="{ span: 12 }"
            :md="{ span: 8 }"
            :lg="{ span: 6 }"
            :xl="{ span: 6 }"
            :xxl="{ span: 4 }"
          >
            <FormItem label="日期">
              <RangePicker
                :disabledDate="disabledDate"
                @change="onChangTime"
                v-model:value="formState.time"
              />
            </FormItem>
          </Col>
          <Col
            :xs="{ span: 24 }"
            :sm="{ span: 12 }"
            :md="{ span: 8 }"
            :lg="{ span: 6 }"
            :xl="{ span: 6 }"
            :xxl="{ span: 4 }"
          >
            <FormItem>
              <RadioGroup
                @change="onChange('time_interval')"
                button-style="solid"
                v-model:value="formState.time_interval"
              >
                <RadioButton value="day">今天</RadioButton>
                <RadioButton value="week">近一周</RadioButton>
                <RadioButton value="month">近一个月</RadioButton>
              </RadioGroup>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <!-- <BasicForm
        autoFocusFirstItem
        :labelWidth="0"
        :schemas="schemas"
        :rowProps="{ gutter: [16, 0] }"
        :showActionButtonGroup="false"
      /> -->
      <template v-if="baseDate.length === 0">
        <div class="h-500px flex items-center justify-center flex-col">
          <Empty></Empty>
        </div>
      </template>
      <template v-else>
        <div class="md:flex enter-y flex-wrap -mr-4">
          <!-- 空气温度 -->
          <AirTemperature
            :data="statisData.air_temperature"
            :extra="name"
            class="md:w-386px w-full !mr-4 !mb-4"
            :loading="false"
            :time="formState.time"
            :company="formState.time_interval"
          />
          <!-- 空气湿度 -->
          <AirHumidity
            :extra="name"
            :data="statisData.air_humidity"
            class="md:w-386px w-full !mr-4 !mb-4"
            :loading="false"
            :time="formState.time"
            :company="formState.time_interval"
          />
          <!-- 光照强度 -->
          <LightIntensity
            :extra="name"
            :data="statisData.illumination"
            class="md:w-386px w-full !mr-4 !mb-4"
            :loading="false"
            :time="formState.time"
            :company="formState.time_interval"
          />
          <!-- 降雨量 -->
          <Rainfall
            :extra="name"
            :time="formState.time"
            :data="statisData.daily_rainfall"
            class="md:w-386px w-full !mr-4 !mb-4"
            :loading="false"
            :company="formState.time_interval"
          />
          <!-- 风速 -->
          <WindSpeed
            :extra="name"
            :data="statisData.wind_speed"
            class="md:w-386px w-full !mr-4 !mb-4"
            :loading="false"
            :time="formState.time"
            :company="formState.time_interval"
          />
          <!-- 风力 -->
          <!-- <Pressure
            :extra="name"
            :data="statisData.wind_degree"
            class="md:w-386px w-full !mr-4 !mb-4"
            :loading="false"
            :time="formState.time"
            :company="formState.time_interval"
          /> -->
          <!-- 风向 -->
          <WindDirection
            :extra="name"
            :data="statisData.wind_direction"
            class="md:w-386px w-full !mr-4 !mb-4"
            :loading="false"
            :time="formState.time"
            :company="formState.time_interval"
          />
          <!-- 噪声 -->
          <Noise
            :extra="name"
            :data="statisData.noise"
            class="md:w-386px w-full !mr-4 !mb-4"
            :loading="false"
            :time="formState.time"
            :company="formState.time_interval"
          />
          <!-- PM10 -->
          <PM10
            :extra="name"
            :data="statisData.pm10"
            class="md:w-386px w-full !mr-4 !mb-4"
            :loading="false"
            :time="formState.time"
            :company="formState.time_interval"
          />
          <!-- PM25 -->
          <PM25
            :extra="name"
            :data="statisData.pm25"
            class="md:w-386px w-full !mr-4 !mb-4"
            :loading="false"
            :time="formState.time"
            :company="formState.time_interval"
          />
          <!-- CO2 -->
          <CO2
            :extra="name"
            :data="statisData.co2"
            class="md:w-386px w-full !mr-4 !mb-4"
            :loading="false"
            :time="formState.time"
            :company="formState.time_interval"
          />
        </div>
      </template>
    </Card>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { formatDataByObject, getWeek, getMonth } from '/@/utils/index'
  import dayjs from 'dayjs'
  import { PageWrapper } from '/@/components/Page'
  import { ref, reactive, onMounted, computed } from 'vue'
  import { Card, Form, FormItem, Select, Row, Col, Radio, RangePicker, Empty } from 'ant-design-vue'
  import type { FormInstance } from 'ant-design-vue'
  import AirTemperature from './components/AirTemperature.vue'
  import AirHumidity from './components/AirHumidity.vue'
  import LightIntensity from './components/LightIntensity.vue'
  import Rainfall from './components/Rainfall.vue'
  import WindSpeed from './components/WindSpeed.vue'
  // import Pressure from './components/Pressure.vue'
  import WindDirection from './components/WindDirection.vue'
  import Noise from './components/Noise.vue'
  import PM10 from './components/PM10.vue'
  import PM25 from './components/PM25.vue'
  import CO2 from './components/CO2.vue'
  import {
    getGriculturalDeviceBasic,
    getaGriculturalDevicePoint,
    getAmonitoringData,
  } from '/@/api/sys/user'

  const RadioButton = Radio.Button
  const RadioGroup = Radio.Group
  const formRef = ref<FormInstance>()
  const formState = reactive({
    base_id: undefined, //基地
    device_id: undefined, //监控点
    time: undefined, //时间
    time_interval: 'day',
  })
  const baseDate = ref<any>([])
  const pointDate = ref<any>([])
  const statisData = ref<any>({})
  const name = computed(() => baseDate?.value?.find((e: any) => e.id === formState.base_id)?.name)
  const disabledDate = (current) => {
    return current && current > dayjs().endOf('day')
  }
  // 获取基地数据
  const getBase = async () => {
    const res = await getGriculturalDeviceBasic({ device_type: 4 })
    if (res.length == 0) return
    baseDate.value = res
    if (!formState.base_id) formState.base_id = res?.[0]?.id ?? undefined
    getPoint()
  }
  // 获取监控到数据
  const getPoint = async () => {
    if (baseDate.value.length == 0) return
    const res = await getaGriculturalDevicePoint({
      device_type: 4,
      agricultural_basic: formState.base_id,
    })
    pointDate.value = formatDataByObject(res)
    if (!formState.device_id) formState.device_id = pointDate.value?.[0]?.value ?? undefined
    getDate()
  }
  // 获取数据
  const getDate = async () => {
    const params = {
      device_id: formState.device_id,
      start_time: '',
      end_time: '',
    }
    if (formState.time) {
      params.start_time = dayjs(formState.time?.[0]).format('YYYY-MM-DD')
      params.end_time = dayjs(formState.time?.[1]).format('YYYY-MM-DD')
    }
    if (formState.time_interval === 'week') {
      const { WeekStartDate, WeekEndDate } = getWeek()
      params.start_time = WeekStartDate
      params.end_time = WeekEndDate
    } else if (formState.time_interval === 'month') {
      const { MonthStartDate, MonthEndDate } = getMonth()
      params.start_time = MonthStartDate
      params.end_time = MonthEndDate
    } else if (formState.time_interval === 'day') {
      params.start_time = ''
      params.end_time = ''
    }
    const res = await getAmonitoringData(params)
    statisData.value = res
  }
  const onChange = (e: string | undefined) => {
    if (e === 'base_id') formState.device_id = undefined
    if (e === 'time') formState.time_interval = ''
    if (e === 'time_interval') formState.time = undefined
    getPoint()
  }
  const onChangTime = (e) => {
    if (e === null) formState.time_interval = 'day'
    else formState.time_interval = ''
    getPoint()
  }
  onMounted(() => {
    getBase()
  })
</script>
