<template>
  <page-header-wrapper>
    <div class="card">
      <a-tag class="head-info" color="pink">
        <span>
          <a-icon type="calculator" />今日测量</span>
        <p>{{ content }}</p>
      </a-tag>
      <a-tag class="head-info" color="pink">
        <span>
          <a-icon type="check-circle" />昨日测量</span>
        <p>{{ content }}</p>
      </a-tag>
      <a-tag class="head-info" color="pink">
        <span>
          <a-icon type="stop" />累计称重</span>
        <p>{{ content }}</p>
      </a-tag>
    </div>
    <!--  -->
    <div class="card_item">
      <div class="cardInfo f-l">
        <a-table :columns="columns" :data-source="data" bordered :pagination="false">
          <template slot="name" slot-scope="text">
            <a>{{ text }}</a>
          </template>
          <template slot="title">
            <div class="item item1">
              <span>本周测量次数</span>
            </div>
          </template>
        </a-table>
      </div>
      <!--  -->
      <div class="cardInfo f-r">
        <a-table :columns="columns" :data-source="data" bordered :pagination="false">
          <template slot="name" slot-scope="text">
            <a>{{ text }}</a>
          </template>
          <template slot="title">
            <div class="item item1">
              <span>7日活跃人群数据统计</span>
            </div>
          </template>
        </a-table>
      </div>
    </div>
  </page-header-wrapper>
</template>

<script>
  const columns = [{
      title: '人群',
      dataIndex: 'name',
      scopedSlots: {
        customRender: 'name'
      },
    },
    {
      title: '指数范围',
      children: [{
          title: '16~30（岁）',
          dataIndex: 'companyAddress',
          key: 'companyAddress',
        },
        {
          title: '31~45（岁）',
          dataIndex: 'companyName',
          key: 'companyName',
        },
      ],
    },
    {
      title: '人数',
      dataIndex: 'address',
    },
  ]

  const data = [{
    key: '1',
    name: '0次',
    companyAddress: '>28',
    companyName: '>30',
    address: '23',
  }, {
    key: '2',
    name: '1~4次',
    companyAddress: '>28',
    companyName: '>30',
    address: '23',
  }, {
    key: '3',
    name: '5~7次',
    companyAddress: '>28',
    companyName: '>30',
    address: '23',
  }, {
    key: '4',
    name: '7次以上',
    companyAddress: '>28',
    companyName: '>30',
    address: '23',
  }]
  export default {
    name: 'Analysis',
    data() {
      return {
        columns,
        data,
        content: 25,

      }
    },
    created() {
      setTimeout(() => {
        this.loading = !this.loading
      }, 1000)
    },
  }
</script>

<style lang="less" scoped>
    .card {
      background: #fff;
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      padding: 20px;
    }
    .anticon {
      font-size: 17px;
      margin-right: 15px;
      top: 3px;
      position: relative;
      left: 0px;
    }
    
    .head-info {
      text-align: center;
      padding: 20px 24px;
      -ms-flex-positive: 1;
      -ms-flex-negative: 0;
      -ms-flex-item-align: center;
      align-self: center;
      border: 1px solid #dfdfdf;
      width: 30%;

      p {
        font-size: 24px;
        margin-bottom: 0;
        // color: #52c41a;
      }
    }

    .card_item {
      width: 100%;
      height: auto;
      overflow: hidden;
      margin-top: 20px;
      padding: 20px;
      background-color: #fff;
    }

    .cardInfo {
      width: 45%;
      background: #fff;
      display: block;

      .item {
        width: 100%;

        span {
          display: inline-block;
          width: 30%;
          text-align: center;
        }

        span:nth-child(1) {
          width: 70%;
          background-color: #fafafa;
          text-align: left;
          padding-right: 0;
          font-weight: 600;
        }
      }

      .item1 {
        span {
          text-align: right;
          font-size: 16px;
          font-weight: 600;
        }

        span:nth-child(1) {
          border-right: none;
          background-color: #fff;
          padding-right: 0;
        }
      }
    }

</style>
