<script lang="ts" setup>
  import { OtaRecordDatum } from '/@/api/ota/model';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { Tabs, Space, Button } from 'ant-design-vue';
  import { useForm, BasicForm } from '/@/components/Form';
  import { formSchema } from '../config/packageDrawer.config';
  import { ref, unref } from 'vue';
  import { PackageField } from '../config/packageDetail.config';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { deleteOtaPackage, getDeviceProfileInfoById, getOtaPackageInfo } from '/@/api/ota';
  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
  import { useDownload } from '../hook/useDownload';

  const emit = defineEmits(['register', 'update:list']);

  const otaRecord = ref<OtaRecordDatum>({} as unknown as OtaRecordDatum);

  const { createConfirm, createMessage } = useMessage();

  const [registerForm, { setFieldsValue, getFieldsValue }] = useForm({
    schemas: formSchema,
    showActionButtonGroup: false,
    disabled: true,
  });

  const [register, { closeDrawer }] = useDrawerInner(async (id: string) => {
    try {
      const record = await getOtaPackageInfo(id);
      const deviceInfo = await getDeviceProfileInfoById(record.deviceProfileId.id);
      setFieldsValue({
        ...record,
        [PackageField.DESCRIPTION]: record.additionalInfo.description,
        [PackageField.DEVICE_PROFILE_INFO]: deviceInfo.name,
      });
      otaRecord.value = record;
    } catch (error) {}
  });

  const openDetailPage = () => {};

  const downloadPackage = async () => {
    await useDownload(unref(otaRecord));
  };

  const deletePackage = () => {
    createConfirm({
      iconType: 'warning',
      content: '是否确认删除操作？',
      onOk: async () => {
        try {
          await deleteOtaPackage(otaRecord.value.id.id);
          closeDrawer();
          emit('update:list');
          createMessage.success('删除成功');
        } catch (error) {}
      },
    });
  };

  const { clipboardRef, isSuccessRef } = useCopyToClipboard('');
  const copyPackageId = () => {
    clipboardRef.value = otaRecord.value.id.id;
    if (unref(isSuccessRef)) createMessage.success('复制成功');
  };

  const copyUrl = () => {
    if (!unref(otaRecord).url) {
      createMessage.warning('无直接URL');
      return;
    }
    clipboardRef.value = otaRecord.value.url;
    if (unref(isSuccessRef)) createMessage.success('复制成功');
  };

  const handleSubmit = async () => {
    getFieldsValue();
  };
</script>

<template>
  <BasicDrawer width="40%" class="relative" @register="register" @ok="handleSubmit">
    <Tabs>
      <Tabs.TabPane tab="详情" key="detail">
        <Space>
          <Button type="primary" @click="openDetailPage">打开详情页</Button>
          <Button type="primary" @click="downloadPackage" :disabled="!!otaRecord.url">
            下载包
          </Button>
          <Button type="primary" @click="deletePackage" danger>删除包</Button>
        </Space>
        <div class="mt-3">
          <Space>
            <Button type="primary" @click="copyPackageId">复制包ID</Button>
            <Button type="primary" @click="copyUrl">复制直接URL</Button>
          </Space>
        </div>
        <BasicForm @register="registerForm" />
      </Tabs.TabPane>
    </Tabs>
    <div
      class="absolute right-0 bottom-0 w-full border-t bg-light-50 border-t-gray-100 py-2 px-4 text-right"
    >
      <Button class="mr-2">取消</Button>
      <Button type="primary">保存</Button>
    </div>
  </BasicDrawer>
</template>