emis-frontend/src/views/emis/emisSettleSubBill/SubBillConfirmByMonthList.vue

<template>
  <XdPageContainer class="app-container">
    <el-tabs slot="pageHeader"   v-if="actionType==1 || actionType==2 || actionType==3" v-model="activeTab" class="center-tabs" @tab-click="handleClick">
     <el-tab-pane label="全部" name="all" />
     <el-tab-pane label="未确认" name="waitConfirm" />
     <el-tab-pane label="已确认" name="hasConfirm" />
     <el-tab-pane label="确认不出账" name="confirmNotBill" />
     <!-- <el-tab-pane label="财务置账单异常" name="billError" /> -->
     <!-- <el-tab-pane label="业务置账单异常" name="siteBillError" /> -->
   </el-tabs>

   <el-tabs slot="pageHeader"  v-if="actionType==4" v-model="activeTab" class="center-tabs" @tab-click="handleClick">
     <el-tab-pane label="待合账" name="waitMerge" />
     <!-- <el-tab-pane label="已合账" name="hasMerge" /> -->
   </el-tabs>

   <SearchForm slot="pageTabs" :model="queryParams" ref="queryForm"
     size="mini" :maxShow="12"  label-width="100px"
     v-show="showSearch"
     @search="handleQuery"
     @reset="resetQuery"
     :isShowSearchBtn="true"
     >
        <el-form-item label="运单号" prop="billCode">
           <XdTextareaInput
             v-model="queryParams.billCode"
             :placeholder="$t('多个流水号逗号或换行隔开')"
             clearable
             :rows="1"
           />
         </el-form-item>
       <el-form-item label="寄件日期" prop="sendDate">
           <elDateAdvPicker v-model="dateTimeRange"  ></elDateAdvPicker>
       </el-form-item>
       <el-form-item label="寄件网点" prop="params.sendSiteCode">
       <EmisSiteSimplePicker1  v-model="queryParams.params.sendSiteCode" ></EmisSiteSimplePicker1>
     </el-form-item>
     <el-form-item label="目的网点" prop="params.dispatchUnderlingSiteCode">
       <EmisSiteSimplePicker2  v-model="queryParams.params.dispatchUnderlingSiteCode"  ></EmisSiteSimplePicker2>
     </el-form-item>
     <el-form-item label="账单类型"  v-if="actionType==3 || actionType==4" prop="settleType">
      <el-select  clearable v-model="queryParams.settleType" placeholder="账单类型">
           <el-option key="1" label="现金" value="1"></el-option>
           <el-option key="2" label="月结" value="2"></el-option>
       </el-select>
     </el-form-item>
     <el-form-item label="是否特殊报价"  prop="params.blSpecialQuote">
      <el-select  clearable v-model="queryParams.params.blSpecialQuote" placeholder="">
           <el-option key="1" label="是" value="1"></el-option>
           <el-option key="0" label="否" value="0"></el-option>
       </el-select>
     </el-form-item>
     <el-form-item label="确认状态"  prop="confirmStatus">
      <el-select  clearable v-model="queryParams.confirmStatus" placeholder="">
           <el-option key="1" label="财务未确认" value="1"></el-option>
           <el-option key="2" label="业务未确认" value="2"></el-option>
       </el-select>
     </el-form-item>
     <el-form-item label="线路" prop="params.transLineType">
              <TransLinePicker v-model="queryParams.params.transLineType"  isInitiated="true"  @onChange="handleQuery"></TransLinePicker>
     </el-form-item>

    <el-form-item label="产品类型" prop="productType">
      <TransProductPicker placeholder="产品类型" v-model="queryParams.params.productType" :transLineCode="queryParams.params.transLineType" @onChange="handleQuery"></TransProductPicker>
    </el-form-item>
     <el-form-item label="计费方式"  prop="params.calcFeeType">
         <el-select   clearable v-model="queryParams.params.calcFeeType" placeholder="请选择">
           <el-option
             v-for="dict in dict.type.emis_calc_fee_type"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
           ></el-option>
        </el-select>
     </el-form-item>

     <el-form-item v-if="actionType==2 || actionType==3 || actionType==4" label="月结客户" prop="custNo">
       <EmisMonthpayAccountPicker v-model="queryParams.custNo" @onChange="handleQuery"></EmisMonthpayAccountPicker>
     </el-form-item>
     <el-form-item label="付款方式" prop="params.paymentType" >
         <el-select  v-if="actionType==1" clearable v-model="queryParams.params.paymentType" placeholder="请选择">
           <el-option
             v-for="dict in dict.type.emis_payment_type.filter(item=>['1','3','6'].includes(item.value))"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
           ></el-option>
       </el-select>

       <el-select  v-if="actionType==2 || actionType==3 || actionType==4" clearable v-model="queryParams.params.paymentType" placeholder="请选择">
         <el-option
           v-for="dict in dict.type.emis_payment_type.filter(item=>['2','4','5'].includes(item.value))"
           :key="dict.value"
           :label="dict.label"
           :value="dict.value"
         ></el-option>
       </el-select>
     </el-form-item>
     <el-form-item :label="$t('回款联系人')" prop="params.payee">
       <PayeePicker :placeholder="$t('回款联系人')" v-model="queryParams.params.payee"  ></PayeePicker>
     </el-form-item>
   <el-form-item :label="$t('销售联系人')" prop="params.salesmen">
     <SalemanPicker :placeholder="$t('销售联系人')" v-model="queryParams.params.salesmen" :disabled="actionType==3" ></SalemanPicker>
   </el-form-item>
   <el-form-item label="寄件公司" prop="params.sendCompany">
         <el-input
           v-model="queryParams.params.sendCompany"
           :placeholder="$t('寄件公司')"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>

     <el-form-item label="收件公司" prop="params.receiveCompany">
           <el-input
             v-model="queryParams.params.receiveCompany"
             :placeholder="$t('收件公司')"
             clearable
             @keyup.enter.native="handleQuery"
           />
         </el-form-item>

         <el-form-item label="问题件类型" prop="problemType">
            <ProblemTypePicker v-model="queryParams.params.problemType"  ></ProblemTypePicker>
          </el-form-item>

     </SearchForm>



   <XdTable
         slot="pageContent"
         slot-scope="slotProps"
         :height="(slotProps.contentHeight-60)+'px'"

         v-loading="loading"
          border
          size="mini"

          ref="refTable"

          row-key="id"
          storageName="SubBillConfirmByMonthList_main"

          :data="emisSettleSubBillList"
          :showSearch.sync="showSearch"
          :queryParams="queryParams"
          :total="total"
          @queryTable="getList"
          @selection-change="handleSelectionChange"
          @sort-change="handleSortChange"

          :row-style="tableRowClassName"

          highlight-current-row

           show-summary :summary-method="getSummaries"
          >

     <div slot="toolbar" v-if="actionType==1 || actionType==2">
       <el-row :gutter="10" class="mb8">
             <el-col :span="1.5"  v-if="activeTab=='waitConfirm'">
               <el-button
                 type="primary"
                 plain
                 size="mini"
                 :disabled="multiple"
                 @click="handleConfirmByCenter"
                 v-hasPermi="['emis:emisSettleSubBill:confirmBillByCenter']"
               >批量确认</el-button>
             </el-col>
             <el-col :span="1.5"  v-if="activeTab=='waitConfirm'">
               <el-button
                 type="primary"
                 plain
                 size="mini"
                 :disabled="multiple"
                 @click="handleConfirmNoBillByCenter"
                 v-hasPermi="['emis:emisSettleSubBill:confirmNoBillByCenter']"
               >确认不出账</el-button>
             </el-col>
             <!-- <el-col :span="1.5" v-if="activeTab=='waitConfirm'">
               <el-button
                 type="primary"
                 plain
                 size="mini"
                 :disabled="multiple"
                 @click="handleSetBillErrorByCenter"
                 v-hasPermi="['emis:emisSettleSubBill:setBillErrorByCenter']"
               >置账单异常</el-button>
             </el-col> -->
             <el-col :span="1.5" v-if="activeTab!='waitConfirm'">
               <el-button
                 type="danger"
                 plain
                 size="mini"
                 :disabled="multiple"
                 @click="handleCancelConfirmByCenter"
                 v-hasPermi="['emis:emisSettleSubBill:cancelConfirmBillByCenter']"
               >取消确认</el-button>
             </el-col>

             <!-- <el-col :span="1.5">
               <el-button
                 type="primary"
                 plain
                 size="mini"
                 :disabled="single"
                 @click="handleSplit"
                 v-hasPermi="['emis:emisSettleSubBill:splitSubBill']"
               >拆分子账单</el-button>
             </el-col> -->

             <el-col :span="1.5">
               <el-button
                 type="warning"
                 plain
                 icon="el-icon-download"
                 size="mini"
                 @click="handleExport"
                 v-hasPermi="['emis:emisSettleSubBill:export']"
               >导出</el-button>
             </el-col>
         </el-row>
     </div>

     <div slot="toolbar" v-if="actionType==3">
       <el-row :gutter="10" class="mb8">
             <el-col :span="1.5"  v-if="activeTab=='waitConfirm'">
               <el-button
                 type="primary"
                 plain
                 size="mini"
                 :disabled="multiple"
                 @click="handleConfirmBySite"
                 v-hasPermi="['emis:emisSettleSubBill:confirmBillBySite']"
               >批量确认</el-button>
             </el-col>
             <el-col :span="1.5"  v-if="activeTab=='waitConfirm'">
               <el-button
                 type="primary"
                 plain
                 size="mini"
                 :disabled="multiple"
                 @click="handleConfirmNoBillBySite"
                 v-hasPermi="['emis:emisSettleSubBill:confirmNoBillBySite']"
               >确认不出账</el-button>
             </el-col>
             <el-col :span="1.5" v-if="activeTab=='waitConfirm'">
               <el-button
                 type="primary"
                 plain
                 size="mini"
                 :disabled="multiple"
                 @click="handleSetBillErrorBySite"
                 v-hasPermi="['emis:emisSettleSubBill:setBillErrorBySite']"
               >置账单异常</el-button>
             </el-col>
             <el-col :span="1.5" v-if="activeTab!='waitConfirm'">
               <el-button
                 type="danger"
                 plain
                 size="mini"
                 :disabled="multiple"
                 @click="handleCancelConfirmBySite"
                 v-hasPermi="['emis:emisSettleSubBill:cancelConfirmBillBySite']"
               >取消确认</el-button>
             </el-col>

       </el-row>
     </div>

     <div slot="toolbar"  v-if="actionType==4">
       <el-row :gutter="10" class="mb8">
             <el-col :span="1.5"  v-if="activeTab=='waitMerge'">
               <div style="display:inline-flex;font-size:13px;font-weight:bold;font-weight: bold;line-height: 30px;">
                 <span>账单名称:</span>
                 <el-input
                   size="mini"
                   style="width:280px"
                   v-model="billName"
                   :placeholder="$t('账单名称')"
                   clearable
                 />
                 <span>账单月:</span>
                 <el-date-picker  size="mini" style="width:120px" v-model="billMonth" type="month" placeholder="" value-format="yyyy-MM"></el-date-picker>
               </div>
             </el-col>

             <el-col :span="1.5"  v-if="activeTab=='waitMerge'">
               <el-button
                 type="primary"
                 plain
                 size="mini"
                 :disabled="multiple"
                 @click="handleMergeBill"
                 v-hasPermi="['emis:emisSettleBill:add']"
               >合账</el-button>
             </el-col>

             <!-- <el-col :span="1.5"  v-if="activeTab=='waitMerge'">
               <el-button
                 type="primary"
                 plain
                 size="mini"
                 :disabled="multiple"
                 @click="handleMergeBill"
                 v-hasPermi="['emis:emisSettleBill:add']"
               >自动合账</el-button>
             </el-col> -->

             <!-- <el-col :span="1.5" v-if="activeTab=='waitMerge'">
               <el-button
                 type="primary"
                 plain
                 size="mini"
                 :disabled="single"
                 @click="handleSplit"
                 v-hasPermi="['emis:emisSettleSubBill:splitSubBill']"
               >拆子账单</el-button>
             </el-col> -->

             <el-col :span="1.5">
               <el-button
                 type="warning"
                 plain
                 icon="el-icon-download"
                 size="mini"
                 @click="handleExport"
                 v-hasPermi="['emis:emisSettleSubBill:export']"
               >导出</el-button>
             </el-col>
         </el-row>
     </div>


     <div slot="statInfo" style="font-size: 13px;">
       总票数:<span class="statInfoValue">{{queryStatInfoMap?queryStatInfoMap.totalNum:0}}</span>,
       总运费:<span class="statInfoValue">{{queryStatInfoMap?queryStatInfoMap.totalBillFee:0}}</span>
     </div>

     <el-table-column type="selection" width="55" align="center" />
     <el-table-column type="expand">
       <template slot-scope="scope">
         <div style="padding: 8px 50px;background:white">
            <div style="display:inline-flex;padding: 15px 0px;" >
              <div style="font-weight:500">总费用(CNY):<span>{{scope.row.billFee}}</span></div>
              <div>
                <el-button
                  type="text"
                  size="mini"
                  style="padding: 2px 10px;font-size: 13px;border: 1px solid #e1e1e1;"
                  @click="handleShowTraceInfo(scope.row)"
                >运单详情</el-button>
              </div>
            </div>
            <div style="font-weight:500">费用备注:<span>{{scope.row.waybillDetail.feeRemark}}</span></div>

            <div style="width: 500px;">
              <BillFeeListPanel :key="'feeitem_'+scope.$index" :feeitemList="scope.row.feeitemList"></BillFeeListPanel>
            </div>

         </div>
       </template>
     </el-table-column>

     <el-table-column :label="$t('运单号')" align="center" prop="billCode" min-width="130" />
     <el-table-column :label="$t('预警提示')" align="center" prop="waybillDetail.blSpecialQuote" width="150" :show-overflow-tooltip="true">
      <template slot-scope="scope">
            <span v-if="scope.row.blConfirmCenter=='0'" style="color:red;font-weight:500">财务未确认,</span>
            <span v-if="scope.row.blConfirmSite=='0'" style="color:red;font-weight:500">业务未确认</span>
          </template>
      </el-table-column>
     <!-- <el-table-column :label="$t('是否特殊报价')" align="center" prop="waybillDetail.sendDate" min-width="170" :show-overflow-tooltip="true"/> -->
      <el-table-column :label="$t('特殊报价')" align="center" prop="waybillDetail.blSpecialQuote" width="150" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span v-if="scope.row.waybillDetail.blSpecialQuote==1">是</span>
            <span v-else>否</span>
          </template>
      </el-table-column>
      <el-table-column :label="$t('计费方式')" align="center" prop="waybillDetail.calcFeeType" width="150" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.emis_calc_fee_type" :value="scope.row.waybillDetail.calcFeeType"/>
          </template>
      </el-table-column>
     <el-table-column :label="$t('寄件日期')" align="center" prop="waybillDetail.sendDate" min-width="170" :show-overflow-tooltip="true"/>
      <!-- <el-table-column :label="$t('发件人')" align="center" prop="fjr" width="200" :show-overflow-tooltip="true">
         <template slot-scope="scope">
           <span>{{ scope.row.waybillDetail.sendName }}--{{ scope.row.waybillDetail.receiveName }}</span>
         </template>
      </el-table-column> -->
     <el-table-column :label="$t('寄件网点')" align="center" prop="waybillDetail.sendSiteName" min-width="150" :show-overflow-tooltip="true"/>
     <el-table-column :label="$t('寄件公司')" align="center" prop="waybillDetail.sendCompany" min-width="150" :show-overflow-tooltip="true"/>

     <el-table-column v-if="actionType!=1"  :label="$t('月结编号')" align="center" prop="custNo" min-width="150" :show-overflow-tooltip="true">
       <template slot-scope="scope">
           <span  type="normal">{{ scope.row.custNo }}</span>
         </template>
     </el-table-column>

     <el-table-column v-if="actionType!=1"  :label="$t('月结客户')" align="center" prop="custName" min-width="150" :show-overflow-tooltip="true">
       <template slot-scope="scope">
           <span v-if="['2','4','5'].includes(scope.row.waybillDetail.paymentType)" type="normal">{{ scope.row.custName }}</span>
         </template>
     </el-table-column>

     <!-- <el-table-column :label="$t('取件员/操作员')"  align="center" prop="takePieceEmployeeName" min-width="170" :show-overflow-tooltip="true">
       <template slot-scope="scope">
            <span v-if="scope.row.pickupMethod==1">{{scope.row.waybillDetail.operateEmployeeName}}</span>
            <span v-if="scope.row.pickupMethod==2">{{scope.row.waybillDetail.takePieceEmployeeName}}</span>
            <span v-else></span>
         </template>
     </el-table-column> -->
     <el-table-column :label="$t('线路')" align="center" prop="waybillDetail.transLineTypeName" min-width="80" :show-overflow-tooltip="true"/>

     <el-table-column :label="$t('产品类型')" align="center" prop="waybillDetail.productTypeName" min-width="120" :show-overflow-tooltip="true">
       <template slot-scope="scope">
            <span >{{scope.row.waybillDetail.productTypeName}}({{scope.row.waybillDetail.timeType}})</span>
         </template>
     </el-table-column>


       <el-table-column :label="$t('寄件人')" align="center" prop="waybillDetail.sendName" min-width="80" :show-overflow-tooltip="true"/>
       <el-table-column :label="$t('件数')" align="center" prop="waybillDetail.parcelQty" min-width="80" />
       <el-table-column :label="$t('实际重量')" align="center" prop="waybillDetail.billWeight" min-width="80" />
       <el-table-column :label="$t('体积')" align="center" prop="waybillDetail.totalVolume" min-width="80" />
       <el-table-column :label="$t('体积重量')" align="center" prop="waybillDetail.volumeWeight" min-width="80" />
       <el-table-column :label="$t('结算重量')" align="center" prop="waybillDetail.settlementWeight" min-width="80" />
       <el-table-column :label="$t('运费')" align="center" prop="waybillDetail.freight" min-width="80" >
            <template slot-scope="scope">
                <span  style="color: red;font-weight: 500" v-if="scope.row.waybillDetail.realFee!=scope.row.waybillDetail.freight">{{scope.row.waybillDetail.freight}}</span>
                <span v-else>{{scope.row.waybillDetail.freight}}</span>
            </template>
          </el-table-column>
       <el-table-column :label="$t('标准报价')" align="center" prop="waybillDetail.realFee" min-width="80" />


       <el-table-column :label="$t('费用备注')" align="center" prop="waybillDetail.feeRemark" min-width="80" :show-overflow-tooltip="true"/>
       <el-table-column :label="$t('支付类型')" align="center" prop="waybillDetail.paymentType" min-width="80" :show-overflow-tooltip="true" >
         <template slot-scope="scope">
           <dict-tag :options="dict.type.emis_payment_type" :value="scope.row.waybillDetail.paymentType"/>
         </template>
       </el-table-column>
       <el-table-column :label="$t('录单备注')" align="center" prop="waybillDetail.remark" min-width="80" :show-overflow-tooltip="true" />
       <el-table-column :label="$t('回款联系人')" align="center" prop="waybillDetail.payee" min-width="100" />
       <el-table-column :label="$t('销售联系人')" align="center" prop="waybillDetail.salesmen" min-width="100" />

       <el-table-column :label="$t('问题件')" align="center" prop="waybillDetail.blIsQuestion" min-width="150" >
           <template slot-scope="scope">
               <el-tag v-if="scope.row.waybillDetail.blIsQuestion==1" type="danger">是</el-tag>
               <span v-else >/</span>
           </template>
         </el-table-column>
       <el-table-column :label="$t('问题件类型')" align="center" prop="waybillDetail.problemTypeName" width="150" :show-overflow-tooltip="true"/>
       <el-table-column :label="$t('问题件原因')" align="center" prop="waybillDetail.problemCause" width="150" :show-overflow-tooltip="true"/>

       <el-table-column :label="$t('财务确认状态')" align="center" prop="blConfirmCenter" min-width="120" >
         <template slot-scope="scope">
           <span v-if="scope.row.blConfirmCenter=='0'" >未确认</span>
           <el-tag v-if="scope.row.blConfirmCenter=='1'" type="success">已确认</el-tag>
           <el-tag v-if="scope.row.blConfirmCenter=='2'" type="error">确认不出账</el-tag>
           <el-tag v-if="scope.row.blConfirmCenter=='3'" type="error">账单异常</el-tag>
         </template>
       </el-table-column>
       <el-table-column :label="$t('财务确认人')" align="center" prop="confirmCenterManName" min-width="100" />
       <el-table-column :label="$t('财务确认时间')" align="center" prop="confirmCenterDate" min-width="170" />
       <el-table-column :label="$t('财务备注')" align="center" prop="confirmCenterNote" min-width="100" />

       <el-table-column :label="$t('业务确认状态')" align="center" prop="blConfirmSite" min-width="120" >
         <template slot-scope="scope">
           <span v-if="scope.row.blConfirmSite=='0'" >未确认</span>
           <el-tag v-if="scope.row.blConfirmSite=='1'" type="success">已确认</el-tag>
           <el-tag v-if="scope.row.blConfirmSite=='2'" type="error">确认不出账</el-tag>
           <el-tag v-if="scope.row.blConfirmSite=='3'" type="error">账单异常</el-tag>
         </template>
     </el-table-column>
     <el-table-column :label="$t('业务确认时间')" align="center" prop="confirmSiteDate" min-width="170" />
     <el-table-column :label="$t('业务确认人')" align="center" prop="confirmSiteManName" min-width="100" />
     <el-table-column :label="$t('业务备注')" align="center" prop="confirmSiteNote" min-width="100" />


   </XdTable>

   <el-dialog :title="titleMergeForm" :visible.sync="openMergeForm" width="80%" :destroy-on-close="true" v-dialogDrag append-to-body>
     <MergeBillForm :settleBillNo="currentSettleBillNo"   @on-changed="handleFormChanged" @on-cancel="cancelForm"></MergeBillForm>
   </el-dialog>

   <el-dialog :title="openTraceInfoTitle" :visible.sync="openTraceInfo" width="80%" :close-on-click-modal="false"  v-dialogDrag append-to-body>
     <TraceWaybillDetailView  :key="currentTraceBillCode" :scanBillCode="currentTraceBillCode" :billDetail="currentTraceBillItem"></TraceWaybillDetailView>
   </el-dialog>

 </XdPageContainer>
