<template>
  <div class="eibs-tab">
<!-- ----------左 ---------->
    <c-col :span="12" class="col-left">
      <c-col :span="24">
        <el-form-item label="账号" prop="aextkey">
          <c-input v-model="model.aextkey" placeholder="请输入账号"/>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="客户名称" prop="nam">
          <c-input  v-model="model.nam" placeholder="请输入客户名称"/>
        </el-form-item>
      </c-col>
    </c-col>

 <!------------- 右 ---------->
    <c-col :span="12" class="col-right">
      <c-col :span="24">
        <el-form-item label="客户编号" prop="pextkey">
          <c-input  v-model="model.pextkey" placeholder="请输入客户编号"/>
        </el-form-item>
      </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="onSearch()" :loading="actloading">查询</el-button>
      </c-col>
    </c-col>

    <c-col :span="24">
      <c-paging-table :data="actData" :columns="actColumns" :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/manage/act.js";
import commonFunctions from "~/mixin/commonFunctions.js";

export default {
  name: "",
  props: ["model"],
  mixins: [commonFunctions],
  // inject: ["root"],
  data() {
    return {
      actData: [],
      actloading: false,
      actColumns: [
				{ label: '账号币种', prop: 'acur', width: '150px' },
				{ label: '账号', prop: 'aextkey', width: '100px' },
        { label: '账号名称', prop: 'anam', width: '150px' },
        { label: '账号类型', prop: 'atyp', width: '150px' },
        { label: '科目代码', prop: 'atrmtyp', width: '150px' },
        { label: '账户类型', prop: 'aacctyp', width: '150px' },
        { label: '客户自贸区主账号', prop: 'aamqacc', width: '200px' },
        { label: '客户编号', prop: 'pextkey', width: '150px' },
        { label: '当事人名称', prop: 'pnam', width: '150px' },
        { label: '当事人中文名称', prop: 'pnam1', width: '200px' },

			],
    };
  },
  watch: {
    '$store.state.UserContext.currentOrg': {
      handler(newVal) {
        this.onDblactSearch()
      }
    },
  },
  created() {
    this.onDblactSearch()
  },
  activated() {
    const { queryByPage } = this.$route.params
    if (queryByPage) {
      this.onSearch()
    }
  },
  methods: {
    handleReset() {
      this.root.$refs.modelForm.resetFields();
    },
    onSearch() {
      this.model.pageSize = 5;
      this.model.pageNum = 1;
      this.onDblactSearch();
    },
    onDblactSearch() {
      this.actloading = true;
      delete this.model.modifySet
			queryByPage(this.model).then(res => {
        if(res.respCode == SUCCESS){
          const list = res.data.list
          this.actData = list
          this.model.pageNum = res.data.pageNumber
          this.model.pageSize = res.data.pageSize
          this.model.total = res.data.total
          this.actloading = false;
        } else {
          this.actloading = false;
        }
      }) 
		},
    queryFunc(pageNumber, pageSize) {
      this.model.pageNum = pageNumber
      this.model.pageSize = pageSize
      this.onDblactSearch()
    },
    getCodesByKey(key){
      return codes[key] || [];
    },
  },
};
</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>