<template>
  <div class="module">
    <div :class="className">
      <span class="spanTitle1">{{ title }}</span>
      <div class="addFile">
        <van-icon name="add" @click="chooseFile" />
      </div>
      <div class="file-list" v-if="fileList.length">
        <div v-for="(item, index) in fileList" :key="index">
          <div class="item">
            <img class="item-img" src="@/assets/images/wenjian.png" />
            <!-- <span class="item-text">{{ item.name }}</span> -->
            <van-icon
              class="item-close"
              name="close"
              @click="handleItme(index)"
            />
          </div>
        </div>
      </div>
      <b v-if="verify" class="verify">*</b>
    </div>
    <p class="reminder" v-if="reminder">当前项为必填项</p>
    <div class="file-length">{{ fileList.length }} / 5</div>
  </div>
</template>

<script>
export default {
  props: ['title', 'value', 'verify'],
  name: 'FileUploader',
  watch: {
    value: {
      handler (val) {
        if (val) {
          // 首先将值转为数组
          const list = Array.isArray(val) ? val : this.value.split(',')
          // 然后将数组转为对象数组
          this.fileList = list.map(item => {
            if (typeof item === 'string') {
              const names = item.split('/')
              item = { name: names[names.length - 1], url: item }
            }
            return item
          })
        } else {
          this.className = 'el_input_focus1'
          // this.fileList = []
          return []
        }
      },
      deep: true,
      immediate: true
    },
    '$route.query.uploadresult': {
      handler (val) {
        console.log(val, 'val')
        if (val === '文件上传失败') {
          this.$notify({
            type: 'danger',
            message: val,
            duration: 2000
          })
          return
        }
        if (val) {
          const data = JSON.parse(val)
          console.log(data.fileNames, 'fileNames')
          const names = data.fileNames.split('/')
          this.fileList.push({
            name: names[names.length - 1],
            url: data.fileNames
          })
          console.log(
            this.listToString(this.fileList),
            this.fileList,
            'this.listToString(this.fileList)'
          )
          this.$emit('input', this.listToString(this.fileList))
        }
      },
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      className: 'el_input_focus1',
      internalValue: this.value,
      reminder: false,
      fileList: []
    }
  },

  mounted () {
    console.log(
      this.$route.query.uploadresult,
      'this.$route.query.uploadresult'
    )
  },

  methods: {
    chooseFile () {
      console.log('调安卓方法')
      if (this.fileList.length >= 5) return
      console.log(location.href)
      const address = location.href
      Android.chooseFile(address)
    },
    // 对象转成指定字符串分隔
    listToString (list, separator) {
      let strs = ''
      separator = separator || ','
      for (const i in list) {
        if (list[i].url) {
          strs += list[i].url.replace(this.baseUrl, '') + separator
        }
      }
      return strs !== '' ? strs.substr(0, strs.length - 1) : ''
    },
    handleItme (index) {
      console.log(index, 'index')
      this.fileList.splice(index, 1)
      this.$emit('input', this.listToString(this.fileList))
    }
  }
}
</script>

<style lang="less" scoped>
.addFile {
  margin: 10px;
  .van-icon-add {
    font-size: 24px;
  }
}
.file-list {
  padding: 10px;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
  grid-template-rows: auto 1fr auto;
  grid-gap: 10px;
  .item {
    width: 95px;
    height: 100px;
    background: #1c4990;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    .item-img {
      width: 50px;
      height: 60px;
    }
    .item-text {
      position: absolute;
      bottom: 0;
      background: rgba(176, 198, 211, 0.9);
      left: 0;
      overflow: hidden;
      word-break: break-all;
      width: 100%;
    }
    .item-close {
      position: absolute;
      right: 5px;
      top: 5px;
      font-size: 18px;
      color: #fff;
    }
  }
}
.file-length {
  text-align: right;
  padding-right: 16px;
}
</style>
