<template>
  <basic-container>
    <avue-crud ref="crud"
               id="out-table"
               v-model="form"
               :before-open="beforeOpen"
               :data="data"
               :option="option"
               :page.sync="page"
               :permission="permissionList"
               :table-loading="loading"
               :search.sync="query"
               :header-cell-class-name="headerClassName"
               @resetColumn="resetColumnTwo('crud', 'option', 'optionBack', 310)"
               @saveColumn="saveColumnTwo('crud', 'option', 'optionBack', 310)"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
<!--      <template slot="search" slot-scope="{row,size}">-->
<!--        <el-form ref="form" :model="row" label-width="80px">-->
<!--          <el-row>-->
<!--            <el-col :span="6">-->
<!--              <el-form-item label="客户名称">-->
<!--                <el-select-->
<!--                  v-model="query.corpCnName"-->
<!--                  filterable-->
<!--                  remote-->
<!--                  clearable-->
<!--                  style="width:100%"-->
<!--                  placeholder="请输入关键词"-->
<!--                  :remote-method="remoteMethod"-->
<!--                  :loading="loading">-->
<!--                  <el-option-->
<!--                    v-for="item in corpCnNameList"-->
<!--                    :key="item.cnName"-->
<!--                    :label="item.cnName"-->
<!--                    :value="item.cnName">-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="6">-->
<!--              <el-form-item label="MB/L NO">-->
<!--                <el-input v-model="query.mblno"></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="6">-->
<!--              <el-form-item label="HB/L NO">-->
<!--                <el-input v-model="query.hblno"></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="6">-->
<!--              <el-form-item label="船名">-->
<!--                <el-input v-model="query.vesselCnName"></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="6">-->
<!--              <el-form-item label="航次">-->
<!--                <el-input v-model="query.voyageNo"></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--            <el-col :span="6">-->
<!--              <el-form-item label="ETD">-->
<!--                <el-input v-model="query.etd"></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--        </el-form>-->
<!--      </template>-->
<!--      <template slot="searchMenu"  slot-scope="{row,size}">-->
<!--      </template>-->
      <template slot="corpCnName" slot-scope="scope">
        <avue-text-ellipsis :text="scope.row.corpCnName" :height="30" use-tooltip placement="top">
          <small slot="more">...</small>
        </avue-text-ellipsis>
      </template>
      <template slot="remarks" slot-scope="scope">
        <avue-text-ellipsis :text="scope.row.remarks" :height="30" use-tooltip placement="top">
          <small slot="more">...</small>
        </avue-text-ellipsis>
      </template>
      <template slot="menuLeft">
<!--        v-if="permission.feecenter_delete"-->
        <el-button
                   icon="el-icon-delete"
                   plain
                   size="small"
                   type="danger"
                   @click="handleDelete">删 除
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import {feecenterList, feecenterRemove} from "@/api/iosBasicData/feecenter";
import { getBcorpsList } from "@/api/iosBasicData/bcorps";
import {mapGetters} from "vuex";

