<template>
  <div>
    <div class="dataList">
      <table class="dataListBox">
        <thead>
          <tr v-if="typeof(title) != 'string'">
            <td v-for="(value,index) in title" :key="index">{{value}}</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(value,index) in data" :key="index">
            <td>{{value.name}}</td>
            <td>{{value.num1}}</td>
            <td v-if="value.num2">{{value.num2}}</td>
            <td v-if="value.num3">{{value.num3}}</td>
          </tr>
        </tbody>
      </table>
      <Corner2 v-if="cornerFlag" />
      <slot else name="corner"></slot>
    </div>
  </div>
</template>
<script>

import Corner2 from '@/components/Corner2'
export default {
  components: {
    Corner2
  },
  props: ['data', 'title'],
  data () {
    return {
      cornerFlag: true
    }
  },
  created () {},
  mounted () {
    this.renderCorner()
  },
  methods: {
    renderCorner () {
      let corner = this.$scopedSlots.corner
      if (corner) {
        this.cornerFlag = false
      } else {
        this.cornerFlag = true
      }
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import '../../assets/css/variable.scss';
/*列表*/
.dataList {
  background: url("../../assets/images/moduleBg01.png") no-repeat left top;
  background-size: 100% 100%;
  padding: .05rem;
  position: relative;
}
.dataList>ul{
  flex:1;
}
.dataListBox{
  width: 100%;
}
.dataListBox thead td{
  color: $listTextColor;
  font-size: 0.06rem;
  line-height: 0.06rem;
  color: #fff;
  font-weight: bold;
  padding: 0.06rem .02rem;
}
.dataListBox tbody tr {
  background: linear-gradient(to right, #0072ff, #00eaff, #01aaff);
  -webkit-background-clip: text;
}
.dataListBox tbody tr:hover:not(.dataListBox_til) {
  background: $gradientListHover;
}
.dataListBox tbody tr td{
  color: $listTextColor;
  font-size: 0.06rem;
  line-height: 0.06rem;
  padding: 0.06rem .02rem;
}
</style>