<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/Corner1'
export default {
  components: {
    Corner
  },
  props: ['data', 'head', 'title'],
  data () {
    return {
      cornerFlag: true
    }
  },
  created () {},
  mounted () {
    this.renderCorner()
  },
  methods: {
    renderCorner () {
      // 判断插槽是否有自定义corner有则加载自定义，否则用默认
      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: .03rem 0;
  position: relative;
  >ul{
    flex:1;
  }
  li {
    display: flex;
    justify-content: space-between;
    padding: 0.054rem .08rem;
    /*background: linear-gradient(to right, #0072ff, #00eaff, #01aaff);*/
    /*-webkit-background-clip: text;*/
    p {
      color: $listTextColor;
      font-size: 0.06rem;
      line-height: 0.06rem;
    }
  }
  li:hover:not(.dataListBox_til) {
    background: $gradientListHover;
  }

  .dataListBox_til p {
    color: #fff;
    font-weight: bold;
  }

  .dataListBox_head{
    background: $gradientListHover;
  }
}

</style>