<template>
  <div class="view-template">
    <div class="first-line">
      <div class="select-template">选择模板</div>
      <div class="click-to-preview-select">点击模板图像进行预览和选择</div>
      <div class="add-template" @click="handleClickAddTemplate" v-if="isFolderList">
        <van-image src="@/assets/addTemplate.png" />添加模板
      </div>
    </div>
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else>
      <div v-if="noData" class="no-data">
        <van-image src="@/assets/notemplate.png" width="60" />
        <div class="no-template-text">未添加模板</div>
      </div>
      <TemplateListContainer
        v-else
        :isFolderList="isFolderList"
        :templateList="templateList"
        :folderId="folderId"
        class="template-list"
      />
    </div>
  </div>
</template>
<script lang="ts">
import {
  Component,
  Prop,
  Vue,
  Emit,
  Inject,
  Mixins,
} from 'vue-property-decorator';

import { State, Action, namespace } from 'vuex-class';
import TemplateList from './components/TemplateList.vue';
import TemplateListContainer from './components/TemplateListContainer.vue';

const Template = namespace('template');

@Component({
  components: { TemplateList, TemplateListContainer },
})
export default class ViewTemplate extends Vue {
  @Prop() folderName!: string;
  @Prop() folderId!: number;
  @Template.State('sysTemplateList') protected systemList!: any[];
  @Template.Action('getSysTemplateList')
  private getSysTemplateList!: () => void;

  templateList = [];
  selectedId: null | number = null;
  loading = true;

  mounted() {
    this.fetchTemplateList();
  }

  get noData() {
    return this.templateList.length === 0;
  }

  get isFolderList(){
    return this.folderId !== undefined;
  }

  async fetchTemplateList() {
    this.loading = true;
    if (this.folderName && this.folderName !== '') {
      await this.getSysTemplateList();
      const theCategory = this.systemList.find((systemCategory) => {
        return systemCategory.folder_name === this.folderName;
      });
      this.templateList = theCategory.detail;
    } else if (this.folderId) {
      const id = this.folderId;
      const results = await this.$api.template.list({ id: [id] });
      this.templateList = results.results[0].detail || [];
    }
    this.loading = false;
  }

  handleClickAddTemplate() {
    this.$router.push({
      name: 'Add',
      query: {
        folderId: this.folderId.toString()
      }
    });
  }
}
</script>
<style scoped lang="scss">
.view-template {
  .first-line {
    display: flex;
    margin-top: 17px;
    text-align: left;
    align-items: center;
    padding: 0 16px;
    .select-template,
    .click-to-preview-select {
      font-size: 12px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
    }
    .select-template {
      color: #353535;
    }
    .click-to-preview-select {
      flex-grow: 1;
      color: #b6b5ba;
      margin-left: 10px;
    }
    .add-template {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #3f79fe;
    }
  }
  .template-list {
    margin-top: 24px;
  }
  .no-template-text {
    margin-top: 10px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #b6b5ba;
  }
  .loading,
  .no-data {
    margin-top: 111px;
  }
}
</style>
