<style lang="less" >
    #tiipOperateDetail{
        height:100%;
        background:#eef4fe;
        display:flex;
        flex-direction: column;
        /deep/ .weui-cell_access .weui-cell__ft:after{
            height: 10px;
            width: 10px;
            margin-top: -4px;
            right: 0;
        }
        .Table{
            flex-grow: 1;
            height:1px;
            overflow: auto;
        }
        >.page{
            display:flex;
            background:#fff;
            overflow-x: auto;
            height:0rpx;
            border-bottom: 3px solid #eef4fe;
            &.height{ height:50px; }
            flex-shrink: 0;
            transition: all 0.3s;
            >span{
                padding:0 10px;
                min-width:90px;
                flex-grow:1;
                flex-shrink:0;
                text-align:center;
                box-sizing:border-box;
                position:relative;
                transition:all 0.5s;
                display:flex;
                align-items:center;
                justify-content:center;
                &:not(:first-child):before{
                    content:" ";
                    height:20px;
                    width:0;
                    position: absolute;
                    left:0;
                }
                &:after{
                    content:" ";
                    border-top:3rpx solid #5E9AFE;
                    position: absolute;
                    bottom:0;
                    left:50%;
                    width:0;
                    transform: translate(-50%,0);
                    transition: all 0.3s;
                }
                &.active{
                    color:#659EFD;
                    box-shadow: 0 0 13px -4px #999;
                    &:after{
                        width:100%;
                    }
                    &:before{
                        border:none;
                    }
                    & + text:before{
                        border:none;
                    }
                }
            }
        }
    }
</style>

<template>
  <div id="tiipOperateDetail">
    <div class="page height" v-if="showTab">
        <span v-for="(item,index) in tabList" :key="index" :class="[activeTab==item.key?'active':'']" @click="changeTab(item.key)">{{item.value}}</span>
    </div>
    <div class="Table">
        <customerTable :columns="activeTab == 0 ? columns : columns1" :list="list" :tableStyle="tableStyle"></customerTable>  
    </div>
  </div>
</template>

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

