<template>
  <div class="guns-layout">
    <div class="guns-layout-content">
      <div class="guns-layout">
        <div class="guns-layout-content-header" style="margin-top: 10px">
          <span>全部门户</span>
          <a-space :size="16">
            <a-input
              v-model:value="where.searchText"
              placeholder="请输入关键词（回车搜索）"
              @pressEnter="getList"
              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">
                <a-spin :spinning="loading" :delay="100">
                  <div style="height: calc(100% - 40px); overflow-y: auto; overflow-x: hidden; position: relative">
                    <a-row :gutter="[16, 16]">
                      <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="6" v-for="item in portalList" :key="item.hostId"
                        ><div class="modular-item">
                          <div class="modular-item-header">
                            <div class="modular-item-header-top">
                              <div class="modular-item-header-top-left">
                                <img :src="activeIconSrc(item)" 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">
                                    <span class="modular-item-header-top-left-content-f">{{ item.designName }}</span>
                                  </div>
                                  <div class="modular-item-header-top-left-content-code">描述：{{ item?.description }}</div>
                                </div>
                                <div class="modular-item-header-top-left-status">
                                  <span></span>
                                </div>
                              </div>
                              <div class="modular-item-header-top-right">
                                <span v-if="item.designStatus == 10" class="modular-item-header-top-right-status active">启用</span>
                                <span v-if="item.designStatus == 20" class="modular-item-header-top-right-status shelf">下架</span>
                              </div>
                            </div>
                            <div class="modular-item-header-center"></div>
                            <a-row class="modular-item-header-bottom">
                              <a-col
                                :span="8"
                                :class="[
                                  'modular-item-header-bottom-item',
                                  { 'item-no-active': !item.authTypeList || !item.authTypeList.find(item => item == 'design') }
                                ]"
                                @click.stop="jumpDesign(item)"
                              >
                                <span>布局设计</span>
                              </a-col>
                              <a-col
                                :span="8"
                                @click.stop="jumpConfig(item, 'new')"
                                :class="[
                                  'modular-item-header-bottom-item',
                                  { 'item-no-active': !item.authTypeList || !item.authTypeList.find(item => item == 'content') }
                                ]"
                              >
                                <span>内容配置</span>
                              </a-col>
                              <a-col
                                :span="8"
                                :class="[
                                  'modular-item-header-bottom-item',
                                  {
                                    'item-no-active':
                                      !item.authTypeList || !(item.authTypeList.includes('content') || item.authTypeList.includes('admin'))
                                  }
                                ]"
                              >
                                <a-popover
                                  placement="right"
                                  overlayClassName="modular-pop"
                                  v-model:visible="item.showMore"
                                  trigger="click"
                                  @click.stop="moreClick(item)"
                                >
                                  <template #content>
                                    <div
                                      class="btn-item"
                                      @click.stop="jumpConfig(item, 'effective')"
                                      v-if="item.authTypeList && item.authTypeList.includes('content')"
                                    >
                                      <span class="btn-item-label">生效范围</span>
                                    </div>
                                    <div
                                      class="btn-item"
                                      @click.stop="jumpConfig(item, 'permission')"
                                      v-if="item.authTypeList && item.authTypeList.includes('content')"
                                    >
                                      <span class="btn-item-label">管理权限</span>
                                    </div>
                                    <div
                                      class="btn-item"
                                      @click.stop="openAddEdit(item)"
                                      v-if="item.authTypeList && item.authTypeList.includes('admin')"
                                    >
                                      <span class="btn-item-label">编辑</span>
                                    </div>
                                    <div
                                      class="btn-item"
                                      @click.stop="remove(item)"
                                      v-if="item.authTypeList && item.authTypeList.includes('admin')"
                                    >
                                      <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="portalList?.length == 0" class="empty" :image="Empty.PRESENTED_IMAGE_SIMPLE"></a-empty>
                  </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>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增编辑弹框 -->
    <PortalConfigAddEdit v-model:visible="showAddEdit" v-if="showAddEdit" :data="current" @done="getList" :iconList="iconList" />
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { onMounted, ref, createVNode, computed, defineAsyncComponent } from 'vue';
import { message, Modal, Empty } from 'ant-design-vue/es';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { getApiModularIcon } from '@/utils/common/util';
import { PortalBackendConfigApi } from './api/PortalBackendConfigApi';

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

