<style lang="less" >
    #searchOrderDetail{
        height:100%;
        background:white;
        display:flex;
        flex-direction: column;
        .header{
            height:60px;
            width:100%;
            display: flex;
            align-items:center;
            flex-wrap: wrap;
            background: #eef4fe;
            padding-left:10px;
            font-weight:bold;
            margin-bottom: 10px;
            div{
                width:100%;
                span{
                    display: inline-block;
                    width:60px;
                }
            }
        }
        .content{
            flex-grow: 1;
            height:1px;
            overflow: auto;
            .total{
                height:40px;
                line-height:40px;
                text-align: right;
                color: #2d8cf0;
                padding:0 20px;
                font-weight: bold;
            }
        }
    }
</style>

<template>
  <div id="searchOrderDetail">
    <div class="header">
        <div><span>订单号：</span>{{hdr.sOrderNo}}</div>
        <div><span>客户：</span>{{hdr.sCustomerName}}</div>
    </div>
    <div class="content">
        <customerTable :columns="columns" :list="list" :tableStyle="tableStyle">
            <div class="total">合计：{{nAllAmount}}</div>
        </customerTable>  
    </div>
  </div>
</template>

<script>
import Util from '@/libs/util.js'
import customerTable from '@/components/Table'
import { mapState } from 'vuex'
export default {
    name: 'searchOrderDetail',
    data () {
        return {
            list:[],
            columns:[
                {
                    width:'20vw',
                    name:'产品名称',
                    align:'center',
                    field:'sMaterial',
                    underline:true,
                    color:'#2d8cf0'
                },
                {
                    width:'20vw',
                    name:'颜色',
                    align:'center',
                    field:'sColorName'
                },
                {
                    width:'20vw',
                    name:'单价',
                    align:'center',
                    field:'nPrice'
                },
                {
                    width:'20vw',
                    name:'数量',
                    align:'center',
                    field:'nQty'
                },
                {
                    width:'20vw',
                    name:'金额',
                    align:'center',
                    field:'nAmount'
                }
            ],
            tableStyle:{
                theadBgColor:'rgba(176,226,255,0.3)',
                complexTrBgColor:'white',
                singleTrBgColor:'#eef4fe',
                theadTdBorder:false,
                tbodyTdBorder:false,
                tbodyHeight:'calc(100vh - 110px)',
                tbodyTrBorderBottom:'0.5px solid #5cadff'
            },
            host:'https://weixin.huansi.net/apiproxy/huansi/service/proxy/',
            // host:'http://192.168.4.40:5001',
            nAllAmount:0,
        }
    },
    async mounted(){
        window.d = this;
        //点击表格列触发
    },
    async activated(){
        this.clean();
        await this.getDetail();
        this.global.$off('clickTd');
        this.global.$on('clickTd',async(res)=>{
            this.$store.dispatch('searchOrderSaveDtl',this.list[res.trIndex]);
            this.$router.push({name:'searchOrderMaterialDetail'})
        })
    },
    computed:{
        ...mapState({
            hdr:state => state.searchOrder.hdr,
            userId:state => state.app.userId
        })
    },
    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;
        }
    },
    components:{
        customerTable,
    },
}
</script>