<template>
  <PageWrapper>
    <PageContentWrapper>
      <PageItemCard :title="'照片墙'">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :file-list="fileList"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i slot="default" class="el-icon-plus"></i>
          <br>
          <span class="el-upload--picture-card-tip">这里是提示文案，这里是提示文案</span>
        </el-upload>
        <PicturePreview :visible.sync="dialogVisible" :src="dialogImageUrl" @close="dialogVisible = false"/>
      </PageItemCard>
    </PageContentWrapper>
  </PageWrapper>
</template>

<script>
export default {
  name: 'Upload',
  data () {
    return {
      fileList: [
        {
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572437527414&di=e2cd8bd9194265302b636b6480f6d494&imgtype=0&src=http%3A%2F%2Fpicture.ik123.com%2Fuploads%2Fallimg%2F170616%2F12-1F616100110.jpg'
        },
        {
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572437527414&di=e2cd8bd9194265302b636b6480f6d494&imgtype=0&src=http%3A%2F%2Fpicture.ik123.com%2Fuploads%2Fallimg%2F170616%2F12-1F616100110.jpg'
        },
        {
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572437527414&di=e2cd8bd9194265302b636b6480f6d494&imgtype=0&src=http%3A%2F%2Fpicture.ik123.com%2Fuploads%2Fallimg%2F170616%2F12-1F616100110.jpg'
        }
      ],
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  methods: {
    handleRemove (file) {
      console.log(file)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>
