<style lang="less" >
    #tiipOperateSaleDetail{
        height:100%;
        background:#eef4fe;
        display:flex;
        flex-direction: column;
        .Table{
            flex-grow: 1;
            height:1px;
            overflow: auto;
        }
    }
</style>

<template>
  <div id="tiipOperateSaleDetail">
    <div class="Table">
        <customerTable :columns="columns" :list="list" :tableStyle="tableStyle"></customerTable>  
    </div>
  </div>
</template>

<script>
import Util from '@/libs/util.js'
import customerTable from '@/components/Table'
import { mapState } from 'vuex'

export default {
    name: 'tiipOperateSaleDetail',
    data () {
        return {
            list:[],
            columns:[
                {
                    width:'40%',
                    name:'客户名称',
                    align:'center',
                    field:'sCustomerNameHTML',
                    underline:true,
                    color:'#2d8cf0',
                },
                {
                    width:'30%',
                    name:'数量',
                    align:'center',
                    field:'nQty',
                },
                {
                    width:'30%',
                    name:'金额',
                    align:'center',
                    field:'nAmountHTML',
                }
            ],
            tableStyle:{
                theadBgColor:'rgba(223,238,253,1)',
                complexTrBgColor:'white',
                singleTrBgColor:'#eef4fe',
                theadTdBorder:false,
                tbodyTdBorder:false,
                tbodyHeight:'calc(100vh)',
                tbodyTrBorderBottom:'1px solid #dbe9f8',
                width:'100%'
            },
        }
    },
    computed:{
        ...mapState({
            hdr:state => state.kanban.hdr,
            orderItem:state => state.kanban.orderItem,
        })
    },
    async mounted(){
        window.d = this;
    },
    async activated(){
        await this.getData();
        this.global.$off('clickTd');

        //点击表格列触发
        this.global.$on('clickTd',async(res)=>{
            this.$store.dispatch('saveCustomerItem',this.list[res.trIndex]);
            this.$router.push({name:'tiipOperateCustomDetail',params:{type:'custom'}})
        })
    },
    methods:{
        async getData(){
            let postData = [
                {key:"url",value:'Operation gai sType-customer-sales'},
                {key:"sType",value:this.hdr.sType},
                {key:"begin_date",value:this.hdr.begin_date},
                {key:"end_date",value:this.hdr.end_date}
            ]
            if(this.hdr.sType == '采购' || this.hdr.sType == '加工'){
                postData.push({key:"upbFollowerGUID",value:this.orderItem.upbFollowerGUID});
            }else if(this.hdr.sType == '收货' || this.hdr.sType == '成品入库'){
                postData.push({key:"sCreator",value:this.orderItem.sCreator});
            }else{
                postData.push({key:"upbSalesGUID",value:this.orderItem.upbSalesGUID});
            }
            
            let res = await this.request('getBoss',{
                data:postData,
                params:{},
            },'加载中',{})
            res.map(x=>{
                if(this.hdr.sType == '采购' || this.hdr.sType == '加工'){
                    if(this.hdr.sType == '加工'){
                        this.columns[0].name = '加工商';
                    }else if(this.hdr.sType == '采购'){
                        this.columns[0].name = '供应商';
                    }
                    this.columns[0].field = 'sProviderNameHTML';
                    x.sProviderNameHTML = `<div><span style="text-decoration:underline;">${x.sProviderName || ''}</span></div>`;
                }else if(this.hdr.sType == '收货' || this.hdr.sType == '成品入库'){
                    this.columns[0].name = '供应商名称';
                    this.columns[0].field = 'sProviderNameHTML';
                    x.sProviderNameHTML = `<div><span style="text-decoration:underline;">${x.sProviderName || ''}</span></div>`;
                }else{
                    this.columns[0].name = '客户名称';
                    this.columns[0].field = 'sCustomerNameHTML';
                    x.sCustomerNameHTML = `<div><span style="text-decoration:underline;">${x.sCustomerName || ''}</span></div>`;
                }
                x.nAmountHTML = `<div><span style="color:#339966;">${x.nAmount}</span></div>`;
            })
            this.list = res;
        }
    },
    components:{
        customerTable,
    },
}
</script>