<template>
  <div class="eibs-tab">
    <c-col :span="12" class="col-left">
      <c-col :span="24">
        <el-form-item label="机构编码" prop="bchkey">
          <c-input v-model="model.bchkey" placeholder="请输入机构编码"> </c-input>
        </el-form-item>
      </c-col>    
      <c-col :span="24">
        <el-form-item label="授权货币" prop="relcur">
          <c-select v-model="model.relcur" placeholder="请选择授权货币" :code="relcur" style="width:100%">
          </c-select>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="授权金额" prop="relamt">
          <c-input v-model="model.relamt" placeholder="请输入授权金额"> </c-input>
        </el-form-item>
      </c-col>
    </c-col>

    <c-col :span="12" class="col-right">
      <c-col :span="24">
        <el-form-item label="交易代码" prop="trn">
          <c-input v-model="model.trn" placeholder="请输入交易代码"> </c-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="交易属性" prop="relflg">
          <c-input v-model="model.relflg" placeholder="请输入交易属性"> </c-input>
        </el-form-item>
      </c-col>
    </c-col>
    <c-col :span="24">
      <c-col :span="12" style="text-align: left">
        <el-button type="primary" size="small" @click="trlAdd">新增</el-button>
      </c-col>
      <c-col :span="12" style="text-align: right">
        <el-button size="small" @click="handleReset">重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="onSearch()"
          >查询
        </el-button>
      </c-col>
    </c-col>
    <c-col :span="24">
      <c-paging-table
        :data="trlData"
        :columns="trlColumns"
        :pageNumber="model.pageNum"
        :pageSize="model.pageSize"
        :total="model.total"
        v-on:queryFunc="queryFunc"
        :border="true"
      >
        <c-table-column fixed="right" prop="op" label="操作" width="240px">
          <template slot-scope="{ scope }">
            <c-button
              style="margin-left: 0"
              size="small"
              @click="trlInfo(scope.$index, scope.row)"
              >详情</c-button
            >
            <c-button
              style="margin-left: 5px"
              size="small"
              type="primary"
              @click="trlEdit(scope.$index, scope.row)"
              >修改</c-button
            >
            <c-button
              size="small"
              style="margin-left: 5px"
              @click="trlDelete(scope.$index, scope.row)"
              >删除</c-button
            >
            <el-popover placement="top-start" width="50" trigger="click">
              <ul class="table-button-item-list">
                <li>
                  <c-button size="small" style="margin-left: 0">指派</c-button>
                </li>
                <li>
                  <c-button size="small" style="margin-left: 0">删除</c-button>
                </li>
              </ul>
              <a
                slot="reference"
                href="javascript:void(0)"
                style="margin-left: 5px"
              >
                <i class="el-icon-more"></i>
              </a>
            </el-popover>
          </template>
        </c-table-column>
      </c-paging-table>
    </c-col>
  </div>
</template>

<script>
import codes from "~/config/CodeTable";

import { queryByPage } from "~/service/test/trl.js";

export default {
  name: "",
  props: ["model"],
  inject: ["root"],
  data() {
    return {
      trlData: [],
      trlColumns: [
        { label: "机构编码", prop: "bchkey", width: "auto" },
        { label: "交易代码", prop: "trn", width: "auto" },
        { label: "授权货币", prop: "relcur", width: "auto" },
        { label: "授权金额", prop: "relamt", width: "auto" },
        { label: "交易属性", prop: "relflg", width: "auto" },
      ],
      relcur: [
        { label: "AUD 澳大利亚元", value: "AUD" },
        { label: "CAD 加拿大元", value: "CAD" },
        { label: "CHF 瑞士法郎", value: "CHF" },
        { label: "CNY 人民币", value: "CNY" },
        { label: "DKK 丹麦克朗", value: "DKK" },
        { label: "EUR 欧元", value: "EUR" },
        { label: "FIM 芬兰马克", value: "FIM" },
        { label: "FRF 法国法郎", value: "FRF" },
        { label: "GBP 英镑", value: "FRF" },
        { label: "HKD 港币", value: "FRF" },
        { label: "JPY 日元", value: "FRF" },
        { label: "KRW 韩圆", value: "FRF" },
        { label: "MOP 澳门元", value: "FRF" },
        { label: "NOK 挪威克朗", value: "FRF" },
        { label: "NZD 新西兰元", value: "FRF" },
        { label: "SEK 瑞典克朗", value: "FRF" },
        { label: "SGD 新加坡元", value: "FRF" },
        { label: "THB 泰国铢", value: "FRF" },
        { label: "TWD 新台湾元", value: "FRF" },
        { label: "USD 美元", value: "FRF" },
      ],
    };
  },
  computed: {
  },
  activated() {
    const { update } = this.$route.params;
    if (update) {
      this.onInftrlSearch();
    }
  },
  methods: {
    handleReset() {
      this.root.$refs.modelForm.resetFields();
    },
    onSearch() {
      this.model.pageSize = 5;
      this.model.pageNum = 1;
      this.onInftrlSearch();
    },
    onInftrlSearch() {
      queryByPage(this.model).then((res) => {
        /**
         * pageNumber: 0
         * pageSize:	0
         * total: 69
         * totalPage: 0
         */
        const list = res.list;
        this.trlData = 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.onInftrlSearch();
    },
    trlAdd() {
      this.$router.push(`/statics/dbatrl`);
    },
    trlInfo(index, row) {
      this.$router.push(`/statics/dbitrl/${row.inr}`);
    },
    trlEdit(index, row) {
      this.$router.push(`/statics/dbetrl/${row.inr}`);
    },
    trlDelete(index, row) {
      this.$router.push(`/statics/dbdtrl/${row.inr}`);
    },
  },
};
</script>

<style scoped>
.table-button-item-list {
  padding: 0;
  margin: 0;
}
.table-button-item-list li {
  list-style: none;
  padding: 5px 0;
  text-align: center;
  color: #606266;
  cursor: pointer;
}
</style>