<!-- 生产管理员首页 -->
<template>
  <div class="row">
    <div class="two-row">
      <div class="data1 w-[47.3%]">
        <div class="title">今日生产计划</div>
        <el-table
          :data="produceData?.productionTodayList"
          style="width: 100%"
          stripe
          height="240px"
        >
          <el-table-column prop="number" label="单据号" width="180" />
          <el-table-column prop="displayOrder" label="顺序" width="170" />
          <el-table-column prop="workshop" label="车间" width="170" />
          <el-table-column prop="productionLine" label="生产线" width="170" />
          <el-table-column prop="shift" label="班次" width="170" />
          <el-table-column prop="team" label="班组" width="170" />
          <el-table-column prop="planDate" label="计划日期" width="170"
            ><template #default="scope">
              <span>{{ formatDate(scope.row.planDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="beginTime" label="开始日期" width="170"
            ><template #default="scope">
              <span>{{ formatDate(scope.row.beginTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="endTime" label="结束日期" width="170"
            ><template #default="scope">
              <span>{{ formatDate(scope.row.endTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="businessType" label="业务类型" />
        </el-table>
      </div>
      <div class="data1 w-[47.3%]">
        <div class="title">线边安全库存</div>
        <el-table :data="produceData?.safeLocationList" style="width: 100%" stripe height="240px">
          <el-table-column prop="code" label="代码" width="180" />
          <el-table-column prop="name" label="名称" width="180" />
          <el-table-column prop="warehouseCode" label="仓库代码" width="180" />
          <el-table-column prop="areaCode" label="库区代码" width="180" />
          <el-table-column prop="locationGroupCode" label="库位组代码" width="180" />
          <el-table-column prop="erpLocationCode" label="ERP库位代码" width="180" />
          <el-table-column prop="type" label="类型" width="180" />
          <el-table-column prop="aisle" label="巷道" width="180" />
          <el-table-column prop="shelf" label="货架" width="180" />
          <el-table-column prop="locationRow" label="行" width="180" />
          <el-table-column prop="locationColum" label="列" width="180" />
          <el-table-column prop="pickPriority" label="拣料优先级" width="180" />
          <el-table-column prop="maxWeight" label="最大承重" width="180" />
          <el-table-column prop="maxArea" label="最大面积" width="180" />
          <el-table-column prop="maxVolume" label="最大体积" width="180" />
          <el-table-column prop="userGroupCode" label="用户组代码" width="180" />
          <el-table-column prop="activeTime" label="生效时间" width="170">
            <template #default="scope">
              <span>{{ formatDate(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="expireTime" label="失效时间" width="170">
            <template #default="scope">
              <span>{{ formatDate(scope.row.createTime) }}</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="produceData?.productputawayJobDetailList"
          style="width: 100%"
          stripe
          height="240px"
        >
          <el-table-column prop="number" label="单据号" width="180" />
          <el-table-column prop="fromWarehouseCode" label="从仓库代码" width="180" />
          <el-table-column prop="requestTime" label="申请时间" width="170">
            <template #default="scope">
              <span>{{ formatDate(scope.row.requestTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="requestDueTime" label="要求截止时间" width="170">
            <template #default="scope">
              <span>{{ formatDate(scope.row.requestDueTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态"  width="140"/>
          <el-table-column prop="departmentCode" label="部门" />
          <el-table-column prop="acceptUserId" label="承接人用户名" width="170" />
          <el-table-column prop="acceptTime" label="承接时间" width="170">
            <template #default="scope">
              <span>{{ formatDate(scope.row.acceptTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="fromLocationTypes" label="从库位类型范围"  width="170"/>
          <el-table-column prop="toLocationTypes" label="到库位类型范围" width="170" />
          <el-table-column prop="toWarehouseCode" label="到仓库代码"  width="170"/>
          <el-table-column prop="fromAreaCodes" label="从库区代码范围"  width="170"/>
          <el-table-column prop="toAreaCodes" label="到库区代码范围"  width="170"/>
          <el-table-column prop="autoComplete" label="自动完成" width="120">
            <template #default="scope">
              <span>{{ formatter(scope.row.autoComplete, DICT_TYPE.TRUE_FALSE) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="allowModifyLocation" label="允许修改库位"  width="120">
            <template #default="scope">
              <span>{{ formatter(scope.row.allowModifyLocation, DICT_TYPE.TRUE_FALSE) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="allowModifyQty" label="允许修改数量" width="120">
            <template #default="scope">
              <span>{{ formatter(scope.row.allowModifyQty, DICT_TYPE.TRUE_FALSE) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="allowBiggerQty" label="允许大于推荐数量" width="140">
            <template #default="scope">
              <span>{{ formatter(scope.row.allowBiggerQty, DICT_TYPE.TRUE_FALSE) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="allowSmallerQty" label="允许小于推荐数量" width="140">
            <template #default="scope">
              <span>{{ formatter(scope.row.allowSmallerQty, DICT_TYPE.TRUE_FALSE) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="allowModifyInventoryStatus" label="允许修改库存状态" width="140">
            <template #default="scope">
              <span>{{
                formatter(scope.row.allowModifyInventoryStatus, DICT_TYPE.TRUE_FALSE)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="allowContinuousScanning" label="允许连续扫描" width="120">
            <template #default="scope">
              <span>{{ formatter(scope.row.allowContinuousScanning, DICT_TYPE.TRUE_FALSE) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="allowPartialComplete" label="允许部分完成" width="120">
            <template #default="scope">
              <span>{{ formatter(scope.row.allowPartialComplete, DICT_TYPE.TRUE_FALSE) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="allowModifyBatch" label="允许修改批次" width="120">
            <template #default="scope">
              <span>{{ formatter(scope.row.allowModifyBatch, DICT_TYPE.TRUE_FALSE) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="allowModifyPackingNumber" label="允许修改箱码" width="120">
            <template #default="scope">
              <span>{{ formatter(scope.row.allowModifyPackingNumber, DICT_TYPE.TRUE_FALSE) }}</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 produceData = ref()
// 获取生产管理员首页数据
const getProduceData = async () => {
  IndexApi.getProduceData().then((res) => {
    produceData.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( produceData.value.jobCount)
  )
  set(barOptionsData, 'legend.data', ['待处理任务'])
  set(barOptionsData, 'series', [
    {
      name:'待处理任务',
      data: Object.values( produceData.value.jobCount),
      type: 'bar',
      barMaxWidth:30
    }
  ])
  lineIndex.value++
}
onMounted(async () => {
  await getProduceData()
})
</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>