export default {
  data() {
    return {
      form: {},
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      option: {},
      optionBack: {
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: true,
        selection: true,
        dialogClickModal: false,
        column: [
          {
            label: "客户名称",
            prop: "corpCnName",
            search: true,
            width: "180"
          },
          {
            label: "费用简称",
            prop: "feeCnName",
            width: "180"
          },
          {
            label: "预付/到付",
            prop: "paymode"
          },
          {
            label: "计量单位",
            prop: "unitNo"
          },
          {
            label: "币种",
            prop: "curCode"
          },
          {
            label: "单价",
            prop: "price"
          },
          {
            label: "数量",
            prop: "quantity"
          },
          {
            label: "CNY(含税)",
            prop: "rmbAmount"
          },
          {
            label: "USD(含税)",
            prop: "usdAmount"
          },
          {
            label: "对CNY汇率",
            width: "100",
            prop: "exrate"
          },
          {
            label: "预付地址",
            prop: "payplace",
            width: "180"
          },
          {
            label: "备注",
            prop: "remarks",
            width: "180"
          },






          {
            label: "MB/L NO",
            prop: "mblno",
            search: true,
            width: "200"
          },
          {
            label: "HB/L NO",
            prop: "hblno",
            search: true,
            width: "240"
          },
          {
            label: "船名",
            search: true,
            prop: "vesselCnName"
          },
          {
            label: "航次",
            search: true,
            prop: "voyageNo"
          },
          {
            label: "ETD",
            search: true,
            prop: "etd"
          },



          // [
          //
          // {
          //   label: "业务类型",
          //   prop: "businessType",
          //   rules: [{
          //     required: true,
          //     message: "请输入业务类型",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "单据类型, DD=直单(默认) MM=主单 MH=主分单 HH=从分单",
          //   prop: "billType",
          //   rules: [{
          //     required: true,
          //     message: "请输入单据类型, DD=直单(默认) MM=主单 MH=主分单 HH=从分单",
          //     trigger: "blur"
          //   }]
          // },
          //
          // {
          //   label: "行号 基于pid 1...",
          //   prop: "lineNo",
          //   rules: [{
          //     required: true,
          //     message: "请输入行号 基于pid 1...",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "单据编号",
          //   prop: "billNo",
          //   rules: [{
          //     required: true,
          //     message: "请输入单据编号",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "单据日期",
          //   prop: "billDate",
          //   rules: [{
          //     required: true,
          //     message: "请输入单据日期",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "财务日期",
          //   prop: "accountDate",
          //   rules: [{
          //     required: true,
          //     message: "请输入财务日期",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "财务年",
          //   prop: "accountYear",
          //   rules: [{
          //     required: true,
          //     message: "请输入财务年",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "财务月",
          //   prop: "accountMonth",
          //   rules: [{
          //     required: true,
          //     message: "请输入财务月",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "财务日",
          //   prop: "accountDay",
          //   rules: [{
          //     required: true,
          //     message: "请输入财务日",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "业务来源",
          //   prop: "srcType",
          //   rules: [{
          //     required: true,
          //     message: "请输入业务来源",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "来源 id",
          //   prop: "srcId",
          //   rules: [{
          //     required: true,
          //     message: "请输入来源 id",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "来源中文",
          //   prop: "srcCnName",
          //   rules: [{
          //     required: true,
          //     message: "请输入来源中文",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "来源英文",
          //   prop: "srcEnName",
          //   rules: [{
          //     required: true,
          //     message: "请输入来源英文",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "客户 id",
          //   prop: "corpId",
          //   rules: [{
          //     required: true,
          //     message: "请输入客户 id",
          //     trigger: "blur"
          //   }]
          // },
          //
          // {
          //   label: "客户英文名称",
          //   prop: "corpEnName",
          //   rules: [{
          //     required: true,
          //     message: "请输入客户英文名称",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "航线 id",
          //   prop: "lineId",
          //   rules: [{
          //     required: true,
          //     message: "请输入航线 id",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "航线中文名称",
          //   prop: "lineCnName",
          //   rules: [{
          //     required: true,
          //     message: "请输入航线中文名称",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "航线英文名称",
          //   prop: "lineEnName",
          //   rules: [{
          //     required: true,
          //     message: "请输入航线英文名称",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "船名 id",
          //   prop: "vesselId",
          //   rules: [{
          //     required: true,
          //     message: "请输入船名 id",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "英文船名",
          //   prop: "vesselEnName",
          //   rules: [{
          //     required: true,
          //     message: "请输入英文船名",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "到港日期",
          //   prop: "eta",
          //   rules: [{
          //     required: true,
          //     message: "请输入到港日期",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "箱号",
          //   prop: "cntrNo",
          //   rules: [{
          //     required: true,
          //     message: "请输入箱号",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "装货港 id",
          //   prop: "polId",
          //   rules: [{
          //     required: true,
          //     message: "请输入装货港 id",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "装货港代码",
          //   prop: "polCode",
          //   rules: [{
          //     required: true,
          //     message: "请输入装货港代码",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "装货港英文名称",
          //   prop: "polCnName",
          //   rules: [{
          //     required: true,
          //     message: "请输入装货港英文名称",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "装货港英文名称",
          //   prop: "polEnName",
          //   rules: [{
          //     required: true,
          //     message: "请输入装货港英文名称",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "卸货港 id",
          //   prop: "podId",
          //   rules: [{
          //     required: true,
          //     message: "请输入卸货港 id",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "卸货港代码",
          //   prop: "podCode",
          //   rules: [{
          //     required: true,
          //     message: "请输入卸货港代码",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "卸货港中文名称",
          //   prop: "podCnName",
          //   rules: [{
          //     required: true,
          //     message: "请输入卸货港中文名称",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "卸货港英文名称",
          //   prop: "podEnName",
          //   rules: [{
          //     required: true,
          //     message: "请输入卸货港英文名称",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "费用 Id",
          //   prop: "feeId",
          //   rules: [{
          //     required: true,
          //     message: "请输入费用 Id",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "费用中文名称",
          //   prop: "feeCode",
          //   rules: [{
          //     required: true,
          //     message: "请输入费用中文名称",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "费用英文名称",
          //   prop: "feeEnName",
          //   rules: [{
          //     required: true,
          //     message: "请输入费用英文名称",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "收付 D=收 C=付",
          //   prop: "dc",
          //   rules: [{
          //     required: true,
          //     message: "请输入收付 D=收 C=付",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "汇率，外币转为本币的汇率",
          //   prop: "exrate",
          //   rules: [{
          //     required: true,
          //     message: "请输入汇率，外币转为本币的汇率",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "是否含税（0 不含税 1 含税）",
          //   prop: "isTax",
          //   rules: [{
          //     required: true,
          //     message: "请输入是否含税（0 不含税 1 含税）",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "税种",
          //   prop: "taxType",
          //   rules: [{
          //     required: true,
          //     message: "请输入税种",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "税率 %，即 3% 的税率，值为 3.00",
          //   prop: "taxRate",
          //   rules: [{
          //     required: true,
          //     message: "请输入税率 %，即 3% 的税率，值为 3.00",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "费率税率 %，即 3% 的税率，值为 3.00",
          //   prop: "surchargeRate",
          //   rules: [{
          //     required: true,
          //     message: "请输入费率税率 %，即 3% 的税率，值为 3.00",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "折扣金额",
          //   prop: "amountDiscount",
          //   rules: [{
          //     required: true,
          //     message: "请输入折扣金额",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "去税金额",
          //   prop: "amountNet",
          //   rules: [{
          //     required: true,
          //     message: "请输入去税金额",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "税额",
          //   prop: "amountTax",
          //   rules: [{
          //     required: true,
          //     message: "请输入税额",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "金额，amount_tax + amount_net - amount_discount",
          //   prop: "amount",
          //   rules: [{
          //     required: true,
          //     message: "请输入金额，amount_tax + amount_net - amount_discount",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "本币税额",
          //   prop: "amountTaxLoc",
          //   rules: [{
          //     required: true,
          //     message: "请输入本币税额",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "本币去税金额",
          //   prop: "amountNetLoc",
          //   rules: [{
          //     required: true,
          //     message: "请输入本币去税金额",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "本币折扣金额",
          //   prop: "amountDiscountLoc",
          //   rules: [{
          //     required: true,
          //     message: "请输入本币折扣金额",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "本币金额，外币转为本币的金额",
          //   prop: "amountLoc",
          //   rules: [{
          //     required: true,
          //     message: "请输入本币金额，外币转为本币的金额",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "账单 Id",
          //   prop: "accBillId",
          //   rules: [{
          //     required: true,
          //     message: "请输入账单 Id",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "账单编号",
          //   prop: "accBillNo",
          //   rules: [{
          //     required: true,
          //     message: "请输入账单编号",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "账单日期",
          //   prop: "accDate",
          //   rules: [{
          //     required: true,
          //     message: "请输入账单日期",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "账单金额",
          //   prop: "accAmount",
          //   rules: [{
          //     required: true,
          //     message: "请输入账单金额",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "账单状态 0 = 未生成账单 1=已生成账单",
          //   prop: "accStatus",
          //   rules: [{
          //     required: true,
          //     message: "请输入账单状态 0 = 未生成账单 1=已生成账单",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "账单创建人 Id",
          //   prop: "accById",
          //   rules: [{
          //     required: true,
          //     message: "请输入账单创建人 Id",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "账单创建人",
          //   prop: "accByName",
          //   rules: [{
          //     required: true,
          //     message: "请输入账单创建人",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "对账单 Id",
          //   prop: "checkBillId",
          //   rules: [{
          //     required: true,
          //     message: "请输入对账单 Id",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "对账单编号",
          //   prop: "checkBillNo",
          //   rules: [{
          //     required: true,
          //     message: "请输入对账单编号",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "对账单日期",
          //   prop: "checkDate",
          //   rules: [{
          //     required: true,
          //     message: "请输入对账单日期",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "对账单金额",
          //   prop: "checkAmount",
          //   rules: [{
          //     required: true,
          //     message: "请输入对账单金额",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "对账状态 0 = 未对账 1=已对账",
          //   prop: "checkStatus",
          //   rules: [{
          //     required: true,
          //     message: "请输入对账状态 0 = 未对账 1=已对账",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "对账单创建人 Id",
          //   prop: "checkById",
          //   rules: [{
          //     required: true,
          //     message: "请输入对账单创建人 Id",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "对账单创建人",
          //   prop: "checkByName",
          //   rules: [{
          //     required: true,
          //     message: "请输入对账单创建人",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "对账单 Id",
          //   prop: "stlBillId",
          //   rules: [{
          //     required: true,
          //     message: "请输入对账单 Id",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "结算单编号",
          //   prop: "stlBillNo",
          //   rules: [{
          //     required: true,
          //     message: "请输入结算单编号",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "结算单日期",
          //   prop: "stlDate",
          //   rules: [{
          //     required: true,
          //     message: "请输入结算单日期",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "本次原币结算金额",
          //   prop: "stlOrgAmount",
          //   rules: [{
          //     required: true,
          //     message: "请输入本次原币结算金额",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "本次结算币种",
          //   prop: "stlCurCode",
          //   rules: [{
          //     required: true,
          //     message: "请输入本次结算币种",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "本次结算币种对原币种汇率",
          //   prop: "stlExrate",
          //   rules: [{
          //     required: true,
          //     message: "请输入本次结算币种对原币种汇率",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "本次结算币种对本币汇率",
          //   prop: "stlExrateLoc",
          //   rules: [{
          //     required: true,
          //     message: "请输入本次结算币种对本币汇率",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "本次结算金额",
          //   prop: "stlAmount",
          //   rules: [{
          //     required: true,
          //     message: "请输入本次结算金额",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "本次结算本币金额",
          //   prop: "stlAmountLoc",
          //   rules: [{
          //     required: true,
          //     message: "请输入本次结算本币金额",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "结算单日期",
          //   prop: "stlStatus",
          //   rules: [{
          //     required: true,
          //     message: "请输入结算单日期",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "结算单创建人 Id",
          //   prop: "stlById",
          //   rules: [{
          //     required: true,
          //     message: "请输入结算单创建人 Id",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "结算单创建人",
          //   prop: "stlByName",
          //   rules: [{
          //     required: true,
          //     message: "请输入结算单创建人",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "原币累计已结算金额",
          //   prop: "stlTtlAmount",
          //   rules: [{
          //     required: true,
          //     message: "请输入原币累计已结算金额",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "原币未结算金额",
          //   prop: "unsettledAmount",
          //   rules: [{
          //     required: true,
          //     message: "请输入原币未结算金额",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "凭证 Id",
          //   prop: "voucherBillId",
          //   rules: [{
          //     required: true,
          //     message: "请输入凭证 Id",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "凭证单据编号",
          //   prop: "voucherBillNo",
          //   rules: [{
          //     required: true,
          //     message: "请输入凭证单据编号",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "凭证号",
          //   prop: "voucherNo",
          //   rules: [{
          //     required: true,
          //     message: "请输入凭证号",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "凭证日期",
          //   prop: "voucherDate",
          //   rules: [{
          //     required: true,
          //     message: "请输入凭证日期",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "凭证状态 0 = 未开 1=已开",
          //   prop: "voucherStatus",
          //   rules: [{
          //     required: true,
          //     message: "请输入凭证状态 0 = 未开 1=已开",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "凭证创建人 Id",
          //   prop: "voucherById",
          //   rules: [{
          //     required: true,
          //     message: "请输入凭证创建人 Id",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "凭证创建人",
          //   prop: "voucherByName",
          //   rules: [{
          //     required: true,
          //     message: "请输入凭证创建人",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "排序",
          //   prop: "sort",
          //   rules: [{
          //     required: true,
          //     message: "请输入排序",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "是否已删除（0 否 1是）",
          //   prop: "isDeleted",
          //   rules: [{
          //     required: true,
          //     message: "请输入是否已删除（0 否 1是）",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "版本",
          //   prop: "version",
          //   rules: [{
          //     required: true,
          //     message: "请输入版本",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "状态（0 正常 1停用）",
          //   prop: "status",
          //   rules: [{
          //     required: true,
          //     message: "请输入状态（0 正常 1停用）",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "备注",
          //   prop: "remarks",
          //   rules: [{
          //     required: true,
          //     message: "请输入备注",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "主表客户 id",
          //   prop: "billCorpId",
          //   rules: [{
          //     required: true,
          //     message: "请输入主表客户 id",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "主表客户中文名称",
          //   prop: "billCorpCnName",
          //   rules: [{
          //     required: true,
          //     message: "请输入主表客户中文名称",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "主表客户英文名称",
          //   prop: "billCorpEnName",
          //   rules: [{
          //     required: true,
          //     message: "请输入主表客户英文名称",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "MB/L 付款地点",
          //   prop: "payplace",
          //   rules: [{
          //     required: true,
          //     message: "请输入MB/L 付款地点",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "发票 Id",
          //   prop: "invoiceBillId",
          //   rules: [{
          //     required: true,
          //     message: "请输入发票 Id",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "发票单据编号",
          //   prop: "invoiceBillNo",
          //   rules: [{
          //     required: true,
          //     message: "请输入发票单据编号",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "发票号",
          //   prop: "invoiceNo",
          //   rules: [{
          //     required: true,
          //     message: "请输入发票号",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "发票日期",
          //   prop: "invoiceDate",
          //   rules: [{
          //     required: true,
          //     message: "请输入发票日期",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "发票状态 0 = 未开 9=已开 2 待开 3 不开",
          //   prop: "invoiceStatus",
          //   rules: [{
          //     required: true,
          //     message: "请输入发票状态 0 = 未开 9=已开 2 待开 3 不开",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "发票币种",
          //   prop: "invoiceCurCode",
          //   rules: [{
          //     required: true,
          //     message: "请输入发票币种",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "发票汇率",
          //   prop: "invoiceExrate",
          //   rules: [{
          //     required: true,
          //     message: "请输入发票汇率",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "本次发票金额",
          //   prop: "invoiceAmount",
          //   rules: [{
          //     required: true,
          //     message: "请输入本次发票金额",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "本次发票本币金额",
          //   prop: "invoiceAmountLoc",
          //   rules: [{
          //     required: true,
          //     message: "请输入本次发票本币金额",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "发票创建人 Id",
          //   prop: "invoiceById",
          //   rules: [{
          //     required: true,
          //     message: "请输入发票创建人 Id",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "发票创建人",
          //   prop: "invoiceByName",
          //   rules: [{
          //     required: true,
          //     message: "请输入发票创建人",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "是否已签收（0 否 1是）",
          //   prop: "isSignfor",
          //   rules: [{
          //     required: true,
          //     message: "请输入是否已签收（0 否 1是）",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "签收人 Id",
          //   prop: "signforId",
          //   rules: [{
          //     required: true,
          //     message: "请输入签收人 Id",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "签收人",
          //   prop: "signforName",
          //   rules: [{
          //     required: true,
          //     message: "请输入签收人",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "签收日期",
          //   prop: "signforDate",
          //   rules: [{
          //     required: true,
          //     message: "请输入签收日期",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "请核人 Id",
          //   prop: "applyId",
          //   rules: [{
          //     required: true,
          //     message: "请输入请核人 Id",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "请核人",
          //   prop: "applyName",
          //   rules: [{
          //     required: true,
          //     message: "请输入请核人",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "请核时间",
          //   prop: "applyTime",
          //   rules: [{
          //     required: true,
          //     message: "请输入请核时间",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "审核人 Id",
          //   prop: "approverId",
          //   rules: [{
          //     required: true,
          //     message: "请输入审核人 Id",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "审核人",
          //   prop: "approverName",
          //   rules: [{
          //     required: true,
          //     message: "请输入审核人",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "审核时间",
          //   prop: "approveTime",
          //   rules: [{
          //     required: true,
          //     message: "请输入审核时间",
          //     trigger: "blur"
          //   }]
          // },
          // {
          //   label: "审核状态 0 新建费用 1 已请核 2 审核中 3 驳回 4 通过",
          //   prop: "auditStatus",
          //   rules: [{
          //     required: true,
          //     message: "请输入审核状态 0 新建费用 1 已请核 2 审核中 3 驳回 4 通过",
          //     trigger: "blur"
          //   }]
          // }]
        ]
      },
      data: [],
      corpCnNameList: []
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.feecenter_add, false),
        viewBtn: this.vaildData(this.permission.feecenter_view, false),
        // delBtn: this.vaildData(this.permission.feecenter_delete, false),
        editBtn: this.vaildData(this.permission.feecenter_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  async created () {
    this.option = await this.getColumnData(this.getColumnName(310), this.optionBack);
    getBcorpsList(1, 10).then(res => {
      const data = res.data.data;
      this.corpCnNameList = data.records;
    });

  },
  methods: {
    remoteMethod(cnName) {
      getBcorpsList(1, 10, {cnName}).then(res => {
        const data = res.data.data;
        this.corpCnNameList = data.records;
      });
    },
    rowSave(row, done, loading) {
      add(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        window.console.log(error);
      });
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        console.log(error);
      });
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return feecenterRemove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return feecenterRemove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then(res => {
          this.form = res.data.data;
        });
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      console.log(params)
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      feecenterList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;

        for (let item of this.data) {
          if (item.curCode == 'CNY') {
            this.$set(item, 'rmbAmount', item.amount)
            this.$set(item, 'usdAmount', '')
          } else {
            this.$set(item, 'usdAmount', item.amount)
            this.$set(item, 'rmbAmount', '')
          }
        }

        this.loading = false;
        this.selectionClear();
      });
    },
    //自定义列保存
    async saveColumnTwo(ref, option, optionBack, code) {
      /**
       * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
       * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
       * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
       */
      const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs[ref].$refs.dialogColumn.columnBox = false;
      }
    },
    //自定义列重置
    async resetColumnTwo(ref, option, optionBack, code) {
      this[option] = this[optionBack];
      const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
      if (inSave) {
        this.$message.success("重置成功");
        this.$refs[ref].$refs.dialogColumn.columnBox = false;
      }
    },
    // 更改表格颜色
    headerClassName(tab) {
      //颜色间隔
      let back = ""
      if (tab.columnIndex >= 0 && tab.column.level === 1) {
        if (tab.columnIndex % 2 === 0) {
          back = "back-one"
        } else if (tab.columnIndex % 2 === 1) {
          back = "back-two"
        }
      }
      return back;
    },
  }
};
</script>

<style lang="scss" scoped>
::v-deep#out-table .back-one {
  background: #ecf5ff !important;
}

::v-deep#out-table .back-two {
  background: #ecf5ff !important;
}

::v-deep .el-input-group__append {
  padding: 0 0px !important;
}

/deep/ .el-tree-node__content>.el-tree-node__expand-icon {
  visibility: hidden;
}

/deep/ .el-col-md-8 {
  width: 24.33333%;
}
</style>
