<style lang="less" >
    #profitAnalysisDetail{
        height:100%;
        display:flex;
        flex-direction: column;
        .basic{
            background: white;
            padding: 0px 10px 15px 10px;
            .Title{
                height:40px;
                display: flex;
                align-items: center;
            }
            .items{
                position: relative;
                margin-bottom:10px;
            }
            .items:before{
                content:"";
                position: absolute;
                left:-10px;
                border:2px solid #5cadff;
                height:100%;
            }
            .content{
                display: flex;
                line-height:25px;
                >div>span:first-child{
                    color:#aaa;
                    display: inline-block;
                    width:70px;
                }
                >div:nth-child(odd){
                    flex:1;
                    text-align: left;
                }
                >div:nth-child(even){
                    width:40%;
                    text-align: right;
                }
            }
        }
        .line{
            flex:1;
            border:0.5px solid #5cadff;
            margin-left:15px;
        }
        .Info{
            border-top:1px solid #dbe9f8;
            display: flex;
            flex-wrap: wrap;
            margin-top: 0px;
            font-size:12px;
            >div{
                >span{
                    height:100%;
                    min-width:80px;
                    text-align: center;
                    border-right:1px solid #dbe9f8;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-bottom:1px solid #dbe9f8;
                    color:#586e86;
                    font-weight: bold;
                }
                display: flex;
                min-height:40px;
                align-items: center;
                box-sizing: content-box;
                width:100%;
                >div{
                    width:100%;
                    display: flex;
                    flex-wrap: wrap;
                    >div{
                        width:100%;
                        background:white;
                        height:40px;
                        line-height: 40px;
                        display:inline-flex;
                        padding:0 5px 0 0;
                        border-bottom:1px solid #dbe9f8;
                        >div:first-child{
                            border-right:1px solid #dbe9f8;
                        }
                        >div{
                            flex:1;
                            padding-left:5px;
                            >span{
                                width:70px;
                                display: inline-block;
                            }
                        }
                    }
                }
            } 
            
        }
    }
</style>

<template>
    <div id="profitAnalysisDetail">
        <div class="basic">
            <div class="Title">
                <span>基本信息</span>
                <div class="line"></div>
            </div> 
            <div>
                <div class="content">
                    <div>
                        <span>订单号：</span>
                        <span @click="routerToTrack" style="color:#5cadff;text-decoration:underline;">{{hdr.sOrderNo}}</span>
                    </div>
                    <div style="color:#5cadff;font-weight:bold;">{{hdr.sStatus}}</div>
                </div>
                <div class="content">
                    <div><span>客户：</span>{{hdr.sCustomerName}}</div>
                </div>
                <div class="content">
                    <div><span>产品：</span><span style="color:black;">{{hdr.sSampleMaterialNo}}{{hdr.sSampleMaterialName ? '，'+hdr.sSampleMaterialName : ''}}</span></div>
                </div>
                <div class="content">
                    <div style="width:40%;flex:none;"><span>总数量：</span><span style="color:#5cadff;">{{hdr.nQty}}</span></div>
                    <div style="width:40%;text-align:left;"><span>总金额：</span><span style="color:#5cadff;">{{hdr.nPlanSellAmount}}</span></div>
                    <div style="text-align:right;"><span style="color:black;">{{hdr.dReceivedDate}}</span></div>
                </div>
            </div>
        </div>
        <div class="Info">
            <div>
                <span>坯布信息</span>
                <div>
                    <div>
                        <div>
                            <span>采购数量：</span>{{hdr.nFPQty}}
                        </div>
                        <div>
                            <span>采购金额：</span>{{hdr.nFPAmount}}
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <span>染整信息</span>
                <div>
                    <div>
                        <div>
                            <span>染色数量：</span>{{hdr.nDyeQty}}
                        </div>
                        <div>
                            <span>染费：</span>{{hdr.nDyeAmount}}
                        </div>
                    </div>
                    <div>
                        <div>
                            <span>后整数量：</span>{{hdr.nFNQty}}
                        </div>
                        <div>
                            <span>后整金额：</span>{{hdr.nFNAmount}}
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <span>订单信息</span>
                <div>
                    <div>
                        <div style="border:none;">
                            <span>其他费用：</span>{{hdr.nOrderCost}}
                        </div>
                    </div>
                    <div>
                        <div>
                            <span>订单转出：</span>{{hdr.nTurnPayAmount}}
                        </div>
                        <div>
                            <span>订单转入：</span>{{hdr.nTurnReceAmount}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Util from '@/libs/util.js'
import { mapState } from 'vuex'
export default {
    name: 'profitAnalysisDetail',
    data () {
        return {
            list:[],
        }
    },
    computed:{
        ...mapState({
            hdr:state => state.profitAnalysis.hdr,
            userId:state => state.app.userId
        })
    },
    async mounted(){
        window.d = this;
        console.log(this.hdr)
        //点击表格列触发
    },
    async activated(){
        this.clean();
        // await this.getDetail();
    },
    methods:{
        async getDetail(){
            let res = await this.apiGet(`${this.host}${this.userId}/fabricorder/dtl/`,{
                uGUID:this.hdr.uGUID
            },true);
            // if(res.length > 0){
                this.list = res[0].child;
                this.nAllAmount = res[0].nAllAmount;
                this.list.map(x=>x.sMaterial = `<div><span style="text-decoration:underline;">${x.sSampleMaterialNo}</span><br><span style="color:black;">${x.sSampleMaterialName}</span></div>`)
            // }
        },
        clean(){
            this.list = [];
            this.nAllAmount = 0;
        },
        routerToTrack(){
            this.$store.dispatch('profitAnalysisSaveHdr',this.hdr);
            this.$router.push({name:'profitAnalysisTrack'})
        }
    },
    components:{
    },
}
</script>


