<template>
  <div class="app-container">
    <el-card>
      <div v-if="id" slot="header" class="card-title">新增收款单</div>
      <div v-else slot="header" class="card-title">新增收款单</div>
        <el-form ref="form" :model="form" label-width="120px" label-position="left">
          <el-descriptions :column="3" border>
              <el-descriptions-item label="客户" >
                <el-form-item label="" label-width="0" style="margin-bottom: 0" prop="customerId" required error="客户不能为空">
                    <customer-selector v-model="form.customerId" @change="consignor = $event" />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="部门" >
                <el-form-item label="" label-width="0" style="margin-bottom: 0" prop="departmentId" required error="部门不能为空">
                    <el-select v-model="form.departmentId" style="width: 300px;" placeholder="请选择部门">
                      <el-option v-for="item in deptData" :key="item.id" :label="item.name" :value="item.id"/>
                      </el-select>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="业务员" >
                <el-form-item label="" label-width="0" style="margin-bottom: 0" prop="consignorId" required error="客户不能为空">
                    <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-descriptions-item>
              <el-descriptions-item label="手续费(RMB)" >
                <el-form-item label="" label-width="0" style="margin-bottom: 0" prop="feeRate" required error="手续费不能为空">
                   <el-input v-model="form.feeRate" placeholder="请输入手续费"></el-input>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="备注" >
                <el-form-item label="" label-width="0" style="margin-bottom: 0" prop="remark" required error="备注不能为空">
                    <el-input v-model="form.remark"  placeholder="备注"></el-input>
                </el-form-item>
              </el-descriptions-item>
          </el-descriptions>
        </el-form>
    </el-card>
    <el-card class="card">
       <div slot="header" class="card-title">订单信息</div>
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" style="padding: 10px;margin-bottom: 10px;"
                    >添加未收客户款项</el-button>
        </el-col>
        <el-table v-loading="loadings" :data="list" border>
            <el-table-column label="订单号" align="center" prop="orderNo" />

            <el-table-column label="运输方式" align="center" prop="transportId">
              <template slot-scope="scope">
                 <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="scope.row.transportId"></dict-tag>
              </template>
            </el-table-column>
            <el-table-column label="出货渠道" align="center" prop="channelName" />
            <el-table-column label="始发地" align="center" prop="toDepartureId" />
            <el-table-column label="目的地" align="center" prop="toDepartureId" />
            <el-table-column label="品名" align="center" prop="toDepartureId" />
            <el-table-column label="箱数" align="center" prop="sumNum" />
            <el-table-column label="体积/重量" align="center" prop="sumVolume">
                <template slot-scope="scope">
                  {{scope.row.sumVolume+'/'+scope.row.sumWeight}}
                </template>

                </el-table-column>
            <el-table-column label="收入类型" align="center" prop="sumWeight" />
            <el-table-column label="收款类型" align="center" prop="payType" />
            <el-table-column label="应收金额" align="center" prop="sumWeight" />
            <el-table-column label="收款类型" align="center" prop="payType" />
            <el-table-column label="总金额美元" align="center" prop="sumWeight" />
            <el-table-column label="总金额RMB" align="center" prop="payType" />
            <el-table-column label="实收金额" align="center" prop="actualAmount" />
          </el-table>

          <el-form ref="forms" :model="form" label-width="120px" label-position="left">
            <el-descriptions :column="2" border class="card">
                <el-descriptions-item label="收款账户" style="width: 50%;">
                  <el-form-item label="" label-width="0" style="margin-bottom: 0;" prop="consignorId" required error="请选择收款账户">
                      <el-select v-model="form.platformAccountId" placeholder="请选择收款账户">
                        <el-option v-for="item in bankData" :key="item.id" :label="item.baAccountName+'('+item.baAccountNum+')'" :value="item.id"/>
                        </el-select>
                  </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="是否需要开票" style="width: 50%;">
                  <el-form-item label="" label-width="0" style="margin-bottom: 0" prop="consignorId" required error="请选择是否需要开票">
                        <dict-selector :type="DICT_TYPE.INFRA_BOOLEAN_STRING" v-model="form.transportId" />
                  </el-form-item>
                </el-descriptions-item>

            </el-descriptions>
            <div class="card">
                <el-form-item label="收款附件" label-width="120px" style="margin-bottom: 0;width: 33%;display: inline-block" prop="consignorId">
                  <el-upload
                    class="upload-demo"
                    :action="uploadFileUrl"
                    :headers="headers"
                    :on-success="handleUploadSuccess"
                    :before-upload="handleBeforeUpload"
                    :on-error="handleUploadError"
                    :before-remove="beforeRemove"
                    multiple
                  >
                    <el-button size="small" type="primary">上传附件</el-button>
                  </el-upload>
                </el-form-item>
                <el-form-item label="水单号:" label-width="120px" style="margin-bottom: 0;width: 31%;margin-left: 2%;display: inline-block" prop="waterBillNo" required error="水单号不能为空">
                   <el-input v-model="form.waterBillNo" maxlength="200" placeholder="请输入水单号"></el-input>
                </el-form-item>
                <el-form-item label="实收日期:" label-width="120px" style="margin-bottom: 0;width: 31%;margin-left: 2%;display: inline-block" prop="payedAt" required error="实收日期不能为空">
                    <el-date-picker clearable v-model="form.payedAt" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择实收日期" />
                </el-form-item>
              </div>
        </el-form>
    </el-card>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button type="primary" @click="submitForm">新 增</el-button>
    </div>
     <el-dialog  :visible.sync="open" title="添加未收客户款项" width="80%" append-to-body>
       <div>
           <!-- <div slot="header" class="card-title">添加未收客户款项</div> -->
         <!-- 搜索工作栏 -->
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="80px">
              <el-row>
                <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-form-item label="出货渠道" >
                    <el-select v-model="queryParams.channelId" placeholder="请选择出货渠道">
                    <el-option v-for="item in channelList" :label="item.nameZh" :value="item.channelId" :key="item.channelId"></el-option>
                    </el-select>
                 </el-form-item>
               </el-row>
               <el-row>
                <el-form-item label="报关方式">
                    <dict-selector :type="DICT_TYPE.ECW_CUSTOMS_TYPE" v-model="queryParams.customsType" />
                </el-form-item>
                <el-form-item label="控货">
                      <dict-selector :type="DICT_TYPE.INFRA_BOOLEAN_STRING" v-model="queryParams.control" />
                 </el-form-item>
                <el-form-item label="客户名称" >
                     <customer-selector v-model="queryParams.consignorId" @change="consignor = $event" />
                 </el-form-item>
                </el-row>
                 <el-form-item label="订单编号" prop="orderNo">
                   <el-input v-model="queryParams.orderNo" placeholder="请输入订单编号" clearable @keyup.enter.native="handleQuery"/>
                 </el-form-item>

                 <el-form-item label="自编号" prop="orderNo">
                   <el-input v-model="queryParams.orderNo" placeholder="请输入自编号" clearable @keyup.enter.native="handleQuery"/>
                 </el-form-item>

                 <el-form-item>
                   <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                 </el-form-item>
               </el-form>
             </el-col>
             <el-table v-loading="loadings" :data="orderData" border  @selection-change="handleSelectionChange">
                   <el-table-column type="selection" width="55">
                   </el-table-column>
                   <el-table-column label="自编号" align="center" prop="orderNo" />
                 <el-table-column label="订单号" align="center" prop="orderNo" />
                 <el-table-column label="运输方式" align="center" prop="transportId">
                   <template slot-scope="scope">
                      <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="scope.row.transportId"></dict-tag>
                   </template>
                 </el-table-column>
                 <el-table-column label="出货渠道" align="center" prop="channelName" />
                 <el-table-column label="始发地" align="center" prop="toDepartureId" />
                 <el-table-column label="目的地" align="center" prop="toDepartureId" />
                 <el-table-column label="商品信息" align="center" prop="toDepartureId" />
                 <el-table-column label="箱数" align="center" prop="sumNum" />
                 <el-table-column label="体积/重量" align="center" prop="weight">
                     <template slot-scope="scope">
                       {{scope.row.volume/scope.row.weight}}
                     </template>
                     </el-table-column>
                 <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="unitPrice" />
                 <el-table-column label="总金额美元" align="center" prop="totalAmount" />
               </el-table>
         <!-- </el-card> -->
         <div slot="footer" class="dialog-footer">
           <el-button type="primary" @click="submitForm">确认添加</el-button>
           <el-button @click="hiddenDialog">取 消</el-button>
         </div>
       </div>
     </el-dialog>
  </div>
