<template>
  <van-popup 
    v-model="show"
    position="bottom" 
    round
    :close-on-click-overlay="false"
    :style="{height: '80%'}"
    class="base-info">
    <div style="position:relative;margin-bottom:26px;font-size:18px;">
      <common-svg
        @click.native="cancel"
        name="shanchu5" 
        style="position:absolute;left:17px;"></common-svg>
      <span>创建模板</span>
    </div>
    <van-field v-model="templateName" placeholder="填写模板名称"></van-field>
    <input type="file" id="thumb" style="display:none" @change="handleFileChange">
    <label for="thumb" class="file-input">
        <common-svg name="tianjia" style="margin-right:10px;"></common-svg>
        <span>{{imgUrl ? '已上传': '添加模板封面'}}</span>
        <van-image 
          :src="imgUrl" 
          v-if="imgUrl" 
          height="24px" 
          width="33px" 
          fit="contain"></van-image>
        <common-svg name="jinru"></common-svg>
    </label>
    <div class="btn-group">
      <div>所在文件夹: <span class="classify" @click="show2 = true;">{{folder.name}}</span></div>
      <div @click="next" class="slc-btn-common next">下一步</div>
    </div>
    <van-popup 
      v-model="show2"
      position="bottom" >
      <van-picker
        show-toolbar
        value-key="name"
        :default-index="defaultFolderIndex"
        :columns="folderList"
        @cancel="show2 = false"
        @confirm="onConfirm"
      />
    </van-popup>
  </van-popup>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
import { Collapse, CollapseItem, Field, Button, NavBar, SwipeCell, Popup, Uploader, Picker , Image } from 'vant';
import { TEMPLATETYPE } from '@/const/enum';
@Component({
  components: {
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Field.name]: Field,
    [Button.name]: Button,
    [NavBar.name]: NavBar,
    [SwipeCell.name]: SwipeCell,
    [Popup.name]: Popup,
    [Uploader.name]: Uploader,
    [Picker.name]: Picker,
    [Image.name]: Image,
  },
})
export default class BaseInfo extends Vue {
  private show: boolean = true;
  private show2: boolean = false;
  private folderList: [] = [];
  private templateName: string = '';
  private imgUrl: string = '';
  private folder: any = {};

  private defaultFolderIndex: number = 0;
  private defaultFolderName: string = '未分类文件夹';
  private mounted() {
    this.$api.template.folderList({
      template_type: TEMPLATETYPE.USER,
    }).then((res: any) => {
      this.folderList = res.results || [];
      const findDefaultFolder = (folder: any) => folder.name === this.defaultFolderName;
      this.folder = this.folderList.find( findDefaultFolder );
      this.defaultFolderIndex = this.folderList.findIndex( findDefaultFolder );
    });
  }
  private next() {
    const { templateName, folder, imgUrl} = this;
    if ( !templateName ) {
      this.$toast('请输入模板名称');
      return;
    }
    // if (!imgUrl ) {
    //   this.$toast('请上传模板封面');
    //   return;
    // }
    this.$emit('next', {
      templateName,
      folder,
      imgUrl,
    });
    this.show = false;
  }
  @Emit('cancel')
  private cancel() {
    this.show = false;
  }
  private onConfirm(value: any , index: number) {
    this.show2 = false;
    this.folder = value;
  }
  private handleFileChange(e: any) {
    const input = e.target;
    const files = input.files;
    if (files && files[0]) {
      this.$api.file.upload(files[0]).then((res: any) => {
        this.imgUrl = res.url;
      });
    }
  }
}
</script>
<style scoped lang="scss">
   .base-info{
     padding: 17px 0 0;
     ::v-deep .van-field__control{
        color: #353535;
        font-size: 22px;
      }
      ::-webkit-input-placeholder{
        color: #CDCDCD
      }
      .file-input{       
        display: grid;
        grid-template-columns: 20px auto 40px 10px;
        place-items: center;
        padding: 0 17px;
        background:#F9F9FB;
        color:#444444;
        font-size:14px;
        span{
          place-self: center start;
        }
      }
      .btn-group{
        color:#B6B5BA;
        font-size: 14px;
        .classify{
          color: #3F79FE;
        }
        .next{
          padding: 10px 37px;
          font-size: 16px;
        }
      }
   }
</style>