<template>
  <div>
    <div class="dataList">
      <ul class="dataListBox">
        <li class="dataListBox_til" v-if="typeof(title) != 'string'">
          <p v-for="(value,index) in title" :key="index">{{value}}</p>
        </li>
        <li class="dataListBox_til" v-else>
          <p>{{title}}</p>
        </li>
        <li class="dataListBox_head" v-if="head">
          <p v-for="(value,index) in head" :key="index">{{value}}</p>
        </li>
        <li v-for="(value,index) in data" :key="index">
          <p>{{value.name}}</p>
          <p>{{value.num}}{{value.unit}}</p>
        </li>
      </ul>
      <Corner v-if="cornerFlag" />
      <slot else name="corner"></slot>
    </div>
  </div> 
</template>
<script>

import Corner from "@/components/Corner"
export default {
  components:{
    Corner
  },
  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: .03rem 0;
  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 li {
  display: flex;
  justify-content: space-between;
  padding: 0.054rem .08rem;
  background: linear-gradient(to right, #0072ff, #00eaff, #01aaff);
  -webkit-background-clip: text;
}
.dataListBox li p {
  color: #09f2ff;
  font-size: 0.06rem;
  line-height: 0.06rem;
}
.dataListBox li:hover:not(.dataListBox_til) {
  background: linear-gradient(to right, #061266, #0b1c84, #061266);
}
.dataListBox .dataListBox_til p {
  color: #fff;
  font-weight: bold;
}
.dataListBox .dataListBox_head{
  background: linear-gradient(to right, #061266, #0b1c84, #061266);
}
</style>