<template>
  <van-dialog
    title="添加文件夹"
    v-model="showSelf"
    show-cancel-button
    @close="cancel"
    @confirm="next"
  >
    <van-field
      v-model="folderName"
      ref="folderName"
      placeholder="请输入文件夹名称"
    />
  </van-dialog>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit, PropSync, Watch } from 'vue-property-decorator';
@Component({
})
export default class AddFolder extends Vue {
  @PropSync('show', { type: Boolean, required: true })
  private showSelf!: boolean;
  private folderName: string = '';

  @Emit('next')
  private next() {
    this.showSelf = false;
    const { folderName} = this;
    return {
      folderName,
    };
  }
  @Emit('cancel')
  private cancel() {
    this.showSelf = false;
  }

  @Watch('showSelf')
  private watchShowSelf(newValue: boolean){
    if(newValue === true){
      this.folderName = '';
    }
  }
}
</script>
<style scoped lang="scss">
</style>