<template>
  <a-row justify="space-between" >
    <a-col style="font-size: 20px;" >消息跟踪</a-col>
    <a-col>
      <a-space>
        {{state.device.deviceLabel}}
        <a-button type="primary" @click="openSelectDrawer">选择设备</a-button>
      </a-space>
    </a-col>
  </a-row>
  <a-card style="margin-top: 20px" >
    <a-row  justify="space-between" v-if="state.dataSource.length === 0" >
      <a-col>
        <a-row :gutter="[8, 8]" >
          <a-col>
            <a-select allowClear  placeholder="请选择业务类型" v-model:value="queryParamsState.eventType" style="width: 170px;"  >
              <a-select-option
                v-for="item in eventTypeList"
                :key="item.key"
                :value="item.key"
              >
                {{item.name}}
              </a-select-option>
            </a-select>
          </a-col>
          <a-col>
            <a-select allowClear placeholder="请选择消息状态" v-model:value="queryParamsState.success" style="width: 170px;" >
              <a-select-option
                v-for="item in successList"
                :key="item.key"
                :value="item.key"
              >
                {{item.name}}
              </a-select-option>
            </a-select>
          </a-col>
          <a-col>
            <a-range-picker v-model:value="time" :format="['DD/MM/YYYY', 'DD/MM/YYYY']"  />
          </a-col>
        </a-row>

    </a-col>
    <a-col>
      <a-button type="primary" @click="getMsgTrace">搜索</a-button>
    </a-col>
    </a-row>
    <a-spin :spinning="state.loading" v-if="state.dataSource.length === 0" >
      <a-empty>
      <template #description>
        <span v-if="!state.device.id" >
          <div>消息跟踪可记录设备运行过程中的各类信息，帮助您定位设备故障</div>
          <a>请在右上角选择您的设备</a>
        </span>
        <span v-else >
          <div>当前暂未追踪到设备消息</div>
        </span>
      </template>
    </a-empty>
    </a-spin>
    <a-table
      v-else
      :columns="columns"
      :loading="state.loading"
      :dataSource="state.dataSource"
      :pagination="queryParamsState"
      @change="changePage"
    >
    </a-table>
  </a-card>

  <a-drawer
    v-model:open="state.drawerVisible"
    size="large"
    class="custom-class"
    title="选择设备"
    placement="right"
  >
    <SelectDevice ref="selectDeviceRef" />
    <template #footer >
        <a-row justify="end" >
            <a-col>
                <a-space>
                    <a-button @click="state.drawerVisible = false">取消</a-button>
                    <a-button type="primary" @click="handleSelectDevice">确定</a-button>
                </a-space>
            </a-col>
        </a-row>
    </template>
  </a-drawer>
  </template>
<script lang='ts' setup >
import { EventController } from '@/controller'
import { message } from 'ant-design-vue'
import { onMounted, reactive, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import SelectDevice from '@/pages/iot/rule/components/selectDevice.vue'
import dayjs from 'dayjs'

const route = useRoute()

const deviceId = route.query.id as string

const columns = [
  {
    title: '业务类型',
    dataIndex: 'eventType'
  },
  {
    title: '业务步骤',
    dataIndex: 'setup'
  },
  {
    title: '业务详情',
    dataIndex: 'detail'
  },
  {
    title: '记录时间',
    dataIndex: 'date'
  },
  {
    title: '消息状态',
    dataIndex: 'status'
  }
]

const selectDeviceRef = ref()

const time = ref([])

const successList = [
  { name: '成功', key: true },
  { name: '失败', key: false }
]

const eventTypeList = Array.from(EventController.eventTypeMap, ([key, value]) => ({ ...value, value: value.key }))

const queryParamsState = reactive({
  deviceId: deviceId,
  page: 1,
  pageSize: 10,
  eventType: null,
  success: false,
  total: 0,
  startTime: '',
  endTime: '',
  time: '',
  lastId: ''
})

const state = reactive({
  loading: false,
  device: {},
  dataSource: [],
  drawerVisible: false
})

watch(
  () => time.value,
  () => {
    console.log(dayjs(time.value).format('YYYY/MM/DD') === 'Invalid Date')
    if (dayjs(time.value).format('YYYY/MM/DD') === 'Invalid Date') {
      queryParamsState.startTime = ''
      queryParamsState.endTime = ''
    } else {
      queryParamsState.startTime = new Date(dayjs(time.value[0])).getTime()
      queryParamsState.endTime = new Date(dayjs(time.value[1])).getTime()
    }
  }
)

const changePage = ({ current }) => {
  queryParamsState.page = current
  getMsgTrace()
}

const openSelectDrawer = () => {
  state.drawerVisible = true
}

const handleSelectDevice = () => {
  const _device = selectDeviceRef.value.getSelectDevice()
  if (_device) {
    state.device = _device
    console.log(_device)
    state.drawerVisible = false
    queryParamsState.deviceId = _device.id
    queryParamsState.page = 1
    getMsgTrace()
  } else {
    message.warn('请选择产品')
  }
}

const getMsgTrace = async () => {
  state.loading = true
  const { data, sum } = await EventController.page(queryParamsState)
  state.loading = false
  state.dataSource = data
  state.total = sum
}

onMounted(() => {
  if (deviceId) {
    getMsgTrace()
  }
})

</script>
  <style lang='less' scoped >
  </style>
