<template>
<div class="app-container">

    <PageTitle />

   <div class="page-container-noback flex1">
    <el-row :gutter="10">
      <el-col :span="8"  v-for="(item,index) in statics" :key="index">
        <div class="card-container shadow">
          <div class="left">
            <div class="title">{{ item.title }}</div>
            <div class="value">{{ item.value }}</div>
            <!-- <div class="rate">同比{{ Math.abs(item.rate) }}% {{ item.rate > 0 ? '↑': '↓' }} </div> -->
          </div>
          <div class="right">
            <img class="logo" :src="item.logo" alt=""></img>
          </div>
        </div>
        
      </el-col>
    </el-row>
    <div class="flex1 middle">
      <div class="card-container-flex shadow flex1">
        <div class="tip-title">
          <div class="title-text">库存预警物料</div>
        </div>
        <div class="table-container flex1">
          <el-table v-loading="loading" height="100%" :data="tableList">
            <el-table-column type="index" label="序号" align="center" width="100" fixed="left"/>
            <el-table-column label="物料名称" align="center" prop="materialName" :show-overflow-tooltip="true" width="200"/>
            <el-table-column label="所属分类" align="center" prop="categoryName" :show-overflow-tooltip="true"  min-width="200" />
            <el-table-column label="物料编码" align="center" prop="sapNo" :show-overflow-tooltip="true"  min-width="200" />
            <el-table-column label="当前库存" align="center" prop="quantity" :show-overflow-tooltip="true"  min-width="200" >
              <template slot-scope="scope">
               <span class="color-orange">{{ scope.row.quantity  }}</span> 件
              </template>
            </el-table-column>
            <el-table-column label="预警阈值" align="center" prop="minStockLevel" :show-overflow-tooltip="true"  width="200" fixed="right">
                   <template slot-scope="scope">
                      <span class="color-blue">{{ scope.row.minStockLevel  }}</span> 件 - <span class="color-blue">{{ scope.row.maxStockLevel }}</span> 件
                    </template>
            </el-table-column>
          </el-table>
        </div>
      </div>


      <div class="card-container-flex chart-container shadow">
        <div class="tip-title">
          <div class="title-text">当前库存排名前10物料</div>
          <el-radio-group class="custom" v-model="kucunQueryType" size="mini" @change="kucunQueryTypeChange">
            <el-radio-button label="count">按数量</el-radio-button>
            <el-radio-button label="money">按金额</el-radio-button>
          </el-radio-group>
        </div>
        <div class="flex1">
          <kucunchart :chartList="kucunList"/>
        </div>
      </div>
    </div>

    <div class="bottom flex1">

      <div class="card-container-flex chart-container shadow flex1">
        <div class="tip-title">
          <div class="title-text">本月入库排名前10物料</div>
          <el-radio-group v-model="rukuRankType" size="mini" @change="rukuRankTypeChange">
            <el-radio-button label="count">按数量</el-radio-button>
            <el-radio-button label="money">按金额</el-radio-button>
          </el-radio-group>
        </div>
        <div class="flex1">
          <rukuRankChart :chartList="rukuList"/>
        </div>
      </div>
      <div class="card-container-flex chart-container shadow flex1 two">
        <div class="tip-title">
          <div class="title-text">本月出库排名前10物料</div>
           <el-radio-group v-model="cukuRankType" size="mini" @change="cukuRankTypeChange">
            <el-radio-button label="count">按数量</el-radio-button>
            <el-radio-button label="money">按金额</el-radio-button>
          </el-radio-group>
        </div>
        <div class="flex1">
          <rukuRankChart barColor="rgba(255, 125, 0, 1)" :chartList="cukuList"/>
        </div>
      </div>
    </div>
   </div>
</div>
</template>

<script>
import { countStocktakes } from "@/api/inventory/stocktakes"
import { inboundCount,countQuantity,countMoney } from "@/api/inventory/inbound"
import { outboundOrdersCount,outboundOrdersTopTenByAmount,outboundOrdersTopTenByQuantity } from "@/api/inventory/orders"
import { exceedWarnValue,inventoryTopTenByQuantity,inventoryTopTenByAmount } from "@/api/inventory/inventory"


import statics1 from "@/assets/images/statics1.png"
import statics2 from "@/assets/images/statics2.png"
import statics3 from "@/assets/images/statics3.png"
import statics4 from "@/assets/images/statics4.png"
import kucunchart from "@/components/kucunchart"
import rukuRankChart from "@/components/rukuRankChart"

