<template>
  <div>
    <base-info
      ref="baseInfo"
      title="编辑模板"
      :showBaseInfo.sync="showBaseInfo"
      :defaultFolderId="folderId"
      @next="baseInfoNext"
      @cancel="cancelCreateTempl"
    ></base-info>
    <words-manager
      :data.sync="words"
      @show-preview="showPreview = true"
      @confirm-words="confirm"
    ></words-manager>
    <transition name="van-slide-up">
      <preview-template
        :data="words"
        v-if="showPreview"
        @cancel="showPreview = false"
        @employ="employ"
      ></preview-template>
    </transition>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { TEMPLATETYPE, DataType } from '@/const/enum';
import BaseInfo from './components/BaseInfo.vue';
import PreviewTemplate from './components/PreviewTemplate.vue';
import WordsManager from './components/WordsManager.vue';
@Component({
  components: {
    BaseInfo,
    PreviewTemplate,
    WordsManager,
  },
})
export default class Add extends Vue {
  @Prop() private id!: number;
  @Prop({ required: false }) private folderId!: number | undefined;
  @Prop() private sys!: boolean;

  private showBaseInfo: boolean = true;

  /* 创建存证所需要的数据 */
  private baseInfo: any = {
    templateName: '',
    folder: {},
    imgUrl: '',
  };
  private words: any[] = [];

  private showWordsManager: boolean = false;

  private showPreview: boolean = false;
  get templateData() {
    const { baseInfo, words } = this;
    const { templateName, folder } = baseInfo;
    return {
      templateName,
      words,
      folder,
    };
  }

  public async mounted() {
    const id = this.id;
    const ret = await this.$api.template.get(id);
    const detail = JSON.parse(ret.detail);
    this.words = detail;
    this.initBaseInfoCmpData(ret);
  }

  private initBaseInfoCmpData(ret: any) {
    const baseInfoCmp = this.$refs.baseInfo as any;
    baseInfoCmp.templateName = ret.name;
    baseInfoCmp.imgUrl = ret.s_image_url;
  }

  private baseInfoNext(data: any) {
    this.baseInfo = { ...data };
  }

  private cancelCreateTempl() {
    this.$router.back();
  }

  private commitTemplate() {
    if (this.words.length <= 0) {
      return Promise.reject('请添加字段');
    }

    if (this.sys) {
      /*编辑系统模板后，需要 新增存证 */
      return this.$api.template.customize(
        this.baseInfo.templateName,
        this.words,
        this.folderId,
        {
          s_image_url: this.baseInfo.imgUrl,
        }
      );
    } else {
      /* 编辑非系统模板时， 只需更新存证 */
      return this.$api.template.updateCustomize({
        id: this.id,
        folder_id: this.folderId,
        name: this.baseInfo.templateName,
        detail: JSON.stringify(this.words),
        s_image_url: this.baseInfo.imgUrl,
      });
    }
  }

  private async confirm() {
    try {
      /* 创建存证 */
      const res = await this.commitTemplate();
      this.$dialog
        .confirm({
          title: '提示',
          message: '仅保存还是去存证',
          confirmButtonText: '立即存证',
          cancelButtonText: '仅保存',
        })
        .then(() => {
          this.$router.push({
            name: 'ProofDetail',
            query: { templateId: res.id },
          });
        })
        .catch(() => {
          this.$router.push({ path: '/' });
        });
    } catch (err) {
      this.$toast(err);
    }
  }
  private async employ() {
    try {
      const res = await this.commitTemplate();
      this.$router.push({
        name: 'ProofDetail',
        query: { templateId: res.id },
      });
    } catch (err) {
      this.$toast(err);
    }
  }
}
</script>
