<template>
  <div>
    <!--single 证件型单列-->
    <div
      v-if="isSingle"
      class="bx-uploader-single"
      >
      <div
        class="bx-uploader-single-error"
        v-show="message && !disabled"
        >
        {{ message }}
      </div>
      <div class="bx-uploader-single-list">
        <div
          v-for="(image,index) in images"
          :key="image.key"
          >
          <div
            class="bx-uploader-single-item"
            :style="getStyle(image)"
            @click.stop="clickImage(index)"
            >
            <i
              class="bx-uploader-delete"
              @click.stop="deleteImage(index)"
              v-if="!disabled"
              v-show="image.url || image.content"
              />
            <div
              class="bx-uploader-single-status"
              v-if="image.status"
              >
              <div class="bx-uploader-single-info">
                {{ image.status }}
              </div>
            </div>
            <form
              class="bx-uploader-form"
              v-if="!image.url && !image.content"
              ref="babAndroidForm"
              >
              <input
                v-if="!customUpload"
                class="bx-uploader-input"
                type="file"
                :accept="accept"
                :capture="capture"
                :disabled="disabled"
                @change="onChange"
                >
              <div
                v-else
                class="bx-uploader-input"
                @click.stop="triggerInput(index)"
                />
            </form>
          </div>
          <div
            class="bx-uploader-single-title"
            >
            {{ image.title }}
          </div>
        </div>
      </div>
    </div>

    <!--double 证件型双列-->
    <div
      v-if="isDouble"
      class="bx-uploader-double"
      >
      <div
        class="bx-uploader-double-error"
        v-show="message && !disabled"
        >
        {{ message }}
      </div>
      <div class="bx-uploader-double-list">
        <div
          class="bx-uploader-double-outer"
          v-for="(image,index) in images"
          :key="image.key"
          >
          <div
            class="bx-uploader-double-item"
            :style="getStyle(image)"
            @click="clickImage(index)"
            >
            <div
              class="bx-uploader-double-status"
              v-if="image.status"
              >
              <div class="bx-uploader-double-info">
                {{ image.status }}
              </div>
            </div>
            <i
              class="bx-uploader-delete"
              @click.stop="deleteImage(index)"
              v-if="!disabled"
              v-show="image.url || image.content"
              />
            <form
              class="bx-uploader-form"
              v-if="!image.url && !image.content"
              ref="babAndroidForm"
              >
              <input
                v-if="!customUpload"
                class="bx-uploader-input"
                type="file"
                :accept="accept"
                :capture="capture"
                :disabled="disabled"
                @change="onChange"
                >
              <div
                v-else
                class="bx-uploader-input"
                @click.stop="triggerInput(index)"
                />
            </form>
          </div>
          <div
            class="bx-uploader-double-title"
            >
            {{ image.title }}
          </div>
        </div>
      </div>
    </div>

    <!--lattice 宫格型-->
    <div
      v-if="isLattice"
      class="bx-uploader-lattice"
      >
      <div class="bx-uploader-lattice-list">
        <div
          class="bx-uploader-lattice-item"
          :class="(image.status && isBadAndroid) ? 'bx-hairline--surround' : ''"
          v-for="(image,index) in images"
          :key="image.key"
          :style="getStyle(image)"
          @click="clickImage(index)"
          >
          <div
            class="bx-uploader-lattice-status"
            v-if="image.status"
            >
            <div class="bx-uploader-lattice-info">
              {{ image.status }}
            </div>
          </div>
          <i
            class="bx-uploader-delete"
            @click.stop="deleteImage(index)"
            v-if="!disabled"
            v-show="image.url || image.content"
            />
        </div>
        <div
          class="bx-uploader-lattice-item bx-hairline--surround"
          v-show="!disabled && maxAmount > images.length"
          @click="triggerInput()"
          >
          <bxs-icon
            name="add"
            class="bx-uploader-lattice-add"
            :class="{'bx-uploader-lattice--limit': maxAmount !== Number.MAX_VALUE }"
            />
          <span
            class="bx-uploader-lattice-maxinfo"
            v-if="maxAmount !== Number.MAX_VALUE"
            >
            {{ '最多' + maxAmount + '张图' }}
          </span>
          <form
            class="bx-uploader-form"
            ref="babAndroidForm"
            >
            <input
              v-if="!customUpload"
              class="bx-uploader-input"
              type="file"
              :accept="accept"
              :capture="capture"
              :disabled="disabled"
              multiple="multiple"
              @change="onChange"
              >
          </form>
        </div>
      </div>
    </div>

    <!--rows 多行-->
    <div
      v-if="isRows"
      class="bx-uploader-rows"
      >
      <div class="bx-uploader-rows-list">
        <div
          class="bx-uploader-rows-error"
          v-show="message && !disabled"
          >
          {{ message }}
        </div>
        <div
          class="bx-uploader-rows-item"
          :class="(image.status && isBadAndroid) ? 'bx-hairline--surround' : ''"
          v-for="(image,index) in images"
          :key="image.key"
          :style="getStyle(image)"
          @click="clickImage(index)"
          >
          <div
            class="bx-uploader-rows-status"
            v-if="image.status"
            >
            <div class="bx-uploader-rows-info">
              {{ image.status }}
            </div>
          </div>
          <i
            class="bx-uploader-delete"
            @click.stop="deleteImage(index)"
            v-if="!disabled"
            v-show="image.url || image.content"
            />
        </div>
        <div
          class="bx-uploader-rows-item bx-hairline--surround"
          v-show="!disabled && maxAmount > images.length"
          @click="triggerInput()"
          >
          <bxs-icon
            name="add"
            class="bx-uploader-rows-add"
            />
          <form
            class="bx-uploader-form"
            ref="babAndroidForm"
            >
            <input
              v-if="!customUpload"
              class="bx-uploader-input"
              type="file"
              :accept="accept"
              :capture="capture"
              :disabled="disabled"
              multiple="multiple"
              @change="onChange"
              >
          </form>
        </div>
      </div>
    </div>

    <!--row 单行-->
    <div
      v-if="isRow"
      class="bx-uploader-row"
      >
      <div
        class="bx-uploader-row-error"
        v-show="message && !disabled"
        >
        {{ message }}
      </div>
      <div class="bx-uploader-row-wrapper">
        <div class="bx-uploader-row-list">
          <div
            class="bx-uploader-row-item bx-hairline--surround"
            v-show="!disabled && maxAmount > images.length"
            @click="triggerInput()"
            >
            <bxs-icon
              name="add"
              class="bx-uploader-row-add"
              />
            <form
              class="bx-uploader-form"
              ref="babAndroidForm"
              >
              <input
                v-if="!customUpload"
                class="bx-uploader-input"
                type="file"
                :accept="accept"
                :capture="capture"
                :disabled="disabled"
                multiple="multiple"
                @change="onChange"
                >
            </form>
          </div>
          <div
            class="bx-uploader-row-item"
            :class="(image.status && isBadAndroid) ? 'bx-hairline--surround' : ''"
            v-for="(image,index) in images"
            :key="image.key"
            :style="getStyle(image)"
            @click="clickImage(index)"
            >
            <div
              class="bx-uploader-row-status"
              v-if="image.status"
              >
              <div class="bx-uploader-row-info">
                {{ image.status }}
              </div>
            </div>
            <i
              class="bx-uploader-delete"
              @click.stop="deleteImage(index)"
              v-if="!disabled"
              v-show="image.url || image.content"
              />
          </div>
          <div
            class="bx-uploader-row-item"
            v-show="images.length"
            >
            <div class="bx-uploader-row-last">
              已到最后一张
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Icon from '../icon'
import styleListMixins from './style-list-mixins'
import bgImgList from './bg-img'

