<template>
  <div class="height100 situation-contanier" style="width:100%">
        <div
          class="item_operate"
          v-if="!config.hideInfo&&!isEditable&&$parent.formId&&itemALL.targetId&&!$parent.isFromList"
        >
          <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(itemALL,'info')" slot="reference" class="item_ball iconfont icon-tishi2"></span>
        </el-popover>
          <span @click="onTargetInfo(itemALL,'infoTable')" title="详情" class="item_ball iconfont icon-Group-24"></span>
        </div>
      <tsLoading :loading="loading" />
      <div class="situation-contanier_center" :style="{flexDirection:config.flexDirection?'row':'column'}">
        <!-- 全院 -->
        <div class="centerTop" style="padding: 5px 0;"> 
          <div :class="['iconfont' ,config.icon,'iconClass']" :style="{fontSize:config.iconSize+'px',color:config.titleColor}">
          </div>
          <div class="iconRight">
            <div :style="{fontSize:config.titleSize+'px',color:config.titleColor,fontWeight:config.titleWeight?'700':'500'}">
              {{config.title || itemALL.targetName + (itemALL.targetUnit? `(${itemALL.targetUnit || ''})`:'')}}
            </div>
                <span
            class="title ellipsis hidden"
            :style="{fontSize:(config.textSize||'25')+'px',fontWeight:config.valueWeight?'700':'500',   color:config.textColor||'var(--base-acv)',lineHeight:(config.textSize||'25')+'px'}"
            :title="itemALL.thisVal||'-'"
          >
            {{itemALL.thisVal||'-'}}
            <!-- <span class="font13 co333 mrgl5">{{itemALL.targetUnit}}</span> -->
          </span>
          <div class="areaName" :style="{fontSize:(config.areaSize||'15')+'px',fontWeight:config.weight?'700':'500',   color:config.areaColor||'#999'}">
            {{config.allArea || itemALL.orgName}}
          </div>
          </div>
      
          <!-- <div v-if="(item.thisVal||'-').indexOf('万')>-1" class="font13 co333 mrgl5">万</div> -->
        </div>
        <!-- 子院 -->
        <div class="areaClass">
          <div class="areaItme" v-for="(item,index) in areaList" :key="index">
            <div class="areaValue"  :style="{fontSize:(config.textSize||'20')+'px',fontWeight:config.valueWeight?'700':'500',   color:config.textColor||'var(--base-acv)'}"> {{item.thisVal}}</div>
             <div class="areaName" :style="{fontSize:(config.areaSize||'15')+'px',fontWeight:config.weight?'700':'500',   color:config.areaColor||'#999'}"> {{item.orgName}}</div>

          </div>

        </div>
      </div>
  </div>
</template>

