<template>
  <div v-if="dataList.length" class="template-box">
    <div class="ul-box">
      <template v-for="(item,index) in dataList[0]">
        <cube-card :key="item.id" @click.native="switchLi(index)" :class="liIndex==index ? 'current' :''" :dataBody="item.body" :dataHeaders="item.headers" :params="item.config || item.code"></cube-card>
      </template>
    </div>
    <div v-if="dataList[1].length">
      <cube-echart v-if="dataList[1][liIndex].body.length"  :dataBody="dataList[1][liIndex].body" :dataHeaders="dataList[1][liIndex].headers" :params="dataList[1][liIndex].config || dataList[1][liIndex].code"></cube-echart>
    </div>
  </div>
</template>
<script>
export default {
  name: 'cube-link-card',
  props: {
    dataList: {
      type: Array,
      required: true,
      default: function () {
        return [[], []]
      }
    },
  },
  data() {
    return {
      liIndex: 0,
    }
  },
  methods: {
    switchLi(index) {    //切换
      if (index < this.dataList[1].length) {
        this.liIndex = index;
      } else {
        alert('请添加对应的chart图')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.template-box {
  .ul-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 1em;
  }
}
</style>
