<template>
  <a-button
    type="outline"
    size="small"
    status="success"
    style="padding: 7px; margin-right: 10px"
    @click="handleClick"
  >
    <template #icon><icon-list /></template>
    详情
  </a-button>

  <a-modal
    width="600px"
    :visible="visible"
    @cancel="handleCancel"
  >
    <template #title>设备详情</template>
    <a-descriptions style="margin-top: 20px" :data="formData" size="large" :title=formData.name :column="1">
      <a-descriptions-item label="产品名称">{{formData.productId}}</a-descriptions-item>
      <a-descriptions-item label="硬件版本">{{formData.hardwareVersion}}</a-descriptions-item>
      <a-descriptions-item label="固件版本">{{formData.firmwareVersion}}</a-descriptions-item>
      <a-descriptions-item label="扩展属性">{{formData.extendParams}}</a-descriptions-item>
    </a-descriptions>

    <template #footer>
<!--      <a-button class="editor-button"  @click="handleCancel">取消</a-button>-->
      <a-button class="editor-button"  type="primary" @click="handleCancel">确定</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import useVisible from '@/hooks/visible';
  import {  defineEmits, PropType, ref } from 'vue';
  import { DeviceCreateRecord } from '@/api/device';
  import '@wangeditor/editor/dist/css/style.css'


  const props = defineProps({
    prem: {
      type: Object as PropType<DeviceCreateRecord>,
    },
    isCreate: Boolean,
  });
  const emit = defineEmits(['refresh']);
  const { visible, setVisible } = useVisible(false);

  const formData = ref<any>({
    ...props.prem,
  });


  // 组件被点击
  const handleClick = () => {
    setVisible(true);
  };

  // 关闭
  const handleCancel = async () => {
    setVisible(false);
  };

</script>

<style scoped>
  .editor-button{
    position: static
  }
</style>
