<template>
  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column label="工序" align="center" prop="orgType" >
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.MES_PROGRESS_TYPE" :value="scope.row.orgType" />
        </template>
      </el-table-column>
      <el-table-column label="完成数量" align="center" prop="totalQualityNumber" width="80px"/>
      <el-table-column label="完成进度" align="center">
        <template #default="scope">
          <el-progress
            :percentage="erpNumberFormatter((scope.row.totalQualityNumber/props.planNumber)*100,2)"
            :stroke-width="15"
            :color="finishColors"
            :striped="true"
            :striped-flow="true"
          />
        </template>
      </el-table-column>
      <el-table-column label="废品数量" align="center" prop="totalWasteNumber"  width="80px"/>
      <el-table-column label="废品率" align="center" >
        <template #default="scope">
          <el-progress :percentage="5" :stroke-width="15" :color="wasteColors"  type="circle" :width="50" striped striped-flow>
            <span class="percentage-value">{{erpNumberFormatter((scope.row.totalWasteNumber/(scope.row.totalQualityNumber+scope.row.totalWasteNumber))*100 ,2)  }}%</span>
          </el-progress>
        </template>
      </el-table-column>
      <el-table-column label="时长/h" align="center" prop="totalTimeSummary" width="100px"/>
      <el-table-column label="计件时长/h" align="center" prop="reportTimeSummary" width="100px"/>
      <el-table-column label="操作" align="center"/>
    </el-table>
  </ContentWrap>
</template>
<script setup lang="ts">
import {WorkReportPlanApi} from "@/api/mes/workreportplan";
import {DICT_TYPE} from "@/utils/dict";
import {erpNumberFormatter} from "@/utils";

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const props = defineProps<{
  planId?: number // 领料单ID（主表的关联字段）
  planNumber?: number // 领料单ID（主表的关联字段）
}>()
const loading = ref(false) // 列表的加载中
// {
//   "planId": 123,
//   "planCode": "JH-20240705017",
//   "productId": 38,
//   "productName": "大奶托",
//   "totalQualityNumber": 201,
//   "totalWasteNumber": 2,
//   "reportTimeSummary": 1,
//   "totalTimeSummary": 5,
//   "orgType": "zhijiang"
// }
const list = ref([]) // 列表的数据
const finishColors = [
  { color: '#ce1f09', percentage: 20 },
  { color: '#e1820a', percentage: 40 },
  { color: '#16cada', percentage: 60 },
  { color: '#17d4b1', percentage: 80 },
  { color: '#339c1e', percentage: 100 },
]
const wasteColors = [
  { color: '#339c1e', percentage: 8 },
  { color: '#e1820a', percentage: 12 },
  { color: '#e66126', percentage: 16 },
  { color: '#f31226', percentage: 20 },
  { color: '#9b0c54', percentage: 25 },
]
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    list.value = await WorkReportPlanApi.getReportPlanProgress(props.planId)
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 初始化 **/
onMounted(() => {
  getList()
})

</script>

<style scoped>
.percentage-value {
  display: block;
  margin-top: 5px;
  font-size: 16px;
}

</style>
