<template>
  <a-card size="small" :bordered="false">
    <div class="s-list">
      <div class="s-row">
        <div class="c-1">
          <div>
            <span>{{ countData?countData.useRate:0 }}%</span>
            <span>转化率 ◕</span>
          </div>
        </div>
        <div class="c-2">
          <img src="@/assets/s1.png"></img>
          <div class="text">
            <div>注册用户</div>
            <div>{{ countData?countData.registerUserCount:0 }}个</div>
          </div>
        </div>
        <div class="c-3">
          ● 只要登录过修配易码通就算注册用户。
        </div>
        <div class="c-4">
          <a-button type="link" class="button-info" @click="toPage('registeredUser')">查看详情></a-button>
        </div>
      </div>
      <div class="s-row">
        <div class="c-1">
          <div>
            <span>{{ countData?countData.activeRate:0 }}%</span>
            <span>转化率 ◕</span>
          </div>
        </div>
        <div class="c-2">
          <img src="@/assets/s2.png"></img>
          <div class="text">
            <div>使用用户</div>
            <div>{{ countData?countData.useUserCount:0 }}个/{{ countData?countData.useStoreCount:0 }}家门店</div>
          </div>
        </div>
        <div class="c-3">
          <p>● 注册用户中，数字货架汽修店的员工定义为使用用户</p>
          <p>● 如果一个汽修店-共有5位员工，会算做5个使用用户，1家门店</p>
        </div>
        <div class="c-4">
          <a-button type="link" class="button-info" @click="toPage('usedUser')">查看详情></a-button>
        </div>
      </div>
      <div class="s-row">
        <div class="c-1"></div>
        <div class="c-2">
          <img src="@/assets/s3.png"></img>
          <div class="text">
            <div>活跃用户</div>
            <div>{{ countData?countData.activeUserCount:0 }}个/{{ countData?countData.activeStoreCount:0 }}家门店</div>
          </div>
        </div>
        <div class="c-3">
          <p>● 使用用户中，最近30天内，有产生销售单的汽修店定义为活跃门店</p>
          <p>● 这些活跃门店的员工为活跃用户</p>
        </div>
        <div class="c-4">
          <a-button type="link" class="button-info" @click="toPage('activeUser')">查看详情></a-button>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script>
import { queryUserCount } from '@/api/report.js'
export default {
  data () {
    return {
      countData: null
    }
  },
  methods: {
    toPage (name) {
      this.$router.push({ name })
    },
    getData () {
      queryUserCount().then(res => {
        this.countData = res.data || null
      })
    }
  },
  mounted () {
    if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
      this.getData()
    }
  },
  activated () {
    // 如果是新页签打开，则重置当前页面
    if (this.$store.state.app.isNewTab) {
      this.getData()
    }
  }
}
</script>

<style lang="less">
  .s-list{
    height: calc(100vh - 135px);
    .s-row{
      display: flex;
      align-items:center;
      &:first-child{
        margin-top: 50px;
      }
      &:last-child{
        > div{
          border: 0;
        }
      }
      > div{
        height: 96px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .c-1{
        width: 20%;
        position: relative;
        > div{
          position: absolute;
          bottom: -18px;
          right: 20px;
          display: flex;
          align-items:center;
          > span{
            &:first-child{
              font-size: 24px;
              margin-right: 20px;
            }
            &:last-child{
              font-size: 16px;
              color: #999;
            }
          }
        }
      }
      .c-2{
        width: 374px;
        position: relative;
        img{
          width:100%;
          height: 96px;
        }
        .text{
          position: absolute;
          left:0;
          top:0;
          width:100%;
          display: flex;
          align-items:center;
          flex-direction: column;
          height: 100%;
          justify-content: center;
          color: #fff;
          font-size: 18px;
        }
      }
      .c-3{
        width: 40%;
        color: #666;
        border-bottom:1px dashed #d3cfcf;
        padding: 0 30px;
        font-size: 14px;
        > p{
          margin: 3px 0;
        }
      }
      .c-4{
        width: 10%;
        border-bottom:1px dashed #d3cfcf;
      }
    }
  }
</style>
