<template>
  <div>
    <a-upload
      list-type="picture-card"
      :file-list="fileList"
      :remove="remove"
      @preview="handlePreview"
      @change="handleChange"
    >
      <div v-if="fileList.length < 1" class="iconp">
        <a-icon type="plus" />
        <div class="ant-upload-text">
          上传
        </div>
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    url:{
      default: ''
    }
  },
  data () {
    return {
      previewVisible: false,
      previewImage: '',
      fileList: [
        {
          uid: '-1',
          name: 'image.png',
          status: 'done',
          url: '',
        }
      ]
    }
  },
  created () {
  },
  mounted () {
  },
  watch: {
    url:{
      handler(newVal,oldValue) {
        console.log(newVal)
        this.fileList[0].url = newVal
      },
      //立刻执行handler
      immediate: true
    }
  },
  methods: {
    remove(e){
      this.$emit('remove')
    },  
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
    },
  }
}
</script>

<style lang="less" scoped>
  // /deep/ .imgupload .iconp{padding:20px;}
  // /deep/ .image-upload-single-over .ant-upload-select{display: none}
</style>
