<template>
  <div class="guns-layout">
    <div class="guns-layout">
      <guns-split-layout width="0px" :allowCollapse="false" :resizable="false">
        <div class="guns-layout-sidebar width-100 p-t-12" v-if="false">
          <div class="sidebar-content">
            <BuinessTree @treeSelect="treeSelect" />
          </div>
        </div>
        <template #content>
          <div class="guns-layout-content">
            <div class="guns-layout">
              <div class="guns-layout-content-header" style="height: 40px">
                <a-space>
                  <span>业务图</span>
                </a-space>
                <a-space :size="16">
                  <a-input
                    v-model:value="where.searchText"
                    placeholder="请输入关键词（回车搜索）"
                    @pressEnter="reload"
                    style="height: 36px; width: 300px"
                  >
                    <template #prefix>
                      <icon-font iconClass="icon-opt-search"></icon-font>
                    </template>
                  </a-input>
                  <a-button type="primary" class="border-radius" @click="openAddEdit()" v-if="!props.showAll"
                    ><plus-outlined />新建</a-button
                  >
                </a-space>
              </div>
              <div class="guns-layout-content-application">
                <div class="content-mian">
                  <div class="content-mian-body">
                    <div class="table-content" style="height: 100%; position: relative;">
                      <a-spin :spinning="loading" :delay="100">
                        <div style="height: calc(100% - 40px); overflow-y: auto; overflow-x: hidden">
                          <a-row :gutter="[16, 16]">
                            <a-col
                              :xs="24"
                              :sm="24"
                              :md="12"
                              :lg="8"
                              :xl="6"
                              :xxl="6"
                              v-for="item in busiessPictureList"
                              :key="item.diagramId"
                            >
                              <div class="list-item" @click="jupmDesign(item)">
                                <div class="list-item-img">
                                  <img :src="filePreviewUrl + item.diagramFileId" alt="" v-if="item.diagramFileId" />
                                  <img src="@/assets/logo.png" alt="" v-else />
                                </div>
                                <div class="list-item-bottom">
                                  <div class="list-item-bottom-left">
                                    <img src="@/assets/project/business.svg" />
                                    <div class="list-item-bottom-left-content">
                                      <div class="list-item-bottom-left-content-title">
                                        {{ item.diagramName }}
                                      </div>
                                      <div class="list-item-bottom-left-content-time">{{ item.createTime }}</div>
                                    </div>
                                  </div>
                                  <div class="list-item-bottom-right">
                                    <a-dropdown placement="bottom" :trigger="['click']" v-model:visible="item.showMore">
                                      <template #overlay>
                                        <a-menu>
                                          <a-menu-item @click.stop="openAddEdit(item)">
                                            <icon-font
                                              iconClass="icon-opt-bianji"
                                              font-size="20px"
                                              title="编辑"
                                              color="#60666b"
                                              class="mr-5"
                                            ></icon-font>
                                            <span>编辑</span>
                                          </a-menu-item>
                                          <a-menu-item @click.stop="remove(item)">
                                            <icon-font
                                              iconClass="icon-opt-shanchu"
                                              font-size="20px"
                                              title="删除"
                                              color="#60666b"
                                              class="mr-5"
                                            ></icon-font>
                                            <span>删除</span>
                                          </a-menu-item>
                                        </a-menu>
                                      </template>
                                      <more-outlined class="header-add" @click.stop />
                                    </a-dropdown>
                                  </div>
                                </div>
                              </div>
                            </a-col>
                          </a-row>
                        </div>
                        <a-pagination
                          :current="pageNo"
                          :page-size="pageSize"
                          :total="total"
                          v-if="total > 0"
                          size="small"
                          class="pagination"
                          show-size-changer
                          show-quick-jumper
                          @change="pageSizeChange"
                          @showSizeChange="showSizeChange"
                          :show-total="total => `共${total}条`"
                        />
                      </a-spin>
                      <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" class="simple-empty" v-if="busiessPictureList?.length == 0"></a-empty>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </guns-split-layout>
    </div>

    <!-- 增编辑弹框 -->
    <BusinessAddEdit v-model:visible="showEdit" v-if="showEdit" :data="current" @done="refresh" :businessId="where.businessId" />
  </div>
</template>

<script setup name="BuinessList">
import { useRouter } from 'vue-router';
import { API_BASE_PREFIX } from '@/config/setting';
import { message, Modal, Empty } from 'ant-design-vue/es';
import { BusinessGraphApi } from './api/BusinessGraphApi';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useGeneratorStore } from '@/store/modules/generator';
import { onMounted, computed, ref, createVNode, defineAsyncComponent } from 'vue';

