<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%'
            },
            page:1,
            per_page:50
        }
    },
    computed:{
        ...mapState({
            hdr:state => state.kanban.hdr,
            orderItem:state => state.kanban.orderItem,
        })
    },
    async mounted(){
        window.d = this;
    },
    async activated(){
        this.page = 1;
        this.per_page = 50;
        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'}})
        })

        this.global.$off('scrollTable');
        this.global.$on('scrollTable',async ()=>{
            this.getData(true)
        })
    },
    methods:{
        async getData(flag){
            if(this.per_page < 50){
                this.$vux.toast.text('已加载全部数据!', 'middle')
                return false;
            }
            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:{
                    page:this.page,
                    per_page:this.per_page
                },
            },'加载中',{})
            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>`;
            })
            if(flag){
                this.list.splice(this.list.length - 1,1);
                this.list = this.list.concat(res);
            }else{
                this.list = res;
            }
            this.page++;
            this.per_page = res.length - 1;
        }
    },
    components:{
        customerTable,
    },
}
</script>


