<template>
  <div>
    <!-- 表格 -->
    <ele-pro-table
      ref="tableRef"
      row-key="appId"
      :columns="columns"
      :datasource="datasource"
      :toolbar="false"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'appName'">
          <div class="app-box">
            <a-image
              :height="50"
              :width="50"
              :preview="false"
              :src="record.appIcon"
              fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
            />
            <div class="app-info">
              <a class="ele-text-heading" @click="openEdit(record)">
                {{ record.appName }}
              </a>
              <div class="ele-text-placeholder comments">
                {{ record.comments }}
              </div>
              <a-space size="large" class="ele-text-placeholder">
                <span @click="onSelect(record.userId)" style="cursor: pointer">
                  作者：{{ record.nickname }}
                </span>
                <span>下载：{{ record.clicks }}</span>
                <span>收藏：{{ record.installs }}</span>
              </a-space>
            </div>
          </div>
        </template>
        <template v-if="column.key === 'appType'">
          <span class="ele-text-placeholder" v-if="record.appType === 'web'">
            网站应用
          </span>
          <span
            class="ele-text-placeholder"
            v-if="record.appType === 'mp-weixin'"
          >
            小程序
          </span>
          <span class="ele-text-placeholder" v-if="record.appType === 'h5-weixin'">
            公众号
          </span>
          <span
            class="ele-text-placeholder"
            v-if="record.appType === 'app-plus'"
          >
            移动应用
          </span>
          <span class="ele-text-placeholder" v-if="record.appType === 'plug'">
            插件
          </span>
        </template>
        <template v-if="column.key === 'status'">
          <a-tag v-if="record.status === 0" color="green">已上线</a-tag>
          <a-tag v-if="record.status === 1" color="red">开发中</a-tag>
        </template>
        <template v-if="column.key === 'action'">
          <a-space>
            <a @click="openEdit(record)">查看</a>
          </a-space>
        </template>
      </template>
    </ele-pro-table>
  </div>
</template>

<script lang="ts" setup>
  import { ref, nextTick, watch } from 'vue';
  // import { message } from 'ant-design-vue';
  import type {
    DatasourceFunction,
    ColumnItem
  } from 'ele-admin-pro/es/ele-pro-table/types';
  import type { EleProTable } from 'ele-admin-pro';
  import { pageApp } from '@/api/app';
  import type { App, AppParam } from '@/api/market/model';
  import { useRouter } from 'vue-router';
  import useSearch from '@/utils/use-search';

  const props = defineProps<{
    // 机构 id
    tab?: any;
    // 当前选项卡
    activeKey?: any;
    // 请求参数
    where?: any;
  }>();

  const emit = defineEmits<{
    (e: 'done', any): void;
  }>();

  // 应用列表
  const appList = ref<App[]>([]);
  // 表格实例
  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
  const { push } = useRouter();
  // 表格选中数据
  const selection = ref<App[]>([]);

  // 表格数据源
  const datasource: DatasourceFunction = ({ page, limit, where }) => {
    where.status = '0';
    where.appType = props.tab.key;
    // where.search = 0;
    if (props.where.userId) {
      where.userId = props.where.userId;
    }
    return pageApp({
      ...where,
      page,
      limit
    });
  };

  // 表格列配置
  const columns = ref<ColumnItem[]>([
    {
      title: '应用名称',
      dataIndex: 'appName',
      key: 'appName'
    },
    {
      title: '应用类型',
      dataIndex: 'appType',
      width: 180,
      key: 'appType'
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      width: 180,
      align: 'center'
    }
  ]);

  /* 搜索 */
  const reload = (where?: AppParam) => {
    selection.value = [];
    tableRef?.value?.reload({ where: where });
  };

  /* 打开编辑弹窗 */
  const openEdit = (row?: App) => {
    const path = '/market/detail';
    const appId = row?.appId;
    nextTick(() => {
      push({
        path,
        query: { appId }
      });
    });
  };
  // 表单数据
  const { where } = useSearch<AppParam>({
    appName: '',
    appCode: '',
    userId: undefined
  });
  // 按用户查询
  const onSelect = (userId) => {
    where.userId = userId;
    emit('done', where);
  };
  watch(
    () => {
      if (props.where) {
        reload(props.where);
      }
    },
    () => {}
  );
</script>

<script lang="ts">
  export default {
    name: 'MarketList'
  };
</script>

<style lang="less" scoped>
  .app-box {
    display: flex;
    .app-info {
      display: flex;
      margin-left: 6px;
      margin-right: 6px;
      flex-direction: column;
      justify-content: space-between;
    }
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .sys-org-table :deep(.ant-table-body) {
    overflow: auto !important;
    overflow: overlay !important;
  }

  .sys-org-table :deep(.ant-table-pagination.ant-pagination) {
    padding: 0 4px;
    margin-bottom: 0;
  }
  .ele-text-heading {
  }
  .comments {
    width: 420px;
    padding: 5px 0;
  }
</style>
