<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 label="可支配资产" min-width="120" >
        <template slot-scope="scope">{{scope.row.disposable_assets | fieldsFilter('disposable_assets')}}</template>
      </el-table-column>
      <el-table-column label="理财经验" min-width="80" >
        <template slot-scope="scope">{{scope.row.financial_experience | fieldsFilter('financial_experience')}}</template>
      </el-table-column>
      <el-table-column label="是否交易过基金产品" min-width="160" >
        <template slot-scope="scope">{{scope.row.is_trading_capital_products | fieldsFilter('is_trading_capital_products')}}</template>
      </el-table-column>
      <el-table-column label="学历" min-width="120" >
        <template slot-scope="scope">{{scope.row.education | fieldsFilter('education')}}</template>
      </el-table-column>
      <el-table-column label="年收入总额" min-width="120" >
        <template slot-scope="scope">{{scope.row.annual_income | fieldsFilter('annual_income')}}</template>
      </el-table-column>
      <el-table-column label="金融资产中占比最高" min-width="150" >
        <template slot-scope="scope">{{scope.row.highest_financial_assets | fieldsFilter('highest_financial_assets')}}</template>
      </el-table-column>
      <el-table-column label="金融产品交易偏好" min-width="140" >
        <template slot-scope="scope">{{scope.row.financial_trading_preference | fieldsFilter('financial_trading_preference')}}</template>
      </el-table-column>
      <el-table-column label="风险承受能力分级" min-width="140" >
        <template slot-scope="scope">{{scope.row.risk_tolerance_rating | fieldsFilter('risk_tolerance_rating')}}</template>
      </el-table-column>
      <el-table-column label="价格敏感度" min-width="120" >
        <template slot-scope="scope">{{scope.row.price_sensitivity | fieldsFilter('price_sensitivity')}}</template>
      </el-table-column>
      <el-table-column label="品牌敏感度" min-width="120" >
        <template slot-scope="scope">{{scope.row.brand_sensitivity | fieldsFilter('brand_sensitivity')}}</template>
      </el-table-column>
      <el-table-column label="收益敏感度" min-width="120" >
        <template slot-scope="scope">{{scope.row.profit_sensitivity | fieldsFilter('profit_sensitivity')}}</template>
      </el-table-column>
      <el-table-column label="金融知识熟悉度" min-width="120" >
        <template slot-scope="scope">{{scope.row.financial_familiarity | fieldsFilter('financial_familiarity')}}</template>
      </el-table-column>
      <el-table-column label="浏览产品信息渠道偏好" min-width="160" >
        <template slot-scope="scope">{{scope.row.browse_channel_preference | fieldsFilter('browse_channel_preference')}}</template>
      </el-table-column>
      <el-table-column label="娱乐偏好" min-width="90" >
        <template slot-scope="scope">{{scope.row.entertainment_preference | fieldsFilter('entertainment_preference')}}</template>
      </el-table-column>
      <el-table-column label="社交活跃平台" min-width="110" >
        <template slot-scope="scope">{{scope.row.active_social_platform | fieldsFilter('active_social_platform')}}</template>
      </el-table-column>
      <el-table-column label="月均消费金额" min-width="110" >
        <template slot-scope="scope">{{scope.row.average_monthly_consumption | fieldsFilter('average_monthly_consumption')}}</template>
      </el-table-column>
      <el-table-column label="购物渠道偏好" min-width="120" >
        <template slot-scope="scope">{{scope.row.shopping_channel_preference | fieldsFilter('shopping_channel_preference')}}</template>
      </el-table-column>
      <el-table-column label="购物服务要求程度" min-width="140" >
        <template slot-scope="scope">{{scope.row.shopping_preference | fieldsFilter('shopping_preference')}}</template>
      </el-table-column>
      <el-table-column label="感兴趣的金融产品" min-width="140" >
        <template slot-scope="scope">{{scope.row.like_financial | fieldsFilter('like_financial')}}</template>
      </el-table-column>
      <el-table-column label="浏览金融产品时关注词条" min-width="180" >
        <template slot-scope="scope">{{scope.row.browse_notice_keywords | fieldsFilter('browse_notice_keywords')}}</template>
      </el-table-column>
      <el-table-column label="感兴趣的金融信息" min-width="140" >
        <template slot-scope="scope">{{scope.row.like_financial_info | fieldsFilter('like_financial_info')}}</template>
      </el-table-column>
      <el-table-column label="感兴趣的优惠方式" min-width="140" >
        <template slot-scope="scope">{{scope.row.like_discount_way | fieldsFilter('like_discount_way')}}</template>
      </el-table-column>
      <el-table-column label="金融产品服务要求程度" min-width="160" >
        <template slot-scope="scope">{{scope.row.financial_require_preference | fieldsFilter('financial_require_preference')}}</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'
import { fieldsMap } from '../userFieldsMap.js'
export default {
  props: {
    params: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      tableData: [],
      total: 0,
      page: 1,
      limit: 10
    }
  },
  filters: {
    fieldsFilter(val, field) {
      const map = fieldsMap[field]
      return map[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>
