<template>
  <div>
    <a-card :bordered="false" style="padding-bottom: 0px; margin-bottom: 10px " title="新增人员">
      <template slot="extra">
        <a-button type="primary" @click="goback">返回</a-button>
      </template>

      <div class="table-page-search-wrapper">
        <h3>单位邀请码：{{ invitationCode }}</h3>
        <h3>邀请链接： www.anquanpeixun.com</h3>
      </div>
    </a-card>

    <a-card :bordered="false">
      <div class="table-operator">
        <h3>最近注册人员</h3>
      </div>

      <s-table
        ref="table"
        :columns="columns"
        :data="loadData"
        :rowKey="(record) => record.id"
      >
        <template slot="createTime" slot-scope="text, record">
          {{ record.createTime | moment('YYYY-MM-DD') }}
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="$refs.personForm.registerEdit(record)">编辑</a>
        </span>
      </s-table>

      <person-form ref="personForm" @ok="handleOk" />

    </a-card>
  </div>
</template>
<script>
  import { STable } from '@/components'
  import { personRegisterPage } from '@/api/person/personRegister'
  import PersonForm from './PersonForm'

  export default {
    components: {
      STable,
      PersonForm
    },
    data () {
      return {
        invitationCode: '',
        // 查询参数
        queryParam: { orgId: this.$route.query.orgId },
        // 表头
        columns: [
          {
            title: '姓名',
            dataIndex: 'name'
          },
          {
            title: '用户名',
            dataIndex: 'userName'
          },
          {
            title: '单位信息',
            dataIndex: 'unit'
          },
          {
            title: '部门信息',
            dataIndex: 'dept'
          },
          {
            title: '手机号',
            dataIndex: 'phone'
          },
          {
            title: '注册时间',
            dataIndex: 'createTime',
            scopedSlots: { customRender: 'createTime' }
          },
          {
            title: '操作',
            width: '150px',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          return personRegisterPage(Object.assign(parameter, this.queryParam)).then((res) => {
            this.invitationCode = res.invitationCode
            return res
          })
        }
      }
    },
    created () {
    },
    methods: {
      // 返回
      goback () {
        this.$router.push({
          path: '/personList',
          query: {
            orgType: 1
          }
        })
      },
      handleOk () {
        this.$refs.table.refresh()
      }
    }
  }
</script>
<style lang="less">
  .table-operator {
    margin-bottom: 18px;
  }
  button {
    margin-right: 8px;
  }
  .person-type span{
    font-size: 24px;
  }
  h3 {
    font-weight: 600;
  }
</style>
