<!--
 * @Descripttion: 大屏设计器 -- 预览
 !-->
<template>
  <div class="layout">
    <div :style="bigScreenStyle">
      <widget
        v-for="(widget, index) in widgets"
        :key="index"
        v-model="widget.value"
        :index="index"
        :type="widget.type"
      />
    </div>
  </div>
</template>

<script>
import widget from "../designer/widget/temp";
import { detailDashboard } from "@/api/bigscreen";
import { mapMutations } from 'vuex';
import loadingViewerVue from 'loading-view-vue'
import Vue from "vue";
Vue.use(loadingViewerVue,{mode:"5"});
export default {
  name: "Login",
  components: {
    widget
  },
  data() {
    return {
      bigScreenStyle: {},
      widgets: [],
      masterData:{}
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    ...mapMutations('dataSource', ['SET_STATIC_DATA','SET_REFRESHTIME']),
    async getData() {
      const reportCode = this.$route.query;
      this.$showLoading();
      const { code, data } = await detailDashboard(reportCode);
      this.$hideLoading();
      if (code != 200) return;
      const equipment = document.body.clientWidth;
      const ratioEquipment = equipment / data.dashboard.width;
      this.bigScreenStyle = {
        width: data.dashboard.width + "px",
        height: data.dashboard.height + "px",
        "background-color": data.dashboard.backgroundColor,
        "background-image": "url(" + data.dashboard.backgroundImage + ")",
        "background-position": "0% 0%",
        "background-size": "100% 100%",
        "background-repeat": "initial",
        "background-attachment": "initial",
        "background-origin": "initial",
        "background-clip": "initial",
        transform: `scale(${ratioEquipment}, ${ratioEquipment})`,
        "transform-origin": "0 0"
      };
      // 赋值到全局变量
      this.setMasterData(data.dashboard);
      data.dashboard.widgets.forEach((item, index) => {
        item.value.widgetId = item.value.setup.widgetId
        item.value.widgetCode = item.value.setup.widgetCode
        if (item.value.setup.componentLinkage && item.value.setup.componentLinkage.length) {
          this.$store.commit('SET_ALL_COMPONENT_LINKAGE', {
            index,
            widgetId: item.value.widgetId,
            linkageArr: item.value.setup.componentLinkage
          })
        }
      })
      this.widgets = data.dashboard.widgets;
    },
    // 数据处理
    setMasterData(screenData){
      // 数据类型 静态 or 动态
      const screenD = screenData.data;
      const refreshTime =  screenD["refreshTime"]||60000*30;
      this.SET_REFRESHTIME(refreshTime);
      screenD.dataType == "staticData"
        ? this.staticDataFn(screenD.staticData)
        : this.dynamicDataFn(screenD.dynamicData, refreshTime);
    },
    staticDataFn(val) {
      //获取静态数据
      this.masterData=val;
      this.SET_STATIC_DATA(this.masterData);
    },
    dynamicDataFn(val, refreshTime) {
      if (!val) return;
      //第一次赋值
      this.getEchartData(val);
      //定时赋值
      this.flagInter = setInterval(() => {
        this.getEchartData(val);
      }, refreshTime);
    },
    getEchartData(val) {
      const data = this.queryEchartsData(val);
      data.then(res => {
        this.renderingFn(res);
      });
    },
    renderingFn(val) {
      if(this.isNotBlankArray(val)){
        for (let i = 0; i < val.length; i++) {
          const one = val[i];
          const sValue = (this.isBlankObject(one)|| this.isBlank(one['sValue']))?"":one['sValue'];
          if(this.isNotBlankObj(one) && this.isNotBlank(one['sName'])){
            const sName = one['sName'];
            this.masterData[sName]=sValue;
          }
        }
      }
      // console.log("著数据源。。。。",this.masterData)
      this.SET_STATIC_DATA(this.masterData);
    },
  },
};
</script>

<style scoped lang="scss">
.layout {
  width: 100%;
  height: 100%;
  text-align: center;
}
.bottom-text {
  width: 100%;
  color: #a0a0a0;
  position: fixed;
  bottom: 16px;
  z-index: 9999;
}
</style>
