<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="card-title">{{ $t('佣金请款单')  }}{{id ? `-${form.paymentNo}` :''}} </div>
      <el-form
        ref="form"
        :model="form"
        label-width="120px"
        label-position="left"
        :disabled="interdict"
      >
        <el-descriptions :column="3" class="card" border>
          <el-descriptions-item :label="$t('客户')">
            <el-form-item
              label=""
              label-width="0"
              style="margin-bottom: 0"
              prop="customerId"
              :rules="{ required: true, trigger: ['blur', 'change'],message:$t('客户不能为空')}"
              :error="$t('客户不能为空')"
            >
               <customer-selector v-model="form.customerId" @change="consignor = $event" />
<!--              <el-select-->
<!--                v-model="form.customerId"-->
<!--                :placeholder="$t('请选择客户')"-->
<!--                filterable-->
<!--                @change="selectChange(form.customerId)"-->
<!--                :filter-method="getUserList"-->
<!--              >-->
<!--                <el-option-->
<!--                  v-for="supplier in allSupplier"-->
<!--                  :key="supplier.id"-->
<!--                  :label="supplier.name"-->
<!--                  :value="supplier.id"-->
<!--                ></el-option>-->
<!--              </el-select>-->
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item :label="$t('部门')">
            <el-form-item
              label=""
              label-width="0"
              style="margin-bottom: 0"
              prop="departmentId"
              :rules="{required:true,message:$t('部门不能为空')}"
              :error="$t('部门不能为空')"
            >
              <el-select
                v-model="form.departmentId"
                style="width: 300px"
                :placeholder="$t('请选择部门')"
              >
                <el-option
                  v-for="item in deptData"
                  :key="item.id"
                  :label="item.named"
                  :value="item.id"
                  @click.native="selectFn('departmentName', item.name)"
                />
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item :label="$t('业务员')">
            <el-form-item
              label=""
              label-width="0"
              style="margin-bottom: 0"
              prop="salesmanName"
              :rules="{required:true,message:$t('业务员不能为空')}"
              :error="$t('业务员不能为空')"
            >
              <el-select filterable  v-model="form.salesmanId" :placeholder="$t('请选择业务员')">
                <el-option
                  @click.native="selectFn('salesmanName', item.nickname)"
                  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="$t('申请日期')">
            <el-form-item
              label=""
              label-width="0"
              style="margin-bottom: 0"
              prop="applicationAt"
              :rules="{required:true,message:$t('申请日期不能为空')}"
              :error="$t('申请日期不能为空')"
            >
              <el-date-picker
                clearable
                v-model="form.applicationAt"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                :placeholder="$t('选择申请日期')"
              />
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item :label="$t('客户的账户名称')" >
            <el-form-item v-if="(form.customerId && bankAccountList.length) || !form.customerId" label-width="0"   prop="customerBankAccountName">
              <el-select  v-model="form.customerBankAccountName" >
                <el-option @click.native="getBankInfo(item)" v-for="(item) in bankAccountList" :value="item.accountName" :label="item.accountName" ></el-option>
              </el-select>
            </el-form-item>
            <span v-else >{{$t('客户档案未设置银行账户。')}}</span>
          </el-descriptions-item>
          <el-descriptions-item :label="$t('账户名称')" >
            <el-form-item label-width="0" :rules="{message:$t('账户名称不能为空'),required:true,}"  prop="customerBankAccountName">
              <el-input v-model="form.customerBankAccountName" ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item :label="$t('银行名称')" >
            <el-form-item label-width="0" :rules="{ required:true,message:$t('银行名称不能为空')}" prop="customerBank" >
              <el-input v-model="form.customerBank"></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item :label="$t('银行账户')" >
           <el-form-item label-width="0"  :rules="{required:true, message:$t('银行账户不能为空'),}"  prop="customerBankAccount" >
             <el-input v-model="form.customerBankAccount" ></el-input>
           </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item :label="$t('银行代码')" >
          <el-form-item label-width="0" >
            <el-input v-model="form.customerBankCode" ></el-input>
          </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item :label="$t('账户类型')" >
            <el-form-item label-width="0">
            <el-select v-model="form.customerAccountType">
              <el-option :value="1" label="公账"></el-option>
              <el-option :value="2" label="私帐"></el-option>
            </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item :column="3" :label="$t('银行地址')" >
            <el-form-item label-width="0">
              <el-input style="width: 30%;" v-model="form.customerBankAddress" ></el-input>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="3" class="card" border>
          <el-descriptions-item :label="$t('最后付款日期')">
            <el-form-item
              label=""
              label-width="0"
              style="margin-bottom: 0"
              prop="latestPayAt"
              :rules="{required:true,message:$t('最后付款日期不能为空')}"
              :error="$t('最后付款日期不能为空')"
              :datafld="interdict"
            >
              <el-date-picker
                clearable
                v-model="form.latestPayAt"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                :placeholder="$t('选择最后付款日期')"
              />
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item :label="$t('结算方式')">
            <el-form-item
              label=""
              label-width="0"
              style="margin-bottom: 0"
              :rules="{required:true,message:$t('结算方式不能为空')}"
              :error="$t('选择结算方式')"
              prop="settlementType"
            >
              <dict-selector
                :type="DICT_TYPE.CUSTOMER_BALANCE"
                v-model="form.settlementType"
              />
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
      </el-form>
    </el-card>
    <el-card class="card">
      <div slot="header" class="card-title">{{ $t('费用信息') }}</div>
      <el-col :span="1.5">
        <el-button
          :disabled="interdict"
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          style="padding: 10px; margin-bottom: 10px"
        >{{ $t('添加未付客户款项') }}
        </el-button
        >
      </el-col>
      <el-table v-loading="loadings" :data="list" border :show-summary="!!list.length" :summary-method="getSummaries">
        <el-table-column :label="$t('订单编号')" align="center" prop="orderNo"/>
        <el-table-column :label="$t('佣金类型')" align="center" prop="feeType">
          <template v-slot="{row}">
            <dict-tag
              :type="DICT_TYPE.COMMISSION_TYPE"
              :value="row.feeType"
            ></dict-tag>
          </template>
        </el-table-column>
        <el-table-column :label="$t('发票号码')" align="center" prop="invoiceNumber">
          <template slot-scope="scope">
            <el-input :disabled="interdict" v-model="scope.row.invoiceNumber"></el-input>
          </template>
        </el-table-column>
        <el-table-column :label="$t('应付金额')" align="center" prop="totalAmount"/>
        <el-table-column :label="$t('币种')" align="center" prop="currencyId">
          <template slot-scope="scope">
              {{ getCurrencyLabel(scope.row.currencyId) }}
            <!-- <dict-tag :type="DICT_TYPE.BOX_SHIPPING_PRICE_UNIT" :value="scope.row.currencyId" /> -->
          </template>
        </el-table-column>
        <el-table-column :label="$t('汇率')" align="center" prop="exchangeRate">
          <template slot-scope="scope">
            <el-input  :disabled="interdict" v-model="scope.row.exchangeRate"></el-input>
          </template>
        </el-table-column>
        <el-table-column :label="$t('税率')+'%'" align="center" prop="taxRate">
          <template slot-scope="scope">
            <el-input :disabled="interdict" v-model="scope.row.taxRate"
                      @keyup.native="scope.row.taxRate = oninput(scope.row.taxRate)"></el-input>
          </template>
        </el-table-column>
        <el-table-column :label="$t('价税合计(RMB)')" align="center" prop="total">
          <template slot-scope="scope">
            <span>{{
                scope.row.total = ((scope.row.totalAmount * scope.row.exchangeRate) + (scope.row.totalAmount * scope.row.exchangeRate) * (scope.row.taxRate / 100)).toFixed(2)
              }}</span>
            <!-- <span>{{scope.row.total}}</span> -->
          </template>
        </el-table-column>
      </el-table>

      <el-form
        ref="forms"
        :model="form"
        label-width="120px"
        label-position="left"
        style="width: 50%"
        :disabled="interdict"
      >
        <el-descriptions :column="1" class="card" border>
          <el-descriptions-item :label="$t('账单号')">
            <el-form-item
              label=""
              label-width="0"
              style="margin-bottom: 0"
              prop="accountNumber"
              :rules="[
                { required: true, message:$t('账单号不能为空'), trigger: 'blur' },
              ]"
            >
              <el-input
                v-model="form.accountNumber"
                :placeholder="$t('请输入账单号')"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item :label="$t('发票')">
            <el-form-item
              label=""
              label-width="0"
              style="margin-bottom: 0"
              prop="invoiceStatus"
              required
              :error="$t('请选择是否开票')"
            >
              <el-select
                v-model="form.invoiceStatus"
                :placeholder="$t('请选择是否开票')"
              >
                <el-option :label="$t('未开票')" value="0"/>
                <el-option :label="$t('已开票')" value="1"/>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
      </el-form>
    </el-card>
    <div slot="header" class="bpm-title">{{ $t('审核流程') }}</div>
    <work-flow xmlkey="merge_order" v-model="form.copyUserList"></work-flow>

    <div slot="footer" style="margin: 20px 0">
      <el-button type="primary" v-if="!interdict"  @click="submitForm(1)">{{ $t('提交申请') }}</el-button>
      <el-button  type="primary" v-if="!interdict" @click="submitForm(0)">{{ $t('保存草稿') }}</el-button>
