<template>
  <div class="AppGigscreenViewer">
    <div v-if="!component">
      <div
        class="component-item"
        :style="{
          width: item.width + 'px',
          height: item.height + 'px',
          left: item.left * scale + 'px',
          top: item.top * scale + 'px',
          position: 'absolute',
          zIndex: item.zIndex,
          transform: `scale(${scale})`
        }"
        v-for="(item, index) in componentList"
        :key="index">
        <RenderElement :data="item" :index="index"></RenderElement>
      </div>
    </div>
    <components v-else :is="component" :dict="dict" :instance="instance" :nav="meta"/>
  </div>
</template>

<script>
  import RenderElement from '../designer/components/RenderElement'

  export default {
    name: 'AppGigscreenViewer',
    label: '大屏预览',

    props: {
      instance: Function,
      dict: Object,
      id: String,
      urlPrefix: {
        type: String,
        default: '/app'
      }
    },

    watch: {
      id(v) {
        this.getInfo(v)
      }
    },

    components: {
      RenderElement
    },

    data() {
      return {
        component: '',
        dashboard: {
          title: '大屏',
          width: 1920,
          height: 1080,
          backgroundColor: '',
          backgroundImage: []
        },
        componentList: [],
        scale: 1,
        meta: {}
      }
    },

    created() {
      this.getInfo(this.id)

      // this.scale = document.body.clientWidth / 1920
    },

    mounted () {
      this.$nextTick(() => {
        const transform = document.querySelector('#dv-full-screen-container').style.transform
        const scale = transform.replace('scale', '').replace('(', '').replace(')', '')

        if (scale == 1) {
          this.scale = document.body.clientWidth / 1920
        }
      })
    },

    methods: {
      getInfo(id) {
        this.component = null
        this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
          if (res?.data) {
            const config = JSON.parse(res.data.config)
            if (config.custom) {
              this.component = config.custom
              this.meta = config?.meta || {}
            } else {
              this.componentList = JSON.parse(res.data.config).config
              this.dashboard = JSON.parse(res.data.config).dashboard

              this.componentList.forEach((item, index) => {
                if (item.dataType !== 'staticData' && ((item.type.indexOf('Chart') > -1) || item.type === 'table' || item.type === 'summary')) {
                  this.getSourceData(item, index)
                }
                if (item.type === 'monitor' && item.monitorType !== 'hik' && item.monitorType !== 'dahua') {
                  this.instance.post(`${this.urlPrefix}/appzyvideoequipment/getWebSdkUrl?deviceId=${item.moniterId}`).then(res => {
                    if (res.code == 0) {
                      this.$set(this.componentList[index], 'src', JSON.parse(res.data).url)
                    }
                  })
                }
              })
            }
          }
        })
      },

      getSourceData(item, index) {
        const api = item.dataType === 'apiData' ? item.api : `${this.urlPrefix}/appdiylargescreen/statisticsByLsid?id=${item.sourceDataId}`
        this.instance.post(api).then(res => {
          if (res.code == 0) {
            if (res.data.length) {
              const keys = Object.keys(res.data[0])
              const list = res.data
              let dynamicData = []
              if (item.type === 'table') {
                dynamicData = keys.map(v => {
                  let obj = {}
                  list.forEach((item, index) => {
                    obj[`v${index}`] = item[v]
                  })

                  return {
                    row: v,
                    ...obj
                  }
                })
              } else if (item.type === 'summary') {
                dynamicData = Object.keys(res.data[0]).map(item => {
                  return {
                    key: item,
                    value: res.data[0][item]
                  }
                })
              } else {
                if (item.dataX && item.dataY.length) {
                  list.forEach(i => {
                    let obj = {}
                    item.dataY.forEach(v => {
                      obj[v] = i[v]
                    })
                    dynamicData.push({
                      [item.dataX]: i[item.dataX],
                      ...obj
                    })
                  })
                }
              }

              this.$set(this.componentList[index], item.dataType, dynamicData)
            }
          }
        })
      },

      close() {
        this.$emit('close')
      }
    }
  }
</script>

<style lang="scss">
.AppGigscreenViewer {
  position: relative;
  height: 100%;
  background: transparent !important;

  .component-item {
    transform-origin: 0 0;
  }

  .dv-scroll-board {
    height: calc(100%) !important;

    .header-item {
      color: #7e8697;
      font-size: 16px;
    }

    .index {
      display: inline-block;
      width: 26px;
      height: 26px;
      line-height: 26px;
      font-size: 16px;
      background-color: #4F57FF !important;
    }
  }

  .vdr {
    border: none;
  }
}
</style>
