<template>
  <div class="guns-layout">
    <div class="guns-layout-content">
      <div class="guns-layout">
        <div class="guns-layout-content-header">
          <span>Excel表格</span>
          <a-space :size="16">
            <a-input
              v-model:value="where.searchText"
              placeholder="请输入关键词（回车搜索）"
              @pressEnter="reload"
              class="search-input"
              allowClear
              style="width: 300px; height: 36px"
            >
              <template #prefix>
                <icon-font iconClass="icon-opt-search"></icon-font>
              </template>
            </a-input>
            <a-button type="primary" class="border-radius" @click="openAddEdit()"><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%">
                <a-spin :spinning="loading" :delay="100">
                  <div style="height: 100%; 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 flowList" :key="item.id"
                        ><div class="modular-item" @click="tableDesign(item, 'edit')">
                          <div class="modular-item-header">
                            <div class="modular-item-header-top">
                              <div class="modular-item-header-top-left">
                                <img src="@/assets/api-modular/excel.svg" alt="" class="modular-item-header-top-left-img" />
                                <div class="modular-item-header-top-left-content">
                                  <div class="modular-item-header-top-left-content-title">
                                    {{ item.excelName }}
                                  </div>
                                  <div class="modular-item-header-top-left-content-code">
                                    {{ item.createTime }}
                                  </div>
                                </div>
                              </div>
                              <div class="modular-item-header-top-right" @click.stop>
                                <vxe-switch
                                  v-model="item.enableFlag"
                                  size="mini"
                                  open-value="Y"
                                  close-value="N"
                                  @change="statusChange($event, item)"
                                ></vxe-switch>
                              </div>
                            </div>
                            <a-row class="modular-item-header-bottom">
                              <a-col :span="8" class="modular-item-header-bottom-item" @click.stop="tableDesign(item, 'edit')">
                                <span>表格设计</span>
                              </a-col>
                              <a-col :span="8" class="modular-item-header-bottom-item" @click.stop="tableDesign(item, 'preview')">
                                <span>表格预览</span>
                              </a-col>
                              <a-col :span="8" class="modular-item-header-bottom-item" @click.stop>
                                <a-popover
                                  placement="bottomRight"
                                  overlayClassName="modular-pop"
                                  v-model:visible="item.showMore"
                                  trigger="click"
                                  @click.stop="moreClick(item)"
                                >
                                  <template #content>
                                    <div class="btn-item" @click.stop="openAddEdit(item)">
                                      <icon-font iconClass="icon-opt-bianji" color="#60666B"></icon-font>
                                      <span class="btn-item-label">编辑</span>
                                    </div>
                                    <div class="btn-item" @click.stop="remove(item)">
                                      <icon-font iconClass="icon-opt-shanchu" color="#60666B"></icon-font>
                                      <span class="btn-item-label">删除</span>
                                    </div>
                                  </template>
                                  <span>更多操作</span>
                                </a-popover>
                              </a-col>
                            </a-row>
                          </div>
                        </div></a-col
                      >
                    </a-row>
                    <a-empty v-show="flowList?.length == 0" :image="Empty.PRESENTED_IMAGE_SIMPLE" class="empty"></a-empty>
                  </div>
                </a-spin>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

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

<script setup>
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
import { useGeneratorStore } from '@/store/modules/generator';
import { onMounted, ref, createVNode, defineAsyncComponent } from 'vue';
import { message, Modal, Empty } from 'ant-design-vue/es';
import { BusinessExcelApi } from './api/BusinessExcelApi';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';

const ExcelAddEdit = defineAsyncComponent(() => import('./components/excel-add-edit.vue'));

// 当前选中应用数据
const { buinessSelectAppData, appBackUrl } = storeToRefs(useGeneratorStore());

const props = defineProps({
  getBusinessStatCount: Function
});

const router = useRouter();

// 搜索条件
const where = ref({
  searchText: '',
  businessId: ''
});

const flowList = ref([]);

const loading = ref(false);

const current = ref(null);

const showEdit = ref(false);

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

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

const moreClick = item => {
  item.showMore = !item.shoeMore;
};

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

const reload = () => {
  loading.value = true;
  let params = {
    ...where.value
  };
  BusinessExcelApi.list(params)
    .then(res => {
      flowList.value = res ?? [];
      flowList.value = flowList.value.map(item => {
        return { ...item, showMore: false };
      });
    })
    .finally(() => (loading.value = false));
};

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

// 新增编辑点击
const openAddEdit = record => {
  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,
    wrapClassName: 'delete-modal',
    onOk: async () => {
      const res = await BusinessExcelApi.delete({ id: record.id });
      message.success(res.message);
      refresh();
    }
  });
};

const statusChange = ({ value }, record) => {
  record.showMore = false;
  loading.value = true;
  BusinessExcelApi.updateStatus({ enableFlag: value, id: record.id })
    .then(res => {
      message.success(res.message);
      reload();
    })
    .finally(() => (loading.value = false));
};

const tableDesign = (record, type) => {
  record.showMore = false;
  router.push({
    path: '/mid/app/excel/design',
    query: {
      id: record.id,
      type: type == 'edit' ? 1 : 2
    }
  });
};
</script>

<style scoped lang="less">
.empty {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -32px;
  margin-top: -42px;
}
.modular-item {
  cursor: pointer;
  display: flex;
  padding: 12px 16px;
  flex-direction: column;
  align-items: flex-start;
  height: 128px;
  border-radius: 4px;
  border: 1px solid rgba(197, 207, 209, 0.6);

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

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

    .modular-item-header-top {
      margin-top: 8px;
      width: 100%;
      height: 60px;
      padding-bottom: 12px;
      display: flex;

      .modular-item-header-top-left {
        width: calc(100% - 44px);
        display: flex;
        align-items: center;

        .modular-item-header-top-left-img {
          width: 40px;
          height: 40px;
          margin-right: 8px;
        }
        .modular-item-header-top-left-content {
          width: calc(100% - 48px);
          height: 100%;

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

          .modular-item-header-top-left-content-code {
            margin-top: 4px;
            width: 100%;
            color: #898e91;
            font-size: 14px;
            height: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
          }
        }
      }
      .modular-item-header-top-right {
        text-align: right;
        width: 44px;
      }
    }

    .modular-item-header-bottom {
      padding-top: 12px;
      flex: auto;
      border-top: 1px solid #c5cfd166;

      .modular-item-header-bottom-item {
        text-align: center;
        cursor: pointer;
        color: #3f78df;
        font-size: 13px;

        &:not(:last-child) {
          border-right: 1.5px solid #c5cfd166;
        }
      }
    }
  }
}
.btn-item {
  display: flex;
  padding: 8px 16px;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: #60666b;

  &:hover {
    background-color: var(--primary-1);
  }

  .btn-item-label {
    line-height: 100%;
    color: #60666b;
  }
}
</style>

<style lang="less">
.modular-pop {
  .ant-popover-inner {
    border-radius: 4px;
  }
  .ant-popover-inner-content {
    padding: 8px 0;
  }
}
</style>
