<template>
      <div class="bi-target-item-con">
          <div
          class="item_operate2"
          v-if="item.targetId"
        >
          <el-popover
            placement="bottom-start"
            :title="item.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="'situation-contanier_center '+(isMainItem? '':'not-main-item ')+itemBackground" v-if="item.targetName" :style="{background:itemBackground}">
          <div class="flexbox" :style="{alignItems:'center',width:!config.showRate?'calc(100% - 100px)':'100%'}">
          <span class="target-name ellipsis hidden" v-if="showName" :style="{whiteSpace: 'nowrap'}" :title="item.targetName">{{item.targetName}}</span>
            <span
              class="title ellipsis hidden"
              :style="{fontSize:(config.textSize||'25')+'px',color:config.textColor||'var(--base-acv)',lineHeight:(config.textSize||'25')+'px',fontWeight:config.weight&&isMainItem?'700':'500',marginLeft:!config.showRate?'auto;':''}"
              :title="isEditable?noRealObj.thisVal:(item.thisVal?$utils.thousandsNum(item.thisVal):'-')"
            >
              {{isEditable?noRealObj.thisVal:item.thisVal?$utils.thousandsNum(item.thisVal):'-'}}
              <span class="font13 co999 mrgl5 unit">{{item.targetUnit}}</span>
            </span>
          </div>
          <div class="font12 rate-div" style="margin-left: auto;" v-if="!config.showRate">
            <div class="center">
              <span class="co999">同比</span>
              <div v-if="isEditable?noRealObj.sameRate&&noRealObj.sameRate.indexOf('-')==0:item.sameRate&&item.sameRate.indexOf('-')==0" class="green flexbox">
               <div  class="green iconfont icon-paixu"></div>
              <span class="value green">{{isEditable?noRealObj.sameRate:(item.sameRate||'-')}}%</span></div>
              <div
                v-else-if="isEditable?noRealObj.sameRate&&noRealObj.sameRate.indexOf('-')!=0:item.sameRate&&item.sameRate.indexOf('-')!=0&&item.sameRate!='0'&&item.sameRate!='0.00'"
                class="red2 flexbox"
              >
                 <div  class="red2 iconfont icon-xiangshang"></div>
              <span class="value red2">{{isEditable?noRealObj.sameRate:(item.sameRate||'-')}}%</span>
              </div>
              <span v-else>-</span>
            </div>
            <div class="center">
              <span class="co999">环比</span>
              <div v-if="isEditable?noRealObj.chainRate&&noRealObj.chainRate.indexOf('-')==0:item.chainRate&&item.chainRate.indexOf('-')==0" class="green flexbox">
              <div  class="green iconfont icon-paixu"></div>
              <span class="green value">{{isEditable?noRealObj.chainRate:(item.chainRate||'-')}}%</span></div>
              <div
                v-else-if="isEditable?noRealObj.chainRate&&noRealObj.chainRate.indexOf('-')!=0:item.chainRate&&item.chainRate.indexOf('-')!=0&&item.chainRate!='0'&&item.chainRate!='0.00'"
                class="red2 flexbox"
              >
              <div  class="red2 iconfont icon-xiangshang"></div>
              <span class="value red2">{{isEditable?noRealObj.chainRate:(item.chainRate||'-')}}%</span></div>
              <span v-else>-</span>
            </div>
          </div>
        </div>
         <div v-if="item&&item.children&&item.children.length>0" style="margin-left:20px">
            <biTagsTreeItem :item="treeItem" :params="params" :formId="formId" :isEditable="isEditable" :config="config" v-for="(treeItem,index) of item.children" :key="index" :showName="true" :itemBackground="itemBackground==config.itemBackground1?config.itemBackground2:config.itemBackground1">

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

