<template>
  <div class="template-list-container">
    <TemplateList
      :isFolderList="isFolderList"
      :list="templateList"
      :selectedId="selectedId"
      :folderId="folderId"
      :handleSelectItem="handleClickItem"
    />
    <div class="placeholder-block" v-if="isTemplateSelected"></div>
    <div class="btns-operation" v-if="isTemplateSelected">
      <div class="btn-preview" @click="handleClickPreview">预览</div>
      <div class="btn-confirm" @click="handleClickConfirm">确定</div>
    </div>
    <transition name="van-slide-up">
      <preview-template
        :data="detail"
        v-if="previewVisible"
        @cancel="previewVisible = false"
        @employ="handleEmploy"
      ></preview-template>
    </transition>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import TemplateList from './TemplateList.vue';
import PreviewTemplate from '@/views/template/components/PreviewTemplate.vue';

@Component({
  components: {
    PreviewTemplate,
    TemplateList,
  },
})
export default class Index extends Vue {
  @Prop() templateList!: [];
  @Prop() folderId!: number;
  @Prop() isFolderList!: boolean;
  selectedId: null | number = null;

  detail: any = null;
  previewVisible = false;

  get isTemplateSelected() {
    return this.selectedId !== null;
  }

  handleClickItem(id: number) {
    this.selectedId = id;
  }

  async handleClickPreview() {
    const id = this.selectedId;
    const ret = await this.$api.template.get(id);
    this.detail = JSON.parse(ret.detail)[0];
    this.previewVisible = true;
  }

  useTemplateAsProof(templateId: number) {
    const selectedTemplate = this.templateList.find(
      (item: any) => item.id === templateId
    ) as any;
    const proofName = this.$route.query.proofName;

    this.$router.push({
      name: 'ProofList',
      query: {
        selectTemplateId: templateId.toString(),
        templateName: selectedTemplate.name,
        proofName,
        baseProof: this.$route.query.baseProof,
        preProof: this.$route.query.preProof,
      },
    });
  }

  handleClickConfirm() {
    this.useTemplateAsProof(this.selectedId as number);
  }

  handleEmploy() {
    this.useTemplateAsProof(this.selectedId as number);
  }
}
</script>

<style lang="scss" scoped>
.template-list-container {
  .placeholder-block {
    height: calc(40px + 20px);
  }
  .btns-operation {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    padding: 10px 13px;
    background-color: white;
    justify-content: space-between;
    .btn-preview {
      width: 107px;
      height: 40px;
      background: #f0f1f5;
      border-radius: 4px;

      line-height: 40px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #353535;
    }
    .btn-confirm {
      width: 229px;
      height: 40px;
      background: linear-gradient(180deg, #5666ed 0%, #5666ed 100%);
      box-shadow: 0px 2px 10px 0px rgba(63, 121, 254, 0.3);
      border-radius: 4px;

      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 40px;
    }
  }
}
</style>