</template>

<script>
import { listEmisSettleSubBill,
 getQueryStatInfoMap,
 delEmisSettleSubBill,
 confirmBillByCenter,
 cancelConfirmBillByCenter,
 confirmNoBillByCenter,
 setBillErrorByCenter,

 confirmBillBySite,
 cancelConfirmBillBySite,
 confirmNoBillBySite,
 setBillErrorBySite
} from "@/api/emis/emisSettleSubBill";

import { listEmisSettleBill, addEmisSettleBill } from "@/api/emis/emisSettleBill";


import elDateSimplePicker from '@/components/DatePickerAdv/elDateSimplePicker';
// import emisSettleSubBillView from '@/views/emis/emisSettleSubBill/emisSettleSubBillView';
import emisSettleSubBillForm from '@/views/emis/emisSettleSubBill/emisSettleSubBillForm';

// import emisWaybillView from '@/views/emis/emisWaybill/emisWaybillView';
import emisWaybillForm from '@/views/emis/emisWaybill/emisWaybillForm';
import elDateAdvPicker from '@/components/DatePickerAdv/elDateAdvPicker';

import CountryPicker1 from '@/views/emis/EmisBaseTools/CountryPicker.vue';

import CountryPicker2 from '@/views/emis/EmisBaseTools/CountryPicker.vue';
import ProvincePicker2 from '@/views/emis/EmisBaseTools/ProvincePicker.vue';


