<template>
  <div
    :class="'g2-chart-contanier situation-contanier ht100'+(isShadow?'monitor__block':'')"
    :style="showBorder?'border:1px solid var(--border_color);':''"
  >
    <div class="form-title" v-if="title">{{title}}</div>
    <div class="item_operate" v-if="!config.hideInfo&&!isEditable">
      <el-popover
        placement="bottom-start"
        :title="target.targetName||'指标名称'"
        width="300"
        trigger="hover"
      >
        <bi-targetInfo :target="target" v-if="target&&target.targetId"></bi-targetInfo>
        <span
          @mouseenter="getInfo(item,'info')"
          slot="reference"
          class="item_ball iconfont icon-tishi2"
        ></span>
      </el-popover>
      <span
        @click="onTargetInfo(item,'infoTable')"
        title="详情"
        class="item_ball iconfont icon-Group-24"
      ></span>
    </div>

    <div
      class="my_dashBoard"
      :style="{height:title?'calc(100% - 30px)':'100%'}"
      v-resize="resize"
      ref="mydashboard"
    >
      <img :style="{height:imgHeight,width:imgWidth}" :src="backgroundImages" alt />
      <div
        class="boardValue"
        :style="{color:(chartType==1||isShowBigScreen)?'#fff':'#333'}"
        v-if="data&&data.length>0"
      >{{data[0].value}}</div>
      <div
        class="boardUnit"
        :style="{color:(chartType==1||isShowBigScreen)?'#fff':'#333'}"
        v-if="data&&data.length>0"
      >{{unit || data[0].column}}</div>
    </div>
    <div
      :class="'height100 '+(title?'chart-content': '')"
      :style="{margin:(title?'margin:8px':'0 0 8px 0')}"
      v-if="!loading&&(!data||data.length==0)"
    >
      <ts-empty :description="emptyText" :imageStyle="{ width: '180px', height: '150px' }"></ts-empty>
    </div>
    <ts-loading type="chart" :loading="loading"></ts-loading>
  </div>
