<template>
   <div class="template">
     <base-info @next="next" @cancel="cancelCreateTempl"></base-info>
      <div v-for="(item,index) in data" :key="index" class="template-item van-hairline--top">
        <div v-if="item.type === 3" style="margin-bottom:20px;">
          <div style="display:flex;flex-direction:row;justify-content:space-between;" class="data-item">
            <div style="color:#353535;font-size:18px;font-weight:500;">{{item.label}}</div>
            <div @click="preAddWord(2,item)" style="color:#3F79FE;font-size:16px;">添加字段</div>
          </div>
          <div v-for="(item, index) in item.data" :key="index" class="data-item" style="margin-top:10px;">
            <div style="font-size:15px;color:#353535;">{{item.label}}</div>
            <div>字段类型: {{typeObj[item.type]}}</div>
            <common-svg name="bianzu21" class="icon" width="20px" height="20px"></common-svg>
          </div>
        </div>
        <div v-else>
          出错了
        </div>
      </div>
      <div class="add-word"
        @click="preAddWord(1)">
        <common-svg name="tianjia" style="margin-right:10px;"></common-svg>添加一级标题
      </div>
      <p class="tip">比如：基本信息、出厂信息、图片描述……</p>
      <div class="btn-group">
        <div role="button" v-show="data.length > 0" class="preview" @click="preview = true">预览</div>
        <div role="button" class="confirm" @click="confirm">确定</div>
      </div>
      <van-dialog 
        v-model="show"  
        :before-close="addWord" 
        :title="levelObj.title"
        show-cancel-button>
          <van-field v-model="wordName" label="" :placeholder="levelObj.placeholder"/>
          <div
            v-if="level === 2"
            @click="show2 = true;"
           style="text-align:left;display:flex;justify-content:space-between;padding:16px;color:#999999;font-size:14px;"><span>字段类型</span> <span>{{typeObj[wordType]}}</span></div>
      </van-dialog>
       <transition name="van-slide-up">
        <add-option v-if="show2" @back="show2=false" @confirmWordType="confirmWordType"></add-option>  
      </transition> 
      <transition name="van-slide-up">
        <preview-template :data="data" v-if="preview" @cancel="preview = false" @employ="employ"></preview-template>
      </transition>      
   </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { List, Image, Field, Dialog } from 'vant';
