<template>
  <div class="template-container">
    <div v-for="(item, index) in data.list" :key="item.id">
      <div class="template-box">
        <div class="image">
          <img :src="item.backgroundUrl" />
        </div>
        <div class="box-bottom">
          <span class="name">#{{ index + 1 }} {{ item.name }}</span>
          <span class="info" @click="handleLoading(item.id)">加载此模板</span>
        </div>
      </div>
    </div>
    <a-pagination
      v-if="data.list.length"
      v-model:current="current"
      :total="data.total"
      size="small"
      show-less-items
      @change="handleLimitChange"
    />
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { getFormTemplateList, getFormTemplateInfo } from '/@/api/form/formTemplate';
  import { FormTemplatePageModel } from '/@/api/form/formTemplate/model';

  const emits = defineEmits(['getFormJson']);

  const current = ref(1);
  const data = ref<FormTemplatePageModel>({ list: [], total: 0 });
  onMounted(() => {
    handleLimitChange();
  });

  const handleLimitChange = async () => {
    data.value = await getFormTemplateList({ size: 10, limit: current.value });
  };

  const handleLoading = async (id) => {
    const templateInfo = await getFormTemplateInfo(id);
    emits('getFormJson', templateInfo.formJson);
  };

  defineExpose({
    handleLimitChange,
  });
</script>
<style lang="less" scoped>
  .template-container {
    height: 100%;
    overflow: auto;

    .template-box {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 200px;
      margin: 10px;
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #a4afc5;

      .image {
        height: calc(100% - 22px);
        overflow: auto;
      }

      .box-bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;

        .name {
          font-weight: bold;
        }

        .info {
          color: #1c8dff;
          cursor: pointer;
        }
      }
    }

    :deep(.ant-pagination) {
      text-align: end;
      margin: 0 10px;
    }
  }
</style>