const BuinessTree = defineAsyncComponent(() => import('../list/components/list-type/buiness-tree.vue'));
const BusinessAddEdit = defineAsyncComponent(() => import('./components/business-add-edit.vue'));

defineOptions({
  name: 'BuinessList'
});

const props = defineProps({
  showAll: {
    type: Boolean,
    default: false
  },
  getBusinessStatCount: Function
});

const router = useRouter();

const generatorStore = useGeneratorStore();

// 当前选中应用数据
const buinessSelectAppData = computed(() => generatorStore.buinessSelectAppData ?? {});

// 文件预览接口
const filePreviewUrl = ref(`${API_BASE_PREFIX}/sysFileInfo/public/preview?fileId=`);

const loading = ref(false);

// 当前所在页数
const pageNo = ref(1);
// 当前分页条数
const pageSize = ref(24);
// 总数据
const total = ref(0);

// 业务图列表
const busiessPictureList = ref([]);

const showEdit = ref(false);

// 搜索条件
const where = ref({
  searchText: '',
  businessId: '',
  businessCategoryId: ''
});
// 当前行数据
const current = ref(null);

onMounted(() => {
  if (!props.showAll && !buinessSelectAppData.value?.businessId) {
    return goHome();
  }

  if (props.showAll) {
    getBusinessPictureList();
  } else {
    treeSelect(buinessSelectAppData.value);
  }
});

// 获取业务图列表
const getBusinessPictureList = () => {
  loading.value = true;
  let params = {
    ...where.value,
    pageNo: pageNo.value,
    pageSize: pageSize.value
  };

  BusinessGraphApi.page(params)
    .then(res => {
      if (res.code == '00000') {
        busiessPictureList.value = res.data.rows ?? [];
        busiessPictureList.value = busiessPictureList.value.map(item => {
          return { ...item, showMore: false };
        });
        total.value = res.data.totalRows;
      }
    })
    .finally(() => (loading.value = false));
};

const refresh = () => {
  reload();
  if (props.getBusinessStatCount) props.getBusinessStatCount();
};

// 返回应用列表页
const goHome = () => {
  router.push(generatorStore.appBackUrl);
};

// 树选中
const treeSelect = node => {
  where.value.businessId = node.businessId;
  where.value.businessCategoryId = node.businessCategoryId;
  reload();
};

// 点击搜索
const reload = () => {
  pageNo.value = 1;
  getBusinessPictureList();
};

// 分页的页数改变
const pageSizeChange = (page, pageSize) => {
  pageNo.value = page;
  getBusinessPictureList();
};

// 条数改变
const showSizeChange = (current, size) => {
  pageSize.value = size;
  getBusinessPictureList();
};

const jupmDesign = record => {
  let url = props.showAll ? '/mid/app/totalBusinessGraph/design' : '/mid/app/businessGraph/design';
  router.push({
    path: url,
    query: { diagramId: record.diagramId, type: props.showAll ? '2' : '1' }
  });
};

// 新增编辑点击
const openAddEdit = record => {
  if (!props.showAll && !where.value.businessId) return message.warn('请选择一个业务');
  if (record) record.showMore = false;
  current.value = record;
  showEdit.value = true;
};

// 删除单个
const remove = record => {
  record.showMore = false;
  Modal.confirm({
    title: '提示',
    content: '确定要删除选中数据吗?',
    icon: createVNode(ExclamationCircleOutlined),
    maskClosable: true,
    onOk: async () => {
      const res = await BusinessGraphApi.delete({ diagramId: record.diagramId });
      message.success(res.message);
      refresh();
    }
  });
};
</script>

<style scoped lang="less">
.pagination {
  text-align: right;
}
.list-item {
  width: 100%;
  padding: 12px 16px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1.5px solid rgba(197, 207, 209, 0.4);
  background: #fff;
  cursor: pointer;

  .list-item-img {
    img {
      width: 100%;
      height: 177px;
      border-radius: 4px;
    }
  }
  .list-item-bottom {
    width: 100%;
    margin-top: 8px;
    position: relative;

    .list-item-bottom-left {
      width: calc(100% - 30px);
      margin-right: 10px;
      display: flex;
      align-items: center;

      img {
        width: 36px;
        height: 36px;
        margin-right: 8px;
      }

      .list-item-bottom-left-content {
        width: calc(100% - 44px);

        .list-item-bottom-left-content-title {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #43505e;
          font-size: 16px;
        }
        .list-item-bottom-left-content-time {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #898e91;
          font-size: 14px;
        }
      }
    }

    .list-item-bottom-right {
      font-size: 16px;
      position: absolute;
      right: 0;
      top: 10px;
      width: 20px;
    }
  }
}
.simple-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -32px;
  margin-left: -42px;
}
</style>
