<template>
  <div class="eibs-tab">
    <!-- ----------左 ---------->
    <c-col :span="12" class="col-left">
      <c-col :span="24">
        <el-form-item label=" Name" prop="nam">
          <c-input
            v-model="model.nam"
            placeholder="请输入External Visible Name"
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="Street" prop="str1">
          <c-input
            v-model="model.str1"
            maxlength="35"
            placeholder="请输入Street/SWIFT Line 3"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="City" prop="loctxt">
          <c-input
            v-model="model.loctxt"
            maxlength="25"
            placeholder="请输入Textpart of City/Second Part of SWIFT Line 4"
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <!-- PTY.IDTYPE -->
        <el-form-item label="客户类别" prop="idtype">
          <c-select
            v-model="model.idtype"
            style="width: 100%"
            placeholder="请选择客户类别"
            :code="getCodesByKey('persontype')"
          >
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <!-- PTA.BRANCHINR -->
        <el-form-item label="支行行号" prop="branchinr">
          <c-select
            v-model="model.branchinr"
            style="width: 100%"
            placeholder="请选择支行行号"
            :code="getCodesByKey('zhbchinr')"
          >
          </c-select>
        </el-form-item>
      </c-col>
    </c-col>
    <!------------- 右 ---------->
    <c-col :span="12" class="col-right">
      <c-col :span="24">
        <el-form-item label="Party No." prop="extkey">
          <c-input
            v-model="model.extkey"
            maxlength="24"
            placeholder="请输入Party No."
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="BIC " prop="bic">
          <c-input
            v-model="model.bic"
            maxlength="11"
            placeholder="请输入BIC "
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item label="ZIP Code" prop="loczip">
          <c-input
            v-model="model.loczip"
            maxlength="10"
            placeholder="请输入ZIP Code"
          ></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <!-- PTY.TRNMAN -->
        <el-form-item label="交易主体" prop="trnman">
          <c-select
            v-model="model.trnman"
            style="width: 100%"
            placeholder="请选择交易主体"
            :code="getCodesByKey('jyzt')"
          >
          </c-select>
        </el-form-item>

        <c-col :span="24">
          <!-- PTY.IDCODE -->
          <el-form-item label="统一社会信用代码" prop="idcode">
            <c-input
              v-model="model.idcode"
              maxlength="18"
              placeholder="请输入统一社会信用代码"
            ></c-input>
          </el-form-item>
        </c-col>
      </c-col>
    </c-col>

    <c-col :span="24">
      <!-- PTY.PTYTYP -->
      <el-form-item label="Type" prop="ptytyp">
        <c-col :span="2">
          <c-checkbox v-model="seatyph" @change="ptytypeChange('H')"
            >海关</c-checkbox
          >
        </c-col>
        <c-col :span="4">
          <c-checkbox v-model="seatypo" @change="ptytypeChange('O')"
            >Other</c-checkbox
          >
        </c-col>
        <c-col :span="4">
          <c-checkbox v-model="seatypa" @change="ptytypeChange('A')"
            >Own Address</c-checkbox
          >
        </c-col>
        <c-col :span="4">
          <c-checkbox
            v-model="seatypb"
            :checked="model.ptytyp === 'B'"
            @change="ptytypeChange('B')"
            >Bank</c-checkbox
          >
        </c-col>
        <c-col :span="4">
          <c-checkbox v-model="seatypc" @change="ptytypeChange('C')"
            >Client</c-checkbox
          >
        </c-col>
      </el-form-item>
    </c-col>
    <c-col :span="24">
      <c-col :span="12" style="text-align: left">
        <el-button type="primary" size="small" @click="ptyAdd">新增</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="ptyData"
        :columns="ptyColumns"
        :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="ptyInfo(scope.$index, scope.row)"
              >详情</c-button
            >
            <c-button
              style="margin-left: 5px"
              size="small"
              type="primary"
              @click="ptyEdit(scope.$index, scope.row)"
              >修改</c-button
            >
            <c-button
              size="small"
              style="margin-left: 5px"
              @click="ptyDelete(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/pty.js";

export default {
  name: "",
  props: ["model"],
  inject: ["root"],
  data() {
    return {
      ptyData: [],
      ptyColumns: [
				{ label: '客户号', prop: 'extkey', width: '120' },
				{ label: '中文名称', prop: 'nam1', width: '150' },
				{ label: 'Name', prop: 'nam', width: '200' },
				{ label: '客户类别', prop: 'idtype', width: '100' },
				{ label: 'Street', prop: 'str', width: '200' },
				{ label: '支行名称', prop: 'bchname', width: '98' },
				{ label: 'ZIP', prop: 'loczip', width: '98' },
				{ label: '支行行号', prop: 'branch', width: '200' },
				{ label: 'City', prop: 'loctxt', width: '120' },
				{ label: '组织机构代码', prop: 'juscod', width: '200' },
				{ label: 'BIC', prop: 'bic', width: '70' },
				{ label: '统一社会信用代码', prop: 'idcode', width: '200' },
				{ label: '交易主体', prop: 'trnman', width: '98' },
			],
    };
  },
  computed: {
    seatypb: {
      get: function () {
        return this.model.ptytyp === "B";
      },
      set: function (val) {
        this.model.ptytyp = val ? "B" : "";
      },
    },
    seatypc: {
      get: function () {
        return this.model.ptytyp === "C";
      },
      set: function (val) {
        this.model.ptytyp = val ? "C" : "";
      },
    },
    seatypa: {
      get: function () {
        return this.model.ptytyp === "A";
      },
      set: function (val) {
        this.model.ptytyp = val ? "A" : "";
      },
    },
    seatypo: {
      get: function () {
        return this.model.ptytyp === "O";
      },
      set: function (val) {
        this.model.ptytyp = val ? "O" : "";
      },
    },
    seatyph: {
      get: function () {
        return this.model.ptytyp === "H";
      },
      set: function (val) {
        this.model.ptytyp = val ? "H" : "";
      },
    },
  },
  activated() {
    const { update } = this.$route.params
    if (update) {
      this.onInfptySearch()
    }
  },
  methods: {
    handleReset() {
      this.root.$refs.modelForm.resetFields();
    },
    onSearch(){
        this.model.pageNum = 1;
        this.model.pageSize = 5;
        this.onInfptySearch();
    },
    onInfptySearch() {
			queryByPage(this.model).then(res => {
        /**
         * pageNumber: 0
         * pageSize:	0
         * total: 69
         * totalPage: 0
         */
        const list = res.list
        this.ptyData = 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.onInfptySearch()
    },
    ptytypeChange(val) {
      this.model.ptytyp = val;
    },
    getCodesByKey(key) {
      return codes[key] ?? [];
    },
    ptyAdd() {
			this.$router.push(`/statics/dbapty`)
		},
    ptyInfo(index, row) {
			this.$router.push(`/statics/dbipty/${row.inr}`)
		},
    ptyEdit(index, row) {
			this.$router.push(`/statics/dbepty/${row.inr}`)
		},
    ptyDelete(index, row) {
			this.$router.push(`/statics/dbdpty/${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>