<template>
<div class="main-contain">
  <div class="app-container">
   <div class="RealContent">
     <ul>
       <li v-for="(number , index) in numbers" :key="index" >
         <p class="num">{{number.num}}</p>
            <span class="name">{{number.name}}</span>
            <span class="time">{{number.time}}</span>
       </li>
     </ul>
   </div>
   <div class="notice">
     <el-table ref="notice_table" :data="notices" @row-click="expandRow">
       <el-table-column
        type="selection"
        width="30">
       </el-table-column>
       <el-table-column type="expand" width="20">
         <template slot-scope="scope">
           <p class="notice_expand_content">{{ scope.row.content }}</p>
           <p class="notice_expand_publisher">酷医聚客团队</p>
         </template>
       </el-table-column>
       <el-table-column prop="title" label="所有通知"></el-table-column>
     </el-table>
   </div>
  </div>
</div>

</template>
<script>
export default {
  name: 'Home',
  data() {
    return {
      numbers: [
        { num: '0', name: '新增数量', time: '昨日: 0' },
        { num: '0', name: '总粉丝', time: '昨日: 0' },
        { num: '0', name: '今日新增会员', time: '昨日: 0' },
        { num: '0', name: '总会员', time: '昨日: 0' },
        { num: '0', name: '商品浏览数', time: '昨日: 0' },
        { num: '0', name: '文章浏览量', time: '昨日: 0' },
        { num: '0', name: '活动浏览量', time: '昨日: 0' },
        { num: '0', name: '新增订单', time: '昨日: 0' }
      ],

      expanding_row: null,
      notices: [
        // { id: 1, title: "第一个通知", content: "第一个通知第一个通知第一个通知第一个通知第一个通知第一个通知第一个通知第一个通知第一个通知第一个通知" }, 
        // { id: 2, title: "第二个通知", content: "第二个通知第二个通知第二个通知第二个通知第二个通知第二个通知第二个通知第二个通知第二个通知第二个通知第二个通知第二个通知第二个通知第二个通知第二个通知第二个通知第二个通知第二个通知第二个通知第二个通知" }, 
      ],
    }
  },
  methods: {
    expandRow: function(row, column, event) {
      if (this.expanding_row == null || this.expanding_row.id != row.id) {
        this.$refs.notice_table.toggleRowExpansion(this.expanding_row, false)
        this.$refs.notice_table.toggleRowExpansion(row, true)
        this.expanding_row = row
      } else {
        this.$refs.notice_table.toggleRowExpansion(this.expanding_row, false)
        this.expanding_row = null
      }
    }
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-container {
  margin: 15px;
  min-height: calc(100vh - 140px);
  .RealContent {
    text-align: center;
    box-shadow: 4px 4px 8px #dde7f2;
    ul {
      display: flex;
      li {
        padding: 22px 0 25px 0;
        flex: 1;
        justify-content: center;
        align-items: center;
        .num {
          font: 36px/72px "Arial";
          color: #58a2ec;
        }
        .name {
          font-size: 13px;
          color: #485b6d;
          margin-bottom: 8px;
          display: block;
        }
        .time {
          font-size: 12px;
          color: #89949b;
        }
      }
    }
  }

  .notice {
    box-shadow: 4px 4px 8px #dde7f2;
    margin-top: 20px;

    .notice_expand_content {
      color: #89949b;
      font-size: 15px;
      line-height: 25px;
    }
    .notice_expand_publisher {
      font-size: 14px;
      margin-top: 10px;
    }
  }
}
</style>
