<!-- *******************  文件上传  *******************  -->
<template>
  <view>
    <view class="file-box">
      <view class="pics u-flex u-flex-wrap">
        <view class="img-list" v-for="(item, index) in imgList" :key="index">
          <u-image
            class="pic"
            width="160"
            height="160"
            :src="
              item.path
                ? item.path
                : item.src + '?imageView2/1/w/100/h/100/q/75'
            "
            :border-radius="10"
            @click.stop="prviewImage(item, index)"
            fade
            lazy-load
          ><view slot="error" style="font-size: 24rpx;">上传中</view></u-image>
          <view
            class="icon-del-box"
            v-if="!disabled"
            @click.stop="delFile(index)"
          >
            <view class="icon-del"></view>
            <view class="icon-del rotate"></view>
          </view>
        </view>
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script>
import arrMixin from './arrMixin'
import baseFile from '@/components/upload/index'
import takePhoto from '@/components/take/index.vue'
// import uploader from '@/plugins/uploader/index.js'

export default {
  name: 'XhFiles',
  components: {
    'take-photo': takePhoto,
  },
  mixins: [arrMixin, baseFile],
  props: {
    files: {
      type: Array,
    },
    partnerCompanyId: {
      type: String,
      default: '',
    },
    categoryId: {
      type: String,
      default: '',
    },
    brandId: {
      type: String,
      default: '',
    },
  },
  filters: {},
  data() {
    return {
      maskShow: false,
      list: [
        {
          text: '相册',
        },
        {
          text: '拍照',
        },
      ],
      takeStatus: false,
      currentItemDate: {},
    }
  },
  computed: {
    settings() {
      return this.item.settings || []
    },
    uploadImage() {
      return process.uniEnv.qn_base_url + 'upload-file.png'
    },
  },
  mounted() {
    if (this.value) {
      this.imgList = this.value
        .filter((v) => v)
        .map((img) => {
          return { src: img ? img : '' }
        })
    }
  },
  methods: {
    setTmpValue(values) {
      this.imgList = this.imgList.concat(values)
      const dataValue = this.imgList.map((v) => v.src)
      this.valueChange(dataValue)
    },
    setValue() {
      const dataValue = this.imgList.map((item) => item.src)
      this.valueChange(dataValue)
    },
    prviewImage(item, index) {
      uni.previewImage({
        urls: [item.path ? item.path : item.src],
        current: index,
      })
    },
    delFile(index) {
      this.imgList.splice(index, 1)
      this.setValue()
    }
  },
}
</script>
<style lang="scss" scoped>
.img-list {
  position: relative;
  margin: 8rpx;
  width: 160rpx;
  height: 160rpx;

  .pic {
    // margin-right: 15rpx;
    // margin-bottom: 15rpx;
    &:nth-child(3n) {
      margin-right: 0;
    }
  }

  .icon-del-box {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    height: 40rpx;
    width: 40rpx;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
    transform: rotate(-45deg);
  }

  .icon-del {
    width: 30rpx;
    height: 4rpx;
    background-color: #fff;
    border-radius: 2px;
  }

  .rotate {
    position: absolute;
    transform: rotate(90deg);
  }
}
</style>
