<template>
  <ele-page>
    <ele-card>
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <el-tag>Hash: {{ info['content-hash'] }}</el-tag>

        <el-tag
          class="hidden-sm-and-down"
          type="success"
          effect="dark"
          style="float: right"
          >插件接口版本: {{ info['plugin-api-version'] }}</el-tag
        >
      </div>
    </ele-card>
    <ele-card :body-style="{ paddingTop: '8px' }">
      <!-- 表格 -->
      <ele-pro-table
        ref="tableRef"
        row-key="roleId"
        :columns="columns"
        :datasource="datasource"
        :show-overflow-tooltip="true"
        :highlight-current-row="true"
        cache-key="systemComposerPackageTable"
        :pagination="false"
      >
        <template #name="{ row }">
          <el-tag type="success">{{ row.type }}</el-tag>
          <el-tag style="margin-left: 5px" v-if="row.dev" type="warning"
            >Dev</el-tag
          >
          {{ row.name }}
        </template>
        <template #keywords="{ row }">
          <el-tag
            v-for="name in row.keywords"
            :key="name"
            size="small"
            :disable-transitions="true"
            style="margin-right: 5px"
          >
            {{ name }}
          </el-tag>
        </template>
        <template #action="{ row }">
          <el-link type="primary" underline="never" @click="openDetails(row)">
            详情
          </el-link>
        </template>
      </ele-pro-table>
    </ele-card>

    <!-- 包详情弹窗 -->
    <package-details v-model="showDetails" :data="current" />
  </ele-page>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { EleProTable } from 'ele-admin-plus';
  import type {
    DatasourceFunction,
    Columns
  } from 'ele-admin-plus/es/ele-pro-table/types';
  import { composerInfo } from '@/api/system/dev-composer';
  import PackageDetails from './components/package-details.vue';

  defineOptions({ name: 'SystemComposerPackage' });

  /** 表格实例 */
  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);

  /** 表格列配置 */
  const columns = ref<Columns>([
    {
      type: 'index',
      columnKey: 'index',
      width: 50,
      align: 'center'
    },
    {
      prop: 'name',
      label: '包名称',
      sortable: 'custom',
      slot: 'name',
      minWidth: 70
    },
    {
      prop: 'version',
      label: '版本号',
      width: 120
    },
    {
      prop: 'description',
      label: '简介',
      minWidth: 160
    },
    {
      prop: 'keywords',
      label: '标签',
      slot: 'keywords',
      minWidth: 120
    },
    {
      prop: 'time',
      label: '发布时间',
      width: 230,
      align: 'center'
    },
    {
      columnKey: 'action',
      label: '操作',
      width: 100,
      align: 'center' /* ,
      fixed: 'right' */,
      slot: 'action',
      hideInPrint: true,
      hideInExport: true
    }
  ]);
  const info = ref(false);
  /** 表格数据源 */
  const datasource: DatasourceFunction = ({ pages, where, orders }) => {
    return composerInfo({ ...where, ...orders, ...pages }).then((data: any) => {
      info.value = data;
      return data.packages.concat(
        data['packages-dev'].map((d: any) => {
          d.dev = true;
          return d;
        })
      );
    });
  };

  /** 当前编辑数据 */
  const current = ref<any | null>(null);

  /** 是否显示编辑弹窗 */
  const showDetails = ref(false);
  const openDetails = (row: any) => {
    current.value = row;
    showDetails.value = true;
  };
</script>
