<template>
  <ui-upload
    class="ui-image-upload"
    type="card"
    v-bind="$props"
    v-model="innerValue"
  >
    <div class="ui-image-upload__handle" slot="handle">
      <span class="ui-image-upload__handle-icon"></span>
      <span class="ui-image-upload__handle-text">{{ uploadText }}</span>
    </div>
  </ui-upload>
</template>
<script>
import Upload from '@huntianning/components/packages/upload'

export default {
  name: 'UiImageUpload',
  props: {
    editable: {
      type: Boolean,
      default: true
    },
    value: {
      type: [Array, String],
      default: undefined
    },
    accept: {
      type: String,
      default: undefined
    },
    limitCount: {
      type: Number,
      default: undefined
    },
    limitSize: {
      type: Number,
      default: undefined
    },
    uploadText: {
      type: String,
      default: '上传图片'
    }
  },
  compoents: {
    UiUpload: Upload
  },
  computed: {
    innerValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  }
}
</script>
<style lang="less">
.ui-image-upload__handle{
  width: 96px;
  height: 96px;
  border: 1px dashed #ddd;
  background-color: #f3f3f3;
  box-sizing: border-box;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  line-height: 1em;
  font-size: 14px;
  transition: all .25s;
  cursor: pointer;
  &:hover {
    border-color: #c6e2ff;
    background-color: #ecf5ff;
  }
}
.ui-image-upload__handle-icon{
  display: inline-block;
  width: 24px;
  height: 24px;
  position: relative;
  margin-bottom: 6px;
  background: url('./icon.svg') no-repeat 50% 50%;
}
</style>
