<style lang="less" >
    #tipProcessProgress{
        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;
        }
    }
</style>

<template>
  <div id="tipProcessProgress">
    <div class="header">
        <searchComponent placeholder="请输入订单号／合同号／供应商／客户..." :search="search" :typeList="typeList" :status="status"/>
    </div>
    <div class="Table">
        <customerTable :columns="columns" :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'

export default {
  name: 'tipProcessProgress',
  data () {
    return {
        search:{
            dBeginDate:Util.dateFormat(new Date(),'yyyy-MM-01'),
            dEndDate:Util.dateFormat(new Date(),'yyyy-MM-dd'),
            page:1,
            per_page:20,
            sStatus:'全部'
        },
        list:[],
        columns:[
            {
                width:'100px',
                name:'加工单号',
                align:'center',
                field:'sContractNoHTML',
                underline:true,
                color:'#2d8cf0',
                fixed:true,
                fixedLeftWidth:'0px'
            },
            {
                width:'100px',
                name:'加工商',
                align:'center',
                field:'sProviderName',
            },
            {
                width:'100px',
                name:'加工工艺',
                align:'center',
                field:'sProduceArtInfo'
            },
            {
                width:'100px',
                name:'总数量',
                align:'center',
                field:'nQty',
            },
            {
                width:'100px',
                name:'总金额',
                align:'center',
                field:'nDtlAmount'
            },
            {
                width:'100px',
                name:'订单号',
                align:'center',
                field:'sOrderNo'
            },
            {
                width:'100px',
                name:'客户名称',
                align:'center',
                field:'sCustomerName'
            },
            {
                width:'100px',
                name:'订单总数量',
                align:'center',
                field:'nQtyOrder'
            },
            {
                width:'100px',
                name:'销售员',
                align:'center',
                field:'sSalesName'
            },
            {
                width:'100px',
                name:'状态',
                align:'center',
                field:'sStatus'
            },
            {
                width:'100px',
                name:'已入库数量',
                align:'center',
                field:'nDeliveriedQty'
            },
            {
                width:'100px',
                name:'已入库匹数',
                align:'center',
                field:'nDeliveriedPieces'
            }
        ],
        tableStyle:{
            theadBgColor:'rgba(223,238,253,1)',
            complexTrBgColor:'white',
            singleTrBgColor:'#eef4fe',
            theadTdBorder:false,
            tbodyTdBorder:false,
            tbodyHeight:'calc(100vh - 120px)',
            tbodyTrBorderBottom:'1px solid #dbe9f8',
            width:'1200px'
        },
        status:[],
        row:{},
        typeList:{
            input:true,
            select:true,
            btns:true,
            time:true
        },
    }
  },
  async mounted(){
    this.$store.dispatch('saveUserId',this.$route.params.userId);
    await this.getStatus();
    await this.getHdr();
  },
  async activated(){
    window.d = this;
    this.global.$off('searchData');
    this.global.$off('scrollTable');
    this.global.$off('clickTd');

    //查询条件触发加载
    this.global.$on('searchData',async ()=>{
        await this.cleanSearch();
        await this.getHdr();
    });
    //滚动加载
    this.global.$on('scrollTable',async ()=>{
        this.getHdr(true);
    })
    //点击表格列触发
    this.global.$on('clickTd',async(res)=>{
        this.row = this.list[res.trIndex];
        this.routerToDetail();
    })
  },
  methods:{
    async getStatus(){
        let res = await this.request(`getTipProcessProgress`,{
            data:[{key:'url',value:'sStatus'}]
        },true);
        this.status = res;
        this.status.unshift({
            sStatus:'全部'
        })
    },
    async getHdr(flag){
        if(this.search.per_page < 20){
            this.$vux.toast.text('已加载全部数据!', 'middle')
            return false;
        }
        let data = Util.deepClone(this.search);
        let postData = [
            {key:'url',value:'Processing schedule'}
        ]
        let {keys, values, entries} = Object;
        for(let [key,value] of entries(data)){
            if(key == 'sStatus'){
                if(value != '全部'){
                    postData.push({key:key,value:value || ''})
                }
            }else if(key == 'dBeginDate'){
                postData.push({key:key,value:value || ''})
            }else if(key == 'dEndDate'){
                postData.push({key:key,value:value + ' 23:59:59' || ''})
            }else if(key == 'searchvalue'){
                postData.push({key:'searchvalue',value:value})
            }
        }
        let res = await this.request('getTipProcessProgress',{
            data:postData,
            params:{
                page:this.search.page,
                per_page:this.search.per_page
            }
        },'加载中')
        
        // if(res.length > 0){
            res.map(y=>{
                y.sContractNoHTML = `<div><span style="text-decoration:underline;">${y.sContractNo}</span></div>`;
                y.child.map(x=>{
                    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') : '';
                })
            });
            
            if(flag){
                this.list = this.list.concat(res);
            }else{
                this.list = res;
            }
            this.search.page++;
            this.search.per_page = res.length;
        // }
    },
    cleanSearch(){
        this.search.page = 1;
        this.search.per_page = 20;
        this.list = [];
    },
    async routerToDetail(){
        this.$store.dispatch('saveCheckProgressHdr',{
            type:'process',
            row:this.row
        });
        this.$router.push({name:'tipProcessProgressDetail'})
    },
  },
  components:{
      searchComponent,
      customerTable
  },
}
</script>