<template>
  <div class="app-container home">
    <!-- 统计卡片行 -->
    <el-row :gutter="20" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-orders">
            <svg-icon icon-class="form" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">待取件订单</div>
            <count-to :start-val="0" :end-val="statistics.pendingPickup" :duration="2600" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-processing">
            <svg-icon icon-class="nested" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">洗涤中订单</div>
            <count-to :start-val="0" :end-val="statistics.processing" :duration="2600" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-delivery">
            <svg-icon icon-class="shopping" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">待配送订单</div>
            <count-to :start-val="0" :end-val="statistics.pendingDelivery" :duration="2600" class="card-panel-num"/>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-revenue">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">今日营收</div>
            <count-to :start-val="0" :end-val="statistics.todayRevenue" :duration="2600" class="card-panel-num" prefix="￥"/>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 超时预警卡片 -->
    <el-row :gutter="40" class="list_card" v-if="roleType">
      <el-col :xs="12" :sm="12" :lg="6">
        <div class="item_card clothing" @click="btn_goto">
          <div class="card left">
            <i class="el-icon-warning"></i>
            <div class="view">
              <div class="name">超3天订单</div>
              <count-to :start-val="0" :end-val="timeoutClothing.threeDayTimeoutCount" :duration="2600" class="card_num" />
            </div>
          </div>
          <div class="card right">
            <i class="el-icon-warning-outline"></i>
            <div class="view">
              <div class="name">超5天订单</div>
              <count-to :start-val="0" :end-val="timeoutClothing.fiveDayTimeoutCount" :duration="2600" class="card_num" />
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="32" style="margin-top: 32px">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <div class="chart-title">订单趋势</div>
          <div class="chart-content">
            <order-chart />
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <div class="chart-title">工厂产能状态</div>
          <div class="chart-content">
            <factory-status />
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 门店排行 -->
    <el-row :gutter="32" style="margin-top: 32px">
      <el-col :xs="24" :sm="24" :lg="24">
        <div class="chart-wrapper">
          <div class="chart-title">门店业绩排行</div>
          <div class="chart-content">
            <el-table :data="storeRankings" style="width: 100%" :show-header="true">
              <el-table-column prop="rank" label="排名" width="80"/>
              <el-table-column prop="storeName" label="门店名称"/>
              <el-table-column prop="orderCount" label="订单数" width="120"/>
              <el-table-column prop="revenue" label="营收额" width="150"/>
              <el-table-column prop="completionRate" label="完成率" width="120"/>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { getTimeoutClothing } from "@/api/statistics/reception"
import OrderChart from './components/OrderChart'
import FactoryStatus from './components/FactoryStatus'

export default {
  name: "Index",
  dicts: ['sys_source_type'],
  components: {
    CountTo,
    OrderChart,
    FactoryStatus
  },
  data() {
    return {
      version: "3.8.4",
      timeoutClothing: {},
      roleType: false,
      statistics: {
        todayOrders: 0,
        pendingOrders: 0,
        todayRevenue: 0,
        monthRevenue: 0
      },
      storeRankings: []
    }
  },
  mounted() {
    this.getroletype()
    this.getTimeout()
    this.getStatistics()
    this.getStoreRankings()
  },
  methods: {
    getroletype(){
      let name = ''
      this.dict.type.sys_source_type.map(item=>{
        if( item.value === this.$store.getters.user.userType ){
          name = item.label
        }
      })
      
      if( name === '工厂' || name === '门店' ){
        this.roleType = true;
      }
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    getTimeout(){
      getTimeoutClothing(this.queryParams).then(response => {
        this.timeoutClothing = response.data;
      });
    },
    btn_goto(type){
      this.$router.push({ path: '/query/overtimeOrders' })
    },
    getStatistics() {
      // TODO: 调用获取统计数据的API
    },
    getStoreRankings() {
      // TODO: 调用获取门店排行的API
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  .panel-group {
    margin-top: 18px;
    .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-orders {
          background: #40c9c6;
        }
        .icon-processing {
          background: #36a3f7;
        }
        .icon-delivery {
          background: #f4516c;
        }
        .icon-revenue {
          background: #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;
        }
      }
    }
  }
  
  .list_card {
    .item_card {
      padding: 15px;
      background: #fff;
      box-shadow: 0px 1px 3px rgba(0, 0, 0, .2);
      border-radius: 5px;
      &.clothing {
        display: flex;
        align-items: center;
        .card {
          flex: 1;
          display: flex;
          border-radius: 5px;
          padding: 10px 20px;
          color: #333;
          font-weight: 500;
          cursor: pointer;
          i {
            font-size: 30px;
          }
          .view {
            padding-left: 10px;
            flex: 1;
            text-align: center;
            .name {
              margin-bottom: 5px;
            }
            .card_num {
              font-size: 16px;
              font-weight: bold;
            }
          }
          &.left {
            i,
            .card_num {
              color: #e6a23c;
            }
          }
          &.right {
            i,
            .card_num {
              color: #f56c6c;
            }
          }
        }
      }
    }
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px;
    margin-bottom: 32px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,21,41,.08);
    .chart-title {
      font-size: 16px;
      font-weight: 500;
      padding-bottom: 16px;
      border-bottom: 1px solid #eee;
    }
    .chart-content {
      height: 300px;
      padding: 16px 0;
    }
  }
}
</style>

