<template>
  <div style="display: inline-block">
    <div @click="visible = true">
      <slot></slot>
    </div>

    <el-dialog
      append-to-body
      :title="$t('图片')"
      :visible.sync="visible"
      width="80%">
      <div style="display: flex;flex-wrap: wrap;">
        <el-image style="width: 200px;height: 200px;margin-right: 10px;margin-bottom: 10px" v-for="(item) in list"  :src="bizId ? item.url : item">
          <video controls width="148px" height="148px" slot="error" :src="bizId ? item.url : item" ></video>
        </el-image>
      </div>
      <el-empty v-if="!list.length" description="暂无图片"></el-empty>
    </el-dialog>
  </div>
</template>

<script>
import {warehousePictureList} from "@/api/ecw/order";

export default {
  props:{
    bizId:[String, Number],
    type:[Number],
    pictureUrls:{
      type: Array,
      default:()=>[]
    }
  },
  name: "imageDisplay",
  data(){
    return {
      visible:false,
      list:[],
    }
  },
  created() {
    },
  methods:{
    getList(){
      warehousePictureList({bizId:this.bizId,type:this.type}).then(r =>{
        this.list = r.data
        ;
      })
    }
  },
  watch:{
    visible(val){
      if(val){
        if(this.bizId){
          this.getList()
        }else {
          this.list = this.pictureUrls
        }

      }
    }
  }

}
</script>

<style scoped>

</style>