<template>
  <section class="screen upload-container overflow relative"
    :class="['upload-container-'+size,$attrs.class]"
  >
    <!--  上传照片  -->
    <section @click="triggerFile" class="screen cursor-pointer">
      <slot name="upload">
        <aside class="screen center">
          <div class="upload-icon center">
            <icon type="add"></icon>
          </div>
          <div v-if="uploadText" class="upload-title">{{uploadText}}</div>
        </aside>
      </slot>
    </section>
    <!--  已设置的图片  -->
    <section class="absolute upload-screen"
      :class="{
        'cursor-pointer': triggerImage
      }"
      v-if="vSrc"
      @click="triggerFile('image')"
    >
      <v-image :src="vSrc" class="screen" :mergeSuccessColor="true" backgroundColor="#fff">
        <slot name="image" :trigger="triggerFile"></slot>
      </v-image>
    </section>

    <!--  其他状态  -->
    <section v-if="status === Status.loading || status === Status.fail" class="absolute upload-screen upload-other">

      <aside v-if="status === Status.loading" class="screen center upload-other-background">
        <svg class="upload-other-icon" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
            <path fill="#fff" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
              <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform>
          </path>
        </svg>
        <div class="upload-other-title">上传中</div>
      </aside>

      <aside v-else @click="triggerRetry" class="screen center upload-other-background cursor-pointer">

        <div class="upload-other-title">点击重试</div>
      </aside>

    </section>

  </section>
  <file ref="file" @change="uploadFile"></file>
</template>

<script>
import File from "$components/file";
import {
  icon,
  vImage
} from '$components';
import mixins from '../mixins';
import props from '../props';
export default {
  name: "upload",
  components: {File,icon,vImage},
  props,
  mixins
}
</script>

<style scoped lang="scss" src="../style.scss"></style>