</template>
<script>
import biTargetInfo from '../../components/uiElement/biTargetInfo.vue'
export default {
  name: 'dashBoard',
  components: { biTargetInfo },
  props: {
    isShowBigScreen: {
      type: Boolean,
      default: false
    },
    isEditable: {
      type: [Boolean, String],
      default: false
    },
    loading: {
      type: [Boolean, String],
      default: false
    },
    config: {
      type: Object,
      default: () => {
        return {}
      }
    },
    emptyText: {
      type: [String, Number],
      default: '--图表暂无数据--'
    },
    showBorder: {
      // 显示图上文字
      type: Boolean,
      default: false
    },
    isShadow: {
      // 是否有阴影
      type: Boolean,
      default: false
    },
    chartType: {
      type: [Number, String],
      default: '1'
    },
    unit: {
      type: [Number, String],
      default: ''
    },
    // 标题
    title: {
      type: [String, Number],
      default: ''
    },
    data: {
      type: [Object, Array],
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      target: {},
      backgroundImages: require('../../assets/y1.png'),
      imgHeight: '100%',
      imgWidth: '100%',
      item: {},
      params: {}
    }
  },

  directives: {
    // 使用局部注册指令的方式
    resize: {
      // 指令的名称
      bind(el, binding) {
        // el为绑定的元素，binding为绑定给指令的对象
        let width = '',
          height = ''
        function isReize() {
          const style = document.defaultView.getComputedStyle(el)
          if (width !== style.width || height !== style.height) {
            binding.value() // 关键
          }
          width = style.width
          height = style.height
        }
        el.__vueSetInterval__ = setInterval(isReize, 300)
      },
      unbind(el) {
        clearInterval(el.__vueSetInterval__)
      }
    }
  },
  computed: {},
  mounted() {
    this.getImg(this.chartType)
    if (!this.isEditable) {
      this.$eventBus.$on(
        'refreshDashBoard' +
          (this.config ? this.config.id : '') +
          this.isEditable,
        this.getDatas
      ) // 为方便进行筛选器联动
    }
  },
  created() {
    if (this.config.targetCode) {
      this.target.targetId = this.config.targetCode
      this.getTargetInfo()
    }
  },
  watch: {
    data: {
      handler(n) {},
      deep: true
    },
    isShowBigScreen: {
      handler(n) {}
    },
    chartType: {
      handler(n) {
        this.getImg(n)
      }
    }
  },
  methods: {
    getDatas(params) {
      this.params = Object.assign(this.params, params)
    },
    getTargetInfo() {},
    getImg(n) {
      if (n == 1) {
        this.backgroundImages = require('../../assets/y1.png')
      } else if (n == 2) {
        this.backgroundImages = require('../../assets/y2.png')
      } else if (n == 3) {
        this.backgroundImages = require('../../assets/y3.png')
      } else if (n == 4) {
        this.backgroundImages = require('../../assets/y4.png')
      } else if (n == 5) {
        this.backgroundImages = require('../../assets/y11.png')
      }
    },
    getInfo(item) {
      this.target.targetId = this.config.targetCode
    },
    // 打开指标详情
    onTargetInfo(row, key) {
      row.params = { ...this.params }
      row.params.busiCode = this.config.targetCode
      row.targetName = this.config.title

      this.$eventBus.$emit(
        'openTargetItemDialog' + this.$parent.formId,
        row,
        key
      )
    },
    resize(a) {
      let imgh = this.$refs.mydashboard.offsetHeight
      let imgw = this.$refs.mydashboard.offsetWidth
      let d = imgh > imgw ? imgw : imgh
      d = d - 20
      this.imgHeight = d + 'px'
      if (this.chartType == 1) {
        this.imgWidth = d + 20 + 'px'
      } else {
        this.imgWidth = d + 'px'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.my_dashBoard {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.boardValue {
  font-size: 24px;
  font-weight: bold;
  position: absolute;
  top: calc(50% - 10px);
  left: 50%;
  transform: translate(-50%, -50%);
}
.boardUnit {
  font-size: 13px;
  width: 80%;
  text-align: center;
  position: absolute;
  top: calc(50% + 20px);
  left: 50%;
  transform: translate(-50%, -50%);
}
.ht100 {
  height: 100%;
}
.g2-chart-contanier {
  box-sizing: border-box;
  width: 100%;
  position: relative;
  .main-titlebox {
    height: 34px;
    display: flex;
    align-items: center;
  }
  .main-title {
    line-height: 14px;
    font-size: 14px;
    font-weight: bold;
    padding-left: 15px;
    margin: 10px 0;
  }
  .sub-title {
    padding-left: 15px;
    font-size: 12px;
    margin: 5px 0;
    color: #aaa;
  }
  .chart-content {
    border-top: 1px solid var(--border_color);
    // padding-top: 5px;
    // box-sizing: border-box;
  }
  .chart_height {
    height: calc(100% - 46px);
  }
  .chart_height3 {
    height: calc(100% - 40px);
  }
  .chart_height2 {
    height: calc(100% - 80px);
  }
  .no_data {
    height: calc(100% - 34px);
  }
}
.green {
  color: #2bcb95 !important;
  background: none !important;
  font-size: 18px;
}

.red {
  color: #fb3a77;
}

.red2 {
  font-size: 18px;
  color: #ff6b3b !important;
}
.situation-contanier:hover {
  /deep/.item_operate {
    display: block;
  }
}

/deep/.form-title {
  display: flex;
}
/deep/.panel-content {
  overflow-y: hidden !important;
}
.no_data {
  width: 100%;
}
/deep/.table-loading {
  height: calc(100% - 40px);
  margin-top: 40px;
}

.item_operate {
  position: absolute;
  top: 2px;
  right: 3px;
  display: none;
  z-index: 4;
  .item_ball {
    padding: 3px;
    margin-right: 3px;
    border-radius: 25px;
    background: #c7defe;
    color: #ffffff;
    // border: 1px solid var(--base-black);
    cursor: pointer;
    font-weight: bold;
    &:hover {
      background: var(--button_color);
    }
  }
}
.situation-contanier_center {
  align-items: center;
  flex-direction: column;
  justify-content: center;
  display: flex;
  width: 100%;
  height: 100%;
  // padding: 10px;
  box-sizing: border-box;
  line-height: 20px;
  .title {
    font-size: 25px;
    color: #e6a23c;
  }

  .target-info {
    cursor: pointer;
    &:hover {
      text-decoration: underline;
    }
  }
  .value {
    color: black;
    min-width: 50px;
    justify-content: flex-end;
    display: flex;
  }
}
.situation-contanier_bottom {
  height: calc(100% - 64px);
  width: 100%;
}
.center {
  display: flex;
  align-items: center;
  // justify-content: center;
  span {
    padding: 0 5px;
  }
}
</style>
