<template>
  <div>
    <img v-if="fileList.length > 0" :src="item.url" class="viewSlotImag" v-for="item in imageList" :key="item.uid" @click="handlePreview(item)">
    <span v-if="fileList.length === 0">{{text}}</span>

    <a-modal
      v-if="fileList.length > 0"
      :maskClosable="false"
      :keyboard="false"
      :visible="previewVisible"
      :footer="null"
      @cancel="handleCancel">
      <img alt="example" style="width: 100%;height: 100%;" :src="imgUrl"/>
    </a-modal>
  </div>
</template>

<script>

  import { getFileAccessHttpUrl } from '../../utils/manage'

  export default {
    name: 'ViewImageSlot',
    data () {
      return {
        fileList: [],
        previewVisible:false,
        imgUrl:'',
        text: null,
      }
    },
    props: {
      value: {
        type: String,
      }
    },
    watch: {
      value: {
        handler (val) {
          try {
            if (val && val.length > 0 && val.indexOf("url") !== -1) {
              this.fileList = JSON.parse(val)
              this.text = null
            } else {
              this.fileList = []
              this.text = val
            }
          } catch (e) {
            this.fileList = []
            this.text = val
          }
        },
        immediate: true
      }
    },
    methods: {
      handlePreview(item){
        this.imgUrl = item.url
        this.previewVisible = true
      },
      handleCancel(){
        this.previewVisible = false
      }

    },
    computed: {
      imageList () {
        return this.fileList.map(item => {
          return {
            uid: item.uid,
            url: getFileAccessHttpUrl(item.url) || ''
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .viewSlotImag {
    height: 50px;
    padding: 0 5px;
    object-fit: cover;
    flex: 1;
  }
</style>