<script>
import biTargetInfo from '../../components/uiElement/biTargetInfo.vue'
import biTitle from './biTitle.vue'
import biUtils from '../../utils/biUtils'
import previewRealDate from '../../utils/dateUtils'
export default {
  name: 'biTags',
  components: {biTitle,biTargetInfo},
  props: {
    dataList: {
      type: Array,
      default: () => {
        return []
      }
    },
    isEditable: {
      // 是否编辑
      type: Boolean,
      default: false
    },
    chartType: {
      type: Number,
      default: 2
    },
    point: {
      type: Boolean,
      default: true
    },
    config: {
      // 属性内容
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      
      areaList:[
             {
           alias: null,
          data0f: "AMOUNT",
          orgName: "天心阁",
          targetUnit: '元',
          thisVal: "0.00",
        },
               {
           alias: null,
          data0f: "AMOUNT",
          orgName: "马王堆",
          targetUnit: '元',
          thisVal: "0.00",
        },
               {
           alias: null,
          data0f: "AMOUNT",
          orgName: "天心阁",
          targetUnit: '元',
          thisVal: "0.00",
        },
        ],
      url: '/ts-bi/api/v3/busiOrg/list/statistic',
      eventSource:null,
      params: {}, // 参数
      itemALL: {
            targetName: '指标名称',
            thisVal: '0.00',
            orgName:'全院'
          },
      target: {},
      loading: false
    }
  },
  created() {},
  mounted() {
    if (!this.isEditable) {
      this.$eventBus.$on(
        'refreshBiTarget' +
          (this.config ? this.config.id : '') +
          this.$parent.formId +
          this.isEditable,
        this.getDatas
      ) // 为方便进行筛选器联动
    }
    if (!this.config.filterId && !this.config.filterData) {
      this.getDatas({}) // 为防止重复调用，有筛选器的，只能通过eventBus才能调用到数据
    }
  },
  methods: {
    getInfo(item){
      this.target = item
    },
    // 打开指标详情
    onTargetInfo(row, key) {
      row.params = this.params
      this.$eventBus.$emit(
        'openTargetItemDialog' + this.$parent.formId,
        row,
        key
      )
    },
    // 获取数据项
    getDatas(params) {
      const _this = this
      if (this.isEditable || (!params.targetCode && !this.config.targetCode)) {
        // 未选中指标
        return
      }
      this.params = Object.assign(this.params, params)

      this.params.busiCode = this.params.targetCode || this.config.targetCode
      // 模拟日期
      this.params.beginDate =
        this.params.beginDate || previewRealDate.getRealDate('y').startDate
      this.params.endDate = this.params.endDate || this.$utils.getTodayDate()
      // if (params.pivotType || this.config.pivotType) {
      //   params.pivotType = params.pivotType || this.config.pivotType
      // }
      if (this.config.isRealTime) {
        this.openRealTimeUrl()
      } else {
        this.loading = true
        this.$api({
          method: 'post',
          url: this.url,
          data: this.params,
          headers: {
            'Content-Type': 'application/json; charset=utf-8'
          }
        })
          .then(function(resp) {
            if (resp.success) {
              _this.doResponse(resp)
            } else {
              _this.$utils.msg(_this, resp.message, 'error')
            }
            _this.loading = false
          })
          .catch(function(error) {
            _this.loading = false
            _this.$utils.msg(_this, error.message || '系统异常', 'error')
          })
      }
    },
    // 打开实时功能
    openRealTimeUrl() {
      const _this = this
      if (typeof EventSource !== 'undefined') {
        this.eventSource = new EventSource(
          biUtils.objArgs(this.params, this.url, null)
        )
        this.eventSource.onmessage = function(event) {
          if (event.data) {
            try {
              _this.doResponse(JSON.parse(event.data))
            } catch (error) {
              console.warn(error)
              _this.$utils.msg(_this, error.message||'返回格式存在问题，请联系管理员', 'error')
            }
          }
        }
      } else {
        _this.$utils.msg(_this, '该浏览器不支持SSE,请升级浏览器版本', 'warning')
      }
    },
    // 处理响应内容
    doResponse(resp) {
      const _this = this
      if (resp.success) {
        let dataList = [ ...resp.object ]
        this.areaList = dataList
        let allValue = 0
        if(dataList&&dataList.length>0){
          this.itemALL.targetId =  dataList[0].targetId
          this.itemALL.dataOf = dataList[0].dataOf
          this.itemALL.targetName =  dataList[0].targetName
          this.itemALL.targetUnit = dataList[0].targetUnit
          this.itemALL.orgName = '全院'
          dataList.forEach(res=>{
            allValue = Number(allValue) + Number(res.thisVal)
          })
          this.itemALL.thisVal = allValue
          this.itemALL.thisVal = biUtils.splitNum( _this.itemALL.thisVal,  _this.itemALL.dataOf)
        }
        
      } else {
        _this.$utils.msg(_this, resp.message, 'error')
        
      }
    },
  },
  watch: {
    'config.viewType': {
      handler(n) {
        this.$nextTick(() => {
          this.getDatas({})
        })
      }
    },
    config: {
      handler(n) {
        this.config = n
      },
      deep: true
    }
  },
  beforeDestroy: function() {
    this.eventSource?this.eventSource.close():''
    this.$eventBus.$off(
      'refreshBiTarget' +
        (this.config ? this.config.id : '') +
        this.$parent.formId +
        this.isEditable,
      this.getDatas
    ) // 为方便进行筛选器联动
  }
}
</script>
<style lang="less" scoped>
.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;
  }
}
  .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%;
    box-sizing: border-box;
    .centerTop{
      height: 50%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      .iconClass{
        max-width: 150px;
        padding: 10px;
        font-size: 100px;
      }
      .iconRight{
        display: flex;
        box-sizing: border-box;
        padding: 10px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .allArea{
        width: 200px;
      }
    }
    .areaClass{
      width: 100%;
      height: 50%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .areaItme{
        flex:1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }
    .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>