<!--      <el-button v-if="orderData.inWarehouseState==207" type="primary"-->
<!--                 @click="$router.push(`/bpm/process-instance/detail?id=`+orderApprovalBackVO.applyingFormId)">-->
<!--        {{ $t('审核中') }}-->
<!--      </el-button>-->
<!--      <el-button v-if="orderData.inWarehouseState==207" plain type="primary" @click="dialogVisible = true">-->
<!--        {{ $t('取消审核') }}-->
<!--      </el-button>-->
      <el-button plain type="primary" @click="$router.back()">{{ $t('返回') }}</el-button>
    </div>
    <el-dialog
      :visible.sync="open"
      :title="$t('添加未付客户款项')"
      width="80%"
      append-to-body
      @open="openDialog"
    >
      <div>
        <!-- <div slot="header" class="card-title">{{ $t('添加未收客户款项') }}</div> -->
        <!-- 搜索工作栏 -->
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          label-width="80px"
        >
          <!-- <el-row> -->
          <el-form-item :label="$t('客户')">
            <customer-selector
              v-model="queryParams.customerId"
              @change="consignor = $event"
            />
          </el-form-item>
          <el-form-item :label="$t('始发仓')">
            <el-select
              v-model="queryParams.departureId"
              :placeholder="$t('请选择始发仓')"
              clearable
            >
              <el-option
                v-for="item in exportWarehouseList"
                :label="$l(item, 'title')"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('目的仓')">
            <el-select
              v-model="queryParams.objectiveId"
              :placeholder="$t('请选择目的仓')"
              clearable
            >
              <el-option
                v-for="item in importWarehouseList"
                :label="$l(item, 'title')"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('运输方式')">
            <dict-selector
              :type="DICT_TYPE.ECW_TRANSPORT_TYPE"
              v-model="queryParams.transportId"
              formatter="number"
            />
          </el-form-item>
          <!--  </el-row> -->
          <el-form-item :label="$t('出货渠道')">
            <el-select
              v-model="queryParams.channelId"
              :placeholder="$t('请选择出货渠道')"
            >
              <el-option
                v-for="item in channelList"
                :label="item.nameZh"
                :value="item.channelId"
                :key="item.channelId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('订单号')" prop="orderNo">
            <el-input
              v-model="queryParams.orderNo"
              :placeholder="$t('请输入订单号')"
              clearable
            />
          </el-form-item>

          <el-form-item :label="$t('业务编号')" prop="selfNo">
            <el-input
              v-model="queryParams.selfNo"
              :placeholder="$t('请输入业务编号')"
              clearable
              @blur="handleQuery"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery"
            >{{ $t('查询') }}
            </el-button
            >
          </el-form-item>
        </el-form>
        <el-table
          ref="multipleTable"
          v-loading="loading"
          :data="orderData"
          border
          @selection-change="handleSelectionChange"
          row-key="id"
        >
          <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
          <el-table-column :label="$t('订单编号')" prop="orderNo"></el-table-column>
          <el-table-column align="center" :label="$t('品名')">
            <template v-slot="{row}">
              {{row.titleZh}}/{{row.titleEn}}
            </template>
          </el-table-column>
          <el-table-column :label="$t('客户名称')" prop="customerName"></el-table-column>
          <el-table-column :label="$t('佣金类型')">
            <template v-slot="{row}">
              <dict-tag
                :type="DICT_TYPE.COMMISSION_TYPE"
                :value="row.feeType"
              ></dict-tag>
            </template>
          </el-table-column>
          <el-table-column :label="$t('金额')" align="center" prop="totalAmount">
            <template slot-scope="scope">
              <span>{{ scope.row.totalAmount }}{{ getCurrencyLabel(scope.row.currencyId) }}</span>
              <!-- <dict-tag :type="DICT_TYPE.BOX_SHIPPING_PRICE_UNIT" :value="scope.row.currencyId" /> -->
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.rows"
          @pagination="getList"
        />
        <!-- </el-card> -->
        <div slot="footer" style="margin: 20px 0; text-align: center;">
          <el-button type="primary" @click="saveSelectList">{{ $t('确认添加') }}</el-button>
          <el-button @click="hiddenDialog">{{ $t('取消') }}</el-button>
        </div>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import {listSimpleUsers} from "@/api/system/user";
