<template>
  <div class="app-container">
      <div slot="header" class="card-title">收款单</div>
    <!-- 搜索工作栏 -->
    <el-card  v-show="showSearch" class="card">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="100px" class="card">
          <el-row :span="24">
              <el-form-item label="收款单号:" >
                  <el-input style="max-width: 188px;" v-model="queryParams.receiptNo" placeholder="请输入收款单号" clearable @keyup.enter.native="handleQuery"/>
              </el-form-item>
              <el-form-item label="客户名称:" >
                  <customer-selector v-model="queryParams.customerId" @change="consignor = $event" />
              </el-form-item>
              <el-form-item label="状态:" >
                 <dict-selector :type="DICT_TYPE.ECW_RECEIPT_STATE" v-model="queryParams.state" />
              </el-form-item>
              <el-form-item label="业务员:">
                 <el-select v-model="queryParams.salesmanId" placeholder="请选择业务员">
                   <el-option v-for="item in creatorData" :key="item.id" :label="item.nickname" :value="item.id"/>
                 </el-select>
              </el-form-item>
          </el-row>
          <el-row :span="24">
             <el-col style="width: 592px;">
                <el-form-item label="创建时间:" >
                    <el-date-picker
                      v-model="queryParams.beginCreateTime"
                      type="datetimerange"
                      range-separator="到"
                      start-placeholder="请选择日期"
                      end-placeholder="请选择日期">
                    </el-date-picker>
                </el-form-item>
              </el-col>
              <el-form-item label="自编号:" >
                  <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入自编号" clearable @keyup.enter.native="handleQuery"/>
              </el-form-item>
              <el-form-item label="订单号:" >
                  <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入订单号" clearable @keyup.enter.native="handleQuery"/>
              </el-form-item>
          </el-row>
          <el-row :span="24">
              <el-form-item label="商品名称:" >
                <el-input style="max-width: 188px;" v-model="queryParams.orderNo" placeholder="请输入商品名称" clearable @keyup.enter.native="handleQuery"/>
              </el-form-item>
             <el-form-item label="费用类型:" >
                <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="queryParams.feeType"></dict-selector>
              </el-form-item>
              <el-form-item label="收款类型:" >
                 <dict-selector :type="DICT_TYPE.PAYMENT_TYPE" v-model="queryParams.paymentType"></dict-selector>
               </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleQuery">查找</el-button>
              </el-form-item>
            </el-row>
        </el-form>
        </el-card>
        <el-table v-loading="loadings" :data="list" border class="card">
          <el-table-column label="序号" align="center" prop="id" type="index">
            <template slot-scope="scope">
                <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
            <el-table-column label="收款单号" align="center" prop="receiptNo" />
            <el-table-column label="自编号" align="center" prop="orderNo" />
            <el-table-column label="订单号" align="center" prop="orderNo" />
            <el-table-column label="客户名称" align="center" prop="customerName" />
            <el-table-column label="金额" align="center" prop="totalAmount" />
            <el-table-column label="币种" align="center">
              <template slot-scope="scope">
                <dict-tag :type="DICT_TYPE.COMMISSION_CURRENCY_TYPE" :value="scope.row.currencyId" />
              </template>
            </el-table-column>
            <el-table-column label="汇率" align="center" prop="totalAmount" />
            <el-table-column label="实收日期" align="center" prop="channelName" />
            <el-table-column label="业务员" align="center" prop="toDepartureId" />
            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                  <dict-tag :type="DICT_TYPE.ECW_RECEIPT_STATE" :value="scope.row.state" />
                </template>
              </el-table-column>
            <el-table-column label="是否开票" align="center">
              <template slot-scope="scope">
                  <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.isCargoControl" />
                </template>
              </el-table-column>
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button v-if="scope.row.state==1" size="mini" type="primary">核销</el-button>
                <el-button v-if="scope.row.state>1" size="mini" type="primary">反核销</el-button>
                 <el-button v-if="scope.row.state==3" size="mini" type="primary">开票</el-button>
                <el-button size="mini"  @click="handleAdd(scope.row.id)">编辑</el-button>
                <el-button size="mini" type="danger">删除</el-button>
                <el-button size="mini" type="primary" @click="toprint(scope.row.id)">打印</el-button>
                <el-button size="mini"  type="success" @click="open=true">导出订单</el-button>
              </template>
            </el-table-column>
          </el-table>
             <!-- 分页组件 -->
          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.rows"
                         @pagination="getList"/>
           <!-- 对话框(添加 / 修改) -->
        <el-dialog title="费用登记" :visible.sync="open" width="500px" style="margin-top: 20vh !important;" append-to-body>
          <div slot="header" class="card-title" style='border-bottom: 2px solid #f8f8f8;'>
            <span>导出账单</span>
            <i class="el-icon-close" @click="cancel"></i>
          </div>
          <div class="dialog-footer">
            <el-button type="primary" style="width: 130px;" @click="submitForm">国内账单</el-button>
            <el-button plain type="primary" style="width: 130px;margin: 0;" @click="submitForm">Debite note</el-button>
          </div>
        </el-dialog>
  </div>
</template>

<script>
  import { userList } from "@/api/system/user"
  import {DICT_TYPE} from  '@/utils/dict'
  import CustomerSelector from '@/components/CustomerSelector'

   export default {
     name: "Voucher",
   components: {
    CustomerSelector
   },
     data() {
       return {
         open:false,
         showSearch:true,
         loadings: false,
         form:{},
          creatorData:[],
          list:[],
          total:0,
          dateType:[],
          loading:'',
          params:{
            page:1,
            rows:20,
          },
       // 查询参数
        queryParams: {
          page: 1,
          rows: 10,
          dateType:null,
          date:null,
          originId:null,
          destinationId:null,
          transportId:null,
          isCargoControl:null,
          orderExceptionStatus:null,
          orderExceptionType:null,
          orderNo:null,
          consignorId:null,
          marks:null,
          prodId:null,
          productRecord:null,
          followUpSalesmanId:null
        },
       }
     },
     created() {
       let that = this
       userList('salesman').then(res =>that.creatorData = res.data)
     },
     methods: {
       /** 查询列表 */
       getList() {
         this.loading = true;
         // 处理查询参数
         let params = {...this.queryParams};
         this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
         // 执行查询
         getReceiptPage(params).then(response => {
           this.list = response.data.list;
           this.total = response.data.total;
           this.loading = false;
         });
       },
       /** 搜索按钮操作 */
       handleQuery() {
         this.queryParams.pageNo = 1;
         // this.getList();
       },
       /** 新增按钮操作 */
       handleAdd(id) {
         return this.$router.push('creatCollection?id='+id)
       },
       toprint(id){
         return this.$router.push('printVoucher?id='+id)
       },
       submitForm(){
          this.open = false;
       },
       /** 取消按钮 */
       cancel() {
         this.open = false;
       },

     },
   }
 </script>

 <style>
   .card{
     margin-top: 20px;
   }
   .dialog-footer{
     padding: 30px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
      height: 160px;
   }
   .card-title{
       font-size: 18px;
       font-weight: bold;
   }
 </style>
