<template>
  <view class="upload-container">
    <tui-upload v-if="!disabled"
                :limit="maxCount"
                :value="noEmptyValue"
                :serverUrl="serverUrl"
                :header="{
                token: md5('shanxiluqiao') + md5(String(Date.now())),
            }"
                @complete="result"
                @remove="remove">
    </tui-upload>
    <view class="image-container"
          v-else>
      <image v-for="imageUrl,index in noEmptyValue"
             :src="imageUrl"
             :key="index">
      </image>
    </view>
  </view>
</template>
<script>
import md5 from "../../common/md5";
// data 数据 及 方法
export default {
  props: ["maxCount", "value", "disabled"],
  data() {
    return {
      //上传接口地址
      serverUrl: `https://anquansys.sxlq.com:37100/uploadoss/upload?token=1add2b5e9c36ce7d75a1ff3d11b9ffb8`,
    };
  },
  methods: {
    md5,
    result: function (e) {
      this.$emit("input", e.imgArr);
    },
    remove: function (e) {
      this.$emit("input", e.imgArr);
    },
  },
  computed: {
    noEmptyValue() {
      if (typeof this.value == "string") return [this.value];
      return this.value.filter((item) => item !== undefined);
    },
  },
};
</script>
<style lang="scss" scoped>
.upload-container {
  padding: 0;

  .image-container {
    display: flex;
    flex-wrap: wrap;

    uni-image {
      width: 200rpx;
      height: 200rpx;
    }
  }
}
</style>