export default {
    name: 'tiipOperateDetail',
    data () {
        return {
            list:[],
            columns:[],
            tableStyle:{
                theadBgColor:'rgba(223,238,253,1)',
                complexTrBgColor:'white',
                singleTrBgColor:'#eef4fe',
                theadTdBorder:false,
                tbodyTdBorder:false,
                tbodyHeight:'calc(100%)',
                tbodyTrBorderBottom:'1px solid #dbe9f8',
                width:'100%'
            },
            activeTab:0,
            tabList:[],
            columns1:[
                {
                    width:'40%',
                    name:'产品',
                    align:'center',
                    field:'sMaterial',
                    color:'#2d8cf0',
                    underline:true,
                },
                {
                    width:'30%',
                    name:'数量',
                    align:'center',
                    field:'nQtyHTML',
                },
                {
                    width:'30%',
                    name:'金额',
                    align:'center',
                    field:'nAmountHTML',
                }
            ],
            showTab:true
        }
    },
    computed:{
        ...mapState({
            hdr:state => state.kanban.hdr,
            isRefresh:state => state.app.isRefresh
        })
    },
    async mounted(){
        window.d = this;
    },
    async activated(){
        this.showTab = true;
        if(this.isRefresh){
            this.activeTab = 0;
            this.$store.dispatch('saveRefresh',false);
        }
        this.$store.dispatch("CAHNGE_META_INFO", {title:this.hdr.sType + '详情'});
        await this.getData();

        if(this.hdr.sType == '采购'){
            this.tabList = [
                {
                    value:'供应商信息',
                    key:'0'
                },
                {
                    value:'采购产品',
                    key:'1'
                }
            ];
            this.columns = [
                {
                    width:'25%',
                    name:'供应商',
                    align:'center',
                    field:'sProviderNameHTML',
                    underline:true,
                    color:'#2d8cf0',
                },
                {
                    width:'25%',
                    name:'数量',
                    align:'center',
                    field:'nQtyHTML',
                },
                {
                    width:'25%',
                    name:'金额',
                    align:'center',
                    field:'nAmountHTML'
                },
                {
                    width:'25%',
                    name:'采购员',
                    align:'center',
                    field:'sFollowerNameHTML',
                    underline:true,
                }
            ]
        }else if(this.hdr.sType == '加工'){
            this.tabList = [
                {
                    value:'坯布加工',
                    key:'0'
                },
                {
                    value:'成品加工',
                    key:'1'
                }
            ];
            this.columns = this.columns1 = [
                {
                    width:'25%',
                    name:'加工商',
                    align:'center',
                    field:'sProviderNameHTML',
                    underline:true,
                    color:'#2d8cf0',
                },
                {
                    width:'25%',
                    name:'数量',
                    align:'center',
                    field:'nQtyHTML',
                },
                {
                    width:'25%',
                    name:'金额',
                    align:'center',
                    field:'nAmountHTML'
                },
                {
                    width:'25%',
                    name:'加工员',
                    align:'center',
                    field:'sFollowerNameHTML',
                    underline:true,
                },
            ]
        }else if(this.hdr.sType == '检验'){
            this.showTab = false;
            this.columns = [
                {
                    width:'25%',
                    name:'加工商',
                    align:'center',
                    field:'sProviderNameHTML',
                    underline:true,
                    color:'#2d8cf0',
                },
                {
                    width:'30%',
                    name:'产品',
                    align:'center',
                    field:'sMaterialHTML',
                },
                {
                    width:'20%',
                    name:'数量',
                    align:'center',
                    field:'nQtyHTML',
                },
                {
                    width:'25%',
                    name:'金额',
                    align:'center',
                    field:'nAmountHTML',
                }
            ]
        }else if(this.hdr.sType == '收货'){
            this.tabList = [
                {
                    value:'主信息',
                    key:'0'
                },
                {
                    value:'产品信息',
                    key:'1'
                }
            ];
            this.columns = [
                {
                    width:'25%',
                    name:'供应商',
                    align:'center',
                    field:'sProviderNameHTML',
                    underline:true,
                    color:'#2d8cf0',
                },
                {
                    width:'20%',
                    name:'数量',
                    align:'center',
                    field:'nQtyHTML',
                },
                {
                    width:'25%',
                    name:'金额',
                    align:'center',
                    field:'nAmountHTML',
                },
                {
                    width:'30%',
                    name:'业务员',
                    align:'center',
                    field:'sCreatorHTML',
                    underline:true
                }
            ]
        }else if(this.hdr.sType == '成品入库'){
            this.tabList = [
                {
                    value:'主信息',
                    key:'0'
                },
                {
                    value:'产品信息',
                    key:'1'
                }
            ];
            this.columns = [
                {
                    width:'25%',
                    name:'供应商',
                    align:'center',
                    field:'sProviderNameHTML',
                    underline:true,
                    color:'#2d8cf0',
                },
                {
                    width:'20%',
                    name:'数量',
                    align:'center',
                    field:'nQtyHTML',
                },
                {
                    width:'25%',
                    name:'金额',
                    align:'center',
                    field:'nAmountHTML',
                },
                {
                    width:'30%',
                    name:'仓管员',
                    align:'center',
                    field:'sCreatorHTML',
                    underline:true
                }
            ]
        }else{
            this.columns = [
                {
                    width:'25%',
                    name:'客户',
                    align:'center',
                    field:'sCustomerNameHTML',
                    underline:true,
                    color:'#2d8cf0',
                },
                {
                    width:'25%',
                    name:'数量',
                    align:'center',
                    field:'nQtyHTML',
                    ellipsis:true
                },
                {
                    width:'25%',
                    name:'金额',
                    align:'center',
                    field:'nAmountHTML',
                },
                {
                    width:'25%',
                    name:'销售员',
                    align:'center',
                    field:'sSalesNameHTML',
                    underline:true
                }
            ]
            this.tabList = [
                {
                    value:'客户信息',
                    key:'0'
                },
                {
                    value:'产品信息',
                    key:'1'
                }
            ]
        }
        this.global.$off('clickTd');
        //点击表格列触发
        this.global.$on('clickTd',async(res)=>{
            if(res.tdIndex == 0){
                if(this.activeTab == 0 || this.hdr.sType == '加工'){
                    this.$store.dispatch('saveCustomerItem',this.list[res.trIndex]);
                    this.$router.push({name:'tiipOperateCustomDetail',params:{type:'custom'}})
                }else{
                    this.$store.dispatch('searchOrderSaveDtl',this.list[res.trIndex]);
                    this.$router.push({name:'searchOrderMaterialDetail'})
                }
            }else if(res.tdIndex = 3){
                this.$store.dispatch('saveKanbanOrderItem',this.list[res.trIndex]);
                this.$router.push({name:'tiipOperateSaleDetail'})
            }
        })
    },
    methods:{
        changeTab(key){
            this.activeTab = key;
            if(this.hdr.sType == '加工'){
                this.columns1 = this.columns;
            }else{
                this.columns1 = [
                    {
                        width:'40%',
                        name:'产品',
                        align:'center',
                        field:'sMaterial',
                        color:'#2d8cf0',
                        underline:true,
                    },
                    {
                        width:'30%',
                        name:'数量',
                        align:'center',
                        field:'nQtyHTML',
                    },
                    {
                        width:'30%',
                        name:'金额',
                        align:'center',
                        field:'nAmountHTML',
                    }
                ]
            }
            this.getData();
        },
        async getData(){
            let postData = [
                {key:"url",value:this.activeTab == '0' ? "Operation gai sType-customer" : 'Operation gai sType-material'},
                {key:"sType",value:this.hdr.sType},
                {key:"begin_date",value:this.hdr.begin_date},
                {key:"end_date",value:this.hdr.end_date}
            ]
            if(this.activeTab == '0'){
                postData[0].value = 'Operation gai sType-customer';
                if(this.hdr.sType == '加工'){
                    postData.push({key:'sProcessCategory',value:'坯布'});
                }
            }else if(this.activeTab == '1'){
                if(this.hdr.sType == '加工'){
                    postData[0].value = 'Operation gai sType-customer';
                    postData.push({key:'sProcessCategory',value:'成品布'});
                }
            }
            let res = await this.request('getBoss',{
                data:postData,
                params:{},
            },'加载中',{})
            if(this.activeTab == 1 && this.hdr.sType != '加工'){
                res.map(x=>{
                    x.sMaterial = `<div><span style="color:#FF6633">${x.sSampleMaterialNo}</span><br><span style="color:black;">${this.hdr.sType == '成品入库' ? x.sMaterialName : x.sSampleMaterialName}</span></div>`
                    x.nAmountHTML = `<div><span style="color:#339966;">${x.nAmount}</span></div>`;
                    x.nQtyHTML = `<div><span">${x.nQty || x.nOutQty || x.nInQty}</span></div>`;
                })
            }else{
                res.map(x=>{
                    x.sCustomerNameHTML = `<div><span style="text-decoration:underline;">${x.sCustomerName || ''}</span></div>`;
                    x.sProviderNameHTML = `<div><span style="text-decoration:underline;">${x.sProviderName || ''}</span></div>`;
                    x.sSalesNameHTML = `<div><span style="text-decoration:underline;">${x.sSalesName || ''}</span></div>`;
                    x.nAmountHTML = `<div><span style="color:#339966;">${x.nAmount}</span></div>`;
                    x.nQtyHTML = `<div><span">${x.nQty || x.nOutQty || 0}</span></div>`;
                    x.sMaterialHTML = `<div><span">${x.sSampleMaterialNo || ''}<br>${x.sSampleMaterialName || ''}</span></div>`;
                    x.sFollowerNameHTML = `<div><span style="text-decoration:underline;">${x.sFollowerName || ''}</span></div>`;
                    x.sCreatorHTML = `<div><span style="text-decoration:underline;">${x.sCreator || ''}</span></div>`;
                })
            }
            this.list = res;
        }
    },
    components:{
        customerTable,
    },
}
</script>


