<template>
  <a-modal
    class="dec-tempModal"
    title="选择模版"
    :visible="visible"
    :width="1220"
    centered
    @cancel="handleCancel"
    :footer="false"
  >
    <div v-if="temps.length > 0" class="menu-wrap">
      <a-menu v-model="selected" mode="horizontal" @select="ensureMenu">
        <a-menu-item v-for="item in temps" :key="item.id">
          <template v-if="item.cateIcon">
            <img class="cate-icon" :src="item.cateIcon" alt="img" />
          </template>
          <template v-else>
            <a-icon type="file" />
          </template>
          {{ item.cateName }}
        </a-menu-item>
      </a-menu>
    </div>
    <!-- 模版页面 -->
    <div class="list-scroll">
      <div class="list-wrap" v-if="showList && showList.length > 0">
        <div class="item-wrap" v-for="(item, index) in showList" :key="index">
          <div class="item-box">
            <div class="img-wrap">
              <div class="action-wrap">
                <a-button type="primary" @click="selectJson(item)"
                  >立即应用</a-button
                >
              </div>
              <img
                style="width: 100%"
                v-if="item.templateImg"
                :src="item.templateImg"
                alt
              />
            </div>
            <div class="info-wrap">
              <div class="info-name">{{ item.templateName }}</div>
              <!-- <div>访问次数：{{ item.visitCount || 0 }}</div> -->
              <div>创建时间：{{ item.createTime }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 页码 -->
    <a-pagination
      class="list-pager"
      show-quick-jumper
      :default-current="current"
      :total="total"
      @change="pageChange"
    />
  </a-modal>
</template>
<script>
export default {
  props: ["api"],
  data() {
    return {
      visible: false, // 弹窗控制参数
      selected: [""],
      showList: [],
      size: 10,
      total: 0,
      current: 1,
      pages: 1,
      temps: [],
    };
  },
  methods: {
    // 弹出
    show() {
      this.visible = true;
      this.temps = this.$parent.temps.options;
      this.currentPage = 1;
      if (this.temps.length > 0) {
        this.selected[0] = this.temps[0].id;
        this.initData();
      } else {
        this.$message.error("请先设定模版类型数据");
      }
    },
    initData() {
      this.api({
        pageSize: this.size,
        pageNo: this.current,
        templateCateId: this.selected[0],
      }).then((res) => {
        if (res.code == "200") {
          this.showList = res.result.records;
          this.total = res.result.total;
          if (this.showList.length === 0) {
            this.showList = [
              {
                id: "baseTemp",
                templateName: "空白模版",
                templateImg: "",
                templateCateId: 0,
                templateJson: "",
              },
            ];
          }
        } else {
          this.showList = [
            {
              id: "baseTemp",
              templateName: "空白模版",
              templateImg: "",
              templateCateId: 0,
              templateJson: "",
            },
          ];
          this.total = 0;
        }
      });
    },
    handleCancel() {
      this.visible = false;
    },
    ensureMenu(obj) {
      this.selected = obj.selectedKeys;
      this.pageChange(1);
    },
    selectJson(obj) {
      this.$emit("choose", obj.id);
      this.visible = false;
    },
    pageChange(obj) {
      if (obj) {
        this.current = obj;
        this.initData();
      }
    },
  },
};
</script>
