<template>
  <div class="app-container">
      <div slot="header" class="card-title">应付款</div>
    <!-- 搜索工作栏 -->
    <el-card  v-show="showSearch">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="100px" class="card">
          <el-row>
              <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-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-select v-model="queryParams.departureId" placeholder="请选择始发城市">
                      <el-option v-for="item in expoerCityList" :label="item.titleZh" :value="item.id" :key="item.id"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="目的城市:">
                  <el-select v-model="queryParams.objectiveId" placeholder="请选择目的城市">
                   <el-option v-for="item in importCityList" :label="item.titleZh" :value="item.id" :key="item.id"></el-option>
                  </el-select>
              </el-form-item>
               <el-form-item label="运输方式:" >
                   <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="queryParams.transportId" formatter="number" />
               </el-form-item>
          </el-row>

<!--              <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_RECEIPT_STATE" v-model="queryParams.control" />
              </el-form-item>
               <el-form-item label="业务员:">
                  <el-select v-model="form.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-form-item label="收款时间:" >
                  <el-date-picker
                    v-model="dateType"
                    type="datetimerange"
                    range-separator="到"
                    start-placeholder="请选择日期"
                    end-placeholder="请选择日期">
                  </el-date-picker>
              </el-form-item>
          </el-row> -->
          <el-row>
<!--              <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-form-item label="费用类型:" >
                <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="queryParams.feeType"></dict-selector>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleQuery">查找</el-button>
                <el-button style="margin-left:10px" type="success"   @click="handleAdd(0)">新增请款单</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="orderNo" />
            <el-table-column label="货柜号" align="center" prop="orderNo" />
            <el-table-column label="供应商" align="center" prop="orderNo" />
            <el-table-column label="费用类型" align="center" prop="feeType">
              <template slot-scope="scope">
                 <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="scope.row.feeType"></dict-tag>
              </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" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button size="mini"  type="success" @click="open=true">编辑</el-button>
                <el-button size="mini"  @click="handleAdd(scope.row.consignorId)">请款</el-button>
                <el-button size="mini" type="danger">删除</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" append-to-body>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="操作步骤" prop="receiptNo">
              <el-input v-model="form.receiptNo" placeholder="请输入收款单号（例：SKD001）" />
            </el-form-item>
            <el-form-item label="费用类型" prop="departmentId">
              <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="queryParams.feeType"></dict-selector>
            </el-form-item>
            <el-form-item label="供应商" prop="departmentName">
              <el-input v-model="form.departmentName" placeholder="请输入供应商" />
            </el-form-item>
            <el-form-item label="金额" prop="salesmanId" style="flex">
                <el-input-number v-model="form.num" controls-position="right" :min="1"></el-input-number>
                <dict-selector style="width: 120px;" :type="DICT_TYPE.COMMISSION_CURRENCY_TYPE" v-model="queryParams.feeType"></dict-selector>
            </el-form-item>
            <el-form-item label="备注" prop="departmentName">
              <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button plain @click="cancel">关闭</el-button>
          </div>
        </el-dialog>
  </div>
</template>

<script>
 import { userList } from "@/api/system/user"
   import {DICT_TYPE} from  '@/utils/dict'
   import {getTradeCityList} from '@/api/ecw/region'

   export default {
     name: "Payable",
   components: {

   },
     data() {
       return {
         open:false,
         showSearch:true,
         loadings: false,
         tradeCityList:[],
         form:{},
          creatorData:[],
          list:[],
          total:0,
          dateType:[],
          loading:'',
          params:{
            page:1,
            rows:20,
          },
          queryParams:{
            page:1,
            rows:20,
          },
       }
     },
     computed:{
       expoerCityList(){
           return this.tradeCityList.filter(item => item.type == 2)
       },
       importCityList(){
           return this.tradeCityList.filter(item => item.type == 1)
       },
     },
     created() {
       let that = this
       userList('salesman').then(res =>that.creatorData = res.data)
       getTradeCityList().then(res => that.tradeCityList = 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('creatPayment?consignorId='+id)
       },
       submitForm(){
          this.open = false;
       },
       /** 取消按钮 */
       cancel() {
         this.open = false;
       },
     },
   }
 </script>

 <style>
   .card{
     margin-top: 20px;
   }
   .dialog-footer{
     padding: 40px;
   }
   .card-title{
       font-size: 18px;
       font-weight: bold;
   }
 </style>
