<template>
  <div class="bi-square-sign height100">
    <div class="squarebox">
      <div
        v-for="(item, index) in list"
        :key="index"
        :style="{width:colPer,height:  ( itemHeight2?itemHeight2:(data.dataType==1?'auto':'100%')),margin:data.itemMargin?(data.itemMargin+'px 0'):'0 0'}"
        class="allsquare"
      >
        <!-- <div class="linebox fr" v-if="!hiddenLine">
          <div v-if="item.hidden" class="lines"></div>
        </div>-->
        <div
          :class="'square fr '+((!isEditable&&(data.interUrl||data.codeUrl))?'canClick':'')"
          @click="clickLink($event, item)"
          :style="{background:item.backgroundColor||'transparent',flexDirection:showStyle,borderRight:(!hiddenLine&&!item.hidden)?'1px dashed #d7d7d7':'0'}"
        >
          <div
            class="showName text hidden nowrap ellipsis"
            :style="{color:(data.titleColor||titleColor),fontSize:(data.titleFontSize+'px')||titleFontSize}"
            :title="item.showName"
          >{{item.showName}}</div>
          <div
            class="showValue"
            :style="{fontSize:(item.fontSize||fontSize)+'px',width:'100%', color:(item.fontColor||fontColor),display:'flex',justifyContent:'center'}"
          >
            <!-- <div class="text hidden nowrap ellipsis" :title="isEditable?100:item.showValue||'-'"  v-if="item.selectDataSourceCode">{{isEditable?100:item.showValue||'-'}}</div> -->
            <div
              class="text hidden nowrap ellipsis"
              :title="isEditable?100:item.showValue||'0'"
            >{{isEditable?100:item.showValue||'0'}}</div>
            <div
              :style="{fontSize:(item.unitSize||fontSize)+'px', color:(item.unitColor||fontColor)}"
              v-if="item.unit&&item.unit!='无'"
            >{{item.unit}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import _ from 'lodash'
import biUtils from '../../utils/biUtils'
export default {
  name: 'suqareSign',
  props: {
    isEditable: {
      type: [Boolean, String],
      default: false
    },
    title: {
      type: [String, Number],
      default: ''
    },
    id: {
      type: String,
      default: ''
    },
    width: { type: [String, Number], default: 0 },
    height: { type: [String, Number], default: 0 },
    hiddenLine: {
      // 是否隐藏线
      type: Boolean,
      default: true
    },
    data: {
      type: Object,
      default: () => []
    },
    backgroundColor: {
      // 背景颜色
      type: String,
      default: ''
    },
    titleColor: {
      // 标题颜色
      type: String,
      default: '#333'
    },
    titleFontSize: {
      // 标题文字大小
      type: String,
      default: '12px'
    },
    fontSize: {
      // 值大小
      type: String,
      default: '12px'
    },
    fontColor: {
      // 值颜色
      type: String,
      default: '#333'
    },
    unitSize: {
      // 单元大小
      type: String,
      default: '12px'
    },
    unitColor: {
      // 单元颜色
      type: String,
      default: '12px'
    },
    biData: {
      // bi预览后的data
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      itemHeight2:'',
      showStyle: 'column',
      titleColor2: '#f23',
      allheight: '100%',
      colNumber: 3,
      colPer: '33%',
      rowNumber: 1,
      rowPer: '50%',
      colRepeat: 'repeat(3, 33.33%)',
      rowRepeat: 'repeat(2, 50%)',
      list: [
        // { name:'字段名字', showName: '显示名称', color:'#0079fe', fontsize:12, background:'red' }
      ],
      uuid: this.$utils.uuid(16),
      panelId: 'panel' + this.$utils.uuid(16),
    }
  },
  created() {},
  mounted() {
    this.initSquare()
  },
  methods: {
    initSquare() {
      this.showStyle = this.data.showStyle || 'column'
      // this.titleFontSize = this.data.titleFontSize
      //   ? this.data.titleFontSize + 'px'
      //   : this.titleFontSize
      // this.titleColor = this.data.titleColor || this.titleColor
      if (!this.isEditable && this.biData && this.biData.length > 0) {
        this.list = [...this.biData]
      } else {
        this.list = this.data.dataSourceData
      }

      this.colNumber = parseInt(this.data.colNumber)
      this.rowNumber = Math.ceil(
        this.data.dataSourceData.length / this.colNumber
      )
      this.rowPer = 100 / this.rowNumber + '%'
      this.colPer = 100 / this.colNumber + '%'
      this.allheight = 'calc(100% - ' + 5 * this.rowNumber + 'px)'
      this.itemHeight2 = this.data.itemHeight
          ? (typeof(this.data.itemHeight)=='string'&&this.data.itemHeight.indexOf('%') > -1
            ? (this.list.itemMargin
          ? `calc(${this.data.itemHeight} - ${this.list.itemMargin * 2}px)`:this.data.itemHeight)
            : (parseInt(this.data.itemHeight) + 15 + 'px'))
          : ''
      // this.colRepeat = 'repeat(' + this.colNumber + ', ' + this.colPer + '%)'
      // this.rowRepeat = 'repeat(' + this.rowNumber + ', ' + this.rowPer + '%)'
      let _this = this
      this.list.forEach((res, index) => {
        if (index == _this.list.length - 1) {
          res.hidden = true //最后一个去掉分隔符
        } else {
          if ((index + 1) % _this.colNumber == '0') {
            res.hidden = true //判断每行最后一列。可以被整除的是最后一列
          } else {
            res.hidden = false
          }
        }
      })
    },
    clickLink(ev, item) {
      if (!this.isEditable) {
        if (!this.data.interUrl && !this.data.codeUrl && !item.linkUrl) {
          return false
        }
        // 预览
        let url = item.linkUrl
        if (!url && (this.data.interUrl || this.data.codeUrl)) {
          if (this.data.urlType == 1) {
            url = item.data ? item.data[this.data.codeUrl] : ''
          } else {
            url = this.data.interUrl
          }
          if (this.data.interTargetParam && this.data.interSourceParam) {
            url =
              url +
              '?' +
              this.data.interTargetParam +
              '=' +
              item.data[this.data.interSourceParam]
          }
        }
        // 非完整的URL，需拼接
        if (
          url &&
          url.indexOf('http://') != 0 &&
          url.indexOf('https://') != 0 &&
          url.indexOf('sso://') != 0
        ) {
          url = location.href + url
        }
        url = url ? biUtils.setUserInfo(url, this.data, this) : url
        biUtils.goHrefUrl(global,url)
        //  window.open(item.linkUrl, '_blank') //跳转链接
        return false
      }
    }
  },
  watch: {
    data: {
      handler(n) {
        this.data = n
        this.initSquare()
        // this.list = this.data.dataSourceData
      },
      deep: true
    },
    biData: {
      handler(n) {
        this.initSquare()
      },
      deep: true
    }
  }
}
</script>
<style lang="less" scoped>
.bi-square-sign {
  width: 100%;
  .squarebox {
    // grid-row-gap: 5px;
    // grid-column-gap: 1px;
    // flex-direction: column;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    font-size: 12px;
    justify-items: center;
    align-items: center;
    .allsquare {
      width: 100%;
      height: 100%;
      .square {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        // border-radius: 4px;
        position: relative;
        height: 100%;
        width: calc(100% - 4px);
        .showValue {
          // height: 50%;
          // width: 100%;
          // display: flex;
          // justify-content: center;
          padding: 4px;
        }
        .showName {
          min-width: 100px;

          // height: 50%;
          // width: 100%;
          // display: flex;
          //  justify-content: center;
          text-align: center;
          // padding: 2px 4px 4px 2px;
          padding: 4px;
        }
      }
      .linebox {
        height: 100%;
        width: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .lines {
        width: 1px;
        height: 80%;
        border-right: 1px dashed #d7d7d7;
        // background: red;
        // position: absolute;
        // top: 0;
        // right: 0;
      }
      // .lines:before {
      //   content: '';
      //   width: 1px;
      //   height: 50%;
      //   display: block;
      //   background: -webkit-linear-gradient(#ffffff, #999999);
      //   /* Safari 5.1 - 6.0 */
      //   background: -o-linear-gradient(#ffffff, #999999);
      //   /* Opera 11.1 - 12.0 */
      //   background: -moz-linear-gradient(#ffffff, #999999);
      //   /* Firefox 3.6 - 15 */
      //   background: linear-gradient(#ffffff, #999999);
      //   /* 标准的语法 */
      // }
      // .lines:after {
      //   content: '';
      //   width: 1px;
      //   height: 50%;
      //   display: block;
      //   background: -webkit-linear-gradient(#999999, #ffffff);
      //   /* Safari 5.1 - 6.0 */
      //   background: -o-linear-gradient(#999999, #ffffff);
      //   /* Opera 11.1 - 12.0 */
      //   background: -moz-linear-gradient(#999999, #ffffff);
      //   /* Firefox 3.6 - 15 */
      //   background: linear-gradient(#999999, #ffffff);
      //   /* 标准的语法 */
      // }
    }
  }
}
</style>
