<template>
  <div class="allcontanier height100">
     <tsEmpty v-if="!list.data||list.data.length==0"></tsEmpty>
    <div class="data_box" v-else>
      <component
        :is="(isEditable||isShowBigScreen)&&list.childBorderType&&list.childBorderType.indexOf('dv-border-')>-1?list.childBorderType:'template'"
        v-for="(item, index) in list.data"
        :key="index+dataVKey_+list.dataVKey"
        :class="'item_box2 '+((!isEditable&&(data.interUrl||data.codeUrl))?'canClick':'')"
        @click="itemClick($event,item)"
        :style="{background:data.zebra&&index%2==1?'var(--light-back-grey)':data.itemBackground,height:itemHeight2, width:colPer,margin:(data.itemMargin||data.itemMarginCol)?((data.itemMargin||'0')+'px '+(data.itemMargin||'0')+'px'):'0 0',borderColor:data.borderColor,borderRadius:(data.itemRadius?(data.itemRadius+'px'):'4px'),border:isShowBigScreen&&list.childBorderType?'none !important':('1px solid '+data.borderColor)}"
        :color="['#0071FC ','#02D9FD']"
      >
       <img
          v-if="(isEditable||isShowBigScreen)&&list.childBorderType&&list.childBorderType.indexOf('dv-border-')==-1"
          style="height: 100%; width: 100%;position: absolute;left: 0px;top:0;"
          :src="require(`../../assets/images/${list.childBorderType}.png`)"
        />
        <!-- 数量 -->
        <div class="ball" v-if="list['numField']">{{item[list['numField']]}}</div>
        <!-- 患者360 -->
        <div
          class="patient_box"
          @click="openUrl($event,item[list['patient360']])"
          v-if="list['patient360']"
        >患者360视图</div>
        <div v-if="list['imgField']">
          <img
            :style="{height:data.imgHeight+'px',width:data.imgWidth+'px'}"
            :src="item[list['imgField']]"
            alt
          />
        </div>
        <div
          class="item_box"
          :style="{height:itemHeight,flexDirection:(!data.br?'row':'column'), width:'100%' }"
        >
          <div v-if="data['iconField']">
            <div v-for="icon in list.iconList" :key="icon.i">
              <img v-if="item[list['iconField']] == icon['iconValue']" :src="icon.iconUrl" alt />
              <!-- <img v-else class="img_icon" :src="icon.iconUrl" alt /> -->
            </div>
          </div>
          <div
            v-for="(child, i) in list.dataSourceData"
            :key="i"
            class="item_value text hidden nowrap ellipsis"
            :style="{textAlign:child.textAlign,width:child.childColW?child.childColW+'%':data.childColNum?(100/data.childColNum)+'%':'auto',margin:data.childTextMargin?data.childTextMargin+'px 0':'0'}"
          >
            <span
              v-if="child.showName"
              :style="{fontSize:child.fontSize}"
              :title="child.showName"
            >{{child.showName}}</span>
            <span
              v-if="child.field"
              class="border_nor_radius txt"
              :title="isEditable?100:item[child['field']]"
              :style="{fontSize:child.fontSize, background:child.backgroundColor||'transparent', color:child.fontColor}"
            >{{isEditable?100:splitNum(item[child['field']])}}</span>
          </div>
        </div>
      </component>
    </div>
  </div>
