<template>
  <CInput ref="label" :label="label" :required="required" :show-required="showRequired">
    <slot>
      <div>
        <Upload
          :max="max"
          :multiple="multiple"
          :action="action"
          :simultaneous-uploads="1"
          :value="file"
          @files-added="filesAdded"
          @file-error="fileError"
          @file-success="fileSuccess"
          @file-removed="fileRemove"
          @file-click="showImagePreview"
        >
        </Upload>
      </div>
    </slot>
  </CInput>
</template>

<script>

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

import {createNamespacedHelpers} from 'vuex';

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

export default {
  name: 'CUpload',
  props: {
    value: {
      type: Array,
      default() {
        return [];
      }
    },
    label: {
      type: String
    },
    max: {
      type: Number,
      default() {
        return 1;
      }
    },
    showRequired: {
      type: Boolean,
      default() {
        return false;
      }
    },
    required: {
      type: Boolean,
      default() {
        return false;
      }
    }
  },
  data() {
    let vm = this;

    return {
      multiple: false,
      action: {
        target: '/mapp/upload',
        data(file) {
          return {
            token: vm.token,
            key: 'license/' + Date.now() + '/' + file.name,
            bucket: 'goodsimg',
            userId: vm.getUid(),
            method: 'yoho.fileupload'
          };
        }
      },
      file: this.value,
      initialIndex: 0,
      uid: ''
    };
  },
  async mounted() {
    const user = await this.$sdk.getUser();

    this.uid = user.uid;
  },
  methods: {
    getUid() {
      return this.uid;
    },
    filesAdded(files) {
      let hasIgnore = false;
      const maxSize = 10 * 1024 * 1024; // 10M

      for (let file of files) {
        if (file.size > maxSize) {
          file.ignore = true;
          hasIgnore = true;
        }
      }

      hasIgnore && this.$createToast({
        type: 'warn',
        time: 1000,
        txt: '上传文件大于10M'
      }).show();
    },
    fileError() {
      this.$createToast({
        txt: '上传失败，请重新上传',
        type: 'error',
        mask: true,
        time: 2000
      }).show();
    },
    validate() {
      if (!this.required) {
        return true;
      }

      if (!this.value.length) {
        this.$refs.label.setShowError();
        return false;
      } else {
        this.$refs.label.setShowError(false);
        return true;
      }
    },
    showImagePreview(file) {
      this.initialIndex = this.file.findIndex(i => file.name === i.name);

      const imgs = this.file.map(f => {
        return this.getUploadImgAbsoluteUrl(f.response.data, 'goodsimg') + '?imageView2/2/w/450/q/60';
      });

      if (file && file.response && file.response.data) {
        this.$createImagePreview({
          $props: {
            imgs,
            initialIndex: 'initialIndex',
            loop: false
          },
          $events: {
            change: (i) => {
              this.initialIndex = i;
            }
          }
        }).show();
      }
    },
    fileSuccess(file) {
      file.name = file.response.data;
      this.$emit('file-change', file);
    },
    fileRemove(file) {
      this.$emit('file-change', file);
    },
    getUploadImgAbsoluteUrl(url, bucket) {
      if (!url) {
        return null;
      }

      let urlArr = url.split('/'),
        stag = urlArr[urlArr.length - 1].substr(0, 2),
        domain = `static.yhbimg.com/${bucket}`;

      url = domain + url;
      if (stag === '01') {
        return `//img11.${url}`;
      } else if (stag === '03') {
        return `//flv01.${url}`;
      } else {
        return `//img12.${url}`;
      }
    }
  },
  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;
    }

    /deep/ .cube-upload-file-status {
      font-size: 30px !important;
      color: black;
    }
  }

</style>