import TransLinePicker from '@/views/emis/EmisBaseTools/TransLinePicker.vue';
import TransProductPicker from '@/views/emis/EmisBaseTools/TransProductPicker.vue';


import PayeePicker from '@/views/emis/EmisBaseTools/PayeePicker.vue';
import SalemanPicker from '@/views/emis/EmisBaseTools/SalemanPicker.vue';

import EmisUserSimplePicker0 from '@/views/emis/EmisBaseTools/EmisUserSimplePicker.vue';
import EmisUserSimplePicker1 from '@/views/emis/EmisBaseTools/EmisUserSimplePicker.vue';
import EmisUserSimplePicker2 from '@/views/emis/EmisBaseTools/EmisUserSimplePicker.vue';

import EmisSiteSimplePicker1 from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue';
import EmisSiteSimplePicker2 from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue';

import ProblemTypePicker from '@/views/emis/EmisBaseTools/ProblemTypePicker.vue';

import EmisMonthpayAccountPicker from '@/views/emis/EmisBaseTools/EmisMonthpayAccountPicker.vue';
import TraceWaybillDetailView from '@/views/emis/customerService/traceWaybillDetailView.vue';
import BillFeeListPanel from '@/views/emis/emisSettleSubBill/panel/BillFeeListPanel.vue';

