<template>
  <div class="">
    <div
      v-for="f in files"
      :key="f.id"
      class="py-2.5 border-b flex items-center"
      @click="handleSelect(f)"
    >
      <div class="mr-4" v-if="checkBox">
        <app-icon
          :icon-name="selected.indexOf(f.id) > -1 ? 'radio-checked' : 'radio'"
          class-name="h-4 w-4"
        />
      </div>
      <div class="flex items-center flex-1 overflow-hidden">
        <app-icon
          :icon-name="f.type"
          class-name="h-15 w-15"
        />
        <div class="ml-2.5 flex-1 overflow-hidden">
          <div class="title truncate">{{ f.fileName }}</div>
          <div class="text-sm text-text-secondary">
            <span class="">{{ f.time }}</span>
            <span class="ml-5">{{ f.size }}</span>
          </div>
          <div class="text-sm font-medium text-text-secondary truncate">{{ f.uploader }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue, { PropType } from "vue";
import { File } from '../file.vue'

export default Vue.extend({
  name: "File",
  components: {
    'app-icon': () => import('@/components/common/Icon.vue')
  },
  props: {
    checkBox: {
      type: Boolean,
      default: false
    },
    files: {
      type: Array as PropType<File[]>,
      default: []
    },
    selected: {
      type: Array as PropType<number[]>,
      default: []
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  created() {
    // console.log(Mock, 'mock')
  },
  data() {
    return {}
  },
  methods: {
    handleSelect(file: File) {
      if (this.checkBox) {
        let arr = JSON.parse(JSON.stringify(this.selected))
        const index = this.selected.findIndex(id => id === file.id)
        if (this.multiple) {
          // 多选
          index < 0 ? arr.push(file.id) : arr.splice(index, 1)
          this.$emit('update:selected', arr)
        } else {
          arr = index < 0 ? [file.id] : []
        }
        this.$emit('update:selected', arr)
      }
    }
  }
})
</script>

<style lang="scss" scoped>

</style>