<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>{{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','head','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 scoped>
/*列表*/
.dataList {
  background: url("../../../assets/images/moduleBg01.png") no-repeat left top;
  background-size: 100% 100%;
  padding: .05rem;
  position: relative;
}
.bg-horn{
  position: absolute;
  width: .1rem;
  height: .1rem;
  background: url("../../../assets/images/module-horn.png") no-repeat; 
  background-size: 100% 100%;
}
.bg-horn.top-left{
  top: 0;
  left: 0;
}
.bg-horn.top-right{
  transform:rotate(90deg);
  top: 0;
  right: 0;
}
.bg-horn.bottom-left{
  transform:rotate(270deg);
  bottom: 0;
  left: 0;
}
.bg-horn.bottom-right{
  transform:rotate(180deg);
  bottom: 0;
  right: 0;
}
.dataList>ul{
  flex:1;
}
.dataListBox{
  width: 100%;
}
.dataListBox thead td{
  color: #09f2ff;
  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: linear-gradient(to right, #061266, #0b1c84, #061266);
}
.dataListBox tbody tr td{
  color: #09f2ff;
  font-size: 0.06rem;
  line-height: 0.06rem;
  padding: 0.06rem .02rem;
}
</style>