<!--
  @name: 表格
  @description: -
  @author 张文
  @date: 2022-01-24
-->
<template>
  <div class="ty-table-box">
    <!-- 表头 -->
    <div class="ty-global-flex-center ty-table-top">
      <template v-for="(item,index) in title">

        <!-- 存在复杂表头 -->
        <div
          v-if="item.children && item.children.length"
          :style="item.width?{flexBasis:item.width+'px',flexGrow:0,overflow:'hidden'}:{}"
          style="padding: 0"
          class="ty-table-title"
          :key="index"
        >

          <!-- 复杂表头的一级表头 -->
          <div
            :style="{
              flexBasis:item.width+'px' || '',
              flexGrow:item.width?0:'1',
              background:item.background || '',
              color:item.color || '',
              borderRight:'none'
            }"
            class="ty-global-flex-center ty-table-title"
          >{{item.title}}</div>

          <!-- 复杂表头的二级表头 -->
          <div style="width:100%" class="ty-global-flex-center">
            <div
              v-for="(i,k) in item.children"
              :key="k"
              :style="{
                flexBasis:i.width+'px' || '',
                flexGrow:i.width?0:'1',
                background:item.background || '',
                color:item.color || '',
                borderBottom:'none'
              }"
              class="ty-table-title"
            >{{i.title}}</div>
          </div>
        </div>

        <!-- 非复杂表头 -->
        <div
          v-else
          :key="index"
          :style="{
            flexBasis:item.width+'px' || '',
            flexGrow:item.width?0:'',
            background:item.background || '',
            color:item.color || ''
          }"
          class="ty-global-flex-center ty-table-title ty-table-height-auto"
        >{{item.title}}</div>

      </template>
    </div>

    <!-- 数据 -->
    <div class="ty-table-data-box">
      <div
        v-for="(col,key) in data"
        :key="key"
        class="ty-global-flex-center ty-global-click-style ty-table-data-body"
        @click="colClick(col)"
      >
        <template v-for="(item,index) in title">

          <div
            class="ty-global-flex-center ty-table-child-title"
            v-if="item.children && item.children.length"
            :style="item.width?{flexBasis:item.width+'px',flexGrow:0,overflow:'hidden'}:{}"
            :key="index"
          >
            <div
              v-for="(i,k) in item.children"
              :key="k"
              :style="{
                color:i.color || '',
                flexBasis:i.width+'px' || '',
                flexGrow:i.width?0:'1'
              }"
              class="ty-global-flex-center ty-table-child-title"
            >{{ colDataFormat(col[i.props]) }}</div>
          </div>


          <div
            v-else
            :key="index"
            :style="item.width?
              {flexBasis:item.width+'px',flexGrow:0,color:item.color}:
              {color:item.color}
            "
            class="ty-global-flex-center ty-table-child-title"
          >{{ colDataFormat(col[item.props]) }}</div>

        </template>
      </div>

      <!-- 空数据状态 -->
      <ty-not-data v-if="data.length===0"/>
    </div>
  </div>
</template>

<script>

export default {
  name: "tyTable",
  props:{
    // 表头
    title:Array,

    // 数据
    data:Array
  },
  data() {
    return {}
  },
  methods: {
    // 某一列被点击
    colClick(col){
      this.$emit('colClick', col)
    },

    // 格式化数据
    colDataFormat(data){
      if (data || data === 0){
        return data
      }
      return '-'
    }
  }
}
</script>

<style scoped lang="less">

@import "../../assets/css/var.less";

.ty-table-box{
  border: solid 1px @borderColor;
  border-radius: 6px;
  overflow: hidden;
}

.ty-table-top{
  align-items: stretch;
}


.ty-table-title{
  padding: 4px 0 ;
  background-color: @tableTitleBackgroundColor;
  color: @tableTitleColor;
  border-bottom: solid 1px @borderColor;
  border-right: solid 1px @borderColor;
  flex: 1;
  box-sizing: border-box;

  &:last-child{
    border-right: none;
  }
}

.ty-table-child-title{
  color: @tableBodyColor;
  flex: 1;
  border-right: solid 1px @borderColor;
  height: 30px;
  overflow: auto;
  white-space: nowrap;
  box-sizing: border-box;

  &:last-child {
    border-right: none;
  }
}

.ty-table-height-auto{
  height: auto;
}

.ty-table-data-body{
  border-bottom: solid 1px @borderColor;

  &:last-child{
    border-bottom: none;
  }
}

.ty-table-none-data{
  width: 100%;
  height: 60px;
  background: @tableBodyBackgroundColor;
  color: @tableBodyColor;
}

.ty-table-data-box{
  overflow: hidden;
  transition: all .3s;
}

</style>
