<template>
    <div class="bottom_box">

        <div v-for="(item, index) in produceList" :key="index" class="detail-list">
            <div class="name">{{ item.taskName }} <span v-if="index == 0" style="color: #157A2C; font-size: 32rpx;">
                    （首工序）</span> </div>
            <div style="display: flex;">
                <div class="list rx-bc" @click="handDetails(item)">
                    <div class="lable rx-cc">
                        待投料数量
                    </div>
                    
                    <div class="rx-ec" v-if="item.firstTaskDetails.length > 0">
                        <span style="color: #157A2C; font-size: 24rpx;"> 明细</span>
                        <image class="arrow_right2" src="~@/static/pda/arrow_right2.svg"></image>
                    </div>

                    <div class="rx-ec" v-else>
                        {{ item.waitFeedNum }}
                        <image class="arrow_right2" src="~@/static/pda/arrow_right2.svg"></image>
                    </div>
                </div>

                <div class="list rx-bc" @click="handDetails(item)">
                    <div class="lable rx-cc">
                        <!-- <image class="icon" src="~@/static/pda/check-square.svg"></image> -->
                        已投料数量
                    </div>

                    <div class="rx-ec" v-if="item.firstTaskDetails.length > 0">
                        <span style="color: #157A2C; font-size: 24rpx;"> 明细</span>
                    </div>

                    <div class="rx-ec" v-else>
                        {{ item.feedNum }}

                    </div>
                </div>


                <div class="list rx-bc">
                    <div class="lable rx-cc">
                        <!-- <image class="icon" src="~@/static/pda/target.svg"></image> -->
                        已报工数量
                    </div>

                    <div class="rx-ec">
                        {{ item.reportedNum }}
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import { produceDetail } from "@/api/workOrderList";
export default {
    data() {
        return {

            produceList: [],
            id:''
        }
    },
    props: {
        workOrderInfo: {
            type: Object,
            default: () => { }
        },
    },
    // created() {
    //     this.produce();
    // },
    watch: {
        workOrderInfo: {
            handler(newVal, oldVal) {
                this.id =newVal.id;
                this.produce()
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        produce() {
            // console.log(this.workOrderInfo,99999999);

            produceDetail(this.id).then(res => {
                console.log(res, 'res');
                this.produceList = res.produceDetail
            })
        },


    }
}
</script>

<style lang="scss" scoped>
.bottom_box {
    // display: flex;
    // justify-content: space-between;
    // background: #fff;
}
.list{
    width: 33%;
    border: 1px solid #e3e5e5;

}
.rx-bc{
    justify-content: flex-start;
}
.rx-ec{
    padding-left: 20px;
}
.lable {
    width: 98px;
    height: 32px;
    text-align: center;
    background-color: #f7f9fa;
    font-size: 12px;
    border-right: 1px solid #e3e5e5;
    flex-shrink: 0;
}

.detail-list{
    width: 100%;
}

.name{
    padding: 10px 0;
    font-size: 14px;
    font-weight: bold;
    color: #157a2c;
}








</style>