<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button size="mini" type="primary" @click="combinedQuery = !combinedQuery">组合查询</el-button>
      <el-button :size="sizeType" type="warning" @click="exportBtn">导出</el-button>
      <el-button :size="sizeType" type="success" @click="multiCharge(1)">批量收款</el-button>
      <el-tag>您一共勾选了{{ choosedList.length }}条</el-tag>
      <el-card class="box-card" v-if="combinedQuery">
        <el-input :size="sizeType" v-model="search.clientName" placeholder="客户名称" style="width: 140px;" class="filter-item"/>
        <el-button @click="selectCustomersBtn" :size="sizeType" type="primary" plain>多个客户查询</el-button>
        <el-input :size="sizeType" v-model="search.orderCode" placeholder="订单编号" style="width: 130px;" class="filter-item"/>
        <el-input :size="sizeType" v-model="search.payKind" placeholder="付款方式" style="width: 130px;" class="filter-item"/>
        <el-input :size="sizeType" v-model="search.createMan" placeholder="制单人" style="width: 80px;" class="filter-item"/>
        <el-input :size="sizeType" v-model="search.platformOrderID" placeholder="平台单号" style="width: 140px;" class="filter-item"/>
        <el-select style="width: 110px" :size="sizeType" v-model="search.dataKind">
          <el-option
            v-for="item in stateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"></el-option>
        </el-select>
        <el-select style="width: 100px" v-model="search.voidFlag" :size="sizeType">
          <el-option label="全部" :value="-1"></el-option>
          <el-option label="未作废" :value="0"></el-option>
        </el-select>
        <el-select style="width: 100px" v-model="search.orderSendStateTmp" :size="sizeType">
          <el-option label="全部" :value="-1"></el-option>
          <el-option label="未发货" :value="0"></el-option>
          <el-option label="已发货" :value="1"></el-option>
          <el-option label="强制发货" :value="2"></el-option>
        </el-select>
        <el-select style="width: 100px" v-model="search.sendFeedBackCheck" :size="sizeType">
          <el-option label="全部" :value="-1"></el-option>
          <el-option label="未审核" :value="0"></el-option>
          <el-option label="已审核" :value="1"></el-option>
        </el-select>
        <span style="font-size: 13px;color: #7c7c7c">反馈状态:</span>
        <el-select style="width: 100px" v-model="search.sendFeedBackState" :size="sizeType">
          <el-option label="全部" :value="-1"></el-option>
          <el-option label="未反馈" :value="0"></el-option>
          <el-option label="已反馈" :value="1"></el-option>
        </el-select>
        <el-date-picker
          style="width: 225px"
          size="mini"
          v-model="searchTime"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
        <el-input :size="sizeType" v-model="search.feedLogisticsName" placeholder="物流/配送" style="width: 130px;" class="filter-item"/>
        <el-input :size="sizeType" v-model="search.feedLogisticsCode" placeholder="物流货号" style="width: 130px;" class="filter-item"/>
        <el-input :size="sizeType" v-model="search.feedGuarantorName" placeholder="担保人" style="width: 130px;" class="filter-item"/>
        <el-select style="width: 100px" placeholder="反馈类型" v-model="search.feedChargeKind" :size="sizeType">
          <el-option label="全部" :value="-1"></el-option>
          <el-option label="现金" :value="0"></el-option>
          <el-option label="物流代收" :value="1"></el-option>
          <el-option label="全额担保" :value="2"></el-option>
          <el-option label="预存" :value="3"></el-option>
          <el-option label="预收款" :value="4"></el-option>
        </el-select>
        <el-date-picker
          style="width: 225px"
          :size="sizeType"
          v-model="sendTime"
          type="daterange"
          range-separator="-"
          start-placeholder="发货开始日期"
          end-placeholder="发货结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
        <el-button :size="sizeType" type="info" plain @click="btnDialog">
          多个订单编号查询
        </el-button>
        <el-button :size="sizeType" type="primary" icon="el-icon-search" @click="searchData">
          搜索
        </el-button>
        <el-button :size="sizeType"  type="danger" @click="resetForm">
          重置
        </el-button>
      </el-card>
      <div class="top-right-btn">
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button size="mini" circle icon="el-icon-refresh" @click="tableRefresh"/>
        </el-tooltip>
      </div>
    </div>
    <el-table
      size="mini"
      :data="tableData"
      v-loading="listLoading"
      row-key="id"
      border
      style="margin-top: 10px"
      :cell-style="cellStyle"
      @sort-change="changeSort"
      ref="orderTable"
      :row-style="customRowStyle"
      @row-click="handleClickTableRow"
      @selection-change="handleSelectionChange"
      :summary-method="getSummaries"
      show-summary
      max-height="600"
      default-expand-all>
      <el-table-column
        type="selection"
        fixed="left"
        width="55"
        :reserve-selection="true">
      </el-table-column>
      <el-table-column
        label="序号"
        fixed
        align="center"
        width="50"
        type="index">
        <template slot-scope="scope">
          <span>{{(listData.page - 1) *listData.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>

      <el-table-column
        fixed
        label="操作"
        width="180">
      <template slot-scope="{row}">
<!--          <el-button-->
<!--            title="查看订单"-->
<!--            @click.stop="openDetail(row)"-->
<!--            type="primary"-->
<!--            icon="el-icon-view"-->
<!--            :size="sizeType">-->
<!--          </el-button>-->
<!--          <el-button-->
<!--            title="查看收款记录"-->
<!--            @click="openDetail(row)"-->
<!--            type="primary"-->
<!--            icon="el-icon-view"-->
<!--            :size="sizeType">-->
<!--          </el-button>-->
          <el-button
            title="单行收款"
            @click.stop="openCollection(row)"
            type="success"
            class="iconfont"
            style="width: 44px;height: 29px"
            :size="sizeType">
            &#xe605;
          </el-button>
          <el-button
            title="添加记录"
            @click.stop="addRecord(row)"
            type="primary"
            icon="el-icon-plus"
            :size="sizeType">
          </el-button>
        <el-button
          title="添加收款说明"
          @click.stop="addMemo(row)"
          type="primary"
          icon="el-icon-edit-outline"
          :size="sizeType">
        </el-button>
      </template>
      </el-table-column>

      <el-table-column
        prop="orderCode"
        sortable="custom"
        label="订单编号"
      width="92">
        <template slot-scope="{row}">
          <a href="javascript:;" style="color: #20a0ff" @click.stop="(row.dataKind == 0||row.dataKind==1)?getOrderStep(row):''">{{row.orderCode}}</a>
        </template>
      </el-table-column>
      <el-table-column
        prop="clientName"
        show-overflow-tooltip
        label="客户名称"></el-table-column>
<!--      <el-table-column-->
<!--        prop="financeCode"-->
<!--        label="应收单号"-->
<!--      width="90"></el-table-column>-->
      <el-table-column
        prop="orderName"
        show-overflow-tooltip
        label="印品名称">
        <template slot-scope="{row}">
          <a  href="javascript:;" style="color: #20a0ff" @click="openDetail(row.idOrder)" class="ellipsis"> {{ row.orderName }}</a>
        </template>
      </el-table-column>
      <el-table-column
        prop="billMoney"
        sortable="custom"
        width="100px"
        label="单据金额"></el-table-column>
      <el-table-column
        prop="payMoney"
        label="已收金额"></el-table-column>
      <el-table-column
        prop="chargeMoney"
        sortable="custom"
        width="100"
        label="欠款"></el-table-column>
      <el-table-column
        prop="orderPayKind"
        width="140"
        show-overflow-tooltip
        label="付款方式"></el-table-column>
      <el-table-column
        prop="orderGuarantorNames"
        width="40"
        align="center"
        label="标记">
        <template slot-scope="{row}">
          <el-checkbox v-model="row.sendFeedBackCheck" :true-label="1" :false-label="0" onclick="return false"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column
        prop="orderGuarantorNames"
        show-overflow-tooltip
        label="担保人"></el-table-column>
      <el-table-column
        prop="orderMemo"
        show-overflow-tooltip
        label="生产备注"></el-table-column>
      <el-table-column
        prop="orderCreateMan"
        label="订单制单人"></el-table-column>
      <el-table-column
        prop="orderLogisticsCodes"
        show-overflow-tooltip
        label="物流货号"></el-table-column>
      <el-table-column
        prop="orderLogisticsNames"
        show-overflow-tooltip
        label="物流名称"></el-table-column>

      <el-table-column
        prop="orderDriverName"
        show-overflow-tooltip
        label="司机名称">
      </el-table-column>

      <el-table-column
        prop="orderExpressName"
        show-overflow-tooltip
        label="快递名称">
      </el-table-column>

      <el-table-column
        prop="orderSendDate"
        label="发货时间"
        width="120">
        <template slot-scope="{row}">
          {{ row.orderSendDate | getTime }}
        </template>
      </el-table-column>
      <el-table-column
        prop="dataKind"
        label="单据来源">
        <template slot-scope="{row}">
          <span v-if="row.dataKind ==0">订单应收</span>
          <span v-else-if="row.dataKind ==1">预收款应收</span>
          <span v-else-if="row.dataKind ==2">其他应收</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="orderStateMemo"
        label="订单状态">
        <template slot-scope="{row}">
          <el-tag size="mini" v-if="row.orderStateMemo == '待编辑'" type="info">{{ row.orderStateMemo }}</el-tag>
          <el-tag size="mini" v-else-if="row.orderStateMemo == '待审核'" type="success">{{ row.orderStateMemo }}</el-tag>
          <el-tag size="mini" v-else-if="row.orderStateMemo == '待组版'">{{ row.orderStateMemo }}</el-tag>
          <el-tag size="mini" v-else-if="row.orderStateMemo == '已组版'" type="danger">{{ row.orderStateMemo }}</el-tag>
          <el-tag size="mini" v-else-if="row.orderStateMemo == '生产中'" type="danger">{{ row.orderStateMemo }}</el-tag>
          <el-tag size="mini" v-else-if="row.orderStateMemo == '待入库'" type="green">{{ row.orderStateMemo }}</el-tag>
          <el-tag size="mini" v-else-if="row.orderStateMemo == '待发货'" >{{ row.orderStateMemo }}</el-tag>
          <el-tag size="mini" v-else-if="row.orderStateMemo == '已发货'" type="info">{{ row.orderStateMemo }}</el-tag>
          <el-tag size="mini" v-else-if="row.orderStateMemo == '文件待处理'" type="warning">{{ row.orderStateMemo }}</el-tag>
          <el-tag size="mini" v-else type="warning">{{ row.orderStateMemo }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        label="订单消息"
        show-overflow-tooltip
      width="180">
        <template slot-scope="{row}">
          <template v-if="row.orderMessage">
            <el-button size="mini" circle icon="el-icon-plus" @click.stop="openMessage(row)"></el-button>
            <a href="javascript:;" style="color: #20a0ff" @click.stop="openMessage(row)">{{row.orderMessage}}</a>
          </template>
          <template v-else>
            <el-button size="mini" circle icon="el-icon-plus" @click="openMessage(row)"></el-button>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        width="120"
        prop="receivableMemo"
        show-overflow-tooltip
        label="收款说明"></el-table-column>
      <el-table-column
        width="100"
        prop="memoMan"
        show-overflow-tooltip
        label="收款说明录入人">

      </el-table-column>
      <el-table-column
        width="120"
        prop="memoDate"
        show-overflow-tooltip
        label="收款说明录入时间">
        <template slot-scope="scope">
          <span v-if="scope.row.memoDate">{{scope.row.memoDate | getTime}}</span>
        </template>
      </el-table-column>
      <el-table-column
      prop="orderPlatformOrderID"
      show-overflow-tooltip
      label="平台单号"
      width="92"></el-table-column>

      <el-table-column
        prop="createMan"
        show-overflow-tooltip
        label="创建人">

      </el-table-column>

      <el-table-column
        prop="printBillCode"
        width="90"
        show-overflow-tooltip
        label="施工单号"></el-table-column>

      <el-table-column
        prop="orderCreateTime"
        label="订单制单日期"
      width="120">
        <template slot-scope="{row}">
          {{ row.orderCreateTime | getTime }}
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="listData.total>0" :total="listData.total" :page.sync="listData.page" :limit.sync="listData.pageSize" :page-sizes="[10, 20, 30, 50,100]" @pagination="getList"/>
    <cancledialog @tableRefresh="tableRefresh" ref="confirmDialog"></cancledialog>
    <order-step ref="orderStep"></order-step>
    <el-drawer
      title="订单消息"
      :reverse="true"
      :visible.sync="memoDrawer"
      size="600px">
      <order-message ref="orderMessage"></order-message>
    </el-drawer>
    <el-drawer
      title="添加的记录"
      direction="btt"
      :reverse="true"
      :visible.sync="addDrawer"
      size="40%">
      <el-row>
        <el-col :span="18">
      <el-table
        :data="recordList"
        size="mini"
        style="margin-bottom: 20px;margin-left: 10px"
        border>
        <el-table-column
          prop="orderCode"
          label="订单编号">
        </el-table-column>
<!--        <el-table-column-->
<!--          prop="financeCode"-->
<!--          label="应收单号"></el-table-column>-->
        <el-table-column
          prop="clientName"
          label="客户名称"></el-table-column>
        <el-table-column
          prop="billMoney"
          label="单据金额"></el-table-column>
        <el-table-column
          prop="payMoney"
          label="已收金额"></el-table-column>
        <el-table-column
          prop="chargeMoney"
          label="欠款"></el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="deleteRecord(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
        </el-col>
        <el-col :span="3" style="margin-left: 20px">
          <span>共计{{ recordList.length }}条</span>
          <el-button @click="multiCharge(2)">批量</el-button>
        </el-col>
      </el-row>
    </el-drawer>
    <el-dialog title="订单详情" :visible.sync="detailVisible" class="orderDetailDialog" width="1200px" top="10px">
      <order-detail ref="orderDetail"></order-detail>
    </el-dialog>

    <el-dialog title="批量收款" top="50" :close-on-click-modal="false" :visible.sync="collectionsDialog" width="800px">
      <el-form label-width="70px" size="mini">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="收款时间">
              <el-date-picker
                style="width: 230px"
                v-model="multiChargeData.chargeDate"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交款人" label-width="70px">
              <el-input
                style="width: 230px"
                v-model="multiChargeData.payMan"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="会计科目" label-width="70px">
              <el-select
                v-model="multiChargeData.idAccount"
                filterable
                style="width: 230px">
                <el-option
                v-for=" item in accountInfo"
                :key="item.id"
                :value="item.id"
                :label="item.accountCode+item.accountName">
                  <span style="float: left">{{ item.accountName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.accountCode }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="凭证号" label-width="70px">
              <el-input
                v-model="multiChargeData.voucherCode"
                style="width: 230px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款金额" label-width="70px">
              <el-input
                type="number"
                v-model="amountMoney"
                style="width: 210px"></el-input>
              <el-button size="mini" @click="distribute">金额分配</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款方式">
              <el-radio-group  v-model="multiChargeData.chargeKind">
                <el-radio :label="0">金额</el-radio>
                <el-radio :label="1">物流代收</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-table max-height="580" :data="multiChargeList" ref="multiChargeList" :show-summary="true" border size="mini" @selection-change="multiSelectionChange">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column show-overflow-tooltip width="100" label="订单名称" prop="orderName"></el-table-column>
              <el-table-column width="100" label="订单编号" prop="orderCode"></el-table-column>
              <el-table-column show-overflow-tooltip width="120" label="客户名称" prop="clientName"></el-table-column>
<!--              <el-table-column label="物流货号" prop="orderName"></el-table-column>-->
              <el-table-column width="80" label="应收" prop="chargeMoney"></el-table-column>
              <el-table-column width="90" label="当前收款" prop="receivableMoney">
                <template slot-scope="{row}">
                  <el-input type="number" v-model="row.receivableMoney" size="mini"></el-input>
                </template>
              </el-table-column>
              <el-table-column width="90" label="折扣" prop="agioMoney">
                <template slot-scope="{row}">
                  <el-input type="number" v-model="row.agioMoney" size="mini"></el-input>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="collectionsDialog = false">取 消</el-button>
        <el-button type="primary" :disabled="disabledBtn" @click="multiChargeSure">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="收款" :close-on-click-modal="false" :visible.sync="collectionDialog" width="800px">
      <el-form label-width="70px" size="mini">
        <el-row :gutter="20">
          <el-col :span="16" style="padding-left: 0">
            <el-col :span="24">
              <el-form-item label="客户名称">
                <el-input
                  v-model="collectionData.clientName"
                  disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="订单名称">
                <el-input
                  v-model="collectionData.orderName"
                  disabled></el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="6">
            <el-col :span="24">
              <el-form-item label="定金：">
                <span>{{collectionData.orderMoneyPrePay}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="欠款：">
                <span>{{collectionData.chargeMoney}}</span>
              </el-form-item>
            </el-col>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="收款方式">
              <el-radio-group v-model="collectionData.chargeKind">
                <el-radio :label="0">金额</el-radio>
                <el-radio :label="1">物流代收</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款时间">
              <el-date-picker
                style="width: 230px"
                v-model="collectionData.chargeDate"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款金额" label-width="70px">
              <el-input
                type="number"
                style="width: 230px"
                v-model="collectionData.receivableMoney"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交款人" label-width="70px">
              <el-input
                style="width: 230px"
                v-model="collectionData.payMan"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="折扣金额" label-width="70px">
              <el-input
                type="number"
                style="width: 230px"
                v-model="collectionData.agioMoney"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="会计科目" label-width="70px">
              <el-select
                v-model="collectionData.idAccount"
                filterable
                style="width: 230px">
                <el-option
                  v-for=" item in accountInfo"
                  :key="item.id"
                  :value="item.id"
                  :label="item.accountCode+item.accountName">
                  <span style="float: left">{{ item.accountName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.accountCode }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="凭证号" label-width="70px">
              <el-input
                v-model="collectionData.voucherCode"
                style="width: 230px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="折扣备注" label-width="70px">
              <el-input type="textarea" v-model="collectionData.agioMemo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="collectionDialog = false">取 消</el-button>
        <el-button type="primary" @click="collectionSure">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="多个订单编号查询" width="800px" :visible.sync="dialogLabelVisible">
      <div style="border: 1px solid #ddd;padding: 7px;padding-top: 7px;">
        <el-tag
          :key="tag"
          size="mini"
          style="margin-top: 5px"
          v-for="tag in dynamicTags"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)">
          {{tag}}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-model="inputValue"
          type="textarea"
          :rows="4"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        >
        </el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogLabelVisible = false">取 消</el-button>
        <el-button type="primary" @click="searchDataLabel">搜 索</el-button>
      </div>
    </el-dialog>
    <el-dialog title="选择客户" top="30" width="800px" :visible.sync="dialogTableVisible">
      <el-input :size="sizeType" v-model="searchTable.keyWord" placeholder="关键字" style="width: 200px;" class="filter-item" @keyup.enter.native="getClientInfoList"/>
      <el-button :size="sizeType" type="primary" icon="el-icon-search" @click="getClientInfoList">
        搜索客户
      </el-button>
      <el-button type="primary" :size="sizeType" icon="el-icon-refresh" @click="clientRefresh">刷新</el-button>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-table
            style="margin-top: 10px"
            ref="multipleTable"
            @row-click="handleClickClientRow"
            border
            size="mini"
            row-key="id"
            @selection-change="handleClientChange"
            :data="gridData">
            <el-table-column
              align="center"
              type="selection"
              :reserve-selection="true"
              width="55">
            </el-table-column>
            <el-table-column
              align="center"
              width="100px"
              prop="clientCode"
              label="客户编号">
            </el-table-column>
            <el-table-column
              width="150px"
              prop="clientName"
              show-overflow-tooltip
              label="客户名称">
              <template slot-scope="{row}">
                <span class="ellipsis"> {{ row.clientName }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="12">
          <div v-if="checkClientList.length>0" style="border: 1px solid #ddd;padding: 7px;padding-top: 7px;margin-bottom: 10px;">
            <el-tag
              :key="tag.id"
              size="mini"
              style="margin-top: 5px"
              v-for="tag in checkClientList"
              closable
              :disable-transitions="false"
              @close="handleCloseClient(tag.id)">
              {{tag.clientName}}
            </el-tag>
          </div>
          <div v-if="checkClientList.length>0" style="display: block;width: 100%;margin-bottom: 10px"> <el-button :size="sizeType" type="success" icon="el-icon-search" @click="searchData">
            搜索单据
          </el-button></div>
        </el-col>
      </el-row>
      <pagination
        v-show="listData2.total>0"
        :total="listData2.total"
        :page.sync="listData2.page"
        :limit.sync="listData2.pageSize"
        @pagination="getClientInfoList"/>
    </el-dialog>
  </div>

</template>

<script>
import {
  getOrderStepList
} from '@/api/order/orderList.js'
import {
  getOrderReceivableList,
  multiChargeDataAdd,
  getAccountInfoList,
  exportData,
  addOrderReceivableMemo
} from '@/api/orderCharge/orderCollection'
import Cancledialog from '@/components/Dialog/Cancledialog.vue'
import orderMessage from '@/components/orderMessage/orderMessage'
import OrderDetail from '@/components/orderDetail/orderDetail'
import OrderStep from '@/components/orderStep/orderStep'
import {formatMoney} from "@/filters";
import {getInfo} from "@/api/doc/client/client";
var multiChargeData = {
  chargeDate: new Date(),
  payMan: '',
  idAccount: '',
  voucherCode: '',
  chargeKind: 0
}
export default {
  name: 'orderCollection',
  components: {
    OrderStep,
    OrderDetail,
    orderMessage, Cancledialog
  },
  data() {
    return {
      disabledBtn:false,
      gridData:[],
      dialogTableVisible:false,
      checkClientList:[],
      dynamicTags: [],
      inputVisible: false,
      inputValue: '',
      dialogLabelVisible:false,
      options:[],
      orderByString: '', // 排序
      combinedQuery: false,
      sizeType: 'mini',
      detailVisible: false,
      pluploadVisible: false,
      memoDrawer: false,
      orderStatus: '',
      search: {
        clientName: '',
        financeCode: '',
        orderCode: '',
        voidFlag: 0,
        dataKind: -1,
        beginTime: '',
        endTime: '',
        createMan: '',
        platformOrderID: '',
        sendBeginTime: '',
        sendEndTime: '',
        orderSendStateTmp: -1,
        sendFeedBackCheck: -1,
        sendFeedBackState:-1,
        orderCodes:"",
        idClients:"",
        payKind:""
      },
      searchTable:{
        keyWord:""
      },
      search2: {},
      searchTime: [],
      sendTime: [],
      drawer: false,
      stepList: [],
      timeString: '',

      stateOptions: [
        {
          label: '全部',
          value: -1
        },
        {
          label: '订单应收',
          value: 0
        },
        {
          label: '预收款应收',
          value: 1
        },
        {
          label: '其他应收',
          value: 2
        }
      ],
      tableData: [],
      collection: {},

      listLoading: false,
      listData: {
        total: 0,
        page: 1,
        pageSize: 20
      },
      listData2: {
        total: 0,
        page: 1,
        pageSize: 20
      },
      voidVisible: false,
      sMemo: '',
      orderId: '',

      // 添加记录
      addDrawer: false,
      recordList: [],

      // 批量收款
      choosedList: [], // 选中列表
      collectionsDialog: false,
      multiChargeData: Object.assign({}, multiChargeData),
      amountMoney: 0, // 收款金额
      accountInfo: [], // 科目
      multiChargeList: [], // 收款列表
      multiSelected: [], // 选中

      // 单行收款
      collectionDialog: false,
      collectionData: {},

      confirmdialog: false
    }
  },
  created() {
    this.getList()
    this.getAccountInfo()
    this.getClientInfoList();
  },
  watch: {
    memoDrawer(val) {
      // console.log(val)
      if (!val) {
        this.getList()
      }
    }
  },
  methods: {
    clientRefresh(){
      this.listData2.page = 1;
      this.searchTable.keyWord = "";
      this.checkClientList = [];
      this.getClientInfoList();
    },
    handleClickClientRow(row, event, column) {
      const _that = this;
      _that.$nextTick(() => {
        _that.$refs.multipleTable.toggleRowSelection(row);
      })
    },
    handleClientChange(val){
      var _that = this;
      _that.checkClientList = val;
    },
    getClientInfoList(){
      var _that = this;
      var params = _that.searchTable
      var page = {
        pageIndex: _that.listData2.page,
        pageSize: _that.listData2.pageSize
      }
      if (_that.searchTable.keyWord) {
        var data = {
          'params': JSON.stringify(params),
          'page': JSON.stringify(page)
        }
      } else {
        var data = {
          'params': {},
          'page': JSON.stringify(page)
        }
      }

      // console.log(data);
      getInfo(data).then(response => {
        // console.log("tableData",response)
        const data = response.data
        // //  组合表单数据
        _that.gridData = data
        _that.listData2.total = response.total
        // console.log(_that.tableData)
      }).catch(err => {
      })
    },
    selectCustomersBtn(){
      var _that = this;
      _that.dialogTableVisible = true;
      _that.listData2.page = 1;
      _that.searchTable.keyWord = "";
      _that.checkClientList = [];
      _that.$nextTick(() => {
        _that.$refs.multipleTable.clearSelection();
      })
    },
    handleCloseClient(id) {
      console.log(id);
      var _that = this;
      _that.checkClientList.splice(this.checkClientList.indexOf(id), 1);
      for (let i = 0; i < _that.gridData.length; i++) {
        var datas = _that.gridData[i];
        if(id==datas.id){
          _that.$nextTick( ()=>{
            _that.$refs.multipleTable.toggleRowSelection(_that.gridData[i],false);
          })

        }
      }
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.getNum(this.inputValue);
      var inputArray = inputValue.split("OB")
      if(inputArray.length>0){
        for (let i = 0; i < inputArray.length; i++) {
          if(i==0){

          }else {
            if(inputArray[i].length>10){
              this.dynamicTags.push("OB"+inputArray[i].substring(0,10));
            }else {
              this.dynamicTags.push("OB"+inputArray[i]);
            }

          }
        }
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    getNum(value){
      var a = value.replace(/[^0-9a-zA-Z]/g, '')
      // var b = value.replace(/[^a-z]+/ig,"");
      return a
    },
    btnDialog(){
      var _that = this
      _that.dialogLabelVisible = true;
      _that.inputValue = "";
      _that.dynamicTags = [];
      _that.$nextTick(() => {
        _that.$refs.saveTagInput.focus();
      })
    },
    addMemo(row){
      var _that = this;
        this.$prompt('', '添加收款说明', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /\S/,
          inputErrorMessage: '收款说明不能为空'
        }).then(({ value }) => {
          var data = {
            id:row.id,
            receivableMemo:value
          }
          addOrderReceivableMemo(data).then(response => {
            _that.$message.success("添加成功")
            _that.getList()
          }).catch(err => {
            _that.$message.error(err)
          })
        }).catch(() => {
        });
    },
    getList() {
      var _that = this
      _that.listLoading = true
      // console.log(_that.search);
      // return
      var params = _that.search

      if (_that.searchTime == null || _that.searchTime < 0) {
        _that.search.beginTime = ''
        _that.search.endTime = ''
      } else {
        _that.search.beginTime = _that.searchTime[0]
        _that.search.endTime = _that.searchTime[1]
      }
      if (_that.sendTime == null || _that.sendTime < 0) {
        _that.search.sendBeginTime = ''
        _that.search.sendEndTime = ''
      } else {
        _that.search.sendBeginTime = _that.sendTime[0]
        _that.search.sendEndTime = _that.sendTime[1]
      }
      if(_that.dynamicTags.length>0){
        _that.search.orderCodes = _that.dynamicTags.toString();
      }else {
        _that.search.orderCodes = "";
      }
      if(_that.checkClientList.length>0){
        var idsClient = []
        _that.checkClientList.forEach(item => {
          idsClient.push(item.id)
        })
        _that.search.idClients = idsClient.join(',')
      }else {
        _that.search.idClients = "";
      }
      var page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize
      }
      var orderBy = _that.orderByString
      var data = {
        'params': JSON.stringify(params),
        'page': JSON.stringify(page),
        'orderBy': orderBy,
      }
      if (_that.listData.pageSize == 10) {
        _that.sizeType = 'medium'
      } else {
        _that.sizeType = 'mini'
      }
      // console.log(data);
      getOrderReceivableList(data).then(response => {
        // console.log(response)
        const data = response.data
        // //  组合表单数据
        _that.tableData = data
        _that.listData.total = response.total
        _that.collection = response.collection
        // console.log(_that.tableData)
        _that.listLoading = false
        _that.dialogLabelVisible = false;
        _that.dialogTableVisible = false;
      }).catch(err => {
        _that.$message.error(err)
        _that.listLoading = false
        _that.dialogLabelVisible = false;
        _that.dialogTableVisible = false;
      })
    },
    getSummaries(param) {
      var _that = this
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return
        }
        if (column.label == '单据金额') {
          sums[index] = formatMoney(_that.collection.billMoneySum)
        } else if (column.label == '已收金额') {
          sums[index] = formatMoney(_that.collection.payMoneySum)
        } else if (column.label == '欠款') {
          sums[index] = formatMoney(_that.collection.chargeMoneySum)
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.label == '欠款') {
        return 'color: red;background:yellow;font-weight:700;font-size:18px'
      }
    },

    // 排序
    changeSort(val) {
      // console.log(val)
      var _that = this
      if (val.order == 'ascending') {
        _that.orderByString = val.prop + ' ' + 'asc'
      } else if (val.order == 'descending') {
        _that.orderByString = val.prop + ' ' + 'desc'
      } else {
        _that.orderByString = ''
      }
      _that.getList()
    },

    resetForm() {
      this.search = {
        clientName: '',
        financeCode: '',
        orderCode: '',
        voidFlag: 0,
        dataKind: -1,
        beginTime: '',
        endTime: '',
        createMan: '',
        platformOrderID: '',
        sendBeginTime: '',
        sendEndTime: '',
        orderSendStateTmp: -1,
        sendFeedBackCheck: -1,
        sendFeedBackState:-1,
        orderCodes:"",
        payKind:""
      }
      this.inputValue = "";
      this.dynamicTags = [];
      this.search.orderCodes="";
      this.searchTime = [];
      this.sendTime = [];
      this.listData2.page = 1;
      this.searchTable.keyWord = "";
      this.checkClientList = [];
    },

    // 获取科目
    getAccountInfo() {
      var _that = this
      var data = {}
      getAccountInfoList(data).then(response => {
        // console.log(response)
        _that.accountInfo = response.data
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    // 搜索
    searchData() {
      this.listData.page = 1
      this.getList()
    },
    searchDataLabel(){
      const _that = this;
      if(_that.dynamicTags.length<=0){
        _that.$message('请输入订单编号并点击回车键确认')
        return
      }
      _that.listData.page = 1
      _that.getList()
    },
    handleSelectionChange(val) {
      // console.log(val)
      this.choosedList = val
    },

    // 刷新变革
    tableRefresh() {
      // 刷新变革
      this.choosedList = []
      this.$refs.orderTable.clearSelection()
      this.getList()
    },
    // 点击行内任何地方选中
    handleClickTableRow(row, event, column) {
      this.$refs.orderTable.toggleRowSelection(row)
    },
    openDetail(idOrder) {
      var _that = this
      _that.detailVisible = true
      _that.$nextTick(() => {
        _that.$refs.orderDetail.idOrder = idOrder
        _that.$refs.orderDetail.getInfo()
      })
    },

    // 订单消息
    openMessage(row) {
      var _that = this
      _that.memoDrawer = true
      _that.$nextTick(function() {
        // console.log(_that.$refs.orderMemo);
        _that.$refs.orderMessage.idOrder = row.idOrder
        _that.$refs.orderMessage.getList()
      })
    },
    // 获取脚印
    getOrderStep(row) {
      const _that = this
      _that.$refs.orderStep.idOrder = row.idOrder
      _that.$refs.orderStep.getOrderStep()
    },

    // 添加记录
    addRecord(row) {
      var _that = this
      _that.addDrawer = true
      var result = _that.recordList.some(item => {
        if (item.id == row.id) {
          return true
        }
      })
      // console.log(result);
      if (!result) {
        _that.recordList.push(row)
      }
    },
    // 删除添加的记录
    deleteRecord(index) {
      this.recordList.splice(index, 1)
    },
    /**
     * 批量收款开始
     **/
    // 批量收款弹窗
    multiCharge(type) {
      var _that = this
      _that.addDrawer = false;
      _that.disabledBtn = false;
      _that.multiChargeData = Object.assign({}, multiChargeData)
      _that.amountMoney = 0
      var dataList
      if (type == 1) { // type 1为从外层点击批量 2为添加记录点击批量
        dataList = _that.choosedList
      } else {
        dataList = _that.recordList
      }
      if (dataList.length > 0) {
        _that.collectionsDialog = true
        _that.multiChargeData.chargeDate = new Date()
        // console.log(_that.multiChargeData);
      } else {
        _that.collectionsDialog = false;
        _that.$message.error('请选择订单')
        return
      }
      dataList.forEach((item) => {
        item['agioMoney'] = 0
        item['receivableMoney'] = 0
        item['idReceivable'] = item.id
      })
      _that.multiChargeList = JSON.parse(JSON.stringify(dataList))
      _that.$nextTick(() => {
        _that.multiChargeList.forEach((item) => {
          _that.$refs.multiChargeList.toggleRowSelection(item, true)
        })
      })
    },
    // 金额分配
    distribute() {
      var _that = this
      // _that.multiSelectionChange();
      //chargeMoney 应收
      //receivableMoney //当前收款
      //agioMoney 折扣
      _that.multiSelected = _that.$refs.multiChargeList.selection
      var tempMoney = _that.amountMoney
      if (_that.amountMoney > 0) {
        _that.multiSelected.forEach((item) => {
          if (item.agioMoney > 0) {
            if (parseFloat(item.agioMoney) > item.chargeMoney) {
              _that.$message.error('折扣不能大于应收')
              return
            } else {
              if ((item.chargeMoney - Number(item.agioMoney)) <= tempMoney) {
                item.receivableMoney = ((Number(item.chargeMoney * 100) - Number(item.agioMoney)*100)*0.01).toFixed(2)
                tempMoney = ((tempMoney*100 - item.receivableMoney*100)*0.01).toFixed(2)
                // console.log('tempMoney', tempMoney)
              } else if ((item.chargeMoney - Number(item.agioMoney)) > tempMoney) {
                item.receivableMoney = tempMoney
                tempMoney = 0
              }
            }
          } else {
            if (item.chargeMoney <= tempMoney) {
              item.receivableMoney = item.chargeMoney
              tempMoney = ((tempMoney*100 - item.receivableMoney*100)*0.01).toFixed(2)

            } else if (item.chargeMoney > tempMoney) {
              item.receivableMoney = tempMoney;
              tempMoney = 0
            }
          }
        })
      }
    },
    // 收款表格选中
    multiSelectionChange(val) {
      // console.log(val)
      var _that = this
      _that.multiSelected = val
    },
    // 确定批量收款
    multiChargeSure() {
      var _that = this
      for (let i = 0; i < _that.multiSelected.length; i++) {
        var item = _that.multiSelected[i]
        Object.assign(item, _that.multiChargeData)
        // console.log(item)
        if (item.receivableMoney == 0 && item.agioMoney == 0) {
          _that.multiSelected.splice(i, 1)
          i--
        }
        if (parseFloat(item.receivableMoney) + parseFloat(item.agioMoney) > item.chargeMoney) {
          _that.$message.error('收款金额与折扣之和不得大于应收金额')
          return
        }
      }
      var rowData = []
      _that.multiSelected.forEach(row => {
        var rows = {
          idReceivable: row.idReceivable,
          idAccount: row.idAccount,
          chargeDate: _that.multiChargeData.chargeDate,
          payMan: row.payMan,
          chargeKind: row.chargeKind,
          idOrder: row.idOrder,
          orderCode: row.orderCode,
          receivableMoney: row.receivableMoney,
          agioMoney: row.agioMoney,
          voucherCode: row.voucherCode,
          versionCode: row.versionCode
        }
        rowData.push(rows)
      })
      if(rowData.length<=0){
        _that.$message.warning('请输入金额')
        return;
      }
      _that.collectionsDialog = false
      _that.disabledBtn = true;
      var data = JSON.stringify(rowData)
      // console.log(rowData);
      // return
      multiChargeDataAdd(data).then(response => {
        // console.log(response)
        _that.disabledBtn = false;
        if (response.httpCode == 200) {
          _that.recordList = []
          _that.multiChargeList = []
          _that.$message.success('收款成功')
          _that.tableRefresh()
        } else {
          _that.$message.error(response.msg)
        }
      }).catch(err => {
        _that.disabledBtn = false;
        _that.$message.error(err)
      })
    },
    /* 批量收款结束 */

    /**
     * 单行收款开始
     **/
    // 点击单行收款
    openCollection(row) {
      var _that = this
      _that.collectionDialog = true
      _that.collectionData = row

      var data = {
        idReceivable: row.id,
        chargeDate: new Date(),
        payMan: '',
        idAccount: '',
        voucherCode: '',
        chargeKind: 0,
        receivableMoney: row.chargeMoney,
        agioMoney: 0,
        agioMemo: '',
        versionCode: row.versionCode
      }
      _that.collectionData = Object.assign({}, data, _that.collectionData)
    },
    collectionSure() {
      var _that = this
      if (_that.collectionData.receivableMoney == 0 && _that.collectionData.agioMoney == 0) {
        _that.$message.error('收款金额和折扣金额不能同时为0')
        return
      }
      if (parseFloat(_that.collectionData.receivableMoney) + parseFloat(_that.collectionData.agioMoney) > _that.collectionData.chargeMoney) {
        _that.$message.error('收款金额和折扣金额之和不能大于应收金额')
        return
      }
      var option = []
      var rows = {
        idReceivable: _that.collectionData.idReceivable,
        idAccount: _that.collectionData.idAccount,
        chargeDate: _that.collectionData.chargeDate,
        payMan: _that.collectionData.payMan,
        chargeKind: _that.collectionData.chargeKind,
        idOrder: _that.collectionData.idOrder,
        orderCode: _that.collectionData.orderCode,
        receivableMoney: _that.collectionData.receivableMoney,
        agioMoney: _that.collectionData.agioMoney,
        agioMemo: _that.collectionData.agioMemo,
        voucherCode: _that.collectionData.voucherCode,
        versionCode: _that.collectionData.versionCode
      }
      option.push(rows)
      var data = JSON.stringify(option)
      // console.log(option);
      // return
      multiChargeDataAdd(data).then(response => {
        // console.log(response)
        if (response.httpCode == 200) {
          _that.collectionDialog = false
          _that.$message.success('收款成功')
          _that.tableRefresh()
        } else {
          _that.$message.error(response.msg)
        }
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    // 样式
    customRowStyle({row, rowIndex}) {
      if (row.orderVoidFlag == 1) {
        return {
          // color: '#F56C6C'
          background: '#f7b1b1'
        }
      }
    },

    // 导出
    exportBtn() {
      const _that = this
      var data = {
        code: 'OrderReceivalbe_Exporter',
        exportName: '订单应收导出',
        params: _that.search
      }
      exportData(data).then(res =>{
        // console.log(res);
        if(res.httpCode == 200){
          _that.$message.success('导出成功，请前至系统管理-我的任务中进行查看和下载')
        }
      })
    }
  }
}
</script>
<style>

.button-new-tag {
  margin-left: 5px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 730px;
  margin-top: 10px;
  display: block;
  vertical-align: bottom;
}
/*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
.el-drawer__body {
  overflow: auto;
}
.stepList .el-card__body{
  padding: 10px;
}
:focus{
  outline:0;
}
</style>

<style lang="scss" scoped>
.filter-container {
  margin-bottom: 15px;
  .filter-item{
    padding: 5px 0;
  }
}

::v-deep input::-webkit-outer-spin-button,::v-deep input::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
}
::v-deep input[type = 'number']{
  -moz-appearance: textfield !important;
}
</style>
