<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>
      <view class="u-flex justify-between">
        <view class="u-flex">
          <u-image
              src="@/static/images/icon/product.png"
              width="40rpx"
              height="40rpx"
          />
          <el-text class="u-m-l-10">{{planDo.productName}}</el-text>
        </view>
        <el-text type="success">{{planDo.code}}</el-text>
      </view>
    </uni-card>
    <uni-table ref="table" stripe emptyText="暂无数据">
      <uni-tr>
        <uni-th width="60" align="center">工序</uni-th>
        <uni-th width="60" align="center">数量</uni-th>
        <uni-th width="80" align="center">进度</uni-th>
        <uni-th width="60" align="center">废品</uni-th>
        <uni-th width="60" align="center">废品率</uni-th>
      </uni-tr>
      <uni-tr v-for="(item, index) in progressList" :key="index">
        <uni-td><text> {{ findTextByValue(item.orgType )}}</text></uni-td>
        <uni-td>
          <view class="name">{{ item.totalQualityNumber }}</view>
        </uni-td>
        <uni-td align="center">
          <u-line-progress
            :percentage="Number((item.totalQualityNumber/planDo.planNumber)*100).toFixed(2)"
            active-color="#50E0C1"
            inactive-color="rgba(139, 237, 215, 0.47)"
          />
        </uni-td>
        <uni-td>
          <view class="name">{{ item.totalWasteNumber }}</view>
        </uni-td>
        <uni-td>
          <view class="name">{{ Number((item.totalWasteNumber/(item.totalQualityNumber + item.totalWasteNumber))*100 ).toFixed(2)}}%</view>
        </uni-td>
      </uni-tr>
    </uni-table>
	</view>
</template>

<script>

import { processTypes, findTextByValue } from "@/api/system/dict/data";
import { getPlanProgress } 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>
