<template>
  <page-header-wrapper>
    <div class="content">
      <div class="table">
        <a-table class="mt-15" bordered :columns="columns" :data-source="data" :scroll="{ x: 1200,}">
          <span slot="sex" slot-scope="text">{{ text==0?'其他':text==1?'男':'女' }}</span>
          <span slot="agent" slot-scope="text">{{ text==1?'安卓':'苹果' }}</span>
        </a-table>
      </div>
    </div>
  </page-header-wrapper>
</template>

<script>
  const columns = [{
      title: '昵称',
      dataIndex: 'nickname',
      width:180
    },
    {
      title: '性别',
      dataIndex: 'sex',
      scopedSlots: {
        customRender: 'sex'
      },
    },
    {
      title: '年龄',
      dataIndex: 'age',
    },
    {
      title: '终端',
      dataIndex: 'agent',
      scopedSlots: {
        customRender: 'agent'
      },
    },
    {
      title: 'bmi',
      dataIndex: 'bmi',
    },
    {
      title: '体重',
      dataIndex: 'weight',
    },
    {
      title: '身高',
      dataIndex: 'height',
    },
    {
      title: '脂肪率',
      dataIndex: 'fat_w',
    },
    {
      title: '测量时间',
      dataIndex: 'createtime',
      width:180
    },
  ]

  import data from '@/static/data.json'
  export default {
    props: {
      loading: {
        type: Boolean,
        default: () => false
      },
    },
    data() {
      return {
        data: [],
        columns,
        selectedRowKeys: [],
      }
    },
    computed: {
      hasSelected() {
        return this.selectedRowKeys.length > 0
      },
    },
    created() {
      this.data = data.data
    },
    methods: {
      onSelectChange(selectedRowKeys, selectedRows) {
        console.log(selectedRowKeys, selectedRows)
        this.selectedRowKeys = selectedRowKeys
      },
      onSearch(value) {
        console.log(value)
      },
      handleChoice() {
        console.log(this.selectedRowKeys)
        this.$emit('ok', this.selectedRowKeys)
      }
    },
  }
</script>

<style scoped="scoped" lang="less">
  .content {
    height: calc(100vh - 160px);
  }
</style>
