<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-table :data="tableData" stripe style="width: 100%;" @selection-change="handleSelectionChange">
        <el-table-column label="会员编号" width="150">
          <template slot-scope="scope">
            {{scope.row.USER_NAME}}
          </template>
        </el-table-column>
        <el-table-column label="姓名" >
          <template slot-scope="scope">
            {{scope.row.REAL_NAME}}
          </template>
        </el-table-column>
        <el-table-column label="银行地区" width="200">
          <template slot-scope="scope">
            {{`${scope.row.BANK_PROVINCE_NAME} ${scope.row.BANK_CITY_NAME} ${scope.row.BANK_COUNTY_NAME}`}}
          </template>
        </el-table-column>
        <el-table-column label="开户行" width="110">
          <template slot-scope="scope">
            {{scope.row.OPEN_BANK_NAME}}
          </template>
        </el-table-column>
        <el-table-column label="银行帐号" width="200">
          <template slot-scope="scope">
            {{scope.row.BANK_NO}}
          </template>
        </el-table-column>
        <el-table-column label="主会员编号" width="150">
          <template slot-scope="scope">
            {{scope.row.MAIN_USER_NAME}}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="200">
          <template slot-scope="scope">
            {{tool.formatDate(scope.row.CREATED_AT)}}
          </template>
        </el-table-column>
        <el-table-column label="修改时间" width="200">
          <template slot-scope="scope">
            {{tool.formatDate(scope.row.UPDATED_AT)}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-dropdown size="small" trigger="click">
              <el-button type="primary" size="small" @click.stop="">
                操作该数据<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="edit" @click.native="handleUpdate(scope.row)">编辑绑定关系</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import network from '@/utils/network'
  import tool from '@/utils/tool'
  import store from '@/utils/vuexStore'
  import LeoFilter from '@/components/Filter'
  import Pagination from '@/components/Pagination'

  export default {
    name: 'user_bind',
    components: {LeoFilter,Pagination},
    created () {

    },
    mounted () {
      this.getData()
    },
    data () {
      return {
        tableData: null,
        loading: true,
        multipleSelection: [],
        currentPage: 1,
        totalPages: 1,
        totalCount: 1,
        pageSize: 20,
        tool: tool,
        filterData: null,
      }
    },
    methods: {
      handleSelectionChange (val) {
        this.multipleSelection = val
      },
      handleCurrentChange (page) {
        this.getData(page, this.pageSize)
      },
      handleSizeChange (pageSize) {
        this.getData(this.currentPage, pageSize)
      },
      handleUpdate (row) {
        this.$router.push({path: `/user/bind-edit/${row.ID}`})
      },
      handleFilter (model) {
        this.filterData = model
        this.getData(1, this.pageSize)
      },
      getData (page, pageSize) {
        network.getPageData(this, 'user/bind', page, pageSize, this.filterData)
      },
    }
  }

</script>

<style scoped>

</style>