<template>
  <view class="cu-form-group">
    <view class="grid col-4 grid-square flex-sub">
      <view
        v-for="(path, index) in value"
        @tap="viewImg"
        :key="index"
        class="bg-img"
      >
        <image
          v-if="showfile()"
          :src="path.path ? path.path : path"
          mode="aspectFill"
        ></image>
        <view v-if="!readonly" @tap.stop="delImg(index)" class="cu-tag bg-red">
          <l-icon
            type="close"
            style="width: 18px; height: 24px; font-size: 24px"
          />
        </view>
      </view>

      <view
        v-if="!readonly && value.length < Number(number)"
        @tap="chooseImg"
        class="solids"
      >
        <l-icon type="cameraadd" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "l-upload",

  props: {
    number: { default: 1 },
    readonly: {},
    value: { default: () => [] },
  },

  methods: {
    delImg(index) {
      const newList = JSON.parse(JSON.stringify(this.value));
      newList.splice(index, 1);
      this.$emit("input", newList);
      this.$emit("change");
      this.$emit("del");
    },
    showfile() {
      console.log(this.value);
      return true;
    },

    chooseImg() {
      uni.chooseImage({
        count: Number(this.number),
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success: ({ tempFilePaths }) => {
          const newList = JSON.parse(JSON.stringify(this.value || [])).concat(
            tempFilePaths
          );
          //this.$parent.HTTP_UPLOAD(tempFilePaths[0]);
          
          this.$emit("input", newList);
          this.$emit("change");
          this.$emit("add");
        },
      });
    },

    viewImg(index) {
      uni.previewImage({
        urls: this.value,
        current: this.value[index],
      });
    },
  },
};
</script>
