<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
<!--      <div>-->
<!--        <a href="https://github.com/iimeepo/vue-admin-template" target="_blank" class="github-corner" aria-label="View source on Github">-->
<!--          <svg-->
<!--            width="80"-->
<!--            height="80"-->
<!--            viewBox="0 0 250 250"-->
<!--            style="fill:#40c9c6; color:#fff;"-->
<!--            aria-hidden="true"-->
<!--          >-->
<!--            <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />-->
<!--            <path-->
<!--              d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"-->
<!--              fill="currentColor"-->
<!--              style="transform-origin: 130px 106px;"-->
<!--              class="octo-arm"-->
<!--            />-->
<!--            <path-->
<!--              d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"-->
<!--              fill="currentColor"-->
<!--              class="octo-body"-->
<!--            />-->
<!--          </svg>-->
<!--        </a>-->
<!--      </div>-->

      <el-row :gutter="40" class="panel-group">
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
          <div class="card-panel">
            <div class="card-panel-icon-wrapper icon-people">
              <i class="el-icon-user-solid" />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">
                会员总数
              </div>
              <span class="card-panel-num">{{dashboardInfo.memberCount}}</span>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
          <div class="card-panel">
            <div class="card-panel-icon-wrapper icon-message">
              <i class="el-icon-bank-card" />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">
                会员卡总数
              </div>
              <span class="card-panel-num">{{dashboardInfo.memberCardCount}}</span>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
          <div class="card-panel">
            <div class="card-panel-icon-wrapper icon-money">
              <i class="el-icon-shopping-cart-full" />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">
                商品总数
              </div>
              <span class="card-panel-num">{{dashboardInfo.productCount}}</span>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
          <div class="card-panel">
            <div class="card-panel-icon-wrapper icon-shopping">
              <i class="el-icon-document" />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">
                订单总数
              </div>
              <span class="card-panel-num">{{dashboardInfo.sellCount}}</span>
            </div>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="60" style="margin-top: 50px;margin-bottom: 80px;">
        <el-col :xs="6" :sm="6" :lg="6" class="card-panel-col" style="text-align: center;">
          <el-button style="width: 240px;height: 70px;font-size: 20px;" type="danger" @click="$router.push('/cashier/cashierDesk')">收银台</el-button>
        </el-col>

        <el-col :xs="6" :sm="6" :lg="6" class="card-panel-col" style="text-align: center;">
          <el-button style="width: 240px;height: 70px;font-size: 20px;" type="success" @click="$router.push('/sellList')">订单管理</el-button>
        </el-col>

        <el-col :xs="6" :sm="6" :lg="6" class="card-panel-col" style="text-align: center;">
          <el-button style="width: 240px;height: 70px;font-size: 20px;" type="primary" @click="$router.push('/product/productList')">商品管理</el-button>
        </el-col>

        <el-col :xs="6" :sm="6" :lg="6" class="card-panel-col" style="text-align: center;">
          <el-button style="width: 240px;height: 70px;font-size: 20px;" type="warning" @click="$router.push('/stockIn')">库存管理</el-button>
        </el-col>
      </el-row>

      <el-row :gutter="16" class="dashboard-bottom">
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>商品库存量排行</span>
            </div>
            <el-table
              :data="dashboardInfo.productStockRank"
              style="width: 100%"
            >
              <el-table-column
                label="排名"
              >
                <template slot-scope="scope">
                  {{ scope.$index+1 }}
                </template>
              </el-table-column>
              <el-table-column
                prop="productName"
                label="商品名"
              />
              <el-table-column
                prop="productCount"
                label="库存数"
              />
            </el-table>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>商品收益排行</span>
            </div>
            <div class="block">
              <div class="progress-item" style="margin-bottom: 20px;" v-for="item in dashboardInfo.productSellProportion">
                <span>{{item.productName}}</span>
                <el-progress :percentage="item.percentage" />
              </div>

            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>更新日志</span>
            </div>
            <div class="block">
              <el-timeline>
                <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                  :icon="activity.icon"
                  :type="activity.type"
                  :color="activity.color"
                  :size="activity.size"
                  :timestamp="activity.timestamp"
                >
                  {{ activity.content }}
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {getDashboardInfo} from "@/api/business/stats/stats";
import BarChart from './components/BarChart'
import PieChart from './components/PieChart'
import RaddarChart from './components/RaddarChart'

export default {
  name: 'Dashboard',
  components: {
    BarChart,
    PieChart,
    RaddarChart
  },
  data() {
    return {
      dashboardInfo:{},
      activities: [{
        content: '第一个测试版本开发完成',
        timestamp: '2024-12-4 09:05:37',
        size: 'large',
        type: 'primary',
        icon: 'el-icon-more'
      }
      , {
        content: '订单模块开发完成',
        timestamp: '2024-12-1 12:22:14',
        color: '#0bbd87'
      }, {
        content: '收银台模块开发完成',
        timestamp: '2024-11-28 14:35:28',
        size: 'large'
      }, {
        content: '库存模块开发完成',
        timestamp: '2024-11-20 19:16:42'
      }
      ]

    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
    this.getDashboardInfo()
  },
  methods:{
    getDashboardInfo(){
      getDashboardInfo().then(res => {
        this.dashboardInfo = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>

::v-deep .el-progress__text{
  margin-left: 0px;
}
::v-deep .el-progress-bar{

  width: 90%;
  margin-right:-25px;
}

.dashboard-bottom{
  .box-card{
    min-height: 350px;
  }
}

.dashboard-editor-container {
  height: calc(100vh - 60px);
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      font-size: 48px;
      color: #40c9c6;
    }

    .icon-message {
      font-size: 48px;
      color: #36a3f7;
    }

    .icon-money {
      font-size: 48px;
      color: #f4516c;
    }

    .icon-shopping {
      font-size: 48px;
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

.github-corner:hover .octo-arm {
  animation: octocat-wave 560ms ease-in-out
}

@keyframes octocat-wave {
  0%,
  100% {
    transform: rotate(0)
  }
  20%,
  60% {
    transform: rotate(-25deg)
  }
  40%,
  80% {
    transform: rotate(10deg)
  }
}

@media (max-width:500px) {
  .github-corner:hover .octo-arm {
    animation: none
  }
  .github-corner .octo-arm {
    animation: octocat-wave 560ms ease-in-out
  }
}

@media (max-width:550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
