<template>
  <div :elid="wrapId" :ref="wrapId" :style="[wrapStyle,styleObj]" @click="clickHandler">
    <span :style="!objVal.limitRowNum?'':'display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: '+objVal.limitRowNum+';overflow: hidden;'">
      {{labelText}}{{objVal.suffixText}}
    </span>
  </div>
</template>

<script>
import { URLParser } from "../../util/URLParser";
import bm from "../../mixins/base-mixins";
export default {
  name: "fviz-label",
  mixins: [bm],
  computed: {
    displayData: {
      //历史版本兼容处理
      get() {
        return { data: this.dataObj };
      }
    },
    labelText: {
      get() {
        if ("api" == this.objVal.dataType) {
          if (this.objVal.valueExp && this.displayData.data) {
            let exp = this.objVal.valueExp;
            if (exp && !exp.startsWith("data")) {
              exp = "data." + exp;
            }
            let rst = "";
            try {
              rst = eval("this.displayData." + exp);
            } catch (err) {
              this.$message.error(
                "表达式有误！【表达式】" + exp + "【错误信息】" + err
              );
            }
            return rst;
          } else {
            return this.displayData.data;
          }
        }else if("sql" == this.objVal.dataType || "dataset" == this.objVal.dataType) {
          if (this.dataObj && this.dataObj.length > 0) {
        		let dataObject = JSON.parse(window.JSON.stringify(this.dataObj))
            return dataObject[0][this.fieldBindObj.numberField];
          }

          return '';
        }else{
          return this.objVal.textContent;
        }
      }
    },
    styleObj: {
      get() {
        let vAlign = "center";
        if ("top" == this.objVal.textVAlign) {
          vAlign = "flex-start";
        }
        if ("bottom" == this.objVal.textVAlign) {
          vAlign = "flex-end";
        }
        if ("center" == this.objVal.textVAlign) {
          vAlign = "center";
        }

        let hAlign = "center";
        if ("left" == this.objVal.textAlign) {
          hAlign = "flex-start";
        }
        if ("right" == this.objVal.textAlign) {
          hAlign = "flex-end";
        }
        if ("center" == this.objVal.textAlign) {
          hAlign = "center";
        }

        let style = {
          display: "flex",
          "align-items": vAlign,
          "justify-content": hAlign,
          fontWeight: this.objVal.fontWeight,

        };

        if (eval(this.preview) && this.objVal.linkUrl) {
          style.cursor = "pointer";
        }

        if (this.objVal.fontSize) {
          style.fontSize = this.objVal.fontSize + "px";
        }

        if (this.objVal.fontColor) {
          style.color = this.objVal.fontColor;
        }

        if(eval(this.objVal.backgroundTransparency)){
          style.background = 'rgba(0, 0, 0, ' + 0 + ')';
        }else{
          style.background = this.objVal.backgroudColor
        }

        return style;
      }
    }
  },

  methods: {
    clickHandler() {
      //预览页面启用链接功能
      if (eval(this.preview) && this.objVal.linkUrl) {
        let data = this.displayData;
        //表单参数、api参数、url参数
        let paramData = this.getQueryParam();

        let linkUrl = this.fullPath(this.objVal.linkUrl);

        linkUrl = URLParser.parse(linkUrl, data, paramData);

        if ("blank" == this.objVal.targetType) {
          window.open(linkUrl, "_blank");
        } else {
          window.top.location.href = linkUrl;
        }
      }
    },
    init() {
      this.queryData();
    },
    refresh() {
      this.queryData();
    }
  },
  created() {
    if (!this.preview) {
      this.queryData();
    }
  },
  //初始化前
  mounted() {}
};
</script>
<style>
</style>
