<template>
  <van-popup 
    v-model="show"
    position="bottom" 
    :close-on-click-overlay="false"
    :style="{height: '80%'}"
    class="base-info">
    <div style="position:relative;margin-bottom:26px;">
      <common-svg
        @click.native="cancel"
        name="shanchu" 
        style="position:absolute;left:17px;"></common-svg>
      <span>创建文件夹</span>
    </div>
    <van-field v-model="folderName" placeholder="填写文件夹名称"></van-field>
    <div class="btn-group">
      <div @click="next" class="next">确定</div>
    </div>
  </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 } 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,
  },
})
export default class AddFolder extends Vue {
  private show: boolean = true;
  private folderName: string = '';
  private imgUrl: string = '';

  private defaultFolderIndex: number = 0;
  private defaultFolderName: string = '未分类文件夹';
  @Emit('next')
  private next() {
    this.show = false;
    const { folderName} = this;
    return {
      folderName,
    };
  }
  @Emit('cancel')
  private cancel() {
    this.show = false;
  }
  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;
      .file-input{       
        display: grid;
        grid-template-columns: 20px auto 10px;
        place-items: center;
        padding: 7px 17px;
        background:#F9F9FB;
        color:#444444;
        font-size:14px;
        span{
          place-self: start;
        }
      }
      .btn-group{
        position:fixed;
        left:0;
        bottom:0;
        right:0;
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        align-items: center;
        padding: 10px 17px;
        color:#B6B5BA;
        font-size: 14px;
        .classify{
          color: #3F79FE;
        }
        .next{
          flex: auto;
          padding: 10px 37px;
          border-radius: 4px;
          background: #3F79FE;
          color: #FFFFFF;
          font-size: 16px;
        }
      }
   }
</style>