import {DICT_TYPE} from "@/utils/dict";
import {getToken} from "@/utils/auth";
import {getChannelList} from "@/api/ecw/channel";
import CustomerSelector from "@/components/CustomerSelector";
import {listSimpleDepts} from "@/api/system/dept";
import {getTradeCityList} from "@/api/ecw/region";
import {getSupplierPage, getSupplier} from "@/api/ecw/supplier";
import {
  getPayableList,
  getPayableInfoByIds,

  getPaymentInfoByIds,
  getPaymentItem,
  updatePayment,
  payablePage,
  commissionPayment,
  commissionPaymentUpdate,
  getCommissionPayable,
  getCommissionPayment,
  getCommissionPaymentList, getCommissionPayableList
} from "@/api/ecw/financial"
import {getCurrencyPage} from "@/api/ecw/currency";
import NP from 'number-precision'
import {getWarehouseList} from '@/api/ecw/warehouse'
import WorkFlow from '@/components/WorkFlow/'
import {getCustomer, getCustomerPage} from "@/api/ecw/customer";
import Template from "@/views/cms/template/index.vue";
import {getExchangeRatePage} from "@/api/ecw/exchangeRate";

export default {
  name: "commission-requestFunds",
  components: {
    Template,
    CustomerSelector, WorkFlow
  },
  data() {
    return {
      id: 0,
      payableId: 0,
      orderData: [],
      total: 0,
      loadings: false,
      open: false,
      form: {},
      creatorData: [],
      list: [],
      defaultList: [],
      channelList: [],
      loading: "",
      bankData: [],
      params: {
        page: 1,
        rows: 20,
      },
      deptData: [],
      deptArr: [],
      queryParams: {
        page: 1,
        rows: 20,
      },
      multipleSelection: [],
      tradeCityList: [],
      allSupplier: [],
      currencyList: [],
      warehouseList: [],
      selectedUsers: [],
      dialogVisible: false,
      interdict:false,
      bankAccountList:[],
      rateList:[],
    };
  },
  async created() {
    await getCurrencyPage(this.params).then(res => this.currencyList = res.data.list)
    await getExchangeRatePage({page:1,rows: 100}).then(res => this.rateList = res.data.list)
    getWarehouseList().then(res => this.warehouseList = res.data)
    let that = this;
    if (that.$route.query.payableId && that.$route.query.payableId !== '0') {
      this.payableId = this.$route.query.payableId;
      // 获取详情
      getCommissionPayable({id: this.payableId}).then(res => {
        this.handleSelectionChange([res.data])
        this.selectChange(this.form.customerId)
        this.list = this.multipleSelection
        this.$set(this.form, 'customerId', res.data.customerId)
      })
    }
    if ((that.$route.query.id && that.$route.query.id !== '0') || (that.$route.query.lookId && that.$route.query.lookId !== '0') ) {
      this.id = this.$route.query.id || this.$route.query.lookId;
         if(!!this.$route.query.lookId) this.interdict = true;
      getCommissionPayment({id: this.id}).then(res => {
        this.list = [...res.data.payableBackVOList]
        this.defaultList = [...res.data.payableBackVOList]
        console.log(res.data,'res.data')
        this.form = {
          copyUserList:[],
          ...res.data,
          latestPayAt: this.parseTime(res.data.latestPayAt, '{y}-{m}-{d} {h}:{i}:{s}'),
          applicationAt: this.parseTime(res.data.applicationAt, '{y}-{m}-{d} {h}:{i}:{s}'),
          invoiceStatus: String(res.data.invoiceStatus),
        }
        this.$set(this.form, 'customerBankAccountName', accountName)
      });
      // getCommissionPayableList({ids: [this.id]}).then(res => {
      //   console.log(res.data,'res.data')
      //
      // })
    }
    listSimpleUsers().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)
    // );
    // getSupplierPage({ pageNo: "1", pageSize: "10000" }).then((res) => {
    //   const { data } = res;
    //   this.allSupplier = data.list;
    //   this.selectChange(this.form.supplierId)
    // });
    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.named = dept[0].name + " | " + value.name;
        }else {
          value.named =  value.name;
        }
      });
    });
    this.getUserList();
  },
  computed: {
    expoerCityList() {
      return this.tradeCityList.filter((item) => item.type == 2);
    },
    importCityList() {
      return this.tradeCityList.filter((item) => item.type == 1);
    },
    exportWarehouseList() {
      /* tradeType 1 进口，2出口，3进出口 */
      return this.warehouseList.filter(item => item.tradeType == 2 || item.tradeType == 3)
    },
    importWarehouseList() {
      return this.warehouseList.filter(item => item.tradeType == 1 || item.tradeType == 3)
    },
  },
  methods: {
    selectFn(keyVal, name){
      this.form[keyVal] = name;
      console.log(this.form,'form:')
    },
    getCurrencyLabel(id) {
      var label = this.currencyList.filter(item => item.id == id)
      if (label.length > 0) return this.$i18n.locale == 'zh_CN' ? label[0].titleZh : label[0].titleEn
      return ''
    },
    getList() {
      this.loading = true;
      // 处理查询参数
      let params = {...this.queryParams,state:0};
      this.addBeginAndEndTime(params, this.dateRangeCreateTime, "createTime");
      // 执行查询
      payablePage(params).then((response) => {
        this.orderData = response.data.list;
        this.total = response.data.total;
        this.loading = false;
        this.$nextTick(() => {
          this.list.forEach(itm => {
            const t = this.orderData.find(v => v.id == itm.id)
            t && this.$refs.multipleTable.toggleRowSelection(t, true)
          })
        })
      });
    },
    getUserList(val) {
      getCustomerPage({pageNo: 1, pageSize: 20, name: val}).then(r => {
        this.allSupplier = r.data.list
      })
    },
    getSummaries(param) {
      console.log(param)
      const {columns, data} = param;
      const sums = new Array(columns.length).map(v => '');
      const index = sums.length - 1
      sums[index - 1] = this.$t('价税合计大写')
      const t = data.map(v => v.total).reduce((prev, curr) => {
        return parseFloat(prev) + parseFloat(curr);
      }, 0)
      sums[index] = this.convertCurrency(t)
      return sums;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.open = true;
    },
    submitForm(val) {
      this.form.addType = val;
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$refs.forms.validate((val) => {
            if (val) {
              const params = {...this.form}
              if (this.list && this.list.length > 0) {
                params.commissionPayableReqVOList = [...this.list]
              } else {
                this.$modal.msgError(this.$t('请选择客户未付款项'));
                return
              }
              if (!params.customerBankAccount) {
                this.$modal.msgError(this.$t('请前往客户档案编辑银行账号！'));
                return
              }
              if (this.id && this.id !== '0') {
                commissionPaymentUpdate(params).then(res => {
                  this.$modal.msgSuccess(this.$t('修改成功'));
                  this.$router.back();
                })
              } else {
                commissionPayment(params).then(res => {
                  this.$modal.msgSuccess(this.$t('新增成功'));
                  this.$router.back();
                })
              }
            }
          })
        }
      })
    },
    selectChangeBank(val) {
      this.$forceUpdate()
      // var bank = this.bankData.find(item => item.bankAccount == this.form.supplierBankAccount)
      // this.form.supplierBank = bank.bankName
      // this.form.supplierBankAccountName = bank.accountName
    },
    selectChange(val) {
      if(val){
        getCustomer(val).then(r => {
          this.form.customerName = r.data.name
          this.bankAccountList = r.data.customerBankBackVOList
           // this.$set(this.form, 'customerBank',r.data.bank )
           // this.$set(this.form, 'customerBankAccount',r.data.bankNumber )
           // this.$set(this.form, 'customerBankAccountName',r.data.name )
          if(this.bankAccountList.length) this.getBankInfo(this.bankAccountList[0])

        })
      }
      // this.bankData = []
      // // this.form.supplierBankAccount=''
      // if (val) {
      //   getSupplier(val).then((res) => {
      //     this.bankData = res.data.bankList
      //     var bank = this.bankData.find(item => item.bankAccount == this.form.supplierBankAccount)
      //     if (this.bankData.length == 0 || !bank) this.form.supplierBankAccount = ''
      //   })
      // }
      //
      // const t = this.allSupplier.find(v => v.id == val)
      //
      // t && (this.form.supplierName = t.companyZh)
      // t && (this.bankData = t.bankList)
    },
    getBankInfo(val){
      console.log(val,'valbank')
      let {accountName,bankAccount,bankAddress,bankName,bankCode,accountType} = val
        // this.form.customerAccountType = baType; //账户类型
        this.$set(this.form, 'customerAccountType', Number(accountType))
        // this.form.customerBank = baBankName; //客户银行
      this.$set(this.form, 'customerBank', bankName)
        // this.form.customerBankAccount = baAccountNum; //	客户银行账号
      this.$set(this.form, 'customerBankAccount', bankAccount)
        // this.form.customerBankAccountName = customerBankAccountName; //客户银行账户名
      this.$set(this.form, 'customerBankAccountName', accountName)
        // this.form.customerBankAddress = customerBankAddress; //	银行地址
      this.$set(this.form, 'customerBankAddress', bankAddress)
        // this.form.customerBankAddress = customerBankCode; //	银行代码
      this.$set(this.form, 'customerBankCode', bankCode)

    },
    handleQuery() {
      this.queryParams.page = 1;
      this.getList()
    },
    UStoRMB() {
      return NP.divide(this.currencyList.find(v => v.titleEn === 'USD').huilv, 100).toFixed(6)
    },
    NANtoRMB() {
      return NP.divide(this.currencyList.find(v => v.titleEn === 'NGN').huilv, 100).toFixed(6)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map(v => {
        let p = this.rateList.find(i =>i.sourceCurrencyId === v.currencyId &&  i.targetCurrencyId === 3)
        return Object.assign(v, {exchangeRate: p.currencyRate})
      });
    },
    hiddenDialog() {
      this.open = false;
    },
    saveSelectList() {
      if (this.id && this.id !== '0') {
        this.list = [...this.defaultList, ...this.multipleSelection]
      } else {
        this.list = this.multipleSelection
      }
      this.open = false;
    },
    convertCurrency(money) {
      //汉字的数字
      var cnNums = new Array(this.$t('零'), this.$t('壹'), this.$t('贰'), this.$t('叁'), this.$t('肆'), this.$t('伍'), this.$t('陆'), this.$t('柒'), this.$t('捌'), this.$t('玖'));
      //基本单位
      var cnIntRadice = new Array('', this.$t('拾'), this.$t('佰'), this.$t('仟'));
      //对应整数部分扩展单位
      var cnIntUnits = new Array('', this.$t('万'), this.$t('亿'), this.$t('兆'));
      //对应小数部分单位
      var cnDecUnits = new Array(this.$t('角'), this.$t('分'), this.$t('毫'), this.$t('厘'));
      //整数金额时后面跟的字符
      var cnInteger = this.$t('整');
      //整型完以后的单位
      var cnIntLast = this.$t('元');
      //最大处理的数字
      var maxNum = 999999999999999.9999;
      //金额整数部分
      var integerNum;
      //金额小数部分
      var decimalNum;
      //输出的中文金额字符串
      var chineseStr = '';
      //分离金额后用的数组，预定义
      var parts;
      // 传入的参数为空情况
      if (money === '') {
        return '';
      }
      money = parseFloat(money)
      if (money >= maxNum) {
        return ''
      }
      // 传入的参数为0情况
      if (money === 0) {
        chineseStr = cnNums[0] + cnIntLast + cnInteger;
        return chineseStr
      }
      // 转为字符串
      money = money.toString();
      // indexOf 检测某字符在字符串中首次出现的位置 返回索引值（从0 开始） -1 代表无
      if (money.indexOf('.') == -1) {
        integerNum = money;
        decimalNum = ''
      } else {
        parts = money.split('.');
        integerNum = parts[0];
        decimalNum = parts[1].substr(0, 4);
      }
      //转换整数部分
      if (parseInt(integerNum, 10) > 0) {
        let zeroCount = 0;
        let IntLen = integerNum.length
        for (let i = 0; i < IntLen; i++) {
          let n = integerNum.substr(i, 1);
          let p = IntLen - i - 1;
          let q = p / 4;
          let m = p % 4;
          if (n == '0') {
            zeroCount++;
          } else {
            if (zeroCount > 0) {
              chineseStr += cnNums[0]
            }
            zeroCount = 0;
            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
          }
          if (m == 0 && zeroCount < 4) {
            chineseStr += cnIntUnits[q];
          }
        }
        // 最后+ 元
        chineseStr += cnIntLast;
      }
      // 转换小数部分
      if (decimalNum != '') {
        let decLen = decimalNum.length;
        for (let i = 0; i < decLen; i++) {
          let n = decimalNum.substr(i, 1);
          if (n != '0') {
            chineseStr += cnNums[Number(n)] + cnDecUnits[i]
          }
        }
      }
      if (chineseStr == '') {
        chineseStr += cnNums[0] + cnIntLast + cnInteger;
      } else if (decimalNum == '') {
        chineseStr += cnInteger;
      }
      return chineseStr
    },
    openDialog() {
      this.getList()
    },
    oninput(num) {
      let str = num
      let len1 = str.substr(0, 1)
      let len2 = str.substr(1, 1)
      //如果第一位是0，第二位不是点，就用数字把点替换掉
      if (str.length > 1 && len1 == 0 && len2 != '.') {
        str = str.substr(1, 1)
      }
      //第一位不能是.
      if (len1 == '.') {
        str = ''
      }
      //限制只能输入一个小数点
      if (str.indexOf('.') != -1) {
        let str_ = str.substr(str.indexOf('.') + 1)
        if (str_.indexOf('.') != -1) {
          str = str.substr(0, str.indexOf('.') + str_.indexOf('.') + 1)
        } else {
          // if (str_.length > 2) {
          //   str = str.substr(0, str.indexOf('.') + 1) + str_.substr(0, 2)
          // }
        }
      }
      //正则替换
      str = str.replace(/[^\d^\.]+/g, '') // 保留数字和小数点
      // str = str.replace(/\.\d\d\d$/,'') // 小数点后只能输两位
      return str
    }
  },
  watch:{
    'form.customerId'(val){
       this.selectChange(val)
       if(!val){
         // 清空银行卡信息
         this.form.customerAccountType = ''; //账户类型
         this.form.customerBank = ''; //客户银行
         this.form.customerBankAccount = ''; //	客户银行账号
         this.form.customerBankAccountName = ''; //客户银行账户名
         this.form.customerBankAddress = ''; //	银行地址
         this.form.customerBankCode = ''; //	银行代码
      }

    }
  }
};
</script>

<style scoped>
.el-form-item{
  margin-bottom: 0;
}
.card {
  margin-top: 20px;
}

.dialog-footer {
  padding: 40px;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
}

.bpm-title {
  font-size: 20px;
  font-weight: bold;
  color: #666;
  margin: 20px 0;
}
</style>

