<!--
    上传图片的弹窗
-->

<template>
  <el-dialog title="上传图片" :visible.sync="dialog.pic" width="40%">
    <div style="max-height:500px;overflow-y:auto;">
      <div>
        <h3>设备图片</h3>
        <upload-imgs :readOnly="read" :keysArr="picArrs" @change="imageItem" max="6"></upload-imgs>
      </div>
      <div>
        <h3>视频</h3>
        <upload-imgs
          :accept="'video/*'"
          type="video"
          :keysArr="videoArr"
          @change="videoItem"
          :videoPicArr="videoPicArr"
          max="2"
          :readOnly="read"
        ></upload-imgs>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import uploadImgs from "@/components/lib/uploadImgsName";
import tools from "@/assets/js/tools"
export default {
  components: {
    uploadImgs
  },
  props: {
    dialog: {
      type: Object,
      default: function () {
        return {
          pic: true
        };
      }
    },
    keysArr: {
      type: Array,
      default: function () {
        return []
      }
    },
    read: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      picArrs: [],
      panoramaArr: [],
      videoArr: [],
      videoPicArr: [],
      changeKeys: []
    };
  },
  created() { },
  mounted() { },
  methods: {
    imageItem(images) {
      this.picArrs = images
      this.change()
    },

    panoramaItem(images) {
      this.panoramaArr = images
      this.change()
    },

    videoItem(videos, pe, pics) {
      this.videoArr = videos
      this.videoPicArr = pics
      this.change()
    },

    change() {
      //   let picsArr = this.getArr(this.picArrs, "设备图片", "image")
      //   let videos = this.getArr(this.videoArr, "视频", "video")
      //   let videoPics = this.getArr(this.videoPicArr, "视频资料", "image_video")
      //   let panoramas = this.getArr(this.panoramaArr, "全景照片", "panorama")
      let picsArr = this.picArrs
      let videos = this.videoArr
      let videoPics = this.videoPicArr
      let panoramas = this.panoramaArr
      this.changeKeys = picsArr.concat(videos).concat(videoPics).concat(panoramas)
      console.log(this.changeKeys)
      this.$emit("change", this.changeKeys)
    },

    getArr(arr, name, type) {
      return arr.map(item => {
        return { "systemId": "dataPlatform", "name": name, "type": type, "key": item }
      })
    },

    //将父组件传来的数据进行分组
    fatherTochild() {
      this.panoramaArr = []
      this.videoArr = []
      this.videoPicArr = []
      this.picArrs = []
      if (this.keysArr instanceof Array) {
        this.keysArr.map(item => {
          if (item.type == 'panorama') {
            this.panoramaArr.push(item)
          } else if (item.type == "video") {
            this.videoArr.push(item)
          } else if (item.type == 'image_video') {
            this.videoPicArr.push(item)
          } else {
            this.picArrs.push(item)
          }
        })
      } else {
        this.panoramaArr = []
        this.videoArr = []
        this.videoPicArr = []
        this.picArrs = []
      }
    }
  },
  watch: {
    dialog: {
      deep: true,
      handler: function () {
        if (this.dialog.pic) {
          this.fatherTochild()
        }
      }
    }
  }
};
</script>
<style>
</style>