<template>
  <div class="attachment-header cl">
    <div class="header-form z">
      <el-input v-model="form.name" placeholder="请输入附件名称" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" />
      </el-input>
    </div>
    <div class="header-button y">
      <el-dropdown class="u-m-r-10" trigger="click" @command="handleMoveAttachment">
        <el-button type="info" :disabled="chooseFileKey.length<=0">
          移动<i class="el-icon-rank el-icon--right" />
        </el-button>
        <el-dropdown-menu>
          <el-dropdown-item v-for="(item,key) in groupList" :key="key" :command="item.id">
            {{ item.name }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button type="danger" :disabled="chooseFileKey.length<=0" @click="onDelete">删除<i
        class="el-icon-delete el-icon--right"
      /></el-button>
      <el-upload
        ref="upload"
        class="dk-upload-button"
        :action="uploadUrl"
        multiple
        :data="data"
        :headers="headers"
        :on-success="handleSuccess"
        :accept="_accept"
        list-type="text"
      >
        <el-button type="primary">上传<i class="el-icon-upload el-icon--right" /></el-button>
      </el-upload>
    </div>
  </div>
</template>

<script>
import eventBus from '../eventBus'
import { getToken } from '../../../../utils/auth'
import { moveAttachment, deleteAttachment } from '../../../../api/attachment'
// TODO 这里还需要调整
export default {
  name: 'DkAttachmentHeader',
  props: {
    type: {
      default: 0,
      type: [Number, String]
    },
    accept: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      form: {
        name: ''
      },
      chooseFileKey: [],
      chooseFileList: [],
      chooseFileId: [],
      uploadUrl: process.env.VUE_APP_BASE_API + '/adminapi/attachment/upload',
      headers: {
        'Access-Token': getToken()
      },
      data: {
        'type': this.type,
        'file': 'file',
        'group_id': 0
      },
      groupList: []
    }
  },
  computed: {
    _accept() {
      var accept = ''
      if (this.accept) {
        return this.accept
      } else {
        switch (this.type) {
          case 0:
            break
          case 1:
            accept = 'image/*'
            break
          case 2:
            accept = 'audio/*'
            break
          case 3:
            accept = 'video/*'
            break
        }
        return accept
      }
    }
  },
  created() {
    // 获取选中的值
    eventBus.$on('choose', (key, list, id) => {
      this.chooseFileKey = key
      this.chooseFileList = list
      this.chooseFileId = id
    })
    eventBus.$on('getGroup', (res) => {
      this.groupList = res
    })
    eventBus.$on('selectGroup', (group_id) => {
      if (group_id <= 0) {
        this.data.group_id = 0
      } else {
        this.data.group_id = group_id
      }
    })
  },
  methods: {
    handleMoveAttachment(group_id) {
      moveAttachment(this.chooseFileId, group_id).then(res => {
        this.$message.success(res.msg)
        this.refreshList()
      })
    },
    onSubmit() {
      console.log('submit!')
    },
    handleSuccess(response) {
      if (response.code === 0) {
        this.$message.success(response.msg)
        this.$refs.upload.clearFiles()
        this.refreshList()
      } else {
        this.$message.error(response.msg)
      }
    },
    onDelete() {
      this.$confirm('此操作将永久删除文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAttachment(this.chooseFileId).then(res => {
          this.$message.success(res.msg)
          this.refreshList()
        })
      })
    },
    refreshList() {
      eventBus.$emit('refreshList', this.type, this.data.group_id, {})
    }
  }
}
</script>

<style scoped lang="scss">
.attachment-header {
  width: 100%;
  padding-bottom: 10px;

  .header-form {

  }

  .header-button {

  }
}
</style>
<style lang="scss">
.dk-upload-button {
  display: inline-block;
  margin-left: 10px;
  position: relative;

  .el-upload-list {
    li {
      a {
        width: 200px;
      }

      padding: 10px;
      border-bottom: 1px solid #f5f5f5;

      .el-upload-list__item-status-label {
        top: 10px;
        right: 15px;
      }
    }

    box-shadow: 0 5px 5px rgb(0 0 0 / 20%);
    background: #fff;
    position: absolute;
    z-index: 999;
    right: 0;
  }
}

</style>