import MergeBillForm from '@/views/emis/emisSettleBill/MergeBillForm.vue';
import { parseTime,genJsSeqNo } from "@/utils/custom";


export default {
 name: "SubBillConfirmByMoneyList",
 // name: "SubBillConfirmByMonthList",
 components: {
  BillFeeListPanel,
   elDateSimplePicker,emisSettleSubBillForm,
   EmisMonthpayAccountPicker,
   elDateAdvPicker,emisWaybillForm,
   CountryPicker1,
   CountryPicker2,ProvincePicker2,
   TransLinePicker,TransProductPicker,
   PayeePicker,
   SalemanPicker,
   EmisUserSimplePicker0,
   EmisUserSimplePicker1,
   EmisUserSimplePicker2,

   EmisSiteSimplePicker1,
   EmisSiteSimplePicker2,
   ProblemTypePicker,

   TraceWaybillDetailView,
   MergeBillForm
 },
 dicts: ['emis_qujian_fangshi','emis_declare_mode','emis_customs_clear',
       'emis_tab_packing_type','emis_tab_dispatch_mode','emis_payment_type',
       'emis_calc_fee_type','emis_print_type','emis_payment_status','emis_waybill_status','emis_tab_dispatch_mode'
 ],
 data() {
   return {
     activeTab: "waitConfirm",
     // 遮罩层
     loading: true,
     // 选中数组
     ids: [],
     // 非单个禁用
     single: true,
     // 非多个禁用
     multiple: true,
     // 显示搜索条件
     showSearch: true,
     // 创建时间搜索
     dateTimeRange:[],
     // 总条数
     total: 0,
     // 结算子账单表格数据
     emisSettleSubBillList: [],

     actionType:null,
     settleType:null,

     billName:null,
     billMonth:null,



     titleMergeForm:null,
     openMergeForm:false,

     currentSettleBillNo:null,
     selectBillList:[],


     storageName:null,

     queryStatInfoMap:null,

     currentId:null,
     openForm: false,
     titleForm: "",

     openTraceInfo:false,
     openTraceInfoTitle:null,
     currentTraceBillItem:null,
     currentTraceBillCode:null,

          // 时间搜索
     // 弹出展示层
     id:null,
     titleView:"",
     openView: false,
     // 更新网点时间范围
     daterangeBillDate: [],
     // 更新网点时间范围
     daterangeCreateTime: [],
     // 更新网点时间范围
     daterangeUpdateTime: [],
     // 查询参数
     queryParams: {
      pageNum: 1,
        pageSize: 20,
        billNo: null,
        parentBillNo: null,
        settleBillNo: null,
        billCode: null,
        billDate: null,
        billFee: null,
        currency: null,
        settleType: null,
        blSplit: null,
        blMerge: null,
        billMonth: null,
        custNo: null,
        customerCode: null,
        customerName: null,
        payee: null,
        salesmen: null,
        blSpecialQuote: null,
        blSensitive: null,
        blConfirmCenter: null,
        confirmCenterDate: null,
        confirmCenterNote: null,
        confirmCenterManCode: null,
        confirmCenterCode: null,
        blConfirmSite: null,
        confirmSiteDate: null,
        confirmSiteManCode: null,
        confirmSiteNote: null,
        confirmSiteCode: null,
        delFlag: null,
       params:{
             customerCode: null,
             customerName: null,
             receiveCustomerCode: null,
             receiveCustomerName: null,
             thirdCustomerCode: null,
             thirdCustomerName: null,
             receiveName: null,
             receiveCompany: null,
             receiveMobile: null,
             receiveTel: null,
             receiveCountry: null,
             receiveProvince: null,
             receiveCity: null,
             receiveCounty: null,
             receiveTown: null,
             receiveAddress: null,
             receivePostcode: null,
             receivePcd: null,
             sendName: null,
             sendCompany: null,
             sendMobile: null,
             sendTel: null,
             sendCountry: null,
             sendProvince: null,
             sendCity: null,
             sendCounty: null,
             sendTown: null,
             sendAddress: null,
             sendPostcode: null,
             sendPcd: null,
             paymentType: null,
             calcFeeType: null,
             custNo: null,
             transLineType: null,
             productType: null,
             timeType: null,
             meterType: null,
             customsClear: null,
             customsEclaration: null,
             estimateDate: null,
             packType: null,
             dispatchMethod: null,
             pickupMethod: null,
             pickStartDate: null,
             pickFinishDate: null,
             pickFailReason: null,
             intoWarehouseCode: null,
             intoWarehouseName: null,
             intoWarehouseAddress: null,
             intoWarehouseContact: null,
             intoWarehousePhone: null,
             intoWarehouseBillCode: null,
             warehouseInNo: null,
             customerDeliveryBeginTime: null,
             customerDeliveryEndTime: null,
             goodsType: null,
             goodsInfo: null,
             goodsPics: null,
             blPrepareInFreight: null,
             prepareInEstFee: null,
             prepareInRealFee: null,
             prepareInExpress: null,
             prepareInBillCode: null,
             prepareInRemark: null,
             prepareInSupplier: null,
             totalWeight: null,
             totalVolume: null,
             parcelQty: null,
             billWeight: null,
             volumeWeight: null,
             currency: null,
             settlementWeight: null,
             feeWeight: null,
             freight: null,
             blOverLong: null,
             blBill: null,
             blOverWeight: null,
             overWeightNumber: null,
             feeRemark: null,
             thirdCode: null,
             realValue: null,
             blInsure: null,
             insureValue: null,
             insureValueCurrency: null,
             insureFeeCurrency: null,
             insureFee: null,
             insureRemark: null,
             insureSiteCode: null,
             insureDate: null,
             blPrint: null,
             printManCode: null,
             printSite: null,
             printDate: null,
             printCount: null,
             blDispFd: null,
             transferCode: null,
             transferBillcode: null,
             dispFdDate: null,
             dispFdReason: null,
             currentSiteCode: null,
             lastSiteCode: null,
             registerSiteCode: null,
             registerDate: null,
             registerManCode: null,
             takePieceEmployeeCode: null,
             sendSiteCode: null,
             sendDate: null,
             dispatchManCode: null,
             dispatchDate: null,
             dispatchSiteCode: null,
             produceBillDate: null,
             produceBillSiteCode: null,
             produceBillManCode: null,
             destinationCode: null,
             destinationProvince: null,
             destinationCity: null,
             destinationCounty: null,
             dispatchUnderlingSiteCode: null,
             destinationCenterCode: null,
             marketManCode: null,
             payee: null,
             salesmen: null,
             operateEmployeeCode: null,
             blIsQuestion: null,
             problemType: null,
             problemCause: null,
             problemDelayDays: null,
             blMessage: null,
             blAcceptMessage: null,
             blGenSubbill: null,
             signMan: null,
             signManCode: null,
             signSiteCode: null,
             signDate: null,
             billPicSendRmk: null,
             billPicDispatchRmk: null,
             timezoneOffset: null,
             delFlag: null,
             remark: null,
             blSign:null,

             mergeStatus:null
       }
     },
   };
 },
 created() {
   this.queryParams.blConfirmCenter='0';
   this.queryParams.blConfirmSite='1';
   this.actionType=this.$route.query.actionType;

   this.initData();
   this.getList();
 },
 methods: {

   initData(){
    this.storageName="SubBillConfirmByMonthList_main";
    this.queryParams.blConfirmCenter=0;
   },
   initData_old(){
    //  if(this.actionType==1){
    //      this.storageName="SubBillConfirmByMoneyList_main";
    //      this.queryParams.blConfirmCenter=0;
    //  }
    //  else if(this.actionType==2){
    //    this.storageName="SubBillConfirmByMonthList_main";
    //    this.queryParams.blConfirmCenter=0;
    //  }
    //  else if(this.actionType==3){
    //    this.storageName="SubBillConfirmBySitehList_main";
    //    this.queryParams.blConfirmSite=0;
    //  }
    //  else if(this.actionType==4){
    //     var date = new Date();
    //     var year = date.getFullYear();
    //     var month = date.getMonth();
    //     var toMonth = year + "-" + this.lpadZero(month + 1,2);
    //     this.billMonth = toMonth;

    //     this.queryParams.blConfirmCenter=1;
    //     this.queryParams.blConfirmSite=1;

    //    this.storageName="subBillMergeMgnt_main";
    //    this.activeTab='waitMerge';
    //  }
   },
   handleClick(tab, event) {
       // console.log(tab, event);
       if(this.actionType==1|| this.actionType==2){
         this.queryParams.blConfirmSite=null;
         this.queryParams.blConfirmCenter=null;
         if (tab.name == 'all') {
           this.queryParams.blConfirmCenter=null;
         }
         else if (tab.name == 'waitConfirm') {
           this.queryParams.blConfirmCenter='0';
         }
         else if (tab.name == 'hasConfirm') {
           this.queryParams.blConfirmCenter='1';
         }
         else if (tab.name == 'confirmNotBill') {
           this.queryParams.blConfirmCenter='2';
         }
         else if (tab.name == 'billError') {
           this.queryParams.blConfirmCenter='3';
         }
         else if (tab.name == 'siteBillError') {
           this.queryParams.blConfirmSite='3';
         }
       }
       else if(this.actionType==3){
        this.queryParams.blConfirmSite=null;
         this.queryParams.blConfirmCenter=null;
           if (tab.name == 'all') {
             this.queryParams.blConfirmSite=null;
           }
           else if (tab.name == 'waitConfirm') {
             this.queryParams.blConfirmSite='0';
           }
           else if (tab.name == 'hasConfirm') {
             this.queryParams.blConfirmSite='1';
           }
           else if (tab.name == 'confirmNotBill') {
             this.queryParams.blConfirmSite='2';
           }
           else if (tab.name == 'billError') {
             this.queryParams.blConfirmCenter='3';
           }
           else if (tab.name == 'siteBillError') {
             this.queryParams.blConfirmSite='3';
           }
       }
       else if(this.actionType==4){
           if (tab.name == 'waitMerge') {
             this.queryParams.params.mergeStatus='1';
             // this.queryParams.blConfirmSite='0';
           }
           else if (tab.name == 'hasMerge') {
             this.queryParams.params.mergeStatus='2';
           }

       }
       this.getList();
   },

   tableRowClassName({row, rowIndex}) {
       if (row.blConfirmCenter=='0') {
         return {};
       }
       else if (row.blConfirmCenter=='1') {
         return {};
       }
       else if (row.blConfirmCenter=='2') {
         return {"text-decoration":"line-through","color":"gray"};
       }
       else if (row.blConfirmCenter=='3' || row.blConfirmSite=='3') {
         return {"color": "red !important"}
       }

       return '';
   },
   /** 查询结算子账单列表 */

   initQueryParams(){
    if(this.actionType==1){
       this.queryParams.settleType=1;
     }
     else if(this.actionType==2){
       this.queryParams.settleType=2;
     }
     else if(this.actionType==3){
       this.queryParams.params.salesmen=this.$store.getters.empName
     }
     else if(this.actionType==4){
      this.queryParams.blConfirmCenter=1;
      this.queryParams.blConfirmSite=1;
     }

     this.queryParams=this.addDateRange(this.queryParams, this.dateTimeRange,"sendDate")
   },
   getList() {
     this.loading = true;

     this.initQueryParams();

     listEmisSettleSubBill(this.queryParams).then(response => {
       this.emisSettleSubBillList = response.rows;
       this.total = response.total;
       this.loading = false;
     });

       // 查询统计
     getQueryStatInfoMap(this.queryParams).then(response => {
       this.queryStatInfoMap = response.data;
     });

   },
   //指定列求和
   getSummaries(param) {
       const { columns, data } = param;
      //  console.log("===>getSummaries==>",param)
       const sums = [];
       columns.forEach((column, index) => {
             if (index === 0) {
               sums[index] = '合计';
               return;
             }


             if (
               column.property === 'waybillDetail.billWeight'
               ) {
                 const values = data.map(item => Number(item.waybillDetail.billWeight));
                 sums[index] = values.reduce((prev, curr) => {
                   const value = Number(curr);
                   if (!isNaN(value)) {
                     return prev + curr;
                   } else {
                     return prev;
                   }
                 }, 0);
                 sums[index] = sums[index].toFixed(2); //保留2位小数
             }

             else if (
               column.property === 'waybillDetail.volumeWeight'

               ) {
                 const values = data.map(item => Number(item.waybillDetail.volumeWeight));

                 sums[index] = values.reduce((prev, curr) => {
                   const value = Number(curr);
                   if (!isNaN(value)) {
                     return prev + curr;
                   } else {
                     return prev;
                   }
                 }, 0);
                 sums[index] = sums[index].toFixed(2); //保留2位小数
             }
             else if (
               column.property === 'waybillDetail.freight'

               ) {
                 const values = data.map(item => Number(item.waybillDetail.freight));

                 sums[index] = values.reduce((prev, curr) => {
                   const value = Number(curr);
                   if (!isNaN(value)) {
                     return prev + curr;
                   } else {
                     return prev;
                   }
                 }, 0);
                 sums[index] = sums[index].toFixed(2); //保留2位小数
             }

             else if (
               column.property === 'waybillDetail.totalVolume'
               ) {
                 const values = data.map(item => Number(item.waybillDetail.totalVolume));
                 sums[index] = values.reduce((prev, curr) => {
                   const value = Number(curr);
                   if (!isNaN(value)) {
                     return prev + curr;
                   } else {
                     return prev;
                   }
                 }, 0);
                 sums[index] = sums[index].toFixed(5); //保留2位小数
               }
             else if(
               column.property === 'waybillDetail.parcelQty'
             ){
                  const values = data.map(item => Number(item.waybillDetail.parcelQty));
                   sums[index] = values.reduce((prev, curr) => {
                   const value = Number(curr);
                   if (!isNaN(value)) {
                     return prev + curr;
                   } else {
                     return prev;
                   }
                 }, 0);
                 sums[index];
             }
       });
     console.log(sums);
     return sums
   },

   handleShowTraceInfo(row){
       this.openTraceInfoTitle="运单详情【"+row.billCode+"】";
       this.currentTraceBillCode=row.billCode;
       this.currentTraceBillItem=row.waybillDetail;
       this.openTraceInfo=true;
   },

   handleMergeBill(){

    if(!this.billName){
      this.$modal.msgError("账单名称不能为空!");
      return;
    }

    if(!this.billMonth){
      this.$modal.msgError("账单月不能为空!");
      return;
    }

    this.$confirm("确定合账吗?", "提示", {
          cancelButtonText: "否",
          confirmButtonText: "确定",
          type: "warning",
          distinguishCancelAndClose: true,
          closeOnClickModal: false
      }).then(() => {

        this.currentSettleBillNo=genJsSeqNo();

        let startDate =  new Date(this.billMonth+"-01 00:00:00");
        let endDate= this.getMonthLast(startDate);
        endDate.setHours(23,59,59,0)

        let settleBillForm={
            settleBillNo: this.currentSettleBillNo,
            settleBillName: this.billName,
            billMonth: this.billMonth,
            settleStartDate:parseTime(startDate),
            settleEndDate:parseTime(endDate),
            subBillList:this.selectBillList,
        }


        // 生成合账单号
        addEmisSettleBill(settleBillForm).then(response => {
              this.$modal.msgSuccess("合并成功");
              this.$emit("on-changed");
              // this.titleMergeForm="账单-"+this.currentSettleBillNo;
              // this.openMergeForm=true;
        });


      }).catch(() => {});
   },

   handleAutoMergeBill(){

      if(!this.billMonth){
        this.$modal.msgError("账单月不能为空!");
        return;
      }

      this.$confirm("确定自动合账吗?", "提示", {
            cancelButtonText: "否",
            confirmButtonText: "确定",
            type: "warning",
            distinguishCancelAndClose: true,
            closeOnClickModal: false
        }).then(() => {

          this.currentSettleBillNo=genJsSeqNo();

          let startDate =  new Date(this.billMonth+"-01 00:00:00");
          let endDate= this.getMonthLast(startDate);
          endDate.setHours(23,59,59,0)

          let settleBillForm={
              settleBillNo: this.currentSettleBillNo,
              settleBillName: this.billName,
              billMonth: this.billMonth,
              settleStartDate:parseTime(startDate),
              settleEndDate:parseTime(endDate),
              subBillList:this.selectBillList,
          }


          // 生成合账单号
          addEmisSettleBill(settleBillForm).then(response => {
                this.$modal.msgSuccess("合并成功");
                this.$emit("on-changed");
                this.titleMergeForm="账单-"+this.currentSettleBillNo;
                this.openMergeForm=true;
          });


        }).catch(() => {});
  },

   // 获取当前月的最后一天
  getMonthLast(date) {
        var currentMonth = date.getMonth()
        var nextMonth = ++currentMonth
        var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1)
        var oneDay = 1000 * 60 * 60 * 24
        return new Date(nextMonthFirstDay - oneDay)
   },

   handleSplit(){

   },
   /** 搜索按钮操作 */
   handleQuery() {
     this.queryParams.pageNum = 1;
     this.getList();
   },
   /** 重置按钮操作 */
   resetQuery() {
     this.resetForm("queryForm");
     this.handleQuery();
   },

  lpadZero(val,len) {
    return (new Array(len + 1).join('0') + val).slice(-len);
  },
   // 多选框选中数据
   handleSelectionChange(selection) {
     this.ids = selection.map(item => item.id)
     this.single = selection.length!==1
     this.multiple = !selection.length

     this.selectBillList=selection;
     if(this.selectBillList&&this.selectBillList.length>0){
        const item0=this.selectBillList[0];
        this.billName=item0.waybillDetail.customerName+"账单-"+this.billMonth;
     }else{
      this.billName=null;
     }
   },
   // 排序 查询字段是表格中字段名字 动态取值排序顺序
   handleSortChange(column) {
     this.queryParams.orderByColumn = column.prop;
     this.queryParams.isAsc = column.order;
     this.getList();
   },

   /** 修改按钮操作 */
   handleUpdate(row) {
      this.currentId= row.id;
      this.openForm = true;
      this.titleForm = "修改";
   },
   handleConfirmByCenter(row) {
     const ids = row.id || this.ids;
     this.$modal.confirm('是否确认').then(function() {
       return confirmBillByCenter(ids);
     }).then(() => {
       this.getList();
       this.$modal.msgSuccess("操作成功");
     }).catch(() => {});
   },
   handleCancelConfirmByCenter(row) {
     const ids = row.id || this.ids;
     this.$modal.confirm('是否取消确认').then(function() {
       return cancelConfirmBillByCenter(ids);
     }).then(() => {
       this.getList();
       this.$modal.msgSuccess("操作成功");
     }).catch(() => {});
   },
   handleConfirmNoBillByCenter(row) {
     const ids = row.id || this.ids;
     this.$prompt('请输入不出账原因', "操作确认", {
       confirmButtonText: "确定",
       cancelButtonText: "取消",
       closeOnClickModal: false,
       inputPattern: /^.{1,30}$/,
       inputErrorMessage: "原因长度必须介于 1 和 30 之间"
     }).then(({ value }) => {
       confirmNoBillByCenter(ids,value).then(response => {
           this.$modal.msgSuccess("操作成功" );
           this.getList();
       });
     }).catch(() => {});
   },
   handleSetBillErrorByCenter(row) {
     const ids = row.id || this.ids;
     this.$prompt('请输入账单异常原因', "操作确认", {
       confirmButtonText: "确定",
       cancelButtonText: "取消",
       closeOnClickModal: false,
       inputPattern: /^.{1,30}$/,
       inputErrorMessage: "原因长度必须介于 1 和 30 之间"
     }).then(({ value }) => {
       setBillErrorByCenter(ids,value).then(response => {
           this.$modal.msgSuccess("操作成功" );
           this.getList();
       });
     }).catch(() => {});
   },

   handleConfirmBySite(row) {
     const ids = row.id || this.ids;
     this.$modal.confirm('是否确认').then(function() {
       return confirmBillBySite(ids);
     }).then(() => {
       this.getList();
       this.$modal.msgSuccess("操作成功");
     }).catch(() => {});
   },
   handleCancelConfirmBySite(row) {
     const ids = row.id || this.ids;
     this.$modal.confirm('是否取消确认').then(function() {
       return cancelConfirmBillBySite(ids);
     }).then(() => {
       this.getList();
       this.$modal.msgSuccess("操作成功");
     }).catch(() => {});
   },
   handleConfirmNoBillBySite(row) {
     const ids = row.id || this.ids;
     this.$prompt('请输入不出账原因', "操作确认", {
       confirmButtonText: "确定",
       cancelButtonText: "取消",
       closeOnClickModal: false,
       inputPattern: /^.{1,30}$/,
       inputErrorMessage: "原因长度必须介于 1 和 30 之间"
     }).then(({ value }) => {
       confirmNoBillBySite(ids,value).then(response => {
           this.$modal.msgSuccess("操作成功" );
           this.getList();
       });
     }).catch(() => {});
   },
   handleSetBillErrorBySite(row) {
     const ids = row.id || this.ids;
     this.$prompt('请输入账单异常原因', "操作确认", {
       confirmButtonText: "确定",
       cancelButtonText: "取消",
       closeOnClickModal: false,
       inputPattern: /^.{1,30}$/,
       inputErrorMessage: "原因长度必须介于 1 和 30 之间"
     }).then(({ value }) => {
       setBillErrorBySite(ids,value).then(response => {
           this.$modal.msgSuccess("操作成功" );
           this.getList();
       });
     }).catch(() => {});
   },

   handleFormChanged(){
       this.openForm = false;
       this.getList();
   },
   cancelForm(){
     this.openForm = false;
   },

   /** 导出按钮操作 */
   handleExport() {
   //   this.download('emis/emisSettleSubBill/export', {
   //     ...this.queryParams
   //   }, `emisSettleSubBill_${new Date().getTime()}.xlsx`)
    const loadingInstance = this.$loading({
           text: '正在导出...'
       })
      var qParam = {...this.queryParams};
      qParam.pageNum=1;
      qParam.pageSize=5000;

      listEmisSettleSubBill(this.addDateRange(qParam, this.dateTimeRange)).then(response => {
       this.downloadLoading = false
       if (response.code === 200) {
               const curList = response.rows
               import('@/vendor/Export2Excel').then(excel => {
                 const tHeader = ['id','分账单号','父账单号','总结算账单号','运单号','出账时间','账单费用','费用币种','结算账单类型','是否已拆单','账单月份','月结编号','客户编码','客户名称','财务确认状态','财务确认日期','财务确认站点','财务确认人','站点确认状态','财务确认备注','站点确认日期','站点确认人','网点确认备注','删除标志（0代表存在','创建者','创建时间','更新者','更新时间','创建网点','更新网点',];
                 const filterVal = ['id','billNo','parentBillNo','settleBillNo','billCode','billDate','billFee','currency','settleType','blSplit','billMonth','custNo','customerCode','customerName','blConfirm','confirmDate','confirmSite','confirmManCode','blSiteConfirm','confirmNote','siteConfirmDate','siteConfirmManCode','siteConfirmNote','delFlag','createBy','createTime','updateBy','updateTime','createSite','updateSite',];
                 const data = this.formatJson(filterVal, curList, response.rows)
                 excel.export_json_to_excel({
                   header: tHeader,
                   data,
                   filename: '结算子账单',
                   autoWidth: true
                 })
                 loadingInstance.close()
               })
       }
     });
   },
   formatJson(filterVal, jsonData, resData) {
     let index = 0
     return jsonData.map(v => filterVal.map(j => {
       if (j === 'index') {
         return ++index
       }
       if (j === 'status') {
         var statusStr='xxx'
         if(v[j] == 10){
             statusStr='xxx'
         }
         return statusStr;
       }
       return v[j]
     }))
   },
   /** 列索引函数  */
   getIndex($index) {
         return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + $index + 1
   },
   /** 时间搜索响应函数 */
   dateTimeChange(value){
       this.dateTimeRange=value;
   },
 }
};
</script>

<style lang="scss" scoped>

.feeItem{

 border: 1px solid #dfe6ec;
 margin-bottom:50px;

 ul{
   list-style: none;
   padding: 0px;
   margin: 0px;
   width: 590px;
   height: 32px;
   line-height: 32px;
   border: 1px solid #dfe6ec;
   border-top: 0px;
   font-size: 12px;

 }
 ul li{
   display:block; width:33%; float:left;text-indent:2em
 }
 .th{
   background:#FFF; font-weight:bold; border-top:1px
 }
}


.statInfoValue{
   color: red;
   font-size: 13px;
   font-weight: 500;
 }
</style>