<template>
  <div>
    <words-manager
      :data.sync="words"
      @show-preview="handleShowPreview"
      @confirm-words="handleConfirmWords"
    ></words-manager>
    <transition name="van-slide-up">
      <preview-template
        :data="words"
        v-if="showPreview"
        @cancel="hidePreview"
        @employ="handleEmploy"
      ></preview-template>
    </transition>
  </div>
</template>

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

@Component({
  components: {
    WordsManager,
    PreviewTemplate,
  },
})
export default class Index extends Vue {
  @Prop() private baseProof!: any;
  @Prop() private preProof!: any;
  @Prop() private proofName!: string;

  private words = [];
  private showPreview = false;

  private handleShowPreview() {
    this.showPreview = true;
  }

  private hidePreview() {
    this.showPreview = false;
  }

  private handleEmploy() {
    this.handleConfirmWords();
  }
  private handleConfirmWords() {
    if (this.words.length <= 0) {
      this.$toast('请添加字段');
      return;
    }
    this.$router.push({
      name: 'ProofDetail',
      query: {
        baseProof: this.baseProof,
        preProof: this.preProof,
        proofName: this.proofName,
        detail: JSON.stringify(this.words),
      },
    });
  }
}
</script>

<style></style>
