<template>
  <div class="page">
    <div class="ele-body">
      <a-row :gutter="36">
        <a-col :md="18" :sm="24" :xs="24">
          <a-card
            title="插件市场"
            :bordered="false"
            :body-style="{
              padding: '10px 30px 30px 30px',
              minHeight: 'calc(100vh - 352px)'
            }"
          >
            <a-tabs tabPosition="top" v-model:activeKey="activeKey">
              <template #rightExtra>
                <a-input-search
                  allow-clear
                  placeholder="搜索关键词"
                  v-model:value="searchText"
                  @pressEnter="search"
                  @search="search"
                />
              </template>
              <a-tab-pane
                v-for="(item, index) in data"
                :key="index"
                :tab="item.title"
              >
                <list
                  :activeKey="activeKey"
                  :where="where"
                  :tab="item"
                  @done="reload"
                />
              </a-tab-pane>
            </a-tabs>
          </a-card>
        </a-col>
        <a-col :md="6" :sm="24" :xs="24">
          <a-card
            title="开发者排行"
            :bordered="false"
            :body-style="{ padding: '16px', minHeight: 'calc(100vh - 352px)' }"
          >
            <Users @done="reload" />
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import List from './list/index.vue';
  import Users from './users/index.vue';
  import { ref } from 'vue';
  import { App } from '@/api/market/model';

  // 搜索条件
  const where = ref<App>({});

  // 当前选项卡
  const activeKey = ref(0);

  // 重载
  const reload = (app) => {
    if (app.appName) {
      where.value.appName = app.appName;
    } else {
      where.value.appName = ' ';
    }
    if (app.userId) {
      where.value.userId = app.userId;
    }
  };

  // 应用搜素
  const searchText = ref('');
  const onSearch = () => {
    where.value.appName = searchText.value;
  };

  // 获取字典数据
  const data = [
    {
      key: '',
      title: '全部'
    },
    {
      key: 'web',
      title: '网站应用'
    },
    {
      key: 'mp-weixin',
      title: '小程序'
    },
    {
      key: 'h5-weixin',
      title: '公众号'
    },
    {
      key: 'app-plus',
      title: '移动应用'
    },
    {
      key: 'plug',
      title: '插件'
    }
  ];
</script>

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

<style lang="less" scoped>
  .sys-docs-list {
    height: calc(100vh - 242px);
    border-width: 1px;
    border-style: solid;
    overflow: auto;
    display: flex;
    justify-content: center;
  }
  .ant-menu-inline {
    border-right: 0 !important;
  }
  .ele-text-heading {
    font-size: 16px;
  }
</style>
