<template>
  <div class="eibs-tab">
    <!-- ----------左 ---------->
    <c-col :span="12" class="col-left">
      <!-- <c-col :span="24">
            <el-form-item label="inr" prop="inr">
                <c-input
                    v-model="model.inr"
                    placeholder="请输入inr"
                >
                </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 :span="24">
        <el-form-item label="保函开立类型" prop="hndtyp">
          <c-select style="width: 100%"
                    v-model="model.hndtyp"
                    placeholder="请选择保函开立类型"
                    :code="getCodesByKey('hndtyp')"
          >
          </c-select>
        </el-form-item>
      </c-col>

      <c-col :span="24">
            <el-form-item label="文本语种" prop="uil">
                <c-select style="width: 100%"
                    v-model="model.uil"
                    placeholder="请输入文本语种"
                    :code="getCodesByKey('gtxuil')"
                >
                </c-select>
            </el-form-item>
        </c-col>

        <c-col :span="24">
            <el-form-item label="法律形式" prop="legfrm">
                <c-select style="width: 100%"
                    v-model="model.legfrm"
                    placeholder="请输入法律形式"
                    :code="getCodesByKey('legfrm1')"
                >
                </c-select>
            </el-form-item>
        </c-col>

        <c-col :span="24">
            <el-form-item label="无责任担保标志" prop="expflg">
                <c-select style="width: 100%"
                    v-model="model.expflg"
                    placeholder="请输入无责任担保标志"
                    :code="getCodesByKey('gtxexpflg')"
                >
                </c-select>
            </el-form-item>
        </c-col>
      </c-col>
        <c-col :span="12" class="col-right">
          <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 :span="24">
            <el-form-item label="保函类型" prop="gartyp">
                <c-select
                    style="width: 100%"
                    v-model="model.gartyp"
                    placeholder="请选择保函类型"
                    :code="getCodesByKey('typgar')"
                >
                </c-select>
            </el-form-item>
        </c-col>
      <!-- <c-col :span="24">
            <el-form-item label="ver" prop="ver">
                <c-input
                    v-model="model.ver"
                    placeholder="请输入ver"
                >
                </c-input>
            </el-form-item>
        </c-col> -->
      <!-- <c-col :span="24">
            <el-form-item label="gidtxt" prop="gidtxt">
                <c-input
                    v-model="model.gidtxt"
                    placeholder="请输入gidtxt"
                >
                </c-input>
            </el-form-item>
        </c-col>
      <c-col :span="24">
            <el-form-item label="gartyp" prop="gartyp">
                <c-input
                    v-model="model.gartyp"
                    placeholder="请输入gartyp"
                >
                </c-input>
            </el-form-item>
        </c-col>
      <c-col :span="24">
            <el-form-item label="hndtyp" prop="hndtyp">
                <c-input
                    v-model="model.hndtyp"
                    placeholder="请输入hndtyp"
                >
                </c-input>
            </el-form-item>
        </c-col> -->
      <c-col :span="24">
          <el-form-item label="使用该保函文本的对象类型" prop="objtyp">
            <c-select
                  style="width: 100%"
                  v-model="model.objtyp"
                  placeholder="请输入使用该保函文本的对象类型"
                  :code="getCodesByKey('objtyp')"
              >
              </c-select>
          </el-form-item>
      </c-col>
      <c-col :span="24">
          <el-form-item label="优先级" prop="gtxpri">
              <c-select
                  style="width: 100%"
                  v-model="model.gtxpri"
                  placeholder="请输入优先级"
                  :code="getCodesByKey('gtxpri')"
              >
              </c-select>
          </el-form-item>
      </c-col>
      <c-col :span="24">
          <el-form-item label="保函文本中的交易日期" prop="laborcdat">
              <c-date-picker style="width: 100%"
                  v-model="model.laborcdat"
                  placeholder="请输入日期"
              >
              </c-date-picker>
          </el-form-item>
      </c-col>
      <!-- <c-col :span="24">
            <el-form-item label="objinr" prop="objinr">
                <c-input
                    v-model="model.objinr"
                    placeholder="请输入objinr"
                >
                </c-input>
            </el-form-item>
        </c-col> -->
    </c-col>
    <!------------- 右 ---------->
    <!-- <c-col :span="12" class="col-right">
      <c-col :span="24">
            <el-form-item label="gtxpri" prop="gtxpri">
                <c-input
                    v-model="model.gtxpri"
                    placeholder="请输入gtxpri"
                >
                </c-input>
            </el-form-item>
        </c-col>
      <c-col :span="24">
            <el-form-item label="expflg" prop="expflg">
                <c-input
                    v-model="model.expflg"
                    placeholder="请输入expflg"
                >
                </c-input>
            </el-form-item>
        </c-col>
      <c-col :span="24">
            <el-form-item label="uil" prop="uil">
                <c-input
                    v-model="model.uil"
                    placeholder="请输入uil"
                >
                </c-input>
            </el-form-item>
        </c-col>
      <c-col :span="24">
            <el-form-item label="laborcdat" prop="laborcdat">
                <c-input
                    v-model="model.laborcdat"
                    placeholder="请输入laborcdat"
                >
                </c-input>
            </el-form-item>
        </c-col>
      <c-col :span="24">
            <el-form-item label="labaddinf" prop="labaddinf">
                <c-input
                    v-model="model.labaddinf"
                    placeholder="请输入labaddinf"
                >
                </c-input>
            </el-form-item>
        </c-col>
      <c-col :span="24">
            <el-form-item label="legfrm" prop="legfrm">
                <c-input
                    v-model="model.legfrm"
                    placeholder="请输入legfrm"
                >
                </c-input>
            </el-form-item>
        </c-col>
      <c-col :span="24">
            <el-form-item label="covgodsrvdft" prop="covgodsrvdft">
                <c-input
                    v-model="model.covgodsrvdft"
                    placeholder="请输入covgodsrvdft"
                >
                </c-input>
            </el-form-item>
        </c-col> -->
      <!-- <c-col :span="24">
            <el-form-item label="etgextkey" prop="etgextkey">
                <c-input
                    v-model="model.etgextkey"
                    placeholder="请输入etgextkey"
                >
                </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="gtxAdd">新增</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="gtxData"
        :columns="gtxColumns"
        :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="gtxInfo(scope.$index, scope.row)"
              >详情</c-button
            >
            <c-button
              style="margin-left: 5px"
              size="small"
              type="primary"
              @click="gtxEdit(scope.$index, scope.row)"
              >修改</c-button
            >
            <c-button
              size="small"
              style="margin-left: 5px"
              @click="gtxDelete(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/gtx.js";

