<!--
  数据看板
  @author: 张文
  @date: 2022-05-06
-->
<template>
  <div
    :class="[
      'ty-global-flex-around',
      'ty-look-data-bg-boss',
      clickStyle ? 'ty-global-click-style' : '',
      type !== 'null' ? 'ty-look-data-bg-box' : '',
      `ty-look-data-bg-` + type
    ]"
    @click="$emit('click')"
  >

    <div
      v-for="(i,k) in showDate"
      :key="k"
      :style="{color: i.color}"
    >
      <div>{{ i.value || 0 }}</div>
      <div>{{ i.title }}</div>
    </div>

    <slot></slot>

  </div>
</template>

<script>

export default {
  name: "tyDataLookBg",
  props:{
    // 背景图样式 all - 全圆角，bottom - 底部圆角，top - 顶部圆角，not - 没有圆角，null - 不要背景色
    type:{
      type: String,
      default: 'all'
    },
    // 是否需要点击样式
    clickStyle: Boolean,

    // 需要渲染的数据
    data:{
      type: [Array, Object],
      default: () => []
    }
  },
  computed:{
    // 渲染的数据转换
    showDate(){
      if (Array.isArray(this.data)){
        return this.data
      }

      let arr = []
      for (let i in this.data){
        arr.push(this.data[i])
      }
      return arr
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style scoped lang="less">
@import "./../../assets/css/var.less";

.ty-look-data-bg-boss{
  width: 100%;
  height: 75px;
  text-align: center;

  >div{
    text-align: center;
    flex-grow: 1;

    &>div{
      &:first-child{
        font-weight: bold;
      }
      &:last-child{
        font-size: 12px;
        margin-top: 3px;
      }
    }

    &:last-child{
      position: relative;

      &::before {
        content: ' ';
        display: inline-block;
        width: 1px;
        height: 50%;
        background: #fff;
        position: absolute;
        top: 25%;
        left: 0;
      }
    }
  }
}

.ty-look-data-bg-box{
  background: @lookDataBg;
  color: #fff;
}

.ty-look-data-bg-all{
  border-radius: 10px;
}

.ty-look-data-bg-top{
  border-radius: 10px 10px 0 0;
}

.ty-look-data-bg-bottom{
  border-radius: 0 0 10px 10px;
}

.ty-look-data-bg-null{
  >div:last-child::before{
    background: #232323;
  }
}

</style>
