<template>
  <div>
    <div class="dk-attachment cl">
      <dk-attachment-header ref="header" :type="type" class="header" :accept="accept" />
      <dk-attachment-group ref="group" :type="type" class="group" @select="getSelectIndex" />
      <dk-attachment-container ref="container" :type="type" class="container" />
    </div>
  </div>
</template>

<script>

import DkAttachmentGroup from './group'
import DkAttachmentContainer from './container'
import DkAttachmentHeader from './header'
import eventBus from './eventBus'

export default {
  name: 'DkAttachment',
  components: { DkAttachmentGroup, DkAttachmentContainer, DkAttachmentHeader },
  props: {
    type: {
      default: 1,
      type: [Number, String]
    },
    accept: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      chooseFileList: []
    }
  },
  created() {
    eventBus.$on('choose', (chooseFileKey, chooseFileList, chooseFileId) => {
      this.chooseFileList = chooseFileList
      this.$emit('change', chooseFileKey, chooseFileList, chooseFileId)
    })
  },
  methods: {
    refreshList() {
      eventBus.$emit('refreshList', this.type, 0, {})
    },
    getSelectIndex(id) {
      // console.log(id)
    }
  }
}
</script>

<style scoped lang="scss">
.dk-attachment {
  background: #fff;

  .header {
    width: 100%;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
  }

  .group {
    width: 150px;
    float: left;
    border-right: 1px solid #eee;
  }

  .container {
    width: calc(100% - 160px);
    float: right;
  }
}
</style>
