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

<template>
  <el-dialog title="上传图片" :visible.sync="dialog.pic" width="500px;">
    <div style="max-height:500px;overflow-y:auto;">
      <div>
        <h3>设备图片</h3>
        <upload-imgs
            :readOnly="read"
            :keysArr="picArrs"
            @change="imageItem"

        />
      </div>
      <!--          max="6"-->
      <div>
        <h3>视频</h3>
        <upload-imgs
            :accept="'video/*'"
            type="video"
            :keysArr="videoArr"
            @change="videoItem"
            :videoPicArr="videoPicArr"
            :readOnly="read"
        />
        <!--              max="2"-->
      </div>
    </div>
  </el-dialog>
</template>
<script>
  import uploadImgs from "@/components/ledger/lib/uploadImgsName";

  export default {
    components: {
      uploadImgs
    },
    props: {
      dialog: {
        type: Object,
        default: function () {
          return {
            pic: true
          };
        }
      },
      keysArr: {
        type: Array,
        default: function () {
          return []
        }
      },
      read: {
        type: Boolean,
        default: false
      },
      firmDataType: {
        type: String
      },
      information: {
        type: Object
      },
      infoType: {
        type: String
      }
    },
    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)
        if (this.firmDataType === 'dialog') {
          // this.information.pic.Pic = this.changeKeys
          // this.$emit("change", this.information, this.firmDataType)
          // this.$emit("change", this.information, this.firmDataType, this.changeKeys)
          this.$emit("change", this.infoType, this.firmDataType, this.changeKeys)
        } else {
          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>
