<!-- 原料管理员首页 -->
<template>
  <div class="row">
    <div class="data">
      <div class="small-data-item small-data-item1">
        <div class="small-data-item-txt">
          <div>今日到货计划(已发货)</div>
          <div>{{materialData?.preparetoissueTodayCount}}<span>单</span></div>
        </div>
        <img src="../../../assets/imgs/icon1.png" alt="" class="img" />
      </div>
      <div class="small-data-item small-data-item2 ml-14px">
        <div class="small-data-item-txt">
          <div>今日备料计划(已发料)</div>
          <div>{{materialData?.preparetoissueTodayCount}}<span>单</span></div>
        </div>
        <img src="../../../assets/imgs/icon5.png" alt="" class="img" />
      </div>
      <div class="small-data-item small-data-item3 ml-14px">
        <div class="small-data-item-txt">
          <div>今日叫料请求(已发料)</div>
          <div>{{materialData?.issueRequestTodayCount}}<span>单</span></div>
        </div>
        <img src="../../../assets/imgs/icon6.png" alt="" class="img" />
      </div>
      <div class="small-data-item small-data-item4 ml-14px">
        <div class="small-data-item-txt">
          <div>空闲库位数/总库位数</div>
          <div style="font-size: 20px;">{{materialData?.freeLocationCount}}<span>个</span>/{{materialData?.totalLocationCount}}<span>个</span></div>
        </div>
        <img src="../../../assets/imgs/icon3.png" alt="" class="img" />
      </div>
    </div>
    <div class="two-row mt-14px">
      <div class="data1 w-[47.3%]">
        <div class="title">呆滞库存预警</div>
        <el-table
          :data="materialData?.stagnantBalanceList"
          style="width: 100%"
          stripe
          height="240px"
        >
          <el-table-column prop="itemCode" label="物料代码" width="180px" />
          <el-table-column prop="batch" label="批次" width="180px" />
          <el-table-column prop="packingNumber" label="包装号" width="180px" />
          <el-table-column prop="containerNumber" label="器具代码" width="180px" />
          <el-table-column prop="qty" label="数量" width="180px" />
          <el-table-column prop="uom" label="计量单位" width="180px">
            <template #default="scope">
              {{ formatter(scope.row.uom, DICT_TYPE.UOM) }}
            </template>
          </el-table-column>
          <el-table-column prop="locationCode" label="库位代码" width="180px" />
          <el-table-column prop="warehouseCode" label="仓库代码" width="180px" />
          <el-table-column prop="inventoryStatus" label="库存状态" width="180px">
            <template #default="scope">
              {{ formatter(scope.row.inventoryStatus, DICT_TYPE.INVENTORY_STATUS) }}
            </template>
          </el-table-column>
          <el-table-column prop="locationGroupCode" label="库位组代码" width="180px" />
          <el-table-column prop="areaCode" label="库区代码" width="180px" />
          <el-table-column prop="erpLocationCode" label="ERP库位代码" width="180px" />
          <el-table-column prop="altBatch" label="替代批次" width="180px" />
          <el-table-column prop="arriveDate" label="到货日期" width="180px">
            <template #default="scope">
              <span>{{ formatDate(scope.row.planDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="produceDate" label="生产日期" width="180px">
            <template #default="scope">
              <span>{{ formatDate(scope.row.planDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="expireDate" label="失效日期" width="180px">
            <template #default="scope">
              <span>{{ formatDate(scope.row.planDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ownerCode" label="货主代码" width="180px" />
          <el-table-column prop="lockedQty" label="锁定数量" width="180px" />
          <el-table-column prop="usableQty" label="可用数量" width="180px" />
          <el-table-column prop="singlePrice" label="单价" width="180px" />
          <el-table-column prop="amount" label="金额" width="180px" />
          <el-table-column prop="putInTime" label="入库时间" width="180px">
            <template #default="scope">
              <span>{{ formatDate(scope.row.planDate) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="data1 w-[47.3%]">
        <div class="title">超期库存预警</div>
        <el-table
          :data="materialData?.overdueBalanceList"
          style="width: 100%"
          stripe
          height="240px"
        >
          <el-table-column prop="itemCode" label="物料代码" width="180px" />
          <el-table-column prop="batch" label="批次" width="180px" />
          <el-table-column prop="packingNumber" label="包装号" width="180px" />
          <el-table-column prop="containerNumber" label="器具代码" width="180px" />
          <el-table-column prop="qty" label="数量" width="180px" />
          <el-table-column prop="uom" label="计量单位" width="180px">
            <template #default="scope">
              {{ formatter(scope.row.uom, DICT_TYPE.UOM) }}
            </template>
          </el-table-column>
          <el-table-column prop="locationCode" label="库位代码" width="180px" />
          <el-table-column prop="warehouseCode" label="仓库代码" width="180px" />
          <el-table-column prop="inventoryStatus" label="库存状态" width="180px">
            <template #default="scope">
              {{ formatter(scope.row.inventoryStatus, DICT_TYPE.INVENTORY_STATUS) }}
            </template>
          </el-table-column>
          <el-table-column prop="locationGroupCode" label="库位组代码" width="180px" />
          <el-table-column prop="areaCode" label="库区代码" width="180px" />
          <el-table-column prop="erpLocationCode" label="ERP库位代码" width="180px" />
          <el-table-column prop="altBatch" label="替代批次" width="180px" />
          <el-table-column prop="arriveDate" label="到货日期" width="180px">
            <template #default="scope">
              <span>{{ formatDate(scope.row.planDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="produceDate" label="生产日期" width="180px">
            <template #default="scope">
              <span>{{ formatDate(scope.row.planDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="expireDate" label="失效日期" width="180px">
            <template #default="scope">
              <span>{{ formatDate(scope.row.planDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ownerCode" label="货主代码" width="180px" />
          <el-table-column prop="lockedQty" label="锁定数量" width="180px" />
          <el-table-column prop="usableQty" label="可用数量" width="180px" />
          <el-table-column prop="singlePrice" label="单价" width="180px" />
          <el-table-column prop="amount" label="金额" width="180px" />
          <el-table-column prop="putInTime" label="入库时间" width="180px">
            <template #default="scope">
              <span>{{ formatDate(scope.row.planDate) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="two-row mt-14px">
      <div class="data1 w-[47.3%]">
        <div class="title">高低储预警</div>
        <el-table
          :data="materialData?.warningBalanceList"
          style="width: 100%"
          stripe
          height="240px"
        >
          <el-table-column prop="itemCode" label="物料代码" width="180px" />
          <el-table-column prop="batch" label="批次" width="180px" />
          <el-table-column prop="packingNumber" label="包装号" width="180px" />
          <el-table-column prop="containerNumber" label="器具代码" width="180px" />
          <el-table-column prop="qty" label="数量" width="180px" />
          <el-table-column prop="uom" label="计量单位" width="180px">
            <template #default="scope">
              {{ formatter(scope.row.uom, DICT_TYPE.UOM) }}
            </template>
          </el-table-column>
          <el-table-column prop="locationCode" label="库位代码" width="180px" />
          <el-table-column prop="warehouseCode" label="仓库代码" width="180px" />
          <el-table-column prop="inventoryStatus" label="库存状态" width="180px">
            <template #default="scope">
              {{ formatter(scope.row.inventoryStatus, DICT_TYPE.INVENTORY_STATUS) }}
            </template>
          </el-table-column>
          <el-table-column prop="locationGroupCode" label="库位组代码" width="180px" />
          <el-table-column prop="areaCode" label="库区代码" width="180px" />
          <el-table-column prop="erpLocationCode" label="ERP库位代码" width="180px" />
          <el-table-column prop="altBatch" label="替代批次" width="180px" />
          <el-table-column prop="arriveDate" label="到货日期" width="180px">
            <template #default="scope">
              <span>{{ formatDate(scope.row.planDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="produceDate" label="生产日期" width="180px">
            <template #default="scope">
              <span>{{ formatDate(scope.row.planDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="expireDate" label="失效日期" width="180px">
            <template #default="scope">
              <span>{{ formatDate(scope.row.planDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ownerCode" label="货主代码" width="180px" />
          <el-table-column prop="lockedQty" label="锁定数量" width="180px" />
          <el-table-column prop="usableQty" label="可用数量" width="180px" />
          <el-table-column prop="singlePrice" label="单价" width="180px" />
          <el-table-column prop="amount" label="金额" width="180px" />
          <el-table-column prop="putInTime" label="入库时间" width="180px">
            <template #default="scope">
              <span>{{ formatDate(scope.row.planDate) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="data1  w-[47.3%]">
        <div class="title">待处理任务</div>
        <Echart :options="barOptions" :height="280" :key="lineIndex" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import * as IndexApi from '@/api/home'
import { formatDate } from '@/utils/formatTime'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { barOptions } from '../echarts-data'
const lineIndex = ref(0)

const materialData = ref()
// 获取原料管理员数据
const getMaterialData = async () => {
 await IndexApi.getMaterialData().then((res) => {
    materialData.value = res
    getJobCharts()
  })
}
const formatter = (type, dict) => {
  let str = getStrDictOptions(dict).filter((item) => type == item.value)[0]?.label
  return str
}
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
const getJobCharts = async () => {
  set(
    barOptionsData,
    'xAxis.data',
    Object.keys( materialData.value.jobCount)
  )
  set(barOptionsData, 'legend.data', ['待处理任务'])
  set(barOptionsData, 'series', [
    {
      name:'待处理任务',
      data: Object.values( materialData.value.jobCount),
      type: 'bar',
      barMaxWidth:30
    }
  ])
  lineIndex.value++
}
onMounted(async () => {
  await getMaterialData()
})
</script>
<style scoped lang="scss">
.title {
  padding-bottom: 10px;
  border-bottom: 1px solid #dedede;
  position: relative;
  padding-left: 10px;
  &::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 16px;
    background: #3c7adf;
    left: 0px;
    top: 3px;
    border-radius: 8px;
  }
}
.data {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .small-data-item {
    width:25%;
    height: 90px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    color: white;
    padding: 0px 20px;
    .small-data-item-txt {
      flex: 1;
      div {
        &:nth-child(1) {
          font-size: 14px;
         
        }
        &:nth-child(2) {
          font-size: 26px;
          margin-top: 4px;
          font-weight: bold;
          span {
            font-size: 14px;
            padding-left: 6px;
          font-weight: normal;
          }
        }
      }
    }
    .img {
      width: 40px;
      opacity: 0.5;
    }
  }
  .small-data-item1 {
    background: linear-gradient(to left, #fd817d, #fcad80);
  }
  .small-data-item2 {
    background: linear-gradient(to left, #46c6fa, #336bfe);
  }
  .small-data-item3 {
    background: linear-gradient(to left, #96a6cc, #595f82);
  }
  .small-data-item4 {
    background: linear-gradient(to left, #08dcd5, #46e2bb);
  }
  .small-data-item5 {
    background: linear-gradient(to left, #f4c46b, #ffb313);
  }
  .small-data-item6 {
    background: linear-gradient(to left, #6eccf8, #02acfd);
  }
}
.two-row {
  display: flex;
  align-content: center;
  justify-content: space-between;
  .data1 {
    background: white;
    padding: 14px;
  }
}
</style>
