<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>
    <p style="font-weight: bolder">TIM2424071530(藏龙阁D1)</p>
    <Row :gutter="16">
      <Col class="gutter-row" :span="8">
        <div class="gutter-box-left">
          <p style="font-weight: bolder; font-size: 16px">实时查看结束（每次两分钟）</p>
          <div class="flex" style="padding-left: 32px; padding-top: 20px">
            <div>
              <img
                style="width: 30px; height: 30px"
                src="../../../assets/images/elevator/upNoColor.png"
                mode="scaleToFill"
              />
            </div>
            <div>
              <img
                style="width: 80px; height: 30px; margin: 0 20px"
                src="../../../assets/images/elevator/middleRed.png"
                mode="scaleToFill"
              />
            </div>
            <div>
              <img
                style="width: 30px; height: 30px"
                src="../../../assets/images/elevator/downNoColor.png"
                mode="scaleToFill"
              />
            </div>
          </div>
          <div style="display: flex; justify-content: center">
            <img
              style="width: 90px; height: 150px; margin-top: 15px"
              src="../../../assets/images/elevator/closeDoor.png"
              mode="scaleToFill"
            />
          </div>
        </div>
      </Col>
      <Col class="gutter-row" :span="16">
        <div class="gutter-box-right">
          <Descriptions
            title="调试信息"
            bordered
            :column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 2, xs: 2 }"
          >
            <DescriptionsItem label="所有事件状态">[无故障发生]</DescriptionsItem>
            <DescriptionsItem label="平层状态">平层</DescriptionsItem>
            <DescriptionsItem label="行梯状态">停梯</DescriptionsItem>
            <DescriptionsItem label="门开关状态">关门到位</DescriptionsItem>
            <DescriptionsItem label="当前显示楼层	">正在获取中...</DescriptionsItem>
            <DescriptionsItem label="当前速度(cm/s)">0.0</DescriptionsItem>
            <DescriptionsItem label="行梯状态">停梯</DescriptionsItem>
            <DescriptionsItem label="本次行梯距离(cm)">-1204.0</DescriptionsItem>
            <DescriptionsItem label="上行总距离(cm)	">1188.0</DescriptionsItem>
            <DescriptionsItem label="下行总距离(cm)">-1204.0</DescriptionsItem>
            <DescriptionsItem label="最后更新时间	">2024-08-13 16:56:29</DescriptionsItem>
          </Descriptions>
        </div>
      </Col>
    </Row>
  </BasicModal>
</template>

<script setup lang="ts">
import { BasicModal, useModalInner } from "@/components/Modal";

import { computed, reactive, ref, unref } from "vue";
import { Row, Col, Descriptions, DescriptionsItem } from "ant-design-vue";

defineOptions({ name: "BlackBoxInfoModal" });

const emit = defineEmits(["register", "reload"]);

const isUpdate = ref<number>(1);
const title = computed<string>(() => {
  return "实时数据";
});

const [registerInnerModal, { modalLoading, closeModal }] = useModalInner(
  async (data: { record?: Recordable; update: number }) => {
    modalLoading(true);
    const { record, update } = data;
    isUpdate.value = update;

    modalLoading(false);
  }
);

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

<style lang="less" scoped>
/deep/ .ant-modal-content {
  height: 1000px !important;
}
.gutter-box-left {
  border-right: solid 1px #f2f2f2;
  height: 400px;
}
</style>
