<template>
  <div class="wrapper"
       :style="wrapperStyle">
    <div class="container"
         :style="containerStyle"
         id="container"
         @mousedown="dragMousedown"
         @mouseup="dragMouseup"
         @mousemove="dragMousemove"
         ref="container">
      <div class="refer-select"
           :style="selectStyle"></div>
      <div class="grade"
           v-if="gradeFlag || contain.config.gradeShow"
           :style="gradeLenStyle"></div>
      <subgroup ref="subgroup"
                :key="reload"
                :nav="contain.list"></subgroup>
    </div>
    <wechat ref="wechat"></wechat>
    <loading ref="loading"></loading>
  </div>
</template>

<script>
import loading from '@/page/group/loading.vue'
import subgroup from '@/page/block/subgroup.vue'
import { getObj } from '@/api/visual'
import { getList } from '@/api/glob'
import { getObj as getVersionObj } from '@/api/version';
import initControl from '@/page/utils/control'
import initDraw from '@/page/utils/draw'
import initWechat from '@/page/wechat/index'
export default {
  name: 'contents',
  inject: ["contain"],
  mixins: [initWechat],
  props: {
    target: String,
    option: Object,
    id: [String, Number]
  },
  provide () {
    return {
      container: this
    };
  },
  components: {
    subgroup,
    loading
  },
  data () {
    return {
      reload: Math.random(),
      select: {
        startX: '',
        startY: '',
        endX: '',
        endY: '',
        show: false
      },
      wrapperStyle: {},
      gradeFlag: false,
    }
  },
  computed: {
    selectStyle () {
      let x = this.select.endX - this.select.startX;
      let y = this.select.endY - this.select.startY;
      return {
        top: this.setPx(y > 0 ? this.select.startY : this.select.endY),
        left: this.setPx(x > 0 ? this.select.startX : this.select.endX),
        width: this.setPx(Math.abs(x)),
        height: this.setPx(Math.abs(y)),
        display: this.select.show ? 'block' : 'none'
      }
    },
    stepScale () {
      let result = Number(100 / (this.contain.scale * 100))
      return result
    },
    //计算中央可视化大屏比例
    containerStyle () {
      const widthVal = (this.contain.width / this.contain.config.width)
      const heightVal = (this.contain.height / this.contain.config.height)
      let scaleX = widthVal, scaleY = widthVal;
      if (!this.isBuild) {
        let screen = this.contain.config.screen;
        if (screen == 'x') {
          this.contain.viewStyle = {
            'overflow-y': 'auto'
          }
        } else if (screen == 'y') {
          scaleX = heightVal;
          scaleY = heightVal;
          this.contain.viewStyle = {
            'overflow-x': 'auto'
          }
        } else if (screen == 'xy') {
          scaleX = widthVal;
          scaleY = heightVal;
        }
      } else {
        scaleX = 1;
        scaleY = 1;
      }
      const styles = this.contain.config.styles;
      this.wrapperStyle = {
        filter: styles.show ? `contrast(${styles.contrast || 100}%) saturate(${styles.saturate || 100}%) brightness(${styles.brightness || 100}%) opacity(${styles.opacity || 100}%) grayscale(${styles.grayscale || 0}%) hue-rotate(${styles.hueRotate || 0}deg) invert(${styles.invert || 0}%) blur(${styles.blur}px)` : '',
        width: this.setPx(this.contain.config.width * scaleX),
        height: this.setPx(this.contain.config.height * scaleY),
      }
      return Object.assign({
        transform: `scale(${scaleX}, ${scaleY})`,
        width: this.setPx(this.contain.config.width),
        height: this.setPx(this.contain.config.height),
        backgroundColor: this.contain.config.backgroundColor
      }, (() => {
        if (this.contain.config.backgroundImage) {
          return {
            background: `url(${this.contain.config.backgroundImage}) 0% 0% / 100% 100% rgb(3, 12, 59)`,
          }
        }
        return
      })())
    },
    gradeLenStyle () {
      return {
        backgroundSize: `${this.setPx(this.contain.config.gradeLen)} ${this.setPx(this.contain.config.gradeLen)},${this.setPx(this.contain.config.gradeLen)} ${this.setPx(this.contain.config.gradeLen)}`
      }
    },
    isBuild () {
      return this.$route ? this.$route.name === 'build' : false;
    }
  },
  created () {
    this.init();
  },
  mounted () {
    this.initData();
    this.initFun();
  },
  methods: {
    dragMousedown (e) {
      if (this.contain.isKeysCtrl) {
        this.contain.handleInitActive()
        let rect = e.currentTarget.getBoundingClientRect();
        let offsetX = (e.clientX - rect.left) * this.stepScale;
        let offsetY = (e.clientY - rect.top) * this.stepScale;
        this.select.startX = offsetX
        this.select.startY = offsetY
        this.select.endX = this.select.startX
        this.select.endY = this.select.startY
        this.select.show = true
        e.stopPropagation()
      }
    },
    dragMousemove (e) {
      if (!this.select.show) return
      let rect = e.currentTarget.getBoundingClientRect();
      let offsetX = (e.clientX - rect.left) * this.stepScale;
      let offsetY = (e.clientY - rect.top) * this.stepScale;
      this.select.endX = offsetX
      this.select.endY = offsetY
    },
    dragMouseup (e) {
      if (this.select.show) {
        let selectIndex = []
        this.contain.list.forEach(ele => {
          let x = ele.left >= this.select.startX && ele.left <= this.select.endX
          let y = ele.top >= this.select.startY && ele.top <= this.select.endY
          if (x && y) selectIndex.push(ele.index)
        })
        this.contain.selectNav(selectIndex)
      }
      this.select.show = false
    },
    getTargetDom () {
      let target = this.target || (this.isBuild ? '#section' : 'body')
      return document.querySelector(target)
    },
    initFun () {
      ['handleRefresh', 'getListRef', 'getItemRef'].forEach(ele => {
        this[ele] = this.$refs.subgroup[ele]
      });
    },
    init () {
      $glob.isBuild = this.isBuild
      getList({
        current: 1,
        size: 100,
      }).then(res => {
        let list = res.data.data.records
        list.forEach(ele => {
          window.$glob[ele.globalKey] = ele.globalValue
        })
      })
      window.onresize = () => {
        this.setScale()
      }
    },
    refresh (themeId) {
      if (themeId) {
        let theme = this.contain.config.theme[themeId];
        theme.data.forEach(ele => {
          theme[ele.key] = ele.value
        })
        window.$glob.theme = theme
        this.reload = Math.random();
        this.$nextTick(() => {
          this.initFun()
        })
      }
    },
    //初始化数据
    initData () {
      this.setScale();
      this.$refs.loading.show()
      const query = (this.$route && this.$route.query) || {}
      let id = this.id || query.id || (this.$route && this.$route.params.id)
      initControl(id)
      const version_query = query.v
      this.contain.id = id;
      //大屏绘制逻辑
      const callback = (config = {}) => {
        this.component = config.component || [];
        this.contain.config = {
          ...this.contain.config,
          ...config.detail
        }
        this.setScale();
        document.title = this.$website.title + '-' + this.contain.config.title
        if (this.isBuild) return initDraw(this);
        const password = this.contain.config.password
        const status = this.contain.config.status
        this.$refs.loading.hide()
        if (status == 0) {
          this.$alert('大屏还没有发布，晚一点再来吧！', '提示', {
            showClose: false,
            center: true,
            showConfirmButton: false,
          });
        } else if (!this.validatenull(password)) {
          this.$prompt('请输入密码', '提示', {
            confirmButtonText: '确定',
            showCancelButton: false,
            showClose: false,
            closeOnClickModal: false,
            inputPattern: new RegExp(password),
            inputErrorMessage: '密码不正确，请重新输入'
          }).then(() => initDraw(this))
        } else {
          initDraw(this);
        }

      }
      if (id) {
        getObj(id).then(res => {
          const data = res.data.data || {};
          const config = data.config || {};
          let visual = data.visual
          visual.visualId = config.id;
          visual.id = id;
          this.contain.visualId = config.id;
          this.contain.id = id
          const version = version_query || visual.version;
          const done = () => {
            callback({
              detail: {
                ...JSON.parse(config.detail),
                ...visual,
              },
              component: JSON.parse(config.component),
            })
          }
          if (!this.validatenull(version) && !this.isBuild) {
            getVersionObj(version).then(res => {
              const data = res.data.data;
              try {
                let content = JSON.parse(data.data)
                return callback({
                  detail: content.detail,
                  component: content.component,
                })
              } catch {
                done()
              }
            })
          } else {
            done()
          }
        })
      } else if (this.option) {
        callback({
          detail: this.option.detail,
          component: this.option.component,
        })
      } else {
        this.setScale();
      }
    },
    //计算比例
    setScale (width) {
      const thick = this.contain.thick || 0
      this.contain.canvasWidth = this.contain.config.width;
      this.contain.canvasHeight = this.contain.config.height;
      this.contain.width = this.getTargetDom().offsetWidth - thick
      this.contain.height = this.getTargetDom().offsetHeight - thick
      this.contain.scale = this.contain.width / this.contain.config.width - 0.02
      this.$nextTick(() => {
        this.contain.initSize && this.contain.initSize()
      })
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/echart.scss';
@import '@/styles/style.scss';
</style>