<template>
  <div>
    <el-form
      :model="model"
      ref="modelForm"
      label-width="100px"
      label-position="right"
      size="small"
    >
      <c-col :span="8" class="col-left">
        <!-- <c-col :span="24">
          <el-form-item label="dir" prop="dir">
            <c-input v-model="model.dir" placeholder="请输入dir"> </c-input>
          </el-form-item>
        </c-col> -->
        <c-col :span="24">
          <el-form-item label="报文大类型" prop="cortyp">
            <c-input v-model="model.cortyp" placeholder="请输入报文大类型">
            </c-input>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="报文类型" prop="msgTyp">
            <c-input v-model="model.msgTyp" placeholder="请输入报文类型">
            </c-input>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="收/发报行" prop="sndkey">
            <c-input v-model="model.sndkey" placeholder="请输入收/发报行">
            </c-input>
          </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="beginDate">
            <c-input v-model="model.beginDate" placeholder="请输入开始日期">
            </c-input>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="币种" prop="relcur">
            <c-input v-model="model.relcur" placeholder="请输入币种">
            </c-input>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <el-form-item label="业务编号" prop="extkey">
            <c-input v-model="model.extkey" 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="endDate">
            <c-input v-model="model.endDate" placeholder="请输入结束日期">
            </c-input>
          </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="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.page"
        :pageSize="model.pageSize"
        :total="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/smh.js";

export default {
  name: "Msg",
  props: ["model"],
  data() {
    return {
      tableColumns: [
        // { label: "inr", prop: "inr", width: "auto" },
        // { label: "objtyp", prop: "objtyp", width: "auto" },
        // { label: "objinr", prop: "objinr", width: "auto" },
        // { label: "trntyp", prop: "trntyp", width: "auto" },
        // { label: "trninr", prop: "trninr", width: "auto" },
        // { label: "trnsub", prop: "trnsub", width: "auto" },
        { label: "extkey", prop: "extkey", width: "240px" },
        { label: "nam", prop: "nam", width: "300px" },
        { label: "creusr", prop: "creusr", width: "100px" },
        { label: "crefrm", prop: "crefrm", width: "200px" },
        { label: "创建时间", prop: "credattim", width: "150px" },
        { label: "dir", prop: "dir", width: "auto" },
        { label: "docpth", prop: "docpth", width: "150px" },
        { label: "docfil", prop: "docfil", width: "150px" },
        { label: "docfxt", prop: "docfxt", width: "auto" },
        { label: "docmac", prop: "docmac", width: "auto" },
        { label: "msgpos", prop: "msgpos", width: "auto" },
        { label: "msglen", prop: "msglen", width: "auto" },
        { label: "grpinr", prop: "grpinr", width: "auto" },
        { label: "grpseq", prop: "grpseq", width: "auto" },
        { label: "报文大类型", prop: "cortyp", width: "auto" },
        { label: "cortypsub", prop: "cortypsub", width: "auto" },
        { label: "apf", prop: "apf", width: "auto" },
        { label: "收/发报行", prop: "sndkey", width: "150px" },
        { label: "apfcnt", prop: "apfcnt", width: "auto" },
        { label: "ptainr", prop: "ptainr", width: "auto" },
        { label: "oriflg", prop: "oriflg", width: "auto" },
        { label: "orismhinr", prop: "orismhinr", width: "auto" },
        { label: "partflg", prop: "partflg", width: "auto" },
        { label: "报文类型", prop: "msgtyp", width: "auto" },
        { label: "币种", prop: "relcur", width: "auto" },
        { label: "金额", prop: "relamt", width: "auto" },
        { label: "sysno", prop: "sysno", width: "150px" },
        { label: "staflg", prop: "staflg", width: "auto" },
        { label: "clndat", prop: "clndat", width: "auto" },
        { label: "f20", prop: "f20", width: "auto" },
        { label: "stp", prop: "stp", width: "auto" },
        { label: "etyextkey", prop: "etyextkey", width: "auto" },
        { label: "chlflg", prop: "chlflg", width: "auto" },
      ],
      tableData: [],
      // 总条数
      total: 0,
    };
  },
  methods: {
    handleReset() {
      this.$refs.modelForm.resetFields();
    },
    doSearch() {
      queryByPage(this.model).then((res) => {
        const list = res.list;
        this.tableData = list;
        this.model.page = res.pageNumber;
        this.model.pageSize = res.pageSize;
        this.total = res.total;
      });
    },
    queryFunc(pageNumber, pageSize) {
      this.model.page = pageNumber;
      this.model.pageSize = pageSize;
      this.doSearch();
    },
    getCodesByKey(key) {
      return codes[key] ?? [];
    },
  },
};
</script>

<style>
</style>