<script lang="ts" setup>
  import { DeviceProfileRecord, 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 {
    createOtaPackage,
    deleteOtaPackage,
    getDeviceProfileInfoById,
    getOtaPackageInfo,
  } from '/@/api/ota';
  import { useClipboard } from '@vueuse/core';
  import { useDownload } from '../hook/useDownload';
  import { Authority } from '/@/components/Authority';
  import { OtaPermissionKey } from '../config/config';
  import { useI18n } from '/@/hooks/web/useI18n';
  // import DeviceDetailDrawer from '/@/views/device/list/cpns/modal/DeviceDetailDrawer.vue';

  const emit = defineEmits(['register', 'update:list']);
  const { t } = useI18n();

  const loading = ref(false);

  const isUpdate = ref(false);

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

  const deviceProfileInfo = ref<DeviceProfileRecord>({} as unknown as DeviceProfileRecord);

  const { createConfirm, createMessage } = useMessage();

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

  const [register, { closeDrawer, changeLoading }] = useDrawerInner(
    async (params: { id: string; isUpdate: boolean }) => {
      try {
        const { id, isUpdate: flag } = params;
        isUpdate.value = flag;
        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,
        });
        deviceProfileInfo.value = deviceInfo;
        otaRecord.value = record;
        if (unref(isUpdate)) {
          updateSchema({ field: PackageField.DESCRIPTION, dynamicDisabled: false });
        }
      } catch (error) {}
    }
  );

  // const [registerTBDrawer, TBDrawerMethod] = useDrawer();

  // const openDetailPage = () => {
  //   TBDrawerMethod.openDrawer({
  //     id: otaRecord.value.id.id,
  //     tbDeviceId: otaRecord.value.deviceProfileId.id,
  //   });
  // };

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

  const deletePackage = () => {
    createConfirm({
      iconType: 'warning',
      content: t('common.isDelete'),
      onOk: async () => {
        try {
          await deleteOtaPackage(otaRecord.value.id.id);
          closeDrawer();
          emit('update:list');
          createMessage.success(t('common.deleteSuccessText'));
        } catch (error) {}
      },
    });
  };

  const { copied, copy } = useClipboard({ legacy: true });
  const copyPackageId = async () => {
    await copy(otaRecord.value.id.id);
    if (unref(copied)) createMessage.success(t('common.copyOk'));
  };

  const copyUrl = async () => {
    if (!unref(otaRecord).url) {
      createMessage.warning(t('monitor.ota.noDirect'));
      return;
    }
    await copy(otaRecord.value.url);
    if (unref(copied)) createMessage.success(t('common.copyOk'));
  };

  const setLoading = (status: boolean) => {
    changeLoading(status);
    loading.value = status;
  };

  const handleSubmit = async () => {
    const value = getFieldsValue();
    try {
      setLoading(true);
      await createOtaPackage({
        ...unref(otaRecord),
        additionalInfo: { description: value[PackageField.DESCRIPTION] },
      } as any);
      createMessage.success(t('common.editOkText'));
    } catch (error) {
    } finally {
      setLoading(false);
      closeDrawer();
    }
  };
</script>

<template>
  <BasicDrawer
    :title="otaRecord.title"
    width="40%"
    class="relative"
    @register="register"
    @ok="handleSubmit"
  >
    <Tabs>
      <Tabs.TabPane :tab="t('common.detailText')" key="detail">
        <Space>
          <!-- <Button type="primary" @click="openDetailPage">打开详情页</Button> -->
          <Authority :value="OtaPermissionKey.DOWNLOAD">
            <Button type="primary" @click="downloadPackage" :disabled="!!otaRecord.url">
              {{ t('monitor.ota.downloadPack') }}
            </Button>
          </Authority>
          <Authority :value="OtaPermissionKey.DELETE">
            <Button type="primary" @click="deletePackage" danger>{{
              t('monitor.ota.delPack')
            }}</Button>
          </Authority>
        </Space>
        <div class="mt-3">
          <Space>
            <Button type="primary" @click="copyPackageId">{{ t('monitor.ota.copyPackId') }}</Button>
            <Button type="primary" @click="copyUrl">{{ t('monitor.ota.copyUrl') }}</Button>
          </Space>
        </div>
        <BasicForm @register="registerForm" />
      </Tabs.TabPane>
    </Tabs>
    <template #footer>
      <div
        class="absolute right-0 bottom-0 w-full border-t bg-light-50 dark:text-gray-300 dark:bg-dark-700 dark:border-t-gray-700 border-t-gray-100 py-2 px-4 text-right"
      >
        <Button class="mr-2" @click="closeDrawer">{{ t('common.cancelText') }}</Button>
        <Authority :value="OtaPermissionKey.UPDATE">
          <Button v-if="isUpdate" type="primary" :loading="loading" @click="handleSubmit">
            {{ t('common.saveText') }}
          </Button>
        </Authority>
      </div>
    </template>
    <!-- <DeviceDetailDrawer @register="registerTBDrawer" /> -->
  </BasicDrawer>
</template>