export default {
  name: "Index",
  components: {
    kucunchart,
    rukuRankChart
  },
  data() {
    return {
      // 版本号
      statics:[
        {
          title: '本月出库次数',
          value: '',
          logo: statics1
        },
        {
          title: '本月入库次数',
          value: '',
          logo: statics2
        },
        {
          title: '本月盘点次数',
          value: '',
          logo: statics3
        },
        // {
        //   title: '本月退库次数',
        //   value: '123',
        //   logo: statics4
        // },
      ],
      tableList:[],
      loading: false,
      kucunQueryType: 'count',
      rukuRankType: 'count',
      cukuRankType: 'count',
      kucunList:[],
      cukuList:[],
      rukuList:[]
    }
  },
  mounted() {
    //盘点次数
    countStocktakes().then(res=>{
      let data = res.data
      if(!data) return
      this.statics[2].value = data
    })
    //入库次数
    inboundCount().then(res=>{
      let data = res.data
      if(!data) return
      this.statics[1].value = data
    })
    
    // 出库次数
    outboundOrdersCount().then(res=>{
      let data = res.data
      if(!data) return
      this.statics[0].value = data
    })
    //库存预警物料
    exceedWarnValue().then(res=>{
      let data = res.data
      if(!data) return
      this.tableList = data
    })

    this.queryRuku()
    this.queryKucun()
    this.querycuku()
  },
  methods: {
    queryRuku(){
      if(this.rukuRankType === 'count'){
        countQuantity().then(res=>{
          let data = res.data
          if(!data) return
          this.rukuList = data.map(item =>({
            value:item.totalQuantity,
            name:item.materialName
          }))
        })
      }
      if(this.rukuRankType === 'money'){
        countMoney().then(res=>{
          let data = res.data
          if(!data) return
          this.rukuList = data.map(item =>({
            value:item.totalMoney,
            name:item.materialName
          }))
        })
      }
    },
    queryKucun(){
      if(this.kucunQueryType === 'count'){
        inventoryTopTenByQuantity().then(res=>{
          let data = res.rows
          if(!data) return
          console.log('123123',data)
          this.kucunList = data

        })
      }
      if(this.kucunQueryType === 'money'){
        inventoryTopTenByAmount().then(res=>{
          let data = res.rows
          if(!data) return
          this.kucunList = data
        })
      }
    },
    kucunQueryTypeChange(){
      this.queryKucun()
    },
    rukuRankTypeChange(){
      console.log(this.rukuRankType)
      this.queryRuku()
    },
    cukuRankTypeChange(){
      console.log(this.cukuRankType)
      this.querycuku()
    },
    querycuku(){
      if(this.cukuRankType === 'count'){
        outboundOrdersTopTenByQuantity().then(res=>{
          let data = res.rows
          if(!data) return
          this.cukuList = data
        })
      }
      if(this.cukuRankType === 'money'){
        outboundOrdersTopTenByAmount().then(res=>{
          let data = res.rows
          if(!data) return
          this.cukuList = data
        })
      }
    }

  }
}
</script>

<style scoped lang="scss">
  .card-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 43px 19px 38px;
    .left {
      .title{
        font-size: 16px;
        color: rgba(102, 102, 102, 1);
      }
      .value {
        margin-top: 10px;
        font-size: 26px;
        font-weight: 700;
        color: rgba(51, 51, 51, 1);
      }
    }
    .right{
      .logo {
        width: 62px;
        height: 62px;
      }
    }
    
  }
  .middle {
    margin-top: var(--container-pd);
    display: flex;
    .table-container {
      flex: 1;
      .color-orange {
        color: rgba(255, 141, 26, 1);
      }
      .color-blue {
         color: rgba(76, 127, 244, 1);
      }
    }
    .chart-container { 
      height: 100%;
      width: 590px;
      margin-left: var(--container-pd);
    }
  }
  .bottom {
    margin-top: var(--container-pd);
    // height: 410px;
    display: flex;
    .one{
      width: 420px;
    }
    .two{
      margin-left: var(--container-pd);
    }
  }
  .card-container-flex {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 20px;
    .tip-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title-text{
        font-size: 20px;
        color: rgba(46, 46, 46, 1);
        margin-left: 9px;
        position: relative;
        &::before { 
          content: '';
          position: absolute;
          width: 4px;
          height: 20px;
          background: rgba(53, 108, 236, 1);
          left: -9px;
          top: 4px;
          border-radius: 4px;
        }
      }
    }
    .table-container {
      margin-top: 15px;
    }
  }
  
  //  margin-left: var(--container-pd);
</style>