import { TEMPLATETYPE, DataType } from '@/const/enum';
import BaseInfo from './components/BaseInfo.vue';
import AddOption from './components/AddOption.vue';
import PreviewTemplate from './components/PreviewTemplate.vue';
// class Type {
//   private label: string;
//   private type: DataType;
//   private data: DataType1;
//   private options: string[];
//   constructor(label: string, type: number, data: any, options: []) {
//       this.label = label;
//       this.type = type;
//       this.data = data;
//       this.options = options;
//   }
// }
// class DataType1 {
//   private type: string;
//   private format: string;
//   private value: any;
//   constructor(type: string, format: string, value: any) {
//     this.type = type;
//     this.format = format;
//     this.value = value;
//   }
//   protected toString() {
//     return `{type: ${this.type}, format: ${this.format}, value: ${this.value}}`;
//   }
// }
// class BaseType {
//   protected label: string = '';
//   protected key: string = '';
//   protected type: number = -1;
//   protected data: any = {};
//   constructor(type: number, label: string, key: string) {
//     this.label = label;
//     this.key = key;
//     this.type = type;
//   }
//   protected initData(val: any) {
//     this.data = val;
//   }
//   protected createDataUnit(dataUnit: any) {
//     throw new Error('未实现错误');
//   }
//   protected toString() {
//     return `{label: ${this.label},key: ${this.key},type: ${this.type},data: ${this.data.toString()}}`;
//   }
// }
// class TypeZero extends BaseType {
//   constructor(label: string, key: string) {
//     super(0, label, key);
//     this.initData('');
//   }
//   protected createDataUnit(value: string) {
//     this.data = new DataType1('text', 'string', value);
//     return this;
//   }
// }
// class TypeOne extends BaseType {
//   constructor(label: string, key: string) {
//     super(1, label, key);
//     this.initData([]);
//   }
//   protected createDataUnit(value: string) {
//     this.data.push(new DataType1('image', 'hash', value));
//     return this;
//   }
// }
// class TypeTwo extends BaseType {
//   constructor(label: string, key: string) {
//     super(2, label, key);
//     this.initData([]);
//   }
//   protected createDataUnit(value: string) {
//     this.data.push(new DataType1('file', 'hash', value));
//     return this;
//   }
// }
// class TypeThree extends BaseType {
//   constructor(label: string, key: string) {
//     super(3, label, key);
//     this.initData([]);
//   }
//   protected createDataUnit(value: any) {
//     this.data.push(createType(value.type, value.label, value.key));
//     return this;
//   }
// }
// class TypeFive extends BaseType {
//   private options: string [] = [];
//   constructor(label: string, key: string, options: string[] = []) {
//     super(5, label, key);
//     this.options = options;
//     this.initData([]);
//   }
//   protected createDataUnit(value: any) {
//     this.data.push(new DataType1('text', 'string', value));
//     return this;
//   }
//   protected toString() {
//     return `{label: ${this.label},key: ${this.key},type:
//     ${this.type},data: ${this.data.toString()},options: [${this.options}]}`;
//   }
// }
// class TypeSix extends BaseType {
//   constructor(label: string, key: string) {
//     super(6, label, key);
//     this.initData('');
//   }
//   protected createDataUnit(value: any) {
//     this.data.push(new DataType1('data', 'utc', value));
//     return this;
//   }
// }
// class TypeEight extends BaseType {
//   constructor(label: string, key: string) {
//     super(8, label, key);
//     this.initData([]);
//   }
//   protected createDataUnit(value: string) {
//     this.data.push(new DataType1('media', 'hash', value));
//     return this;
//   }
// }
// class TypeNine extends BaseType {
//   constructor(label: string, key: string) {
//     super(9, label, key);
//     this.initData([]);
//   }
//   protected createDataUnit(value: string) {
//     this.data.push(new DataType1('media', 'hash', value));
//     return this;
//   }
// }
// function createType(type: number, label: string, key: string, options: string[] = []) {
//   switch (type) {
//     case 0: return new TypeZero(label, key);
//     case 1: return new TypeOne(label, key);
//     case 2: return new TypeTwo(label, key);
//     case 3: return new TypeThree(label, key);
//     // case 4: return new TypeTwo(label, key);
//     case 5: return new TypeFive(label, key, options);
//     case 6: return new TypeSix(label, key);
//     case 8: return new TypeEight(label, key);
//     case 9: return new TypeNine(label, key);
//     default: throw new Error('为定义数据类型');
//   }
// }
// console.log(createType(0,'3','4').createDataUnit('123').toString());
// console.log(createType(1,'图片','图片').createDataUnit('0xfjdkfjkd').toString());
// console.log(createType(2,'3','4').createDataUnit('0xfjdkfjk').toString());
// console.log(createType(3,'123','3333').createDataUnit({type:1,label:'文本',key:''}).toString());
// console.log(createType(5,'222','4444',['r','f']).createDataUnit('r').createDataUnit('f').toString());
// console.log(createType(6,'3','4'));
// console.log(createType(8,'3','4'));
// console.log(createType(9,'3','4'));


@Component({
  components: {
    BaseInfo,
    AddOption,
    PreviewTemplate,
    [Field.name]: Field,
    [Dialog.Component.name]: Dialog.Component,
  },
})
export default class Add extends Vue {

  private templateName: string = '';
  private thumb: [] = [];
  private folder: any = {};
  private imgUrl: string = '';

  private show: boolean = false;
  private show2: boolean = false;
  private level: number = 1;
  private wordName: string = '';
  private wordType: number = 0;
  private options: string[] = [];

  private preview: boolean = false;
  private typeObj: any = {
    0: '单行文本',
    1: '图片',
    2: 'pdf文件',
    3: '一级标题',
    5: '选择',
    6: '日期',
    8: '视频',
    9: '音频',
  };
  private typeValue: any = {
    0: {
      data : {
          type : 'text',
          format : 'string',
          value : '',
        },
      type: 0,
      key: '',
      label: '单行文本',
    },
    1: {
      data : {
          type : 'image',
          format : 'hash',
          value : [],
        },
      type: 1,
      key: '',
      label: '图片',
    },
    2: {
      data : {
          type : 'file',
          format : 'hash',
          value : [],
        },
      type: 2,
      key: '',
      label: 'pdf',
    },
    3: {
      data : [],
      type: 3,
      key: '',
      label: '一级标题',
    },
    5: {
      data : {
          type : 'text',
          format : 'string',
          value : '',
      },
      type: 5,
      key: '',
      options: [],
      label: '选择',
    },
    6: {
      data : {
          type : 'date',
          format : 'utc',
          value : 0,
      },
      type: 6,
      key: '',
      label: '日期',
    },
    8: {
      data : {
          type : 'video',
          format : 'hash',
          value : [],
      },
      type: 8,
      key: '',
      label: '视频',
    },
    9: {
      data : {
          type : 'audio',
          format : 'hash',
          value : [],
      },
      type: 9,
      key: '',
      label: '音频',
    },
  };
  private data: any[] = [];
  private tempData: any[] = [];

