<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import type { Dayjs } from 'dayjs'
import moment from 'moment'
import { Button, Card, Form, FormItem, RangePicker, Space, message } from 'ant-design-vue'
import HistoryLine from '../HistoryLine.vue'
import PointModal from './PointModal.vue'
import { getExaHistorys } from '@/api/alert/exa'
import { useModal } from '@/components/Modal'

interface FormState {
  publishTime: any[]
}
const searchForm = reactive<FormState>({
  publishTime: [],
})
const loading = ref(true)

function onRangeChange(value: [Dayjs, Dayjs], dateString: [string, string]) {
  console.log('Selected Time: ', value)
  console.log('Formatted Selected Time: ', dateString)
}

function onRangeOk(value: [Dayjs, Dayjs]) {
  console.log('onOk: ', value)
  console.log(searchForm.publishTime)
  searchForm.publishTime = value
}

const selectedData = ref<Recordable[]>([])
interface RowKeys {
  selectedRowKeys: number[]
}
const state = reactive<RowKeys>({
  selectedRowKeys: [],
})
onMounted(() => {
  getHistoryChart()
})

const historyData = ref()
const legendName = ref<any[]>([])

async function getHistoryChart() {
  state.selectedRowKeys = localStorage.getItem('pointInfo') ? JSON.parse(localStorage.getItem('pointInfo') || '') : []
  selectedData.value = localStorage.getItem('pointInfoList') ? JSON.parse(localStorage.getItem('pointInfoList') || '') : []
  searchForm.publishTime = [moment().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')]

  const pointCodeList = selectedData.value.map(item => (item.itemName))
  loading.value = true

  if (pointCodeList.length === 0)
    message.info('暂无测点')

  const pointCode = selectedData.value.map(item => (item.itemName)).join(',')
  const pointDesc: any[] = selectedData.value.map(item => (item.descriptor))

  const exaHistoryReqVO = {
    startTime: searchForm.publishTime[0],
    endTime: searchForm.publishTime[1],
    itemName: pointCode,
    interval: 100,
  }
  historyData.value = await getExaHistorys(exaHistoryReqVO)
  legendName.value = pointDesc
  loading.value = false
}

const [registerPointModal, { openModal: openPointModal }] = useModal()
function handlePointModal() {
  openPointModal(true)
}
</script>

<template>
  <div>
    <Card>
      <Form layout="inline" :model="searchForm">
        <FormItem label="时间范围">
          <RangePicker
            :model="searchForm.publishTime"
            :show-time="{ format: 'HH:mm:ss' }"
            :placeholder="['开始时间', '结束时间']" :default-value="[moment().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')]"
            value-format="YYYY-MM-DD HH:mm:ss"
            @change="onRangeChange"
            @ok="onRangeOk"
          />
        </FormItem>
        <FormItem>
          <Space wrap>
            <Button type="primary" @click="getHistoryChart">
              查看趋势
            </Button>
            <Button @click="handlePointModal">
              测点配置
            </Button>
          </Space>
        </FormItem>
      </Form>
    </Card>
    <Card style="margin:5px" :loading="loading">
      <HistoryLine :data="historyData" :name="legendName" height="70vh" />
    </Card>
    <PointModal :selected-row-keys="state.selectedRowKeys" :selected-data="selectedData" @register="registerPointModal" @success="getHistoryChart" />
  </div>
</template>
