<template>
  <div class="user-table">
    <el-table :data="tableData" stripe size="medium" height="calc(100% - 26px)" style="width: 100%" :header-row-style="{background:'#ededed',color:'#4d4d4d'}" :header-cell-style="{background: 'transparent'}">
      <el-table-column prop="name" label="客户姓名" min-width="100" />
      <el-table-column prop="no" label="客户编号" min-width="150" />
      <el-table-column prop="age" label="年龄" min-width="80" />
      <el-table-column prop="sex" label="性别" min-width="80" >
        <template slot-scope="scope">{{scope.row.sex === 1 ? '男' : '女'}}</template>
      </el-table-column>
      <el-table-column prop="property" label="可支配资产" min-width="120" >
        <template slot-scope="scope">{{scope.row.disposable_assets | propertyFilter}}</template>
      </el-table-column>
      <el-table-column label="理财经验" min-width="80" >
        <template slot-scope="scope">{{scope.row.financial_experience | experienceFilter}}</template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination :current-page.sync="page" layout="prev, pager, next" :total="total" @current-change="fetchTableList"></el-pagination>
    </div>
  </div>
</template>
<script>
import { getUserList } from '../api'
const propertyMap = {
  1: '10万以下',
  2: '10万-20万',
  3: '20-50万',
  4: '50-80万',
  5: '80-100万',
  6: '100万-300万',
  7: '300万以上'
}
const experienceMap = {
  1: '没有经验',
  2: '1-3年',
  3: '3-5年',
  4: '5年以上'
}
export default {
  props: {
    params: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      tableData: [],
      total: 1000,
      page: 1,
      limit: 10
    }
  },
  filters: {
    propertyFilter(val) {
      return propertyMap[val]
    },
    experienceFilter(val) {
      return experienceMap[val]
    }
  },
  watch: {
    params: {
      handler(v) {
        this.fetchTableList()
      },
      immediate: true
    }
  },
  methods: {
    fetchTableList() {
      const params = Object.assign({ page: this.page, limit: 10 }, this.params)
      getUserList(params).then(res => {
        if (res.code === 0 && res.data) {
          this.total = res.data.total
          this.tableData = res.data.data
        }
      })
    }
  }
}
</script>
<style scoped>
.user-table{
  padding:28px 20px 20px;
  box-sizing:border-box;
  height:484px;
}
.user-table ::v-deep.el-table .el-table__cell.gutter{
  background:#ededed;
}
.pagination{
  padding-top:7px;
  text-align:right;
}
</style>
