<template>
  <BasicModal v-bind="$attrs" :title="title" @register="registerInnerModal" :width="800">
    <template #footer>
      <div v-if="isUpdate !== 3">
        <a-button type="default" @click="handleCancle">返回</a-button>
      </div>
    </template>
    <Tabs v-model:activeKey="activeKey" style="padding-left: 20px">
      <TabPane v-for="(item, index) in tabList" :key="item.key" :tab="item.name">
        <daliyTable :deviceCode="deviceCode" v-if="item.key === 'day-data'" />
        <detailData v-if="item.key === 'detail-data'" />
        <runData v-if="item.key === 'run-data'" />
        <weekDetail :deviceCode="deviceCode" v-if="item.key === 'week-data'" />
        <thingDetail v-if="item.key === 'things-data'" />
      </TabPane>
    </Tabs>
  </BasicModal>
</template>

<script setup lang="ts">
import { BasicModal, useModalInner } from '@/components/Modal';
import daliyTable from './daliyTable.vue';
import runData from './runData.vue';
import detailData from './detailData.vue';
import weekDetail from './weekDetail.vue';
import thingDetail from './thingDetail.vue';
import { computed, reactive, ref, unref } from 'vue';
import { Tabs, TabPane } from 'ant-design-vue';
defineOptions({ name: 'BlackBoxInfoModal' });
const activeKey = ref('day-data');
const emit = defineEmits(['register', 'reload']);
const tabList = reactive([
  { name: '日数据', key: 'day-data' },
  { name: '详情数据', key: 'detail-data' },
  { name: '运行数据', key: 'run-data' },
  { name: '七天详情', key: 'week-data' },
  { name: '事件详情', key: 'things-data' },
]);
const isUpdate = ref<number>(1);
const title = computed<string>(() => {
  return '运行信息';
});
const info = ref<any>({});
const deviceCode = ref<any>();
const [registerInnerModal, { modalLoading, closeModal }] = useModalInner(
  async (data: { record?: Recordable; update: number }) => {
    modalLoading(true);
    const { record, update } = data;
    isUpdate.value = update;
    info.value = record;
    deviceCode.value = record?.deviceCode;
    modalLoading(false);
  },
);

function handleCancle() {
  closeModal();
}
async function handleSubmit() {
  try {
    modalLoading(true);
  } catch (e) {
    console.warn(e);
  } finally {
    modalLoading(false);
  }
}
</script>

<style scoped></style>
