import { Toast } from 'vant';
import { Component, Vue } from 'vue-property-decorator';
import { Mutation } from 'vuex-class';
@Component
export default class Template extends Vue {
  protected focusedTemplateId = -1;
  protected folderMoveingPopupVisible = false;
  protected ActionList: any = {
    edit: {
      key: 'edit',
      icon: 'bianji2x',
      text: '编辑',
      callback: this.editTemplate,
    },
    rename: {
      key: 'rename',
      icon: 'zhongmingming2x',
      text: '重命名',
      callback: this.renameFolder,
    },
    move: {
      key: 'move',
      icon: 'yidongzhi2x',
      text: '移动至',
      callback: this.moveTo,
    },
    copy: {
      key: 'copy',
      icon: 'chuangjianfuben2x',
      text: '创建副本',
      callback: this.copyCurrentTemplate,
    },
    del: {
      key: 'del',
      icon: 'shanchu2x',
      text: '删除',
      callback: this.delFolder,
    },
  };

  private renameFolder(folder: any) {
    return true;
  }

  private delFolder(folder: any) {
    const { id } = folder;
    return new Promise((resolve: any) => {
      this.$dialog.confirm({
        message: '您确定要删除该模板吗？',
        beforeClose: (action, done) => {
          if (action === 'confirm') {
            this.$api.template
              .deleteTemplate(id)
              .then((res: any) => {
                resolve();
                this.$toast.success('删除成功');
                done();
              })
              .catch((err: any) => {
                done();
              });
          } else {
            done();
          }
        },
      });
    });
  }

  private copyCurrentTemplate(folder: any) {
    const { id: templateId } = folder;
    return this.$api.template.getTemplate(templateId).then((template: any) => {
      const params = {
        detail: template.detail,
        folder_id: template.folder_id,
        image_url: template.image_url,
        info: template.info,
        m_image_url: template.m_image_url,
        name: template.name,
        s_image_url: template.s_image_url,
      };
      return this.$api.template
        .customize(params.name, params.detail, params.folder_id, params)
        .then(() => {
          Toast('副本创建成功');
          return false;
        });
    });
  }

  private moveTo(folder: any) {
    // 移动
    const { id: templateId, name: templateName } = folder;
    this.folderMoveingPopupVisible = true;
    this.focusedTemplateId = templateId;
  }

  private editTemplate(folder: any , isSystemCategory: boolean) {
    const { id, folderId } = folder;

    this.$router.push({
      name: 'EditTemplate',
      query: {
        id,
        folderId,
        sys: JSON.stringify(isSystemCategory),
      },
    });
  }
}
