<template>
  <!-- 附件 -->
  <main-page
    left-arrow
    main-bg="bg-white"
    header-bg="bg-white"
    @click-left="$router.go(-1)"
  >
    <div
      slot="right"
      class="text-color-primary font-medium flex items-center"
    >
      <van-uploader
        accept=".doc,.docx,.xlsx,.xls"
        :after-read="afterRead"
      >
        <div class="p-2">上传</div>
      </van-uploader>
      <div v-if="files.length > 0" class="p-2 ml-1" @click="select">{{ checkBox ? '取消' : '选择' }}</div>
    </div>
    <div class="pt-12 px-4 pb-14">
      <search-bar
        v-model="search"
        :show-cancel="false"
        placeholder="输入文件名、上传人昵称"
        class="sticky top-12"
        bg-color="bg-white"
        input-class="bg-common-bg"
        @search="handleSearch"
      />
      <file-list
        v-if="files.length > 0"
        :selected.sync="checked"
        :files="files"
        :check-box="checkBox"
      />
      <div v-else class="px-16 pt-20">
        <img src="@/assets/images/search-empty.png" alt="">
        <div class="text-sm text-center text-text-secondary mt-1">空空如也~</div>
      </div>
    </div>
    <div v-if="checkBox" class="fixed bg-white bottom-0 left-0 w-full text-sm text-text-secondary flex">
      <div class="flex-1 text-center py-3">下载</div>
      <div class="flex-1 text-center py-3" @click="deleteFile">删除</div>
    </div>
  </main-page>
</template>

<script lang="ts">
import Vue from 'vue'
import { Uploader } from 'vant'

Vue.use(Uploader)

export interface File {
  id: number,
  fileName: string,
  type: string,
  size: string,
  uploader: string,
  time: string
}

const files: Array<File> = [
  {
    id: 1,
    fileName: '文件名.xlsx',
    type: 'xlsx',
    size: '1.3MB',
    uploader: '上传备注/昵称',
    time: '2019/02/11'
  },
  {
    id: 2,
    fileName: '文件名文件名文件名文件名文件名文件名.docx',
    type: 'docx',
    size: '666.66KB',
    uploader: '上传备注/昵称',
    time: '2019/02/11'
  }
]

export default Vue.extend({
  name: 'File',
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    'app-icon': () => import('@/components/common/Icon.vue'),
    'search-bar': () => import('@/components/common/search-bar.vue'),
    'file-list': () => import('@/views/schedule/components/fileList.vue')
  },
  data() {
    return {
      files,
      checked: [],
      search: '',
      checkBox: false
    }
  },
  methods: {
    handleSearch() {
      console.log(this.search, 'kk')
    },
    select() {
      this.checkBox = !this.checkBox
      if (!this.checkBox) {
        this.checked = []
      }
    },
    deleteFile() {
      if (!this.checked.length) {
        this.$toast('请选择需要删除的文件')
        return
      }
      this.$dialog.confirm({
        title: '提示',
        message: '确定要删除选择的文件吗？',
        confirmButtonText: '删除'
      }).then(() => {
        this.checked = this.checked.filter(id => {
          const index = this.files.findIndex(f => f.id === id)
          this.files.splice(index, 1)
          return false
        })
      }).catch(() => {
        console.log('取消')
      })
    },
    afterRead(file: any) {
      const { file: f } = file
      const size = f.size / 1024 / 1024 < 1 ? (f.size / 1024).toFixed(2) + 'KB' : (f.size / 1024 / 1024).toFixed(2) + 'MB'
      const lastIndex = f.name.lastIndexOf('.')
      const type = f.name.substr(lastIndex + 1)
      const fileObj: File = {
        id: new Date().getTime(),
        fileName: f.name,
        type,
        size,
        uploader: '昵称',
        time: '2019/09/12'
      }
      this.files.push(fileObj)
    }
  }
})
</script>

<style lang="scss" scoped>

</style>
