<template>
  <CInput :label="label">
    <slot>
      <Upload
        :max="max"
        :multiple="multiple"
        :action="action"
        :simultaneous-uploads="1"
        :value="file"
        @file-submitted="fileAdd"
        @file-error="fileError"
      >

      </Upload>
    </slot>
  </CInput>
</template>

<script>

import Input from './input';
import {Upload} from 'cube-ui';

import {createNamespacedHelpers} from 'vuex';

const {mapState, mapActions, mapMutations} = createNamespacedHelpers('auth/auth');

export default {
  name: 'CUpload',
  props: {
    value: {
      type: Array,
      default() {
        return [];
      }
    },
    label: {
      type: String
    }
  },
  data() {
    return {
      max: 1,
      multiple: false,
      action: {
        target: 'http://upload.qiniup.com/',
        data: {
          token: '',
          key: ''
        }
      },
      file: this.value
    };
  },
  methods: {
    fileAdd(file) {
      this.action.data.token = this.token;
      this.action.data.key = file.name;
    },
    fileError() {
      this.$createToast({
        txt: '上传失败，请重新上传',
        type: 'error',
        mask: true,
        time: 2000
      }).show();
    },
  },
  computed: {
    ...mapState(['token'])
  },
  components: {
    CInput: Input,
    Upload
  }
};
</script>

<style lang="scss" scoped>

  .cube-upload {
    /deep/ .cube-upload-btn {
      margin: 0 0;
    }

    /deep/ .cube-upload-btn-def {
      background-color: #eee;
    }
  }

</style>