<template>
  <div class="aiDvTable">
    <div class="header">
      <span v-for="(item, index) in header" :key="index">{{ item }}</span>
    </div>
    <div class="body">
      <div class="row" v-for="(item, index) in body" :key="index">
        <span v-for="(column, i) in item" :key="i">{{ column }}</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'AiDvTable',

    props: {
      data: {
        type: Array,
        default: () => []
      }
    },

    data () {
      return {
        header: [],
        body: []
      }
    },

    watch: {
      data: {
        handler (v) {
          this.init(v)
        },
        deep: true,
        immediate: true
      }
    },

    mounted () {
    },

    methods: {
      init (value) {
        if (!value.length) {
          this.header = []
          this.body = []

          return false
        }

        const headerKey = Object.keys(value[0])[0]
        const bodyKey = Object.keys(value[0]).filter(v => v !== headerKey)
        this.header = this.data.map(v => v[headerKey])
        this.body = bodyKey.map(v => {
          return value.map(e => e[v])
        })
        console.log(this.body)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .aiDvTable {
    .header {
      display: flex;
      align-items: center;
      width: 100%;
      height: 40px;
      padding: 0 20px;
      background: #252525;

      span {
        flex: 1;
        font-size: 16px;
        text-align: center;
        color: #bfc0bb;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow:ellipsis;

        &:first-child {
          text-align: left;
        }
      }
    }

    .body {
      padding: 10px;
      .row {
        display: flex;
        align-items: center;
        width: 100%;
        height: 52px;

        span {
          flex: 1;
          font-size: 16px;
          text-align: center;
          color: #ffffff;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow:ellipsis;

          &:first-child {
            text-align: left;
          }
        }
      }
    }
  }
</style>
