<template>
  <div>
    <div class="cls-container" id="cls-container">
      <div></div>
      <div class="cls-wrap">
        <div style="background-color: #fff; z-index: 2; position: relative">
          <span>分类：</span>
          <template v-for="item in apollo_list">
            <el-button type="primary" text round @click="searchClas(item.id)" :bg="active_apollo == item.id ? true : false">{{ item.name }}</el-button>
          </template>
        </div>
      </div>
    </div>

    <el-scrollbar :style="{ height: innerHeight - 50 + 'px' }">
      <div v-infinite-scroll="getZHInfo" ref="waterfull" class="infinite-list container" infinite-scroll-immediate="false" infinite-scroll-distance="50" style="padding: 30px">
        <!-- <WaterFall :data="data_list" :column="6" ref="waterFall">
          <template #item="{ item }">
            <div class="item-container">
              <div class="mask">
                <el-button type="primary" round @click="toEdit(item)">编辑</el-button>
              </div>
              <el-image referrerpolicy="no-referrer" :src="item.thumb" style="width: 250px; border-radius: 20px"></el-image>
            </div>
          </template>
        </WaterFall> -->
        <NewWaterFall :data="data_list">
          <template #item="{ item }">
            <div class="mask">
              <el-button type="primary" round @click="toEdit(item)">编辑</el-button>
            </div>
          </template>
        </NewWaterFall>
      </div>
    </el-scrollbar>
  </div>
</template>
<script setup name="stencil">
import { listTemplate, listApollo, getProfile } from '@/api/zhihui/index.js';
import ZhihuiEditor from 'zhihui-editor-sdk';
import { getZHOption } from '@/utils/index';
import useUserStore from '@/store/modules/user';
import NewWaterFall from '@/components/NewWaterFall/index.vue';
import { ElLoading } from 'element-plus';

const { proxy } = getCurrentInstance();

const params = ref({
  filter: { state: 'success', type: 'image' }, //过滤条件
  hideObjects: true, //是否隐藏模板object对象
  filterTermArr: [], //某个分类下的模板
  pageNumber: 1,
  pageSize: 20,
  sort: { updatedAt: 'desc' }, //查询时候的排序条件
});

const innerHeight = ref(0);
const isLast = ref(false);
const isLoading = ref(false);
innerHeight.value = window.innerHeight;
const data_list = ref([]);
const apollo_list = ref([{ id: '', name: '全部' }]);
const active_apollo = ref('');
let loading = null;

async function getListApollo() {
  let data = await listApollo();
  if (data.statusCode == 200) {
    let list = [];
    data?.data?.map(item => {
      list.push({ id: item._id, name: item.name });
    });
    apollo_list.value = apollo_list.value.concat(list);
  }
  getZHInfo();
}
function searchClas(filterTermArr) {
  params.value.filterTermArr = [filterTermArr];
  if (filterTermArr == '') {
    params.value.filterTermArr = [];
  }
  params.value.pageNumber = 1;
  active_apollo.value = filterTermArr;
  isLast.value = false;
  data_list.value = [];
  getZHInfo();
}
/**获取模板 */
async function getZHInfo() {
  if (isLast.value || isLoading.value) {
    return;
  }

  let containerHeight = document.querySelector('#cls-container').offsetHeight;
  innerHeight.value = window.innerHeight - containerHeight - 50;

  isLoading.value = true;
  loading = ElLoading.service({ lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.7)' });
  let data = await listTemplate(params.value);
  loading.close();
  if (data?.statusCode == 201) {
    let { info, items } = data.data;
    let list = [];
    items?.map(item => {
      if (item.thumb) {
        list.push({ id: item._id, thumb: item.thumb });
      }
    });
    if (info.page == 1) {
      data_list.value = list;
    } else {
      data_list.value = data_list.value.concat(list);
    }
    if (items.length < params.value.pageSize) {
      isLast.value = true;
    } else {
      params.value.pageNumber++;
    }
    isLoading.value = false;
  }
}
/**编辑模板 */
async function toEdit(item) {
  let data = await getProfile(); //获取团队列表
  let group_id = '';
  if (data.statusCode == 200) {
    group_id = data.data.team[0]._id;
  }
  let option = getZHOption(item.id, useUserStore().id, useUserStore().zhFirmId, group_id, () => {
    zhihuiEditor.closeIframe();
  });
  let zhihuiEditor = new ZhihuiEditor(option);
  zhihuiEditor.openIframe();
}

getListApollo();
</script>
<style scoped lang="scss">
.cls-container {
  padding: 20px 30px;
}

.mask {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 2;
  border-radius: 20px;
  display: none;
  justify-content: center;
  align-items: center;
}

.cls-wrap {
  max-height: 60px;
  overflow: hidden;
  &:hover {
    overflow: visible;
  }
}
</style>
