<template>
	<view class="container">
    <u-sticky
        class="sticky"
        :custom-nav-height="0"
    >
      <u-navbar
          title="计划进度"
          bg-color="transparent"
          :title-style="{ fontWeight: 'bold' }"
          :auto-back="true"
          safe-area-inset-top
          placeholder
      />
    </u-sticky>
    <uni-card :is-shadow="false" is-full>
      <uni-row>
        <uni-col>
          <text class="uni-h6" >计划:</text>
          <el-text class="mx-1" type="primary">{{planDo.code}}</el-text>
        </uni-col>
        <uni-col>
          <text class="uni-h6">产品:</text>
          <el-text class="mx-1" type="warning">{{planDo.productName}}</el-text>
        </uni-col>
      </uni-row>
    </uni-card>
      <el-table  :data="progressList" :stripe="true" :show-overflow-tooltip="true">
        <el-table-column label="工序" align="center" prop="orgType" >
          <template #default="scope">
            <text> {{findTextByValue(scope.row.orgType)}}</text>
          </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="Number((scope.row.totalQualityNumber/planDo.planNumber)*100).toFixed(2)"
                :stroke-width="15"
                :striped="true"
                :striped-flow="true"
            />
          </template>
        </el-table-column>
        <el-table-column label="废品" align="center" prop="totalWasteNumber"  width="60px"/>
        <el-table-column label="废品率" align="center" >
          <template #default="scope">
            <span class="percentage-value">{{Number((scope.row.totalWasteNumber/(scope.row.totalQualityNumber+scope.row.totalWasteNumber))*100 ).toFixed(2)}}%</span>
          </template>
        </el-table-column>
      </el-table>
	</view>
</template>

<script>

import {processTypes,findTextByValue} from "@/api/system/dict/data";
import {getPlanProgress,getById} from "@/api/mes/plan"

import tab from "@/plugins/tab";
import modal from "@/plugins/modal";
export default {
  components: {},
  data() {
    return {
      planDo: undefined,
      processTypes:processTypes,
      progressList:[],
    }
  },
  computed: {
  },
  onLoad() {
    this.planDo = tab.getParams()
    this.getProgressList()
  },
  onReady() {
  },
  methods: {
    findTextByValue(value) {
      return findTextByValue(this.processTypes, value)
    },
    getProgressList() {
      modal.loading("正在加载...")
      if(this.planDo)
        getPlanProgress(this.planDo.id).then(response => {
        this.progressList = response.data;
      })
      modal.closeLoading()
    }
  }
}
</script>

<style lang="scss" scoped>
.sticky {
  background: linear-gradient(180deg, #d4e9ff 0%, #f3f9ff 100%);
  backdrop-filter: blur(27.18px);
  box-shadow: 0 1px 1px 0 rgba(0, 72, 145, 0.1),
  0 0.5px 0 0 rgba(0, 0, 0, 0.1);
}
</style>
