<template>
  <div class="flex">
    <!--<cardinfo :data="cardData" v-if="cardData.CardID"></cardinfo>-->
    <sale-userinfo :warninginfo="warninginfo" @deal-msg="dealMsg" :data="data"></sale-userinfo>
    <user-meterinfodetail @deal-msg="dealMsg" :data="data"></user-meterinfodetail>
    <user-deviceinfodetail @deal-msg="dealMsg" :data="data"></user-deviceinfodetail>
    <!--<meter-use :data="data"></meter-use>-->
    <!--<recordstoryinfo :data="data" v-ref:recordstoryinfo></recordstoryinfo>-->
  </div>
</template>

<script>
/**
*客户相关信息
*/

export default {
  title: '客户相关信息',
  data () {
    return {
    }
  },

  props: {
    data: {
      type: Object
    },
    cardData: {
      type: Object,
      default: function () {
        return {}
      }
    },
    warninginfo: {
      type: Object,
      default: {}
    }
  },
  methods: {
    dealMsg (obj) {
      this.$dispatch('deal-msg', obj)
    }
  }
}
</script>
<style lang="less">
  #mulit-info-class {
    width: 280px;
    margin-right: 20px;
    overflow-y: auto;
    > div {
      height: auto;
      margin-bottom: 8px;
    }
  }
  // 内容显示样式
  .control-label {
    height: 23px;
    border-right: 1px solid #F2F6FA;
    margin-bottom: 0;
    text-align: left;
  }

  .info-content {
    padding:6px;
    span {
      padding-left: 5px;
    }
  }
// 信息区域的表格显示紧凑
  .self-table > tbody > tr > td {
    padding: 3px;
    text-align: center;
  }
</style>
