<style lang="less" >
    @import url("../../../styles/common.less");

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

<template>
  <div id="tiipOperateCustomDetail">
    <div class="iCard" style="margin-bottom:8px;height:100%;" v-show="hdr.sType == '检验' && type == 'material'">
        <div ref='chart' style="width:100%;height:100%;"/>
    </div>
    <div class="Table" :hidden="hdr.sType == '检验' && type == 'material'">
        <customerTable :showFooter="true" :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: 'tiipOperateCustomDetail',
    data () {
        return {
            list:[],
            columns:[],
            tableStyle:{
                theadBgColor:'rgba(223,238,253,1)',
                complexTrBgColor:'white',
                singleTrBgColor:'#eef4fe',
                theadTdBorder:false,
                tbodyTdBorder:false,
                tbodyHeight:'calc(100vh - 60px)',
                tbodyTrBorderBottom:'1px solid #dbe9f8',
                width:'100%'
            },
            type:'custom',
            page:1,
            per_page:50,
            chart:null,
        }
    },
    computed:{
        ...mapState({
            hdr:state => state.kanban.hdr,
            customerItem:state => state.kanban.customerItem,
        })
    },
    async mounted(){
    },
    async activated(){
        window.d = this;
        this.page = 1;
        this.per_page = 50;
        this.type = this.$route.params.type;
        
        if(this.hdr.sType == '采购'){
            this.$store.dispatch("CAHNGE_META_INFO", {title:(this.type == 'custom' ? '采购' : '产品') + '订单列表'});
        }else if(this.hdr.sType == '加工'){
            this.$store.dispatch("CAHNGE_META_INFO", {title:(this.type == 'custom' ? '加工' : '产品') + '订单列表'});
        }else if(this.hdr.sType == '检验'){
            this.$store.dispatch("CAHNGE_META_INFO", {title:(this.type == 'custom' ? '检验-客户' : (this.type == 'provider' ? '检验-加工商' : '检验-产品')) + '订单列表'});
        }else if(this.hdr.sType == '采购退货'){
            this.$store.dispatch("CAHNGE_META_INFO", {title:(this.type == 'custom' ? '采购退货' : '产品') + '订单列表'});
        }else if(this.hdr.sType == "客户索赔"){
            this.$store.dispatch("CAHNGE_META_INFO", {title:this.customerItem.sCustomerName + '理赔列表'});
        }else if(this.hdr.sType == "供应商索赔"){
            this.$store.dispatch("CAHNGE_META_INFO", {title:this.customerItem.sProviderName + '理赔列表'});
        }else{
            this.$store.dispatch("CAHNGE_META_INFO", {title:(this.type == 'custom' ? '客户' : '产品') + '订单列表'});
        }
        if(this.hdr.sType == '采购退货' || this.hdr.sType == '销售退货'){
            this.columns = [
                {
                    width:'25%',
                    name:'单号',
                    align:'center',
                    field:this.hdr.sType == '销售退货' ? 'sStoreInNoHTML' : 'sStoreOutNoHTML',
                    underline:true,
                    color:'#2d8cf0',
                },
                {
                    width:'25%',
                    name:'匹数',
                    align:'center',
                    field:'nPieceHTML'
                },
                {
                    width:'25%',
                    name:'数量',
                    align:'center',
                    field:'nQtyHTML',
                },
                {
                    width:'25%',
                    name:'金额',
                    align:'center',
                    field:'nAmountHTML',
                }
            ]
        }else if(this.hdr.sType == '供应商索赔' || this.hdr.sType == '客户索赔'){
            this.columns = [
                {
                    width:'25%',
                    name:'单号',
                    align:'center',
                    field:this.hdr.sType == '供应商索赔' ? 'sPayableNO' : 'sReceivableNO',
                    underline:true,
                    color:'#2d8cf0',
                    field:this.hdr.sType == '供应商索赔' ? params.row.sPayableNO : params.row.sReceivableNO,
                    render: (h,params) => {
                        return h('span',{
                            style: {
                                'text-decoration':'underline',
                            }
                        },this.hdr.sType == '供应商索赔' ? params.row.sPayableNO : params.row.sReceivableNO)
                    }     
                },
                {
                    width:'25%',
                    name:'金额',
                    align:'center',
                    field:'nAmountHTML',
                },
                {
                    width:'25%',
                    name:'汇率',
                    align:'center',
                    field:'nExchangeRate'
                },
                {
                    width:'25%',
                    name:'日期',
                    align:'center',
                    render: (h,params) => {
                        return h('span',Util.dateFormat(this.hdr.sType == '供应商索赔' ? params.row.dPayableDate : params.row.dReceivableDate,'yyyy-MM-dd'))
                    } 
                },
            ]
        }else if(this.hdr.sType == '疵品汇总'){
            this.columns = [
                {
                    width:'25%',
                    name:'单号',
                    align:'center',
                    underline:true,
                    color:'#2d8cf0',
                    field:'sStoreInNo',
                    render: (h,params) => {
                        return h('span',{
                            style: {
                                'text-decoration':'underline',
                            },
                            on:{
                                'click':()=>{
                                    this.getDetail(2,this.hdr.sType,params.row.sStoreInNo);
                                }
                            }
                        },params.row.sStoreInNo)
                    }  
                },
                {
                    width:'25%',
                    name:'匹数',
                    align:'center',
                    field:'nStockPieceQty'
                },
                {
                    width:'25%',
                    name:'数量',
                    align:'center',
                    field:'nStockQty',
                },
                {
                    width:'25%',
                    name:'金额',
                    align:'center',
                    field:'nAmount',
                    color:'#339966'
                }
            ]
        }else if(this.hdr.sType == '超期应收' || this.hdr.sType == '超期应付'){
            this.columns = [
                {
                    width:'20%',
                    name:'单号',
                    align:'center',
                    field:this.hdr.sType == '超期应付' ? 'sPayableNO' : 'sReceivableNO',
                    underline:true,
                    color:'#2d8cf0',
                    render: (h,params) => {
                        return h('span',{
                            style: {
                                'text-decoration':'underline',
                            }
                        },this.hdr.sType == '超期应付' ? params.row.sPayableNO : params.row.sReceivableNO)
                    }     
                },
                {
                    width:'20%',
                    name:'金额',
                    align:'center',
                    field:'nAmount',
                    color:'#339966'
                },
                {
                    width:'20%',
                    name:'数量',
                    align:'center',
                    field:'nQty',
                },
                {
                    width:'20%',
                    name:'汇率',
                    align:'center',
                    field:'nExchangeRate'
                },
                {
                    width:'20%',
                    name:'日期',
                    align:'center',
                    render: (h,params) => {
                        return h('span',Util.dateFormat(this.hdr.sType == '超期应付' ? params.row.dPayableDate : params.row.dReceivableDate,'yyyy-MM-dd'))
                    } 
                }
            ]
        }else if(this.hdr.sType == '检验'){
            this.columns = [
                {
                    width:'25%',
                    name:'订单号',
                    align:'center',
                    field:'sOrderNo',
                    render: (h,params) => {
                        return h('span',{
                            style: {
                                'text-decoration':'underline',
                                'color':'#2d8cf0'
                            },
                            on:{
                                'click':async()=>{
                                    await this.getDetail(1,this.hdr.sType,params.row.sOrderNo);
                                }
                            }
                        },params.row.sOrderNo)
                    }  
                },
                {
                    width:'30%',
                    name:'检验数量',
                    align:'center',
                    field:'nQty',
                    color:'#42A071'
                },
                {
                    width:'20%',
                    name:'正品数',
                    align:'center',
                    field:'nGoodQty',
                },
                {
                    width:'25%',
                    name:'总扣分',
                    align:'center',
                    field:'nPoint',
                }
            ]
        }else{
            this.columns = [
                {
                    width:'25%',
                    name:'单号',
                    align:'center',
                    field:'sOrderNoHTML',
                    underline:true,
                    color:'#2d8cf0',
                },
                {
                    width:'25%',
                    name:'数量',
                    align:'center',
                    field:'nQty',
                },
                {
                    width:'25%',
                    name:'金额',
                    align:'center',
                    field:'nAmountHTML',
                },
                {
                    width:'25%',
                    name:'状态',
                    align:'center',
                    field:'sStatus'
                }
            ]
        }

        if(this.hdr.sType == '检验' && this.type == 'material'){
            this.$nextTick(async ()=>{
                await this.init()
                await this.getMaterialData();
            })
            window.onresize = ()=> {
                var resizeWorldMapContainer = ()=> {
                    this.$refs['chart'].style.width = window.innerWidth+'px';
                    this.$refs['chart'].style.height = window.innerHeight+'px';
                };
                //重置容器高宽
                resizeWorldMapContainer();
                this.chart.resize();
            };
            return false;
        }

        await this.getData();
        this.global.$off('clickTd');

        //点击表格列触发
        this.global.$on('clickTd',async(res)=>{
            if(this.hdr.sType == '接单'){
                this.list[res.trIndex].dReceivedDate = Util.dateFormat(this.list[res.trIndex].dReceivedDate,'yyyy-MM-dd');
                this.$store.dispatch('searchOrderSaveHdr',this.list[res.trIndex]);
                this.$router.push({name:'searchOrderTrack'})
            }else if(this.hdr.sType == '采购' || this.hdr.sType == '加工'){
                let postData = [
                    {key:'url',value:this.hdr.sType == '采购' ? 'Procurement progress' : 'Processing schedule'},
                    {key:this.hdr.sType == '采购' ? 'begin_date' : 'dBeginDate',value:Util.dateFormat(this.list[res.trIndex].dContractDate,'yyyy-MM-dd')},
                    {key:this.hdr.sType == '采购' ? 'end_date' : 'dEndDate',value:Util.dateFormat(this.list[res.trIndex].dContractDate,'yyyy-MM-dd') + ' 23:59:59'},
                    {key:'searchname',value:this.list[res.trIndex].sOrderNo},
                    {key:'iContractType',value:this.list[res.trIndex].iContractType}
                ]
                let result = await this.request(this.hdr.sType == '采购' ? 'getTipProcurementProgress' : 'getTipProcessProgress',{ data:postData, params:{}},'加载中')
                result.map(y=>{
                    y.sContractNoHTML = `<div><span style="text-decoration:underline;">${y.sContractNo}</span></div>`;
                    y.child.map(x=>{
                        if(this.hdr.sType == '采购'){
                            x.dLastStoreInTime = !!x.dLastStoreInTime ? Util.dateFormat(x.dLastStoreInTime,'yyyy-MM-dd') : '';
                        }else{
                            x.nInputQtyRate = (x.nInputQtyRate * 100).toFixed(2) + '%';
                            x.tDropInTime = !!x.tDropInTime ? Util.dateFormat(x.tDropInTime,'yyyy-MM-dd') : '';
                            x.tProductOutTime = !!x.tProductOutTime ? Util.dateFormat(x.tProductOutTime,'yyyy-MM-dd') : '';
                        }
                    })
                });
                this.$store.dispatch('saveCheckProgressHdr',{
                    type:this.hdr.sType == '采购' ? 'procurement' : 'process',
                    row:result[0]
                });
                this.$router.push({name:this.hdr.sType == '采购' ? 'tipProcurementProgressDetail' : 'tipProcessProgressDetail'})
            }else if(this.hdr.sType == '加工'){

            }else if( this.hdr.sType == '成品入库' || this.hdr.sType == '销售' || this.hdr.sType == '检验' || this.hdr.sType == '收货'){
                await this.getDetail(1,this.hdr.sType,this.list[res.trIndex].sOrderNo);
            }else if(this.hdr.sType == '供应商索赔' || this.hdr.sType == '超期应付'){
                await this.getDetail(2,this.hdr.sType,this.list[res.trIndex].sPayableNO);
            }else if(this.hdr.sType == '客户索赔' || this.hdr.sType == '超期应收'){
                await this.getDetail(2,this.hdr.sType,this.list[res.trIndex].sReceivableNO);
            }else if(this.hdr.sType == '加工回修'){
                await this.getDetail(2,this.hdr.sType,this.list[res.trIndex].sOrderNo);
            }else if(this.hdr.sType == '销售退货'){
                await this.getDetail(2,this.hdr.sType,this.list[res.trIndex].sStoreInNo);
            }else if(this.hdr.sType == '采购退货' ){
                await this.getDetail(2,this.hdr.sType,this.list[res.trIndex].sStoreOutNo);
            }
        })

        this.global.$off('scrollTable');
        this.global.$on('scrollTable',async ()=>{
            this.getData(true)
        })
    },
    methods:{
        async init(){
            this.chart = await this.$echarts.init(this.$refs.chart)
            this.chart.getZr().on("click",v=>{
                if(v.target){
                    this.select(v.target.dataIndex)
                }else{
                    this.select(-1)
                }
            })
        },
        select(index){
            this.selectIndex=index
            this.list.forEach((v,i)=>{
                this.chart.dispatchAction({
                    type:"downplay",
                    seriesIndex:i
                })
            })
            if(index>=0){
                this.chart.dispatchAction({
                    type:"highlight",
                    dataIndex:index
                })
            }
        },
        async getData(flag){
            if(this.per_page < 50){
                this.$vux.toast.text('已加载全部数据!', 'middle')
                return false;
            }
            let postData = [
                {key:"url",value:this.type == 'custom' ? 'Operation gai sType-customer-sOrder' : 'Operation gai sType-material-sOrder'},
                {key:"sType",value:this.hdr.sType},
                {key:"begin_date",value:this.hdr.begin_date},
                {key:"end_date",value:this.hdr.end_date},
            ];
            if(this.type == 'custom'){
                if(this.hdr.sType == '采购退货' || this.hdr.sType == '采购' || this.hdr.sType == '加工' || this.hdr.sType == '收货' || this.hdr.sType == '成品入库' || this.hdr.sType == '加工回修'){
                    postData.push({key:"upbProviderGUID",value:this.customerItem.upbProviderGUID});
                    if(this.hdr.sType == '采购退货' || this.hdr.sType == '加工回修'){
                        postData[0].value = 'Abnormal early warning-customer-sOrder'
                    }
                }else if(this.hdr.sType == '供应商索赔' || this.hdr.sType == '超期应付' ){
                    postData[0].value = 'Abnormal early warning-customer-sOrder'
                    postData.push({key:"upbProviderGUID",value:this.customerItem.ufiCheckItemGUID});
                }else if(this.hdr.sType == '客户索赔' || this.hdr.sType == '超期应收'){
                    postData[0].value = 'Abnormal early warning-customer-sOrder'
                    postData.push({key:"upbCustomerGUID",value:this.customerItem.ufiCheckItemGUID});
                }else if(this.hdr.sType == '检验'){
                    postData[0].value = 'Operation gai sType-customer-sOrder'
                    postData.push({key:"upbCustomerGUID",value:this.customerItem.upbCustomerGUID});
                }else{
                    postData.push({key:"upbCustomerGUID",value:this.customerItem.upbCustomerGUID});
                    if(this.hdr.sType == '销售退货' || this.hdr.sType == '疵品汇总'){
                        postData[0].value = 'Abnormal early warning-customer-sOrder'
                    }
                }
            }else if(this.type == 'provider'){
                if(this.hdr.sType == '检验'){
                    postData[0].value = 'Operation gai sType-customer-sOrder'
                    postData.push({key:"upbProviderGUID",value:this.customerItem.upbProviderGUID});
                }
            }else{
                postData.push({key:"sSampleMaterialNo",value:this.customerItem.sSampleMaterialNo})
            }
            let res = await this.request('getBoss',{
                data:postData,
                params:{
                    page:this.page,
                    per_page:this.per_page
                },
            },'加载中',{})
            res.map((x,y)=>{
                x.sOrderNoHTML = `<div><span style=${y == res.length - 1 ? 'text-decoration:none' : 'text-decoration:underline'}>${x.sOrderNo}</span></div>`;
                x.nAmountHTML = `<div><span style="color:#339966;">${x.nAmount}</span></div>`;
                if(this.hdr.sType == '销售退货' || this.hdr.sType == '采购退货'){
                    x.nQtyHTML = `<div><span">${this.hdr.sType == '销售退货' ? x.nSumInQty :x.nSumOutQty}</span></div>`;
                    x.nPieceHTML = `<div><span">${this.hdr.sType == '销售退货' ? x.nInPieceQty :x.nOutPieceQty}</span></div>`;
                    if(this.hdr.sType == '销售退货'){
                        x.sStoreInNoHTML = `<div><span style=${y == res.length - 1 ? 'text-decoration:none' : 'text-decoration:underline'}>${x.sStoreInNo}</span></div>`;
                    }else{
                        x.sStoreOutNoHTML = `<div><span style=${y == res.length - 1 ? 'text-decoration:none' : 'text-decoration:underline'}>${x.sStoreOutNo}</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;
        },
        async getDetail(mode,sType,sOrderNo){
            let postData = [
                {key:"url",value:mode == 1 ? 'Operation gai sType-customer-sOrder-dtl' : 'Abnormal early warning-customer-sOrder-dtl'},
                {key:"sType",value:sType},
                {key:"sOrderNo",value:sOrderNo},
            ]
            let result = await this.request('getBoss',{data:postData,params:{}},'加载中',{});
            this.$store.dispatch('saveKanbanOrderDetail',result);
            this.$router.push({name:'orderDetailsIndex'})
        },
        async getMaterialData(){
            this.list = this.customerItem;
            this.colorList=new Util.Colors(this.list.length).rgbArray()

            this.all=0
            this.list.forEach(v=> this.all+=v.nPoint )
            this.all=Math.round(this.all*100)/100
            this.list.forEach(v=>{
                v.percent=Math.round(v.nPoint/this.all*10000)/100
            })
            this.chart.setOption({
                tooltip:{
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)",
                },
                color:this.colorList.map(v=>v.hex),
                legend: {
                    orient: 'vertical',
                    top: 10,
                    left: 10,
                    data: this.list.map(x=>x.sDefectNameCN)
                },
                series:[
                    {
                        name:'访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '50%'],
                        
                        label: {
                            normal: {
                                show: false,
                                position: 'center',
                                formatter(v){
                                    return v.name+"\n"+v.value+"\n("+v.percent+"%)";
                                },
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },
                        },
                        data: this.list.map(v=>{
                            return{
                                name:v.sDefectNameCN,
                                value:v.nPoint
                            }
                        }),
                    }
                ],
            })
            
        }
    },
    components:{
        customerTable,
    },
}
</script>