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

<template>
  <div id="profitAnalysisList">
    <div class="header">
        <searchComponent placeholder="请输入单号／客户进行搜索" :search="search" :status="status" :typeList="typeList"/>
    </div>
    <div class="Table">
        <customerTable  :showFooter="true" :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'
import customerModal from '@/components/Modal'

import { XButton } from 'vux'

export default {
  name: 'profitAnalysisList',
  data () {
    return {
        search:{
            dBeginDate:Util.dateFormat(new Date(),'yyyy-MM-01'),
            dEndDate:Util.dateFormat(new Date(),'yyyy-MM-dd'),
            page:1,
            per_page:30,
            sStatus:'全部'
        },
        list:[],
        columns:[
            {
                width:'100px',
                name:'单号',
                align:'center',
                field:'sOrderNoHTML',
                underline:true,
                color:'#2d8cf0',
                fixed:true,
                fixedLeftWidth:'0px'
            },
            {
                width:'100px',
                name:'客户',
                align:'center',
                field:'sCustomerName',
            },
            {
                width:'100px',
                name:'销售员',
                align:'center',
                field:'sSalesName'
            },
            {
                width:'100px',
                name:'利润',
                align:'center',
                field:'nFactProfit',
            },
            {
                width:'100px',
                name:'成本',
                align:'center',
                field:'nFactCost'
            },
            {
                width:'100px',
                name:'利润率',
                align:'center',
                field:'nFactProfitRate'
            },
            {
                width:'100px',
                name:'销售额',
                align:'center',
                field:'nSellAmount'
            },
            {
                width:'100px',
                name:'销售数量',
                align:'center',
                field:'nSellQty'
            }
        ],
        tableStyle:{
            width:'800px',
            theadBgColor:'rgba(223,238,253,1)',
            complexTrBgColor:'white',
            singleTrBgColor:'#eef4fe',
            theadTdBorder:false,
            tbodyTdBorder:false,
            tbodyHeight:'calc(100vh - 180px)',
            tbodyTrBorderBottom:'1px solid #dbe9f8'
        },
        status:[],
        showModal:false,
        row:{},
        typeList:{
            input:true,
            select:true,
            btns:true,
            time:true
        },
    }
  },
  async mounted(){
    window.d = this;
    this.$store.dispatch('saveUserId',this.$route.params.userId);
    await this.getStatus();
    await this.getHdr();
  },
  async activated(){
    this.showModal = false;
    this.global.$off('searchData');
    this.global.$off('scrollTable');
    this.global.$off('clickTd');

    //查询条件触发加载
    this.global.$on('searchData',async ()=>{
        this.cleanSearch();
        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.apiGet(`${this.$url('default')}/fabricorder/status/`,{},true);
        this.status = res;
        this.status.map(x=>{
            x.sStatus = x.sStatus || '全部';
        })
    },
    async getHdr(flag){
        if(this.search.per_page < 30){
            this.$vux.toast.text('已加载全部数据!', 'middle')
            return false;
        }
        let data = Util.deepClone(this.search);
        if(this.search.sStatus == '全部'){
            let status = [];
            this.status.map(x=>{
                if(x.sStatus != '全部') status.push(x.sStatus);
            })
            data.sStatus = status.join(',');
        }
        data.searchvalue == '' && (delete data.searchvalue);
        data.begin_date = data.dBeginDate;
        data.end_date = data.dEndDate;
        delete data.dBeginDate;
        delete data.dEndDate;
        console.log(this.search.per_page)
        let res = await this.apiGet(`${this.$url('default')}/fabricorder/order_profit_analysis/`,data,'加载中')
        
        if(res.length > 0){
            res.map(x=>{
                x.dReceivedDate = (x.dReceivedDate || '').split(' ')[0];
                x.sOrderNoHTML = x.sOrderNo != '合计' ? `<div><span style="text-decoration:underline;">${x.sOrderNo}</span></div>` : '<span>合计</span>'
            });
            
            if(flag){
                this.list.splice(this.list.length - 1,1);
                this.list = this.list.concat(res);
            }else{
                this.list = res;
            }
            this.search.page++;
            this.search.per_page = res.length - 1;
            console.log(res.length)
        }
    },
    closeModal(){
        this.showModal = false;
    },
    cleanSearch(){
        this.search.page = 1;
        this.search.per_page = 30;
        this.list = [];
    },
    routerToDetail(){
        this.$store.dispatch('profitAnalysisSaveHdr',this.row);
        this.$router.push({name:'profitAnalysisDetail'})
    },
    // routerToTarck(){
    //     this.$store.dispatch('searchOrderSaveHdr',this.row);
    //     this.$router.push({name:'searchOrderTrack'})
    // }
  },
  components:{
      searchComponent,
      XButton,
      customerTable,
      customerModal
  },
}
</script>