<template>
  <section class="upload_pic">
    <slot />
    <div class="upload_pic_list clearfix">
      <ul class="fn-clear">
        <li
          v-for="(v, index) in images"
          :key="index"
          v-dragging="dragable ? { list: images, group: group, key: 'src' } : false"
          class="pic_item"
        >
          <div class="pic_item_mar">
            <a
              v-if="v[imgKey]"
              href="javascript:void(0);"
              :class="['default', v.code]"
            >
              <img
                :src="v[imgKey]"
                alt=""
              >
              <em
                :class="{'img_delete': v[imgKey]}"
                @touchstart.stop="imgDelete(index)"
              />
            </a>
            <a
              v-else
              href="javascript:void(0);"
              :class="['default', v.code]"
              @touchstart.capture="upLoad(index)"
            >
              <img
                :src="v.bgUrl || bgUrl"
                alt=""
              >
            </a>
            <div
              v-if="showName"
              class="pic_item_title"
            >
              {{ v.name }}
              <p v-if="v.name2">
                {{ v.name2 }}
              </p>
            </div>
          </div>
        </li>
        <li
          v-if="images.length < count"
          class="pic_item"
        >
          <div class="pic_item_mar">
            <a
              href="javascript:void(0);"
              class="default"
              @touchstart="upLoad()"
            >
              <img
                :src="bgUrl"
                alt=""
              >
            </a>
            <div
              v-if="showName"
              class="pic_item_title"
            >
              其他
              <p v-if="optional">
                <slot name="subname">
                  （选填）
                </slot>
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </section>
</template>
<script>
import Vue from 'vue'
import VueDND from 'vue-dnd-lx'
import defaultBg from '../../assets/uploadpic/default.png'
Vue.use(VueDND)
export default {
  props: {
    group: { // 可拖拽模式下分组名称
      type: String,
      default: 'upload'
    },
    showName: { // 是否显示照片标题
      type: Boolean,
      default: true
    },
    imgKey: { // images每项读取图片的属性名
      type: String,
      default: 'src'
    },
    count: { // 最多上传照片数限制
      type: [String, Number],
      default: 0
    },
    optional: { // 上传的图片是否为选填
      type: Boolean,
      default: false
    },
    dragable: { // 是否可拖拽
      type: Boolean,
      default: true
    },
    bgUrl: { // 上传图片的背景
      type: String,
      default: defaultBg
    },
    images: { // 上传的图片列表
      type: Array,
      default: () => {
        return []
      }
    }
  },
  watch: {
    images: {
      handler(val) {
        this.$emit('update:images', val)
      },
      immediate: false,
      deep: true
    }
  },
  methods: {
    upLoad(i) {
      this.$emit('upload', i)
    },
    imgDelete(i) {
      this.$emit('delete', i)
    }
  }
}
</script>
