<template>
  <div>
    <el-form
      :model="model"
      ref="modelForm"
      label-width="100px"
      label-position="right"
      size="small"
    >
      <c-col :span="24">
        <c-col :span="12" class="col-left">
          <el-form-item label="费用代码" prop="codfee">
            <c-input
                v-model="model.codFee"
                placeholder="请输入 费用代码"
                style="width: 100%"
            >
            </c-input>
        </el-form-item>
        </c-col>
        <c-col :span="12" class="col-right">
          <el-form-item label="收费条件类型" prop="feepri">
            <c-select
              v-model="model.feepri"
              style="width: 100%"
              placeholder="请选择收费类型"
              :code="getCodesByKey('feepri')"
            ></c-select>
          </el-form-item>
        </c-col>
      </c-col>
      <!-- <c-col :span="8" class="col-left col-right">
        <c-col :span="24">
          <el-form-item label="账号类型" prop="typ">
            <c-select
              v-model="model.typ"
              placeholder=""
              style="width: 100%"
              :code="getCodesByKey('recgrptyp')"
            ></c-select>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="账号名称" prop="nam">
            <c-input v-model="model.nam" placeholder=""></c-input>
          </el-form-item>
        </c-col>
      </c-col>
      <c-col :span="8" class="col-right">
        <c-col :span="24">
          <el-form-item label="国际银行账户号 " prop="iban">
            <c-input
              v-model="model.iban"
              maxlength="34"
              placeholder="请输入IBAN"
            ></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="账号币种" prop="cur">
            <c-select
              v-model="model.cur"
              style="width: 100%"
              placeholder=""
              :code="getCodesByKey('infled_Cur')"
            >
            </c-select>
          </el-form-item>
        </c-col>
      </c-col> -->
      <c-col :span="24" style="text-align: right">
        <el-button size="small" @click="handleReset">重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="doSearch()"
          >查询
        </el-button>
      </c-col>
    </el-form>
    <c-col :span="24">
      <c-paging-table
        :data="tableData"
        :columns="tableColumns"
        :pageNumber="model.pageNum"
        :pageSize="model.pageSize"
        :total="model.total"
        v-on:queryFunc="queryFunc"
        :border="true"
      >
      </c-paging-table>
    </c-col>
  </div>
</template>

<script>
import codes from "~/config/CodeTable";
import { queryByPage } from "~/service/test/fec.js";

/**
 * 费用查询
 */
export default {
	name: 'FeeQuery',
  data() {
    return {
      tableData: [],
      tableColumns: [
        { label: '费用代码', prop: 'codFee', width: '120' },
        { label: 'Description', prop: '', width: '120' },
				{ label: '收费条件类型', prop: 'feepri', width: '120' },
				{ label: '最小金额币种', prop: 'maxcur', width: '120' },
				{ label: '费用最小金额', prop: 'lowamt', width: '120' },
				{ label: '费用最大金额', prop: 'highamt', width: '120' },
				{ label: '起始日期', prop: 'begdat', width: '120' },
				{ label: '终止日期', prop: 'enddat', width: '120' },
				{ label: '计算规则', prop: 'calrul', width: '120' },
				{ label: '每份的费用金额', prop: 'untamt', width: '150' },
				{ label: '计算费率', prop: 'ratcal', width: '120' },
      ],
      model: {
        // fec，查询条件的字段
        codfee:"",
        feepri:"!",
        objtyp:"",
        // paging
        pageNum: 1,
        pageSize: 5,
        total: 0
      },
    };
  },
  methods: {
    handleReset() {
      this.$refs.modelForm.resetFields();
    },
    doSearch() {
      queryByPage(this.model).then((res) => {
        const list = res.list;
        this.tableData = list;
        this.model.pageNum = res.pageNumber;
        this.model.pageSize = res.pageSize;
        this.model.total = res.total;
      });
    },
    queryFunc(pageNumber, pageSize) {
      this.model.pageNum = pageNumber;
      this.model.pageSize = pageSize;
      this.doSearch();
    },
    getCodesByKey(key) {
      return codes[key] ?? [];
    },
  },
}
</script>

<style>

</style>