<!--
    清单页头部个数组件
-->
<template>
    <div id="listHeader">
        <div class="border-main">
            <p class="list-name">项目名称： {{mess.perjectName}}</p>
            <div class="card-view">
                <div class="card" v-for="(i,index) in mess.name" :key="index">
                    <p>{{index == 1 ? "已对应" : "全部"}}{{i.key}}</p>
                    <p class="num">{{i.num |numFormat}}</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  props: {
    mess: {
      type: Object,
      default: function() {
        return {
          perjectName: "风雅苑",
          name: [
            {
              key: "测试",
              num: 1548514
            },
            {
              key: "测试",
              num: 154852145
            }
          ]
        };
      }
    }
  },
  data() {
    return {};
  },
  methods: {
  },
  filters: {
    numFormat(num) {
      if (num && num != null) {
        num = String(num);
        var left = num.split(".")[0],
          right = num.split(".")[1];
        right = right
          ? right.length >= 2
            ? "." + right.substr(0, 2)
            : "." + right + "0"
          : "";
        var temp = left
          .split("")
          .reverse()
          .join("")
          .match(/(\d{1,3})/g);
        return (
          (Number(num) < 0 ? "-" : "") +
          temp
            .join(",")
            .split("")
            .reverse()
            .join("") +
          right
        );
      } else if (num === 0) {
        // 注意===在这里的使用，如果传入的num为0,if中会将其判定为boolean类型，故而要另外做===判断
        return "0";
      } else {
        return "--";
      }
    }
  }
};
</script>
<style lang="less" scoped>
#listHeader {
  background-color: #fff;
//   width: calc(100% - 20px);
//   height: 120px;
//   margin: 10px;
  .border-main {
    // width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding-left: 10px;
    .list-name {
      line-height: 28px;
      font-size: 14px;
      margin-top: 10px;
    }
    .card-view {
      // height: 80px;
      // overflow: hidden;
      .card {
        float: left;
        margin-top: 10px;
        height: 70px;
        width: 200px;
        border: 1px solid #a1a1a1;
        border-radius: 5px;
        background-color: #e4e4e4;
        padding: 10px;
        margin-right: 15px;
        p {
          color: #797979;
          font-size: 13px;
        }
        p.num {
          color: #3d3d3d;
          padding-left: 10px;
          padding-top: 5px;
          font-size: 17px;
        }
      }
    }
  }
}
</style>