/* eslint-disable vue/no-unused-components */
export default {
  name: 'uploader-list',
  mixins: [styleListMixins],
  props: {
    disabled: Boolean,
    customUpload: Function,
    listStyle: {
      type: String,
      default: null,
    },
    message: {
      type: String,
      default: null,
    },
    maxAmount: {
      type: Number,
      default: 9,
    },
    images: {
      type: Array,
      default() {
        return []
      },
    },
    accept: {
      type: String,
      default: 'image/*',
    },
    capture: {
      type: String,
      default: null,
    },
    isBadAndroid: Boolean,
  },
  components: {
    [Icon.name]: Icon,
  },
  data() {
    return {
      bgImgList,
    }
  },
  computed: {
    defaultBgImg() {
      return this.addOssParams(this.bgImgList.file)
    },
    ossParams() {
      let ossParams = '?x-oss-process=image/resize,w_250'
      if (this.isSingle) {
        ossParams = '?x-oss-process=image/resize,w_500'
      } else if (this.isDouble) {
        ossParams = '?x-oss-process=image/resize,w_330'
      } else if (this.isLattice) {
        ossParams = '?x-oss-process=image/resize,w_210'
      } else if (this.isRows || this.isRow) {
        ossParams = '?x-oss-process=image/resize,w_250'
      }
      return ossParams
    },
  },
  created() {},
  methods: {
    clearInput() {
      const formList = this.$refs.babAndroidForm
      if (formList && formList instanceof Array) {
        formList.forEach(form => {
          form.reset()
        })
      } else if (formList) {
        formList.reset()
      }
    },
    clickImage(index) {
      this.$emit('click-image', index)
    },
    triggerInput(index) {
      this.$emit('trigger', index)
    },
    deleteImage(index) {
      this.$emit('delete', index)
    },
    onChange(event) {
      this.$emit('bad-android-input-change', event)
    },
    addOssParams(url) {
      if (
        url.indexOf('?') === -1 &&
        (/winbaoxian\.com/.test(url) || /wyins\.net/.test(url))
      ) {
        return url + this.ossParams
      }
      return url
    },
    getStyle(image) {
      if (this.staticKey) {
        let url
        if (image.content) {
          url = image.content // 优先使用base64格式
        } else if (image.url) {
          url = this.addOssParams(image.url) // 图片链接
        } else if (image.bgImg) {
          if (bgImgList[image.bgImg]) {
            url = this.addOssParams(bgImgList[image.bgImg]) // 内置的背景图
          } else {
            url = this.addOssParams(image.bgImg) // 自定义背景图
          }
        } else {
          url = this.defaultBgImg // 默认背景图
        }
        return {
          backgroundImage: `url(${url})`,
        }
      }
      return {
        'background-image': `url(${image.content ||
          (image.url ? this.addOssParams(image.url) : '')})`,
      }
    },
  },
}
</script>
<style>
@import './index.css';
</style>