</template>
<script>
import _ from 'lodash'
import biUtils from '../../utils/biUtils'
export default {
  name: 'biPersonBlock',
  props: {
    dataVKey: {
      type: String,
      default: ''
    },
    isEditable: {
      type: Boolean,
      default: false
    },
    title: {
      type: [String, Number],
      default: ''
    },
    id: {
      type: String,
      default: ''
    },
    data: {
      type: Object,
      default: () => []
    },
    biData: {
      // bi预览后的data
      type: Array,
      default: () => {
        return []
      }
    },
    isShowBigScreen: {
      // 是否是大屏模式下
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      itemHeight2: '150px',
      itemHeight: '140px',
      allheight: '100%',
      allWidth: '100%',
      colNumber: 3,
      colPer: '33%',
      rowNumber: 8,
      rowPer: 50,
      colRepeat: 'repeat(3, 33.33%)',
      rowRepeat: 'repeat(2, 50%)',
      list: {},
      uuid: this.$utils.uuid(16),
      dataVKey_: this.dataVKey
    }
  },
  created() {},
  mounted() {
    this.initSquare()
  },
  computed: {},
  methods: {
    // 每项点击
    itemClick(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[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
      }
    },
    openUrl(ev, url) {
      if (!this.isEditable || url) {
        ev.stopPropagation()
        window.open(url, '_blank')
      }
    },
    splitNum(cellValue, dataOf) {
      return biUtils.splitNum(cellValue, dataOf)
    },
    initSquare() {
      this.$nextTick(() => {
        this.list = JSON.parse(JSON.stringify(this.data))
        if (this.isEditable) {
          this.list.data = [{}, {}, {}, {}, {}, {}]
        } else if (this.biData && this.biData.length > 0) {
          this.list.data = [...this.biData]
        }
        if (this.list.dataSourceData) {
          this.list.dataSourceData.forEach(ele => {
            ele.fontSize = ele.fontSize + 'px'
          })
        }
        this.colNumber = parseInt(this.list.colNumber)
        if (this.list.data) {
          this.rowNumber = Math.ceil(this.list.data.length / this.colNumber)
        }
        this.rowPer = 100 / this.rowNumber
        let col = 100 / this.colNumber + '%'
        this.colPer = this.list.itemMarginCol
          ? `calc(${col} - ${this.list.itemMarginCol * 2}px)`
          : col
        // this.allWidth = 'calc(100% - ' - 18 * (this.colNumber - 1) + 'px)'
        // this.colRepeat = 'repeat(' + this.colNumber + ', ' + this.colPer + '%)'
        this.itemHeight = '100%'
        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'))
          : '85px'
        // this.rowRepeat = 'repeat(' + this.rowNumber + ',' + (parseInt(this.data.itemHeight) + 10) + 'px)'
      })
    }
  },
  watch: {
    data: {
      handler(n) {
        this.initSquare()
      },
      deep: true
    },
    biData: {
      handler(n) {
        this.initSquare()
      },
      deep: true
    },
    dataVKey: {
      handler(n, o) {
        this.dataVKey_ = n
      },
      deep: true
    }
  }
}
</script>
<style lang="scss" scoped>
.border_nor_radius {
  border-radius: 2px;
  white-space: pre;
}

/deep/.border-box-content {
  height: auto;
}
.allcontanier {
  width: 100%;
  // overflow: auto;
  .data_box {
    // padding: 5px 5px 10px 10px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    // justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    // height: 100%;
    font-size: 12px;
    // justify-content: center;
    align-items: center;
    // overflow: auto;
    // .clickItem {
    //   .item_box:hover {
    //     span {
    //       color: var(--base-acv) !important;
    //       text-decoration: underline;
    //     }
    //   }
    //   cursor: pointer;
    // }
    .item_box2 {
      position: relative;
      width: calc(100%);
      padding: 0 7px;
      display: flex;
      align-items: center;
      border-radius: 4px;
      border: 1px solid #c7c7c7;
      box-sizing: border-box;
      .ball {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 25px;
        line-height: 25px;
        overflow: hidden;
        height: 25px;
        color: #ffffff;
        text-align: center;
        border-radius: 50%;
        background: #f59a23;
      }
      .patient_box {
        position: absolute;
        top: 10px;
        right: 10px;
        background: #66b5ff;
        color: #fff;
        width: 75px;
        border-radius: 4px;
        cursor: pointer;
        text-align: center;
        height: 25px;
        line-height: 25px;
      }
    }
    .item_box {
      flex: 1;
      height: 70px;
      // box-sizing: border-box;
      // padding: 7px;
      display: flex;
      // flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      .img_icon {
        height: 25px;
        width: 25px;
      }
      // .item_value {
      // width: 100%;
      // padding: 0 5px 0 5px;
      // }
    }
  }
}
</style>
