<script setup lang="ts">
  import { BasicCardList, useCardList } from '/@/components/CardList';
  import {
    deleteConfigurationCenter,
    getPage,
  } from '/@/api/configuration/center/configurationCenter';
  import { searchFormSchema, ConfigurationTemplatePermission } 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 } 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';

  const [register, { reload }] = useCardList({
    api: getPage,
    useSearchForm: true,
    title: '模版',
    gutter: 4,
    formConfig: {
      schemas: searchFormSchema,
      labelWidth: 80,
      resetFunc: async () => {
        clearSelected();
      },
    },
    beforeFetch: async (params: Recordable) => {
      return { ...params, organizationId: getSelectKey(), isTemplate: 1 };
    },
  });

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

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

  const { createMessage } = useMessage();

  const { isCustomerUser } = useRole();

  const { hasPermission } = usePermission();

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

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

  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 handleDelete = async (record: ConfigurationCenterItemsModal) => {
    try {
      await deleteConfigurationCenter([record.id]);
      createMessage.success('删除成功');
      await reload();
    } catch (error) {}
  };
</script>

<template>
  <section class="flex w-full h-full">
    <OrganizationIdTree @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="ConfigurationTemplatePermission.CREATE">
            <Button type="primary" @click="handleCreateOrUpdate()">新增模版</Button>
          </Authority>
        </div>
      </template>
      <template #renderItem="{ item }: BasicCardListRenderItem<ConfigurationCenterItemsModal>">
        <Card
          :style="{
            '--viewType': '#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"
            >
              <img
                class="w-full max-h-32 h-32"
                alt="example"
                :src="item.thumbnail || configurationSrc"
                @click="handlePreview(item)"
              />
            </div>
          </template>
          <template class="ant-card-actions" #actions>
            <Tooltip title="预览">
              <AuthIcon
                :auth="ConfigurationTemplatePermission.PREVIEW"
                class="!text-lg"
                icon="ant-design:eye-outlined"
                @click="handlePreview(item)"
              />
            </Tooltip>
            <Tooltip v-if="!isCustomerUser" title="设计">
              <AuthIcon
                :auth="ConfigurationTemplatePermission.DESIGN"
                class="!text-lg"
                icon="ant-design:edit-outlined"
                @click="handleDesign(item)"
              />
            </Tooltip>
            <AuthDropDown
              v-if="!isCustomerUser"
              :dropMenuList="[
                {
                  text: '编辑',
                  auth: ConfigurationTemplatePermission.UPDATE,
                  icon: 'clarity:note-edit-line',
                  event: '',
                  onClick: handleCreateOrUpdate.bind(null, item),
                },
                {
                  text: '删除',
                  auth: ConfigurationTemplatePermission.DELETE,
                  icon: 'ant-design:delete-outlined',
                  event: '',
                  popconfirm: {
                    title: '是否确认删除操作?',
                    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()" />
  </section>
</template>