<template>
  <div class="eibs-tab">
    <!-- ----------左 ---------->
    <c-col :span="12" class="col-left">
      <c-col :span="24">
        <el-form-item label="用户ID" prop="extkey">
          <c-input
            v-model="model.extkey"
            placeholder="请输入user-id"
          ></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="name">
          <c-input
            v-model="model.nam"
            placeholder="请输入name"
          ></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="usrAdd">新增</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="usrData"
        :columns="usrColumns"
        :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="usrInfo(scope.$index, scope.row)"
              >详情</c-button
            >
            <c-button
              style="margin-left: 5px"
              size="small"
              type="primary"
              @click="usrEdit(scope.$index, scope.row)"
              >修改</c-button
            >
            <c-button
              size="small"
              style="margin-left: 5px"
              @click="usrDelete(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 { queryByPage } from "~/service/test/usr.js";

export default {
  name: "infsea",
  props: ["model"],
  inject: ["root"],
  data() {
    return {
      usrData: [],
      usrColumns: [
        // { label: 'inr', prop: 'inr', width: 'auto' },
        { label: '用户ID', prop: 'extkey', width: 'auto' },
        { label: '用户名称', prop: 'nam', width: 'auto' },
        // { label: '禁止登录', prop: 'lgiflg', width: 'auto' },
        // { label: '最近登录时间', prop: 'ssnbegdattim', width: 'auto' },
        // { label: 'SSN ID', prop: 'ssninr', width: 'auto' },
        // { label: '版本号', prop: 'ver', width: 'auto' },
        // { label: '实体标志', prop: 'pri', width: 'auto' },
        // { label: '实体', prop: 'ety', width: 'auto' },
        { label: '用户组', prop: 'usg', width: 'auto' },
        // { label: '
        // ', prop: 'lstdiadat', width: 'auto' },
        { label: '授权币种', prop: 'relcur', width: 'auto' },
        { label: '授权金额', prop: 'relamt', width: 'auto' },
        // { label: '第二授权金额', prop: 'relamt2nd', width: 'auto' },
        // { label: '授权组', prop: 'relgrp', width: 'auto' },
        // { label: '电话', prop: 'tel', width: 'auto' },
        // { label: '传真', prop: 'fax', width: 'auto' },
        // { label: '电子信箱', prop: 'eml', width: 'auto' },
        // { label: '可用时间', prop: 'quepow', width: 'auto' },
        // { label: '实体名称', prop: 'etyextkey', width: 'auto' },
        // { label: '组织', prop: 'oenr', width: 'auto' },
        { label: '实体地址', prop: 'etaextkey', width: 'auto' },
        { label: '客户经理', prop: 'resusrflg', width: 'auto' },
        // { label: 'secsta', prop: 'secsta', width: 'auto' },
        // { label: 'letoenr', prop: 'letoenr', width: 'auto' },
        // { label: 'ubrList', prop: 'ubrList', width: 'auto' },
        // { label: 'uclList', prop: 'uclList', width: 'auto' },
      ],
    };
  },
  // activated:已进入页面便可触发
  activated() {
    const { update } = this.$route.params
    if (update) {
      this.onInfusrSearch()
    }
  },
  methods: {
    handleReset() {
      this.root.$refs.modelForm.resetFields();
    },
    onSearch(){
        this.model.pageNum = 1;
        this.model.pageSize = 5;
        this.onInfusrSearch();
    },
    onInfusrSearch() {
			queryByPage(this.model).then(res => {
        /**
         * pageNumber: 0
         * pageSize:	0
         * total:
         * totalPage: 0
         */
        const list = res.list
        this.usrData = 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.onInfusrSearch()
    },
    // ptytypeChange(val) {
    //   this.model.ptytyp = val;
    // },
    // getCodesByKey(key) {
    //   return codes[key] ?? [];
    // },
    usrAdd() {
			this.$router.push(`/statics/dbausr`)
		},
    usrInfo(index, row) {
			this.$router.push(`/statics/dbiusr/${row.inr}`)
		},
    usrEdit(index, row) {
			this.$router.push(`/statics/dbeusr/${row.inr}`)
		},
    usrDelete(index, row) {
			this.$router.push(`/statics/dbdusr/${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>