<script setup lang="ts">
  import { BasicCardList, useCardList } from '/@/components/CardList';
  import {
    deleteConfigurationCenter,
    getPage,
    shareConfiguration,
  } from '/@/api/configuration/center/configurationCenter';
  import { searchFormSchema, ConfigurationPermission } from './center.data';
  import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal';
  import { Authority } from '/@/components/Authority';
  import { Button, Card, Tooltip } from 'ant-design-vue';
  import { useRole } from '/@/hooks/business/useRole';
  import configurationSrc from '/@/assets/icons/configuration.svg';
  import { Platform } from '../center/center.data';
  import { computed, unref, reactive } from 'vue';
  import { createScadaPageLink, ScadaModeEnum } from '../center/help';
  import { useDrawer } from '/@/components/Drawer';
  import { usePermission } from '/@/hooks/web/usePermission';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Icon } from '/@/components/Icon';
  import { AuthIcon, AuthDropDown } from '/@/components/Widget';
  import { cloneDeep } from 'lodash-es';
  import { OrganizationIdTree, useOrganizationTree } from '../../common/organizationIdTree';
  import ConfigurationCenterDrawer from './ConfigurationCenterDrawer.vue';
  import { useClipboard } from '@vueuse/core';
  import { useModal } from '/@/components/Modal';
  import { ShareModal } from '/@/views/common/ShareModal';
  import { ViewTypeEnum } from '../../common/ShareModal/config';
  import { useI18n } from '/@/hooks/web/useI18n';

  const searchInfo = reactive<Recordable>({});

  const { t } = useI18n();
  const [register, { reload }] = useCardList({
    api: getPage,
    useSearchForm: true,
    title: t('visual.configuration.centerListName'),
    gutter: 4,
    searchInfo: searchInfo,
    formConfig: {
      schemas: searchFormSchema,
      labelWidth: 130,
      resetFunc: async () => {
        clearSelected();
      },
    },
    beforeFetch: async (params: Recordable) => {
      return { ...params, organizationId: getSelectKey(), isTemplate: 0 };
    },
  });

  const [registerOrgTree, { getSelectKey, clearSelected }] = useOrganizationTree({
    onSelect: () => {
      reload();
    },
  });

  const [registerDrawer, { openDrawer }] = useDrawer();

  const [registerShareModal, { openModal }] = useModal();

  const handleOpenShareModal = (record: ConfigurationCenterItemsModal) => {
    openModal(true, { record, href: createShareUrl(record) });
  };

  const { createMessage } = useMessage();

  const { isCustomerUser } = useRole();

  const { hasPermission } = usePermission();

  const getPreviewFlag = computed(() => {
    return hasPermission(ConfigurationPermission.PREVIEW);
  });

  const getDesignFlag = computed(() => {
    return hasPermission(ConfigurationPermission.DESIGN);
  });

  const getShareFlag = computed(() => {
    return hasPermission(ConfigurationPermission.SHARE);
  });

  const handleCreateOrUpdate = (record?: ConfigurationCenterItemsModal) => {
    if (record) {
      openDrawer(true, {
        isUpdate: true,
        record: cloneDeep(record),
      });
    } else {
      openDrawer(true, {
        isUpdate: false,
      });
    }
  };

  const handlePreview = (record: ConfigurationCenterItemsModal) => {
    if (!unref(getPreviewFlag)) return;
    createScadaPageLink(record, ScadaModeEnum.LIGHTBOX);
  };

  const handleDesign = (record: ConfigurationCenterItemsModal) => {
    if (!unref(getDesignFlag)) return;

    createScadaPageLink(record, ScadaModeEnum.DESIGN);
  };

  const createShareUrl = (record: ConfigurationCenterItemsModal) => {
    return createScadaPageLink(record, ScadaModeEnum.SHARE, false);
  };

  const { copied, copy } = useClipboard({ legacy: true });
  const handleCreateShareUrl = async (record: ConfigurationCenterItemsModal) => {
    if (!unref(getShareFlag)) return;
    const url = createShareUrl(record);
    await copy(url);
    if (unref(copied)) {
      createMessage.success(t('common.copyOk'));
    }
  };

  const handleDelete = async (record: ConfigurationCenterItemsModal) => {
    try {
      await deleteConfigurationCenter([record.id]);
      createMessage.success(t('common.deleteSuccessText'));
      await reload();
    } catch (error) {}
  };

  function handleSelect(organization) {
    searchInfo.organizationId = organization;
    reload();
  }