<script>
import biTargetInfo from './biTargetInfo.vue'
import biTitle from './biTitle.vue'
import biUtils from '../../utils/biUtils'
import previewRealDate from '../../utils/dateUtils'
export default {
  name: 'biTagsTreeItem',
  components: {biTitle,biTargetInfo},
      props: {
        item: {
          type: Object,
          default: () => {
            return {}
          }
        },
        formId:{
          type:String,
          default:''
        },
        params:{
           type: Object,
           default: () => {
            return {}
          }
        },
        config: {
          type: Object,
          default: () => {
            return {}
          }
        },
        showName: {
          type: Boolean,
          default: false
        },
        isMainItem: {
          type: Boolean,
          default: false
        },
        itemBackground: {
          type: String,
          default: 'itemBackground1'
        },
        isEditable: {
          // 是否编辑
          type: Boolean,
          default: false
        }
      },
  data() {
    return {
      target:{},
       noRealObj: {
            thisVal: '2419.83',
            sameRate: '-52',
            sameVal: '6672.69',
            chainRate: '21',
            chainVal: '0'
          }
    }
  },
  created() {},
  mounted() {
  },
  methods: {
    getInfo(item){
      this.target = item
    },
        // 打开指标详情
    onTargetInfo(row, key) {
      row.params = {...this.params}
      row.params.busiCode = row.targetId
      this.$eventBus.$emit(
        'openTargetItemDialog' + this.formId,
        row,
        key
      )
    },
    getDatas(params) {
      const _this = this
      if (this.isEditable || (!params.targetCode && !this.config.targetCode)) {
        // 未选中指标
        return
      }
      if (this.isEditable && _this.config.viewType == 'table') {
        // 为表格
        _this.$refs.tsTable.data = biUtils.changeChart2TableData(
          _this.item.chartData
        )
        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()
      this.params.hideChartData =
        this.params.hideChartData || this.config.hideChartData || true
      // 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) {
        _this.item = { ...resp.object }
        _this.item.targetId_ = _this.config.targetId
        _this.item.thisVal = biUtils.splitNum(
          _this.item.thisVal,
          _this.item.dataOf
        )
        if (_this.config.viewType == 'table') {
          // 为表格
          _this.$refs.tsTable.data = biUtils.changeChart2TableData(
            _this.item.chartData
          )
        }
      } else {
        _this.$utils.msg(_this, resp.message, 'error')
      }
    },
    // 列表配置
    sourceFn() {
      let self = this
      return {
        showOverflow: true,
        offPage: false,
        rownumbers: false,
        dataType: 'local',
        colModel: this.colFn(),
        offPage: true
      }
    },
    colFn() {
      let self = this
      return [
        {
          title: '月份',
          field: 'category',
          align: 'center',
          width: 60,
          formatter: function({ cellValue, row, column }) {
            return cellValue
          }
        },
        {
          title: '本期',
          field: 'thisVal',
          align: 'right',
          helpDetail: '当前月份',
          formatter: function({ cellValue, row, column }) {
            return biUtils.splitNum(cellValue, self.item.dataOf)
          }
        },
        {
          title: '同期',
          field: 'sameVal',
          align: 'right',
          helpDetail: '去年同月份',
          formatter: function({ cellValue, row, column }) {
            return biUtils.splitNum(cellValue, self.item.dataOf)
          }
        }
      ]
    }
  },
  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.formId +
        this.isEditable,
      this.getDatas
    ) // 为方便进行筛选器联动
  }
}
</script>
<style lang="less" scoped>
/deep/.green {
    color: #2BCB95 !important;
    background: none !important;
    font-size: 18px;
}

.red {
    color: #FB3A77;
}

/deep/.red2 {
   font-size: 18px;
    color: #FF6B3B !important;
}
.bi-target-item-con:hover {
.item_operate2 {
    display: block;
  }
}
  .item_operate2 {
    position: absolute;
    top: 8px;
    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);
      }
    }
  }
  /deep/.bi-target-item-con {
    position: relative;
    .situation-contanier_center {
      align-items: center;
      display: flex;

      width: auto;
      margin: 0 5px;
      height: 34px;
      .title {
        font-size: 16px;
        color: #e6a23c;
        margin-left: auto;
      }
      .rate-div {
        background: #ffffff;
        padding: 3px;
        min-width: 130px;
      }
      .target-info {
        cursor: pointer;
        &:hover {
          text-decoration: underline;
        }
      }
      .value {
        color: black;
        width: 40px;
        text-align: end;
        // justify-content: flex-end;
        // display: flex;
      }
      .center {
        display: flex;
        align-items: center;
        line-height: 14px;
        // justify-content: center;
        span {
          padding: 0 5px;
        }
      }
    }
    .not-main-item {
      margin: 5px 8px;
      .target-name,
      .title {
        font-size: 14px !important;
        // color: #ffffff !important;
        line-height: 1 !important;
        border-radius: 2px;
        padding: 8px;
        // .unit {
        // color: #ffffff !important;
        // }
      }
    }
  }
</style>
