<template>
  <div :style="divStyle">
    <template v-if="field.type == 'chart'">
      <EchartItem
        :height="field.height + 'px'"
        :width="field.width + 'px'"
        :options="field.options"
        :key="getEleKey(field)"
        :chartData="chartData"
      />
    </template>
    <template v-if="field.alias == 'ring-chart'">
      <dv-active-ring-chart
        :config="field.options.config"
        :style="'width:' + field.width + 'px;height:' + field.height + 'px;'"
        :key="getEleKey(field)"
      />
    </template>
    <template v-if="field.alias == 'capsule-chart'">
      <dv-capsule-chart
        :config="field.options.config"
        :style="'width:' + field.width + 'px;height:' + field.height + 'px;'"
        :key="getEleKey(field)"
      />
    </template>
    <template v-if="field.alias == 'water-level-pond'">
      <dv-water-level-pond
        :config="field.options.config"
        :style="'width:' + field.width + 'px;height:' + field.height + 'px;'"
        :key="getEleKey(field)"
      />
    </template>
    <template v-if="field.alias == 'percent-pond'">
      <dv-percent-pond
        :config="field.options.config"
        :style="'width:' + field.width + 'px;height:' + field.height + 'px;'"
        :key="getEleKey(field)"
      />
    </template>
    <template v-if="field.alias == 'flyline-chart'">
      <dv-flyline-chart
        :config="field.options.config"
        :style="'width:' + field.width + 'px;height:' + field.height + 'px;'"
        :key="getEleKey(field)"
      />
    </template>
    <template v-if="field.alias == 'flyline-chart-enhanced'">
      <dv-flyline-chart-enhanced
        :config="field.options.config"
        :style="'width:' + field.width + 'px;height:' + field.height + 'px;'"
        :key="getEleKey(field)"
      />
    </template>
    <template v-if="field.alias == 'conical-column-chart'">
      <dv-conical-column-chart
        :config="field.options.config"
        :style="'width:' + field.width + 'px;height:' + field.height + 'px;'"
        :key="getEleKey(field)"
      />
    </template>
    <template v-if="field.alias == 'digital-flop'">
      <dv-digital-flop
        :config="field.options.config"
        :style="'width:' + field.width + 'px;height:' + field.height + 'px;'"
        :key="getEleKey(field)"
      />
    </template>
    <template v-if="field.alias == 'scroll-board'">
      <dv-scroll-board
        :config="field.options.config"
        :style="'width:' + field.width + 'px;height:' + field.height + 'px;'"
        :key="getEleKey(field)"
      />
    </template>
    <template v-if="field.alias == 'scroll-ranking-board'">
      <dv-scroll-ranking-board
        :config="field.options.config"
        :style="'width:' + field.width + 'px;height:' + field.height + 'px;'"
        :key="getEleKey(field)"
      />
    </template>
    <template
      v-if="
        field.type == 'decoration' || field.alias.indexOf('decoration') === 0
      "
    >
      <dv-decoration
        :width="parseInt(field.width)"
        :height="parseInt(field.height)"
        :element="field"
        :key="getEleKey(field)"
      ></dv-decoration>
    </template>
    <template v-if="field.type == 'border'">
      <dv-border-box
        :width="parseInt(field.width)"
        :height="parseInt(field.height)"
        :element="field"
        :key="getEleKey(field)"
      ></dv-border-box>
    </template>
    <template v-if="field.alias == 'display-text'">
      <Display-text
        :config="field.options.config"
        :style="
          'width:' +
          (field.width - 15) +
          'px;height:' +
          field.height +
          'px;lineHeight:' +
          field.height +
          'px;'
        "
        :key="getEleKey(field)"
      />
    </template>
    <template v-if="field.alias == 'localtime'">
      <Local-time
        :config="field.options.config"
        :style="
          'width:' +
          (field.width - 15) +
          'px;height:' +
          field.height +
          'px;lineHeight:' +
          field.height +
          'px;'
        "
        :key="getEleKey(field)"
      />
    </template>
  </div>
</template>

<script>
import EchartItem from '@/components/portal/echart/EchartItem.vue'
import LocalTime from '@/components/portal/datav/LocalTime.vue'
import CustomQuery from '@/views/form/customquery/CustomQuery.js'
import DatavChartsBuild from '@/utils/DatavChartsBuild.js'
import DisplayText from '@/components/portal/datav/DisplayText.vue'
import DvDecoration from '@/components/portal/datav/DvDecoration.vue'
import DvBorderBox from '@/components/portal/datav/DvBorderBox.vue'