export default {
  name: "",
  props: ["model"],
  inject: ["root"],
  data() {
    return {
      gtxData: [],
      gtxColumns: [
      // { label: 'inr', prop: 'inr', width: 'auto' },
      { label: '保函文本代码', prop: 'extkey', width: '140%' },
      { label: '保函文本名称', prop: 'nam', width: '120%' },
      // { label: 'ver', prop: 'ver', width: 'auto' },
      // { label: 'gidtxt', prop: 'gidtxt', width: 'auto' },
      { label: '保函类型', prop: 'gartyp', width: '120%' },
      { label: '保函开立类型', prop: 'hndtyp', width: '120%' },
      { label: '使用该保函文本的对象类型', prop: 'objtyp', width: '200%' },
      // { label: 'objinr', prop: 'objinr', width: 'auto' },
      { label: '优先级', prop: 'gtxpri', width: '100%' },
      { label: '无责任担保标志', prop: 'expflg', width: '140%' },
      { label: '文本语种', prop: 'uil', width: '120%' },
      { label: '保函文本中的交易日期', prop: 'laborcdat', width: '180%' },
      // { label: 'labaddinf', prop: 'labaddinf', width: 'auto' },
      { label: '法律形式', prop: 'legfrm', width: '120%' },
      // { label: 'covgodsrvdft', prop: 'covgodsrvdft', width: 'auto' },
      // { label: '保函文本所属实体组', prop: 'etgextkey', width: 'auto' },
			],
    };
  },
  computed: {
  },
  activated() {
    const { update } = this.$route.params
    if (update) {
      this.onInfgtxSearch()
    }
  },
  methods: {
    handleReset() {
      this.root.$refs.modelForm.resetFields();
    },
    onSearch() {
      this.model.pageSize = 5;
      this.model.pageNum = 1;
      this.onInfgtxSearch();
    },
    onInfgtxSearch() {
			queryByPage(this.model).then(res => {
        /**
         * pageNumber: 0
         * pageSize:	0
         * total: 69
         * totalPage: 0
         */
        const list = res.list
        this.gtxData = 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.onInfgtxSearch()
    },
    // ptytypeChange(val) {
    //   this.model.ptytyp = val;
    // },
    getCodesByKey(key) {
      return codes[key] ?? [];
    },
    gtxAdd() {
			this.$router.push(`/statics/dbagtx`)
		},
    gtxInfo(index, row) {
			this.$router.push(`/statics/dbigtx/${row.inr}`)
		},
    gtxEdit(index, row) {
			this.$router.push(`/statics/dbegtx/${row.inr}`)
		},
    gtxDelete(index, row) {
			this.$router.push(`/statics/dbdgtx/${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>