<template>
  <div class="guns-layout">
    <div class="guns-layout" v-if="!showSheetField">
      <div class="guns-layout-content-header" style="height: 40px">
        <span>数据库</span>
        <a-space :size="16">
          <a-input
            v-model:value="where.searchText"
            placeholder="请输入关键字"
            @pressEnter="getSheetList"
            style="width: 300px; height: 36px"
          >
            <template #prefix>
              <icon-font iconClass="icon-opt-search" />
            </template>
          </a-input>
          <a-button class="border-radius"><span style="font-weight: normal" @click="exportSql">导出SQL</span></a-button>
        </a-space>
      </div>
      <div class="guns-layout-content-application">
        <div class="content-mian">
          <div class="content-mian-body">
            <div class="table-content">
              <a-spin :spinning="loading" :delay="100">
                <a-row :gutter="[16, 16]">
                  <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="6" v-for="item in sheetList" :key="item.metaModelId"
                    ><div class="sheet-item" @click="sheetClick(item)">
                      <div class="sheet-item-header">
                        <div class="sheet-item-header-top">
                          <div class="sheet-item-header-top-left">
                            <img src="@/assets/project/sheet.svg" alt="" class="sheet-item-header-top-left-img" />
                            <div class="sheet-item-header-top-left-content">
                              <div class="sheet-item-header-top-left-content-title">
                                {{ item.metaModelCode }}
                              </div>
                              <div class="sheet-item-header-top-left-content-code">
                                {{ item.metaModelName }}
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div></a-col
                  >
                </a-row>
              </a-spin>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 表字段 -->
    <LowCodeField v-if="showSheetField" isBusiness @back="closeSheetField" :businessSheetData="businessSheetData" />

    <!-- 导出建表语句 -->
    <ExportSheet v-model:visible="showExportSql" v-if="showExportSql" />
  </div>
</template>

<script setup name="DataSheet">
import { ref, onMounted, defineAsyncComponent } from 'vue';
import { SummaryApi } from '../api/SummaryApi';

const LowCodeField = defineAsyncComponent(() => import('../../sheet/components/sheet-field/index.vue'));
const ExportSheet = defineAsyncComponent(() => import('../../list/components/list/export-sheet.vue'));

const where = ref({
  searchText: ''
});

const loading = ref(false);

const sheetList = ref([]);

const showSheetField = ref(false);

const businessSheetData = ref(null);

const showExportSql = ref(false);

onMounted(async () => {
  getSheetList();
});

// 获取表列表
const getSheetList = () => {
  loading.value = true;
  SummaryApi.getTotalTableList({ searchText: where.value.searchText })
    .then(res => {
      sheetList.value = res.data;
    })
    .finally(() => (loading.value = false));
};

// 表点击
const sheetClick = item => {
  businessSheetData.value = item;
  showSheetField.value = true;
};

const closeSheetField = () => {
  showSheetField.value = false;
};

const exportSql = () => {
  showExportSql.value = true;
};
</script>

<style scoped lang="less">
.sheet-item {
  cursor: pointer;
  display: flex;
  padding: 0px 16px;
  flex-direction: column;
  align-items: flex-start;
  height: 65px;
  border-radius: 4px;
  border: 1px solid transparent;

  &:hover {
    border: 1px solid #3f78df;
  }

  .sheet-item-header {
    width: 100%;
    height: calc(100%);
    overflow: hidden;

    .sheet-item-header-top {
      margin-top: 8px;
      width: 100%;
      height: 48px;
      display: flex;

      .sheet-item-header-top-left {
        width: 100%;
        display: flex;
        align-items: center;

        .sheet-item-header-top-left-img {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          margin-right: 8px;
        }
        .sheet-item-header-top-left-content {
          width: calc(100% - 56px);
          height: 100%;

          .sheet-item-header-top-left-content-title {
            height: 22px;
            width: 100%;
            color: #43505e;
            font-size: 16px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
          }

          .sheet-item-header-top-left-content-code {
            margin-top: 4px;
            width: 100%;
            color: #898e91;
            font-size: 14px;
            height: 22px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>