export default {
  name: 'datav-preview-item',
  components: {
    EchartItem,
    LocalTime,
    DisplayText,
    DvDecoration,
    DvBorderBox,
  },
  props: {
    field: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  computed: {
    divStyle: function () {
      let style = {
        position: 'absolute',
        top: this.field.y + 'px',
        left: this.field.x + 'px',
        width: this.field.width + 'px',
        height: this.field.height + 'px',
        zIndex: this.field.zIndex,
      }
      if (this.field.type == 'border') {
        style.zIndex = -20
      }
      return style
    },
  },
  data() {
    return {
      queryTimer: null, //查询定时器
      chartData: null,
    }
  },
  beforeDestroy() {
    if (this.queryTimer != null) {
      clearInterval(this.queryTimer) // 清除定时器
      this.queryTimer = null
    }
  },
  mounted() {
    if (
      this.field &&
      this.field.options &&
      (this.field.options.dataAlias || this.field.options.needNotData)
    ) {
      if (this.field.options.dataAlias) {
        this.queryItemData()
      }
      //处理定时刷新
      if (
        this.field.options.dataAlias &&
        this.field.options.refresh &&
        this.field.options.refresh.on
      ) {
        let cycle = this.field.options.refresh.rate //刷新周期，以秒为单位
        switch (this.field.options.refresh.rule) {
          case 'minute': //分钟
            cycle = cycle * 60
            break
          case 'minute': //小时
            cycle = cycle * 60 * 60
            break
        }
        let _this = this
        this.$nextTick(() => {
          _this.queryTimer = setInterval(_this.queryItemData, cycle * 1000)
        })
      }
    }
    if (
      this.field.alias == 'flyline-chart' ||
      this.field.alias == 'flyline-chart-enhanced'
    ) {
      if (this.field.options.config.bgImgFileId) {
        let _this = this
        req
          .get(
            window.context.portal +
              '/system/file/v1/preview?fileId=' +
              this.field.options.config.bgImgFileId,
            'blob'
          )
          .then(
            (response) => {
              if (response.data.size > 0) {
                var blob = response.data
                var reader = new FileReader()
                reader.readAsDataURL(blob)
                reader.onload = function (e) {
                  if (_this.field.alias == 'flyline-chart-enhanced') {
                    _this.field.options.config.bgImgSrc = e.target.result
                  } else {
                    _this.field.options.config.bgImgUrl = e.target.result
                  }
                }
              }
            },
            function errorCallback() {
              _this.$message.success('获取背景图片失败。')
            }
          )
      }
      if (
        this.field.alias == 'flyline-chart' &&
        this.field.options.config.centerPointImg.fileId
      ) {
        let _this = this
        req
          .get(
            window.context.portal +
              '/system/file/v1/preview?fileId=' +
              this.field.options.config.centerPointImg.fileId,
            'blob'
          )
          .then(
            (response) => {
              if (response.data.size > 0) {
                var blob = response.data
                var reader = new FileReader()
                reader.readAsDataURL(blob)
                reader.onload = function (e) {
                  _this.field.options.config.centerPointImg.url =
                    e.target.result
                }
              }
            },
            function errorCallback() {
              _this.$message.success('获取背景图片失败。')
            }
          )
      }
      if (
        this.field.alias == 'flyline-chart' &&
        this.field.options.config.pointsImg.fileId
      ) {
        let _this = this
        req
          .get(
            window.context.portal +
              '/system/file/v1/preview?fileId=' +
              this.field.options.config.pointsImg.fileId,
            'blob'
          )
          .then(
            (response) => {
              if (response.data.size > 0) {
                var blob = response.data
                var reader = new FileReader()
                reader.readAsDataURL(blob)
                reader.onload = function (e) {
                  _this.field.options.config.pointsImg.url = e.target.result
                }
              }
            },
            function errorCallback() {
              _this.$message.success('获取背景图片失败。')
            }
          )
      }
      if (
        this.field.alias == 'flyline-chart-enhanced' &&
        this.field.options.config.icon.fileId
      ) {
        let _this = this
        req
          .get(
            window.context.portal +
              '/system/file/v1/preview?fileId=' +
              this.field.options.config.icon.fileId,
            'blob'
          )
          .then(
            (response) => {
              if (response.data.size > 0) {
                var blob = response.data
                var reader = new FileReader()
                reader.readAsDataURL(blob)
                reader.onload = function (e) {
                  _this.field.options.config.icon.src = e.target.result
                }
              }
            },
            function errorCallback() {
              _this.$message.success('获取图片失败。')
            }
          )
      }
    }
  },
  methods: {
    queryItemData() {
      let _this = this
      CustomQuery.load(this.field.options.dataAlias, {})
        .then((data) => {
          if (data && data.length > 999) {
            console.error(
              `名称为${_this.field.name}的组件加载的数据量太大为：${data.length}，无法正常显示...`
            )
            return
          }
          _this.chartData = data
          for (let key in data) {
            for (let item in data[key]) {
              //返回的不是大写的属性
              if (item !== item.toUpperCase()) {
                data[key][item.toUpperCase()] = data[key][item]
                delete data[key][item]
              }
            }
          }
          const options = DatavChartsBuild.buildChart(_this.field, data, _this)
          if (options != null) {
            this.$set(this.field, 'options', options)
            this.$set(this.field, 'state', 2)
            let _this = this
            setTimeout(function () {
              _this.$set(_this.field, 'state', 1)
            }, 10)
          }
        })
        .finally()
    },
    getFontStyle(obj) {
      if (obj.options.config.isDiyStyle && obj.options.config.diyStyle) {
        return JSON.parse(obj.options.config.diyStyle)
      } else {
        return {
          fontSize: obj.options.config.text.fontSize,
          color: obj.options.config.text.color,
          fontWeight: obj.options.config.text.fontWeight,
        }
      }
    },
    getEleKey(field) {
      return field.key + '' + field.state + Math.ceil(Math.random() * 99999)
    },
    getTextContent(ele) {
      const content = ele.options.config.text.content
      const formatter = ele.options.config.text.formatter
      if (content != '' && content != null && formatter) {
        return this.execReplace(formatter, content)
      }
      return content
    },
    execReplace(formatterText, replacement) {
      return formatterText.replace(new RegExp('\\{c\\}', 'g'), replacement)
    },
  },
  created() {},
}
</script>
<style scoped>
.widget-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.widget-form-list {
  padding: 10px;
  /* background: #fff; */
  border: 1px solid #dfdfdf;
  min-height: 800px;
  margin: 10px;
  background: black;
}

.form-empty {
  position: absolute;
  text-align: center;
  width: 300px;
  font-size: 20px;
  top: 200px;
  left: 40%;
  margin-left: -150px;
  color: #ccc;
}
li {
  display: list-item;
  text-align: -webkit-match-parent;
}
.container {
  width: 200px;
  position: absolute;
  z-index: 2004;
}
.m-ctxMenu {
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
  border-radius: 2px;
}
.m-ctxMenu li {
  cursor: pointer;
  position: relative;
  font-size: 12px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 24px;
  padding-right: 18px;
  height: 32px;
  line-height: 32px;
  min-width: 180px;
  background-color: #fff;
  white-space: nowrap;
}
.m-ctxMenu li:before {
  position: absolute;
  left: 8px;
  line-height: 32px;
}
.m-ctxMenu li:hover {
  background: #ccc;
}
.m-ctxMenu .z-disabled {
  color: #ccc;
}
.m-ctxMenu .shortcut {
  float: right;
  color: #8f8f8f;
}
.m-ctxMenu li .u-icn-angle-right {
  left: auto;
  right: 8px;
}
.m-ctxMenu li .u-icn {
  position: absolute;
  left: 8px;
  top: 10px;
  font-size: 12px;
}
.u-icn {
  display: inline-block;
  font-family: 'youdata';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-decoration: inherit;
  text-rendering: optimizeLegibility;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
  margin-bottom: 2px;
}
.m-ctxMenu li > ul.right {
  left: 100%;
}
.m-ctxMenu li > ul {
  position: absolute;
  border: 1px solid #ccc;
}
ol,
ul {
  list-style: none;
  padding-left: 0px;
}
.m-ctxMenu li > ul.bottom {
  top: 0;
}
</style>
