<template>
  <div class="tabs-list-wrap">
    <Row :gutter="16">
      <Col :span="spanNum" v-for="(item, index) in tabsData" :key="index" :style="'width:'+ w">
        <div class="tabs-list">
          <img :src="tabsIcon[index].imgSrc" >
          <div>
            <p>{{ item.name }}</p>
            <p :style="'color:'+tabsTitleColor[index]" class="tabs-list-value">{{ item.value }}<span class="tabs-list-company">{{unitArr[index]}}</span></p>
          </div>
        </div>
      </Col>
    </Row>
  </div>
</template>
<script>
export default {
  name: "StatisticsList",
  props: {
    tabsInitData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    tabsIcon: {
      type: Array,
      default: () => {
        return [];
      },
    },
    tabsTitleColor: {
      type: Array,
      default: () => {
        return [];
      },
    },
    unitArr: {
      type: Array,
      default: () => {
        return [];
      },
    },
    spanNum: {
      type: Number,
      default: 6
    },
    url: {
      type: String,
      default: ''
    },
    w:{
      type: String,
      default: ''
    },
    statisParams: {
      type: Object,
      default: () => {
        return {};
      },
    }
  },
  components:{
  },
  data() {
    return {
      tabsData: []
    };
  },
  mounted() {
    this.tabsData = this.tabsInitData
    this.getStatisList()
  },
  methods: {
   getStatisList () {
     // 如果对象属性值为-1，动态设置为空字符串
    let params =JSON.parse(JSON.stringify(this.statisParams))
    Object.entries(params).forEach(([key,value])=>{
      if (value == '-1') {
       params[key] = ''
      }
    })
     this.$get(this.url,params).then(res=>{
        if (res.httpCode == 1){
          this.tabsData = res.data.data
        } else {
          this.tabsData = this.tabsInitData
          this.$Message.info(res.msg)
        }
      })  
   }
  }
};
</script>
<style scoped lang="stylus">
.tabs-list-wrap {
  display: flex;
  justify-content: space-between;
}
.tabs-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  background: #0B2856;
  border: 1px solid #204384;
  height: 120px;
  font-size: 14px;
  color: #0185EA;
  img {
    margin-right: 30px;
  }
  .tabs-list-value {

    font-size: 30px;
  }
  .tabs-list-company {
    font-size: 14px;
    margin-left: 6px;
  }
}
>>> .ivu-row {
  width: 100%;
  margin: 0 !important;
}
>>> .ivu-row .ivu-col:first-child {
  padding-left: 0px !important;
}
>>> .ivu-row .ivu-col:last-child {
  padding-right: 0px !important;
}
</style>