<template>
  <div class="ele-body">
    <a-spin :spinning="loading">
      <a-row :gutter="36">
        <a-col :md="18" :sm="24" :xs="24">
          <Content :title="tabTitle" :data="current" />
        </a-col>
        <a-col :md="6" :sm="24" :xs="24">
          <a-card
            title="应用名称"
            :bordered="false"
            :body-style="{ padding: '16px' }"
            class="ws-margin-bottom-20"
          >
            <div class="app-head">
              <a-image
                :src="current.appIcon"
                :preview="false"
                style="margin-bottom: 10px"
              />
              <a-space direction="vertical" style="width: 100%">
                <span class="ele-text-heading">{{ current.appName }}</span>
                <span class="ele-text-secondary">{{ current.comments }}</span>
                <!--                <span class="ele-text-secondary"> 租户ID： 10035 </span>-->
                <!--                <span class="ele-text-secondary"> 账号密码： admin,123456 </span>-->
                <a-button
                  size="large"
                  block
                  @click="openUrl('https://admin.gxwebsoft.com')"
                  >在线预览</a-button
                >
                <a-space size="middle" v-if="current.price > 0">
                  <span class="ele-text-heading ele-text-danger">
                    授权价格： ￥{{ current.price }}
                  </span>
                  <del class="ele-text-delete ele-text-placeholder"
                    >￥{{ current.linePrice }}</del
                  >
                </a-space>
                <div class="ele-text-secondary ele-text-warning">
                  特大优惠，限20名，永久无限制授权
                </div>
                <a-button type="primary" size="large" block>购买授权</a-button>
              </a-space>
            </div>
            <a-divider />
          </a-card>
          <a-card
            title="在线客服"
            :bordered="false"
            :body-style="{ padding: '16px' }"
          >
            <div class="app-head">
              <a-image
                :preview="false"
                :width="290"
                :height="290"
                src="https://file.wsdns.cn/20230210/333411e812404652929371d5b495c863.png"
              />
            </div>
            <a-divider />
          </a-card>
        </a-col>
      </a-row>
    </a-spin>
  </div>
</template>

<script lang="ts" setup>
  import { nextTick, ref, unref } from 'vue';
  import { message } from 'ant-design-vue';
  import { toTreeData } from 'ele-admin-pro';
  import Content from '../components/content.vue';
  import type { App } from '@/api/market/model';
  import { useRouter } from 'vue-router';
  import { listApp, getApp } from '@/api/app';
  import { openUrl } from '@/utils/common';

  // 未登录状态
  // const username = localStorage.getItem('username');
  // if (username == null || username == 'www') {
  //   location.replace('/login');
  // }
  // 加载状态
  const loading = ref(true);
  const { currentRoute } = useRouter();
  const tabTitle = ref('应用详情');
  const appId = ref<number>(0); // 默认应用id
  const appName = ref<string>('');
  const appList = ref<App[]>([]);
  const { push } = useRouter();
  // 树形数据
  const data = ref<App[]>([]);
  const selectedKeys = ref<string[]>(['应用详情']);

  // 选中数据
  const current = ref<App | null>(null);

  // 点击应用事件
  // const handleClick = (row?: any) => {
  //   tabTitle.value = row.key;
  //   getAppDetail(appId.value);
  //   const path = '/market/detail';
  //   nextTick(() => {
  //     push({
  //       path,
  //       query: row ? { appId: appId.value, key: row.key } : undefined
  //     });
  //   });
  // };

  /* 查询 */
  const query = () => {
    // 接收传参
    const { query } = unref(currentRoute);
    current.value = query;
    if (query.key) {
      tabTitle.value = `${query.key}`;
      selectedKeys.value = [`${query.key}`];
    }
    if (query.appId) {
      appId.value = Number(query.appId);
      getAppDetail(appId.value);
    }
    if (query.appName) {
      appName.value = String(query.appName);
    }
    // 加载全部应用
    loading.value = true;
    listApp({})
      .then((list) => {
        appList.value = list;
        data.value = toTreeData({
          data: list.map((d, i) => {
            return { ...d, key: d.appId, value: d.appId };
          }),
          idField: 'appId',
          parentIdField: 'parentId'
        });
        loading.value = false;
      })
      .catch((e) => {
        loading.value = false;
        message.error(e.message);
      });
  };

  // 查询应用内容
  const getAppDetail = (appId) => {
    // 重载
    getApp(appId)
      .then((detail) => {
        if (detail) {
          current.value = detail;
        }
      })
      .catch((e) => {
        message.error('应用不存在');
      });
  };

  // 加载应用
  query();
</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: 22px;
  }
  .app-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 15px;
    .app-info {
      padding-left: 10px;
      display: flex;
      flex-direction: column;
    }
  }
</style>
