<template>
  <view class="dmodel-table">
    <view class="search">
      <u-form :model="tableParams" labelAlign="right" class="tableForm">
        <u-form-item label="编号" label-width="60px" name="userName">
          <uni-easyinput type="text" v-model="tableParams.userName" placeholder="请输入编号" />
        </u-form-item>
        <u-form-item label="名称" label-width="60px" name="nickName">
          <uni-easyinput type="text" v-model="tableParams.nickName" placeholder="请输入名称" />
        </u-form-item>
        <u-form-item>
          <u-button class="btn" @click="handleClick" type="primary" size="medium">搜索</u-button>
        </u-form-item>
      </u-form>
    </view>
    <view>
      <zb-table ref="zbTable" rowKey="userName" :columns="tableColumn" :data="tableData" :stripe="true" @toggleRowSelection="toggleRowSelection"></zb-table>
    </view>
    <view class="uni-pagination-box"><uni-pagination show-icon :page-size="params.pageSize" :current="params.pageNum" :total="total" @change="change" /></view>
  </view>
</template>

<script>
export default {
  name: 'User',
  data() {
    return {
      params: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      tableParams: {
        nickName: null,
        userName: null
      },
      tableData: [],
      tableSelectData: [],
      tableColumn: [
        {
          type: 'radio',
          width: 40
        },
        {
          name: 'userName',
          label: '编号',
          width: 160
        },
        {
          name: 'nickName',
          label: '名称',
          width: 200
        }
      ]
    };
  },
  // computed: {
  // 	tableData() {
  // 		return this.data || []
  // 	}
  // },
  mounted() {
    this.getList();
  },
  methods: {
    handleClick() {
      if (this.tableParams.userName) {
        this.params.userName = this.tableParams.userName;
      } else {
        delete this.params.userName
      }
      if (this.tableParams.nickName) {
        this.params.nickName = this.tableParams.nickName;
      } else {
        delete this.params.nickName
      }
      this.params.pageNum = 1;
      this.getList();
    },
    async getList() {
      const res = await this.$u.api.getUserList(this.params);
      console.log(res, 'res');
      if (res.code == 200) {
        this.tableData = res.rows;
        this.total = res.total;
      }
    },
    // 分页触发
    change(e) {
      this.params.pageNum = e.current;
      this.getList();
    },
    toggleRowSelection(checked, arr) {
      this.tableSelectData = arr;
    }
  }
};
</script>

<style lang="scss" scoped>
.dmodel-table {
  height: 1200rpx;
  margin-top: 20rpx;
  padding: 0 20rpx;
  position: relative;
}
.tableForm {
  display: flex;
  margin-bottom: 20rpx;
}
.btn {
  margin-left: 10px;
}
.uni-pagination-box {
  position: absolute;
  right: 20rpx;
  bottom: 40rpx;
}
</style>