  get levelObj(): any {
    const obj1 = {
      title: '添加标题',
      placeholder: '一级标题名称',
      toast: '标题至少2个汉字',
    };
    const obj2 = {
      title: '添加字段',
      placeholder: '字段名称',
      toast: '字段至少2个汉字',
    };
    const obj: any = {obj1, obj2};
    return obj[`obj${this.level}`];
  }

  get templateData() {
    const {templateName , data, folder } = this;
    return {
      templateName,
      data,
      folder,
    };
  }
  private deepClone(data: any) {
    return JSON.parse(JSON.stringify(data));
  }
  private next(data: any) {
    this.templateName = data.templateName;
    this.thumb = data.fileList;
    this.folder = data.folder;
    this.imgUrl = data.imgUrl;
  }
  private cancelCreateTempl() {
    this.$router.back();
  }
  private preAddWord(level: number, item?: any) {
    this.level = level;
    this.show = true;
    this.wordType = level === 1 ? DataType.Unit : DataType.Input;
    this.tempData = item ? item.data : this.data;
  }
  private addWord(action: string, done: any) {
    if (action === 'confirm') {
      if (this.wordName === '') {
        this.$toast(this.levelObj.toast);
        done(false);
        return;
      }
      let tempData = {...this.deepClone((this.typeValue as any)[this.wordType]), label: this.wordName};
      if (this.wordType === DataType.Select) {
        tempData = { ...tempData, options: this.options };
      }
      this.tempData.push(tempData);
      this.wordName = '';
      this.wordType = 0;
      done();
    } else {
      done();
    }
  }
  private confirmWordType(data: any) {
    this.show2 = false;
    this.wordType = data.type;
    this.options = data.type === DataType.Select ? data.options : [];
  }
  private commitTemplate() {
    if (this.data.length <= 0) {
      return Promise.reject('请添加字段');
    }
    return this.$api.template.customize(this.templateName, this.data, this.folder.id, {
      s_image_url: this.imgUrl,
    });
  }
  private confirm() {
    this.employ();
  }
  private employ() {
    this.commitTemplate().then((res: any) => {
      this.$router.push({name: 'ProofDetail', query: {templateId: res.id}});
    }).catch( (err: any) => {
      this.$toast(err);
    });
  }
}
</script>
<style scoped lang="scss">
    .template{
      position: relative;
      padding: 17px;
      .template-item{
        text-align: left;
        display: flex;
        flex-direction: column;
        padding: 10px;
        font-size: 10px;
        line-height: 1.5;
        color: #818181;
        .data-item{
          display: grid;
          grid-template-columns: auto 30px;
          grid-template-rows: repeat(2, 20px);
          grid-auto-flow: column;
          align-items: center;
          .icon{
            grid-row:  span 2;
            place-self: center;
          }
        }
      }
      .add-word{
        padding: 17px;
        margin-top: 24px;
        font-size: 16px;
        color: #3F79FE;
        border-radius:6px;
        border:1px dashed rgba(63,121,254,1);
      }
      .tip{
        font-size: 12px;
        color: #737582;
        margin-bottom: 100px;
      }
      .btn-group{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        padding: 10px;
        font-size: 16px;
        box-shadow: 0px 2px 4px 0px rgba(241,243,251,1);
        background: #FFFFFF;
        .preview{
          color: #353535;
          background: #F0F1F5;
          border-radius:4px;
          width: 107px;
          padding: 9px;
          margin-right: 10px;
        }
        .confirm{
          flex: auto;
          width: 228px;
          padding: 9px;
          color: #FFFFFF;
          background:linear-gradient(180deg,rgba(93,123,246,1) 0%,rgba(108,122,254,1) 100%);
          box-shadow:0px 2px 10px 0px rgba(63,121,254,0.3);
          border-radius:4px;
        }
      }
    }
</style>