<template>
  <div style="padding: 0 10px 10px 10px">
    <PageContainer :pageHeaderRender="false">
      <ProSearch :columns="searchFormSchema" target="notice-config" @search="handleSearch" />
      <JTable
        ref="configRef"
        model="CARD"
        :columns="columns"
        :request="list"
        :defaultParams="{
          column: 'createTime',
          order: 'desc',
          pageSize: 6
        }"
        :params="params"
        :gridColumn="3"
      >
        <template #headerTitle>
          <Space>
            <PermissionButton type="primary" @click="handleAdd(null)">
              <template #icon><AIcon type="PlusOutlined" /></template>
              新增
            </PermissionButton>
          </Space>
        </template>
        <template #card="slotProps">
          <Card hoverable>
            <template #title>
              <Badge
                :status="slotProps.released === 1 ? 'processing' : 'error'"
                :text="slotProps.released === 1 ? '发布' : '未发布'"
              />
            </template>
            <template #extra>
              <span @click="handleAdd(slotProps)">
                {{ slotProps.name }}
              </span>
            </template>
            <template #cover>
              <img
                @click="handleView(slotProps)"
                :src="getImage(slotProps.picUrl, false) || getImage('/screen.png')"
                class="logo"
              />
            </template>
            <template #actions>
              <Tooltip placement="bottom" color="geekblue">
                <template #title>
                  <span>设计</span>
                </template>
                <edit-outlined @click="handleEdit(slotProps)" />
              </Tooltip>
              <Tooltip placement="bottom" color="geekblue">
                <template #title>
                  <span>复制</span>
                </template>
                <copy-outlined @click="handleCopy(slotProps)" />
              </Tooltip>
              <Tooltip placement="bottom" color="geekblue">
                <template #title>
                  <span>存为模板</span>
                </template>
                <CheckOutlined />
              </Tooltip>
              <Popconfirm placement="top" ok-text="确定" cancel-text="取消" @confirm="handleRemove(slotProps)">
                <template #title>
                  <p>是否删除所选数据</p>
                </template>
                <DeleteOutlined style="color: #ed6f6f" />
              </Popconfirm>
            </template>
          </Card>
        </template>
        <template #action="slotProps">
          <Space :size="16">
            <template v-for="i in getActions(slotProps, 'table')" :key="i.key">
              <PermissionButton
                :danger="i.key === 'delete'"
                :disabled="i.disabled"
                :popConfirm="i.popConfirm"
                :tooltip="{
                  ...i.tooltip
                }"
                @click="i.onClick"
                type="link"
                style="padding: 0px"
              >
                <template #icon><AIcon :type="i.icon" /></template>
              </PermissionButton>
            </template>
          </Space>
        </template>
      </JTable>
      <create-project ref="createRef" @success="handleSuccess" />
      <pre-project ref="preProjectRef" />
    </PageContainer>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { getImage } from '@jdlinker/utils';
  import { columns, searchFormSchema } from './data';
  import { deleteOne, list, copyDuplicate } from './service';
  import { getToken } from '@jdlinker/func';
  import CreateProject from '../project/components/createProject.vue';
  import { CopyOutlined, EditOutlined, CheckOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import PreProject from '../project/components/preProject.vue';
  import JTable from '../../../../components/UI/Table/index';
  import { PageContainer, AIcon, Space } from 'linker-ui-components';
  import { JSearch as ProSearch, PermissionButton } from '@jdlinker/ui';
  import { Card, Badge, Tooltip, Popconfirm } from 'ant-design-vue';

  const createRef = ref();
  const preProjectRef = ref();
  const configRef = ref<Record<string, any>>({});
  const params = ref<Record<string, any>>({});
  /**
   * 搜索
   * @param params
   */
  const handleSearch = (e: any) => {
    params.value = e;
  };

  // 预览
  const handleView = (data: any) => {
    preProjectRef.value.show(data);
  };
  // 设计
  const handleEdit = (data: any) => {
    window.open(
      `${(import.meta as any).env.VITE_VISUAL_HOST}/tokenLogin?path=/editor/${data.id}&token=${getToken()}`,
      '_blank'
    );
  };

  const handleSuccess = () => {
    configRef.value?.reload();
  };

  const handleRemove = async (data) => {
    await deleteOne(data.id, handleSuccess);
  };

  /**
   * 新增
   */
  const handleAdd = (data) => {
    createRef.value.show(data);
  };
  // 复制
  const handleCopy = async (data) => {
    await copyDuplicate(data.id);
    configRef.value?.reload();
  };
  const logVis = ref(false);
  const currentConfig = ref<Partial<Record<string, any>>>();
  const getActions = (data: Partial<Record<string, any>>, type: 'card' | 'table') => {
    if (!data) return [];
    const actions: any = [
      {
        key: 'action',
        text: '复制',
        tooltip: {
          title: '复制'
        },
        icon: 'CheckCircleOutlined',
        popConfirm: {
          title: `确认复制`,
          onConfirm: async () => {
            handleCopy(data);
          }
        }
      },
      {
        key: 'log',
        text: '存为模板',
        tooltip: {
          title: '存为模板'
        },
        icon: 'BarsOutlined',
        onClick: () => {
          logVis.value = true;
          currentConfig.value = data;
        }
      },
      {
        key: 'delete',
        text: '删除',
        tooltip: {
          title: '删除'
        },
        popConfirm: {
          title: '确认删除?',
          onConfirm: async () => {
            await deleteOne(data.id, handleSuccess);
          }
        },
        icon: 'DeleteOutlined'
      }
    ];

    if (type === 'card') {
      return actions;
    }
  };
</script>
<style lang="less" scoped>
  .logo {
    width: 420px;
    height: 220px;
  }
  //:deep(.ant-pagination-options) {
  //  display: none;
  //}
  :deep(.jtable-body-spin .jtable-body .j-table-empty) {
    margin: 40px 0;
  }
  :deep(.ant-card-actions > li) {
    margin: 5px 0;
  }
  :deep(.ant-card-head-title) {
    padding: 5px 0;
  }
  :deep(.ant-card-extra) {
    padding: 0;
    font-weight: 600;
  }
  :deep(.ant-card-head) {
    min-height: 32px;
    font-size: 12px;
  }
  :deep(._jtable-body_mjnfl_1) {
    padding: 16px 24px 5px;
  }
  :deep(._jtable-body_mjnfl_1 ._jtable-pagination_mjnfl_55) {
    margin-top: 5px;
  }
</style>