const router = useRouter();

// 搜索条件
const where = ref({});
// 加载动画
const loading = ref(false);
// 门户列表
const portalList = ref([]);
// 当前所在页数
const pageNo = ref(1);
// 当前分页条数
const pageSize = ref(24);
// 总数据
const total = ref(0);
// 是否显示新增编辑弹框
const showAddEdit = ref(false);
// 当前行数据
const current = ref(null);
// 图片列表
const iconList = ref(getApiModularIcon());
/**
 * 图标
 */
const activeIconSrc = computed(() => {
  return item => {
    const icon = iconList.value.find(t => t.name_suffix == item.designLogo);
    return icon ? icon.url : '';
  };
});

onMounted(() => {
  getList();
});

// 获取列表
const getList = () => {
  loading.value = true;
  let params = {
    ...where.value,
    pageNo: pageNo.value,
    pageSize: pageSize.value
  };
  PortalBackendConfigApi.findPage(params)
    .then(res => {
      portalList.value = res.data.rows.map(item => {
        return { ...item, showMore: false };
      });
      total.value = res.data.totalRows;
    })
    .finally(() => (loading.value = false));
};

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

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

const openAddEdit = record => {
  if (record) record.showMore = false;
  current.value = record;
  showAddEdit.value = true;
};

const moreClick = item => {
  if (item.authTypeList && (item.authTypeList.includes('content') || item.authTypeList.includes('admin'))) item.showMore = !item.shoeMore;
};

// 门户设计
const jumpDesign = record => {
  record.showMore = false;
  if (record.authTypeList && record.authTypeList.includes('design')) {
    router.push({
      path: '/portal/backend/design',
      query: { id: record.designId }
    });
  }
};

// 配置
const jumpConfig = (record, type) => {
  record.showMore = false;
  if (record.authTypeList && record.authTypeList.includes('content')) {
    router.push({
      path: '/portal/backend/config/detail',
      query: { id: record.designId, type }
    });
  }
};

const remove = record => {
  record.showMore = false;
  Modal.confirm({
    title: '删除提醒',
    content: '删除后将无法恢复，确定删除吗',
    icon: createVNode(ExclamationCircleOutlined),
    maskClosable: true,
    onOk: async () => {
      const res = await PortalBackendConfigApi.delete({ designId: record.designId });
      message.success(res.message);
      getList();
    }
  });
};
</script>

<style scoped lang="less">
.content-mian-body {
  overflow-y: auto;
  overflow-x: hidden;
}
.pagination {
  text-align: right;
}
.empty {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -32px;
  margin-top: -42px;
}
.modular-item {
  display: flex;
  padding: 12px 12px;
  flex-direction: column;
  align-items: flex-start;
  height: 168px;
  border-radius: 4px;
  border: 1px solid rgba(197, 207, 209, 0.6);

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

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

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

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

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

          .modular-item-header-top-left-content-title {
            height: 22px;
            width: 100%;
            color: #43505e;
            font-size: 16px;
            display: flex;
            align-items: center;

            .modular-item-header-top-left-content-f {
              display: inline-block;
              max-width: calc(100% - 16px);
              margin-right: 8px;
              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: 22px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
          }
        }
      }
      .modular-item-header-top-right {
        text-align: right;
        width: 40px;

        .modular-item-header-top-right-status {
          display: flex;
          padding: 2px 8px;
          justify-content: center;
          align-items: center;
          border-radius: 4px;
          font-size: 12px;
        }
        .active {
          background: #e9ffe3;
          color: #00b42a;
        }
        .shelf {
          background: #f3f3f5;
          color: #60666b;
        }
      }
    }

    .modular-item-header-center {
      height: 56px;
      padding-bottom: 8px;
      margin-left: 56px;

      .modular-item-header-center-item {
        color: #898e91;
        font-size: 14px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
      }
    }

    .modular-item-header-bottom {
      padding-top: 8px;
      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;
        }
      }
      .item-no-active {
        color: #727578;
        cursor: default;
      }
    }
  }
}
.btn-item {
  display: flex;
  padding: 8px 16px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  color: #60666b;

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

  .btn-item-label {
    color: #60666b;
  }
}
</style>
<style lang="less">
.modular-pop {
  .ant-popover-inner {
    border-radius: 4px;
  }
  .ant-popover-inner-content {
    padding: 8px 0;
  }
}
</style>