</template>

<script>
  import { userList } from "@/api/system/user"
  import {DICT_TYPE} from  '@/utils/dict'
  import { getToken } from "@/utils/auth";
  import CustomerSelector from '@/components/CustomerSelector'
  import { getBankAccountPage } from "@/api/ecw/bankAccount";
  import { listSimpleDepts } from "@/api/system/dept"
  import {getChannelList} from '@/api/ecw/channel'
  import {getTradeCityList} from '@/api/ecw/region'
  export default {
    name: "CreatCollection",
    components: {
     CustomerSelector
    },
    data() {
      return {
        loadings: false,
        uploadFileUrl: process.env.VUE_APP_BASE_API + "/app-api/file/upload", // 上传的图片服务器地址
        form:{},
        creatorData:[],
        list:[],
        fileList:[],
        orderData:[],
        headers: {
           Authorization: "Bearer " + getToken(),
        },
        loading:'',
        open:false,
        bankData:[],
        params:{
           page:1,
           rows:20,
        },
        deptData:[],
        deptArr:[],
        oadings: false,
        channelList: [],
        queryParams:{
          page:1,
          rows:20,
        },
        multipleSelection:[],
        tradeCityList:[],
        id:0
      }
    },

    created() {
      let that = this
      if(that.$route.query.id){
        this.id = this.$route.query.id
      }
      // if(that.$route.query.consignorId){
      //   this.queryParams.consignorId = this.$route.query.consignorId
      // }
      // if(that.$route.query.writeOffName){
      //   this.form.writeOffName = this.$route.query.writeOffName
      // }
      userList('salesman').then(res =>that.creatorData = res.data)
      getChannelList().then(res => that.channelList = res.data)
      getTradeCityList().then(res => that.tradeCityList = res.data)
      getBankAccountPage(that.params).then(res =>that.bankData = res.data.list)
      listSimpleDepts().then(res =>{
        res.data.forEach((item)=>{
          if(item.parentId==0){

            that.deptArr.push(item)

          }else{
            that.deptData.push(item)
          }
        })

        that.deptData.forEach((value)=>{
           var dept = that.deptArr.filter(itt=>itt.id==value.parentId)
           if(dept.length>0){
             value.name =dept[0].name+' | '+ value.name
           }

        })
      })
    },
    computed:{
      expoerCityList(){
          return this.tradeCityList.filter(item => item.type == 2)
      },
      importCityList(){
          return this.tradeCityList.filter(item => item.type == 1)
      },
    },
    methods: {
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除？`);
      },
      handleUploadSuccess(res,file,fileList) {
        var arr = []
        fileList.forEach((item)=>{
          arr.push(item.response.data)
        })
        this.fileList= arr
        console.log(this.fileList)
        this.loading.close();
      },
      handleBeforeUpload() {
        this.loading = this.$loading({
          lock: true,
          text: "上传中",
          background: "rgba(0, 0, 0, 0.7)",
        });
      },
      handleUploadError() {
        this.$message({
          type: "error",
          message: "上传失败",
        });
        this.loading.close();
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.open = true;
      },
      hiddenDialog(){
        this.open = false
      },
      submitForm(){

      },
      handleSelectionChange(val) {
         this.multipleSelection = val;
       },
       /** 搜索按钮操作 */
       handleQuery() {
         this.queryParams.page = 1;
       },
    },
  }
</script>

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