
<template>
  <el-card class="stat_all_card">
    <div slot="header" class="card_header">
      <div>
        <span class="b_tit">累计统计</span>
        <span class="s_tit">数据截止：{{ statAll.last_updated_date_time }}</span>
      </div>
      <!-- <i class="el-icon-refresh" @click="toRefresh"></i> -->
    </div>
    <div class="stat_list">
      <div class="stat_item">
        <p class="_title">
          供应商总数 
          <el-tooltip effect="light" content="总共供应商数量" placement="right">
            <i class="xdicon_question-circle xd_admin_iconfont"></i>
          </el-tooltip>
        </p>
        <div class="_cont">
          <div class="_left">{{statAll.supplier_total_count}}</div>
          <div class="_right one_level">
            <div class="right_i right_top">正常{{statAll.supplier_online_count}}</div>
            <div class="right_i right_bottom">关闭{{ statAll.supplier_offline_count }}</div>
          </div>
        </div>
      </div>
      <div class="stat_item">
        <p class="_title">
          商品总数
          <el-tooltip effect="light" content="总共商品数量，多规格商品计1个" placement="right">
            <i class="xdicon_question-circle xd_admin_iconfont"></i>
          </el-tooltip>
        </p>
        <div class="_cont">
          <div class="_left">{{ statAll.product_total_count }}</div>
          <div class="_right">
            <div class="right_i right_top">
              <div class="one_line">
                {{statAll.product_manual_count}} (人工添加)
              </div>
              <div class="two_line">
                <div>上架{{statAll.product_manual_online_count}}</div>
                <div>下架{{ statAll.product_manual_offline_count }}</div>
              </div>
            </div>
            <div class="right_i right_bottom">
              <div class="one_line">
                {{statAll.product_channel_count}}(接口同步)
              </div>
              <div class="two_line">
                <div>上架{{statAll.product_channel_online_count}}</div>
                <div>下架{{statAll.product_channel_offline_count}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="stat_item">
        <p class="_title">
          SKU总数
          <el-tooltip effect="light" content="总共商品规格数量，多规格商品计多个" placement="right">
            <i class="xdicon_question-circle xd_admin_iconfont"></i>
          </el-tooltip>
        </p>
        <div class="_cont">
          <div class="_left">{{statAll.sku_total_count}}</div>
          <div class="_right">
            <div class="right_i right_top">
              <div class="one_line">
                {{statAll.sku_manual_count}} (人工添加)
              </div>
              <div class="two_line">
                <div>上架{{statAll.sku_manual_online_count}}</div>
                <div>下架{{statAll.sku_manual_offline_count}}</div>
              </div>
            </div>
            <div class="right_i right_bottom">
              <div class="one_line">
                {{statAll.sku_channel_count}}(接口同步)
              </div>
              <div class="two_line">
                <div>上架{{statAll.sku_channel_online_count}}</div>
                <div>下架{{statAll.sku_channel_offline_count}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  </el-card>
</template>
<script>

import {mapActions} from 'vuex';

export default {
  data(){
    return {
      statAll: {}
    }
  },
  created(){
    console.log('created')
    this.p_totalCounts();
  },
  methods: {
    ...mapActions("supplierStat", ["totalCounts", "refreshTotalCounts"]),
    toRefresh(){
      this.p_totalCounts();
      //刷新接口移除
      // let loading = this.$loading({});
      // this.refreshTotalCounts().then(res => {
      //   loading.close()
      //   this.p_totalCounts();
      // }).catch(err => {
      //   loading.close()
      // })
    },
    p_totalCounts(){
      let loading = this.$loading({});
      this.totalCounts().then(res => {
        this.statAll = res.data;
        loading.close();
      }).catch(err => {
        loading.close();
      })
    }
  }
}
</script>

<style lang="less" scoped>

  .stat_all_card{
    /deep/ .el-card__body{
      overflow: auto;
    }
  }
  .card_header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    & > i{
      font-size: 24px;
      cursor: pointer;
    }
  }
  .b_tit{
    font-size: 18px;
    font-weight: 400;
    color:#2E3033;
  }
  .s_tit{
    font-size: 12px;
    color: #A1A7B3;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .stat_list{
    display: flex;
    justify-content: space-around;
    min-width: 800px;
    .stat_item{
      margin-right: 30px;
      ._title{
        margin: 0;
        font-size: 14px;
        font-weight: 400;
        color: #2E3033;
        display: flex;
        margin-bottom: 10px;

        i{
          cursor: pointer;
          margin-left: 4px;
          color: #A1A7B3;
        }
      }
      ._cont{
        display: flex;
        align-items: center;
        color: #1A66FF;
        font-weight: 500;
      }
      ._left{
        font-size: 32px;
        font-weight: 500;
      }
      ._right{
        display: flex;
        flex-direction: column;
        &.one_level{
          .right_i{
            background: none !important;
            padding-bottom: 0 !important;
            padding-top: 0 !important;
          }
        }
        
        .right_i{
          display: flex;
          align-items: center;
          height: 50px;
          font-size: 18px;
          padding-left: 30px;
          
          &.right_top{
            background: url("https://sandbox-img.jufubao.cn/uploads/20231031/2739c34c5d2d19d7d4aae2e26070817d.png") no-repeat;
            background-position: left 60%;
            background-size: 28px auto;
            padding-bottom: 10px;
          }
          &.right_bottom{
            background: url("https://sandbox-img.jufubao.cn/uploads/20231031/90c4c51e0621d876e6126d8696aa8966.png") no-repeat;
            background-position: left 40%;
            background-size: 28px auto;
            padding-top: 10px;
          }


          .two_line{
            margin-left: 30px;
            & > div{
              margin: 2px 0;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
</style>