</script>

<template>
  <section class="flex w-full h-full">
    <OrganizationIdTree @select="handleSelect" @register="registerOrgTree" />
    <BasicCardList class="flex-auto p-4 w-3/4 xl:w-4/5 w-full" @register="register">
      <template #toolbar>
        <div class="flex gap-3 justify-end">
          <Authority v-if="!isCustomerUser" :value="ConfigurationPermission.CREATE">
            <Button type="primary" @click="handleCreateOrUpdate()">{{
              t('visual.configuration.centerAdd')
            }}</Button>
          </Authority>
        </div>
      </template>
      <template #renderItem="{ item }: BasicCardListRenderItem<ConfigurationCenterItemsModal>">
        <Card
          :style="{
            '--viewType': item.viewType === ViewTypeEnum.PUBLIC_VIEW ? '#faad14' : '#1890ff',
          }"
          hoverable
          class="card-container"
        >
          <template #cover>
            <div
              class="img-container h-full w-full !flex justify-center items-center text-center p-1 relative bg-light-50 rounded-tl-10xl"
            >
              <img
                class="w-full max-h-32 h-32 object-contain !rounded-tl-10xl"
                alt="example"
                :src="item.thumbnail || configurationSrc"
                @click="handlePreview(item)"
              />
              <span class="absolute top-0 left-0 text-light-50 transform -rotate-45 translate-y-1">
                {{
                  (item as Recordable).viewType === ViewTypeEnum.PRIVATE_VIEW
                    ? t('common.private')
                    : t('common.public')
                }}
              </span>
            </div>
          </template>
          <template class="ant-card-actions" #actions>
            <Tooltip :title="t('common.previewText')">
              <AuthIcon
                :auth="ConfigurationPermission.PREVIEW"
                class="!text-lg"
                icon="ant-design:eye-outlined"
                @click="handlePreview(item)"
              />
            </Tooltip>
            <Tooltip v-if="!isCustomerUser" :title="t('common.designText')">
              <AuthIcon
                :auth="ConfigurationPermission.DESIGN"
                class="!text-lg"
                icon="ant-design:edit-outlined"
                @click="handleDesign(item)"
              />
            </Tooltip>
            <Tooltip :title="t('common.clickCopyLink')">
              <AuthIcon
                :auth="ConfigurationPermission.SHARE"
                :disabled="!item.publicId"
                class="!text-lg"
                icon="ant-design:share-alt-outlined"
                @click="handleCreateShareUrl(item)"
              />
            </Tooltip>
            <AuthDropDown
              v-if="!isCustomerUser"
              :dropMenuList="[
                {
                  text: t('common.shareText'),
                  auth: ConfigurationPermission.SHARE,
                  icon: 'ant-design:share-alt-outlined',
                  event: '',
                  onClick: handleOpenShareModal.bind(null, item),
                },
                {
                  text: t('common.editText'),
                  auth: ConfigurationPermission.UPDATE,
                  icon: 'clarity:note-edit-line',
                  event: '',
                  onClick: handleCreateOrUpdate.bind(null, item),
                },
                {
                  text: t('common.delText'),
                  auth: ConfigurationPermission.DELETE,
                  icon: 'ant-design:delete-outlined',
                  event: '',
                  popconfirm: {
                    title: t('common.isDelete'),
                    onConfirm: handleDelete.bind(null, item),
                  },
                },
              ]"
              :trigger="['hover']"
            />
          </template>
          <Card.Meta>
            <template #title>
              <span class="truncate">{{ item.name }}</span>
            </template>
            <template #description>
              <div class="truncate h-11">
                <div class="truncate flex justify-between items-center">
                  <div>{{ item.organizationDTO?.name }}</div>
                  <Icon
                    :icon="
                      item.platform === Platform.PC
                        ? 'ri:computer-line'
                        : 'clarity:mobile-phone-solid'
                    "
                  />
                </div>
                <div class="truncate">{{ item.remark || '' }} </div>
              </div>
            </template>
          </Card.Meta>
        </Card>
      </template>
    </BasicCardList>
    <ConfigurationCenterDrawer @register="registerDrawer" @success="reload()" />
    <ShareModal @register="registerShareModal" :shareApi="shareConfiguration" @success="reload" />
  </section>
</template>

<style lang="less" scoped>
  .card-container {
    :deep(.ant-card-cover) {
      background-color: var(--viewType);
    }
  }
</style>