<template>
  <a-card
    style="background-color: transparent"
    :body-style="{ padding: '0px' }"
  >
    <div class="card-title">
      <a-typography-title :level="3">应用模块</a-typography-title>
    </div>
    <a-row :gutter="16">
      <a-col
        v-bind="
          styleResponsive
            ? { xl: 6, lg: 6, md: 6, sm: 24, xs: 24 }
            : { span: 12 }
        "
        class="gutter-row"
        v-for="(item, index) in list"
        :key="index"
        :span="6"
      >
        <a-card class="gutter-box" hoverable>
          <div class="plug-item">
            <a-image
              :height="80"
              :width="80"
              :preview="false"
              :src="item.companyLogo"
              @click="openUrl('/system/plug/detail?id=' + item.companyId)"
              fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
            />
            <div class="info">
              <a
                class="name ele-text-heading"
                @click="openUrl('/system/plug/detail?id=' + item.companyId)"
                >{{ item.tenantName }}</a
              >
              <a-rate class="rate" v-model:value="rate" disabled allow-half />
              <div class="company ele-text-placeholder">
                <a-typography-text
                  type="secondary"
                  :ellipsis="{ rows: 1, expandable: true, symbol: '...' }"
                >
                  {{ item.companyName }}
                </a-typography-text>
              </div>
            </div>
          </div>
          <div class="plug-desc ele-text-secondary">
            <a-typography-paragraph
              type="secondary"
              :ellipsis="{ rows: 2, expandable: true, symbol: '显示' }"
              :content="item.comments"
            />
          </div>
          <div class="plug-bottom">
            <div class="downloads ele-text-placeholder"
              >安装 {{ item.clicks }}</div
            >
            <a-button type="primary" disabled v-if="planId === item.tenantId"
              >已安装</a-button
            >
            <a-button v-else type="primary" @click="onClone(item)"
              >安装</a-button
            >
          </div>
        </a-card>
        <!--        <a-card class="gutter-box" hoverable>-->
        <!--          <div class="flex-justify">-->
        <!--            <div class="plug-item">-->
        <!--              <a-image-->
        <!--                :height="80"-->
        <!--                :width="80"-->
        <!--                :preview="false"-->
        <!--                :src="item.companyLogo"-->
        <!--                fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"-->
        <!--              />-->
        <!--              <div class="info">-->
        <!--                <span class="name ele-text-heading">{{ item.tenantName }}</span>-->
        <!--                <a-rate class="rate" v-model:value="rate" disabled allow-half />-->
        <!--                <div class="company ele-text-placeholder">-->
        <!--                  <a-typography-text-->
        <!--                    type="secondary"-->
        <!--                    :ellipsis="{ rows: 1, expandable: true, symbol: '..' }"-->
        <!--                  >-->
        <!--                    {{ item.companyName }}-->
        <!--                  </a-typography-text>-->
        <!--                </div>-->
        <!--                <div class="plug-desc ele-text-secondary">-->
        <!--                  <a-typography-paragraph-->
        <!--                    type="secondary"-->
        <!--                    :ellipsis="{ rows: 2, expandable: true, symbol: '显示' }"-->
        <!--                    :content="item.comments"-->
        <!--                  />-->
        <!--                </div>-->
        <!--              </div>-->
        <!--            </div>-->
        <!--            <div class="plug-desc ele-text-secondary">-->
        <!--              <a-button-->
        <!--                @click="openUrl('/system/plug/detail?id=' + item.companyId)"-->
        <!--                >去开通</a-button-->
        <!--              >-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </a-card>-->
      </a-col>
    </a-row>
  </a-card>
</template>
<script setup lang="ts">
  import { openUrl } from '@/utils/common';
  import { onClone } from '@/utils/plug-uitl';
  import { useThemeStore } from '@/store/modules/theme';
  import { storeToRefs } from 'pinia';
  import { ref } from 'vue';
  import { Company, CompanyParam } from '@/api/system/company/model';
  import useSearch from '@/utils/use-search';
  import { message } from 'ant-design-vue/es';
  import { pageCompanyAll } from '@/api/system/company';

  const props = defineProps<{
    // 修改回显的数据
    use: boolean;
  }>();

  // 是否开启响应式布局
  const themeStore = useThemeStore();
  const { styleResponsive } = storeToRefs(themeStore);

  const searchText = ref('');
  const rate = ref(3.5);
  const list = ref<Company[]>([]);

  // 查询条件
  const { where, resetFields } = useSearch<CompanyParam>({
    keywords: undefined,
    limit: 4,
    recommend: true,
    authoritative: 1
  });

  const reload = () => {
    resetFields();
    if (searchText.value) {
      where.recommend = undefined;
      where.keywords = searchText.value;
    }
    if (props.use) {
      where.recommend = false;
    }
    where.sort = 'buys';
    where.order = 'desc';

    const hide = message.loading('加载中...');
    pageCompanyAll(where)
      .then((data) => {
        if (data?.list) {
          list.value = data?.list;
        }
      })
      .finally(() => {
        hide();
      });
  };
  reload();
</script>

<style scoped lang="less">
  .ele-body-card {
    background-color: transparent;
    padding: 20px;
  }

  .card-title {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
  .gutter-row {
    margin: 0 auto 30px auto;
    .gutter-box {
      .plug-item {
        display: flex;
        .info {
          font-size: 14px;
          margin-left: 6px;
          .name {
            font-size: 20px;
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            font-weight: 500;
          }
          .rate {
            font-size: 13px;
          }
          .company {
          }
        }
      }
      .plug-desc {
        padding: 10px 0;
        font-size: 16px;
        min-height: 88px;
      }
      .plug-bottom {
        display: flex;
        justify-content: space-between;
      }
    }
  }
</style>
