<template>
  <PageContainer :pageHeaderRender="false" style="padding: 0 10px 10px 10px">
    <ProSearch :columns="searchFormSchema" target="link-plugin" @search="handleSearch" />
    <FullPage style="min-height: calc(100vh - 186px)">
      <JTable
        model="CARD"
        ref="instanceRef"
        :columns="columns"
        :request="queryPage"
        :defaultParams="{
          column: 'createTime',
          order: 'desc',
          pageSize: 9
        }"
        :params="params"
      >
        <template #headerTitle>
          <PermissionButton type="primary" @click="handleAdd">
            <template #icon><JAIcon type="PlusOutlined" /></template>
            新增
          </PermissionButton>
        </template>

        <template #card="slotProps">
          <CardBox
            :value="slotProps"
            :showStatus="false"
            :actions="getActions(slotProps)"
            :statusNames="{
              processing: 'processing'
            }"
            status="processing"
          >
            <template #img>
              <img :src="getImage('/plug.png')" class="pluginImg" />
            </template>
            <template #content>
              <div>
                <div>
                  <Tag class="plugin-version">{{ slotProps.version }}</Tag>
                </div>
                <Ellipsis style="width: calc(100% - 100px); margin-bottom: 18px">
                  <span style="font-size: 16px; font-weight: 600">
                    {{ slotProps.name }}
                  </span>
                </Ellipsis>
              </div>
              <Row>
                <Col :span="12">
                  <div class="card-item-content-text"> 插件ID </div>
                  <Ellipsis style="width: 100%">
                    {{ slotProps.id }}
                  </Ellipsis>
                </Col>
                <Col :span="12">
                  <div class="card-item-content-text"> 插件类型 </div>
                  <Ellipsis style="width: 100%">
                    {{ TypeMap[slotProps.type] }}
                  </Ellipsis>
                </Col>
              </Row>
            </template>

            <template #actions="item">
              <PermissionButton
                :disabled="item.disabled"
                :popConfirm="item.popConfirm"
                :tooltip="{
                  ...item.tooltip
                }"
                @click="item.onClick"
              >
                <JAIcon type="DeleteOutlined" v-if="item.key === 'delete'" />
                <template v-else>
                  <JAIcon :type="item.icon" />
                  <span>{{ item?.text }}</span>
                </template>
              </PermissionButton>
            </template>
          </CardBox>
        </template>
        <template #type="slotProps">
          <span>{{ TypeMap[slotProps.type] }}</span>
        </template>
        <template #action="slotProps">
          <Space>
            <template v-for="i in getActions(slotProps)" :key="i.key">
              <PermissionButton
                :disabled="i.disabled"
                :popConfirm="i.popConfirm"
                :tooltip="{
                  ...i.tooltip
                }"
                @click="i.onClick"
                type="link"
                :danger="i.key === 'delete'"
                style="padding: 0 5px"
              >
                <template #icon><JAIcon :type="i.icon" /></template>
              </PermissionButton>
            </template>
          </Space>
        </template>
      </JTable>
    </FullPage>
  </PageContainer>
  <SaveModal v-if="visible" :data="editData" @cancel="cancel" @ok="save" />
</template>

<script setup lang="ts" name="PluginIndex">
  import SaveModal from './Save.vue';
  import { getImage, onlyMessage } from '@jdlinker/utils';
  import { queryPage, removeFn, getTypes } from '../../../api/link/plugin';
  import { TypeMap } from './util';
  import { FormSchema, JSearch as ProSearch, FullPage, PermissionButton, CardBox } from '@jdlinker/ui';
  // @ts-ignore
  import { PageContainer, AIcon as JAIcon, Space, Ellipsis, Tag, Row, Col } from 'linker-ui-components';
  import JTable from '../../../components/UI/Table/index';
  import { ref, onMounted } from 'vue';
  import { useRoute } from 'vue-router';

  const route = useRoute();
  const visible = ref(false);
  const params = ref<any>();
  const editData = ref();
  const instanceRef = ref();

  const searchFormSchema: FormSchema[] = [
    {
      label: '插件名称',
      field: 'name',
      component: 'Input'
    }
  ];

  const columns = [
    {
      title: '插件ID',
      dataIndex: 'id',
      key: 'type',
      fixed: 'left',
      width: 200,
      ellipsis: true,
      search: {
        type: 'input'
      }
    },
    {
      title: '插件名称',
      dataIndex: 'name',
      key: 'type',
      fixed: 'left',
      width: 200,
      ellipsis: true,
      search: {
        type: 'input'
      }
    },
    {
      title: '版本',
      dataIndex: 'version',
      key: 'version',
      ellipsis: true
    },
    {
      title: '插件类型',
      dataIndex: 'type',
      key: 'type',
      ellipsis: true,
      scopedSlots: true,
      search: {
        type: 'select',
        options: () => {
          return new Promise((resolve) => {
            getTypes().then((res) => {
              resolve(res.result?.map((item) => ({ ...item, label: item.text })));
            });
          });
        }
      }
    },
    {
      title: '文件',
      dataIndex: 'filename',
      key: 'filename',
      ellipsis: true
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
      ellipsis: true,
      search: {
        type: 'string'
      }
    },
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: 120,
      scopedSlots: true
    }
  ];

  const handleAdd = () => {
    editData.value = {};
    visible.value = true;
  };

  const handleSearch = (p: any) => {
    params.value = p;
  };

  const save = () => {
    if (instanceRef.value) {
      instanceRef.value?.reload();
    }
    visible.value = false;
  };

  const cancel = () => {
    visible.value = false;
    editData.value = undefined;
  };

  const getActions = (data: any) => {
    return [
      {
        key: 'update',
        text: '编辑',
        tooltip: {
          title: '编辑'
        },
        icon: 'EditOutlined',
        onClick: () => {
          visible.value = true;
          editData.value = data;
        }
      },
      {
        key: 'delete',
        text: '删除',
        tooltip: {
          title: '删除'
        },
        popConfirm: {
          title: '确认删除?',
          onConfirm: async () => {
            const resp = await removeFn(data.id);
            if (resp.code === 200) {
              onlyMessage('操作成功！');
              instanceRef.value?.reload();
            } else {
              onlyMessage(resp?.message || '操作失败！', 'error');
            }
          }
        },
        icon: 'DeleteOutlined'
      }
    ];
  };

  onMounted(() => {
    if (route.query.save) {
      visible.value = true;
    }
  });
</script>

<style scoped lang="less">
  .pluginImg {
    width: 80px;
    height: 80px;
  }
  .plugin-version {
    border-radius: 4px;
  }
  :deep(.card .card-warp .card-content) {
    padding: 20px 12px 17px 30px;
  }
  :deep(.card-item-content) {
    padding-top: 10px;
  }
  :deep(.jtable-card) {
    min-height: 597px;
  }
  :deep(.ant-pagination-options) {
    display: none;
  }
  :deep(.jtable-body-spin .jtable-body .jtable-pagination) {
    margin-bottom: 8px;
  }
</style>
