<template>
  <div id="root">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="签到人姓名">
        <el-input v-model="formInline.userName" placeholder="签到人姓名"/>
      </el-form-item>
      <el-form-item label="签到人手机号">
        <el-input v-model="formInline.userTel" placeholder="签到人手机号"/>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="clear">清空</el-button>
        <el-button type="primary" @click="queryList">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        align="center"
        prop="userName"
        label="姓名"/>
      <el-table-column
        align="center"
        prop="userRole"
        label="角色"/>
      <el-table-column
        align="center"
        prop="buildingInfo"
        label="房号"/>
      <el-table-column
        align="center"
        prop="createDate"
        label="签到时间">
        <template slot-scope="scope">{{ formatDate(scope.row.createDate) }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="userTel"
        label="联系电话"/>
    </el-table>
    <!-- 分页 -->
    <div class="footer-page">
      <el-pagination
        :current-page="formInline.pageNum"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="formInline.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SignIn',
  data() {
    return {
      formInline: {
        activityId: '',
        pageNum: 1,
        pageSize: 10,
        userName: '',
        userTel: ''
      },
      tableData: [], // 数据集合
      total: 0 // 总数
    }
  },
  mounted() {
    this.formInline.activityId = this.$route.query.id
    this.getData()
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.formInline.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.formInline.pageNum = val
      this.getData()
    },
    getData() { // 回去数据
      this.$store.dispatch('GetActivitySignIn', this.formInline).then((res) => {
        const resCode = res.code
        if (resCode === '0') {
          const resData = res.data
          this.tableData = resData.records
          this.formInline.pageNum = resData.current
          this.formInline.pageSize = resData.size
          this.total = resData.total
        }
      }).catch(() => {
        console.log('GetActivitySignIn error')
      })
    },
    clear() {
      this.formInline.userTel = ''
      this.formInline.userName = ''
      this.formInline.pageNum = 1
      this.formInline.pageSize = 10
      this.getData()
    },
    queryList() {
      this.formInline.pageNum = 1
      this.formInline.pageSize = 10
      this.getData()
    },
    formatDate(val) {
      if (val === null) {
        return ''
      }
      var value = new Date(val)
      var year = value.getFullYear()
      var month = value.getMonth() + 1
      var day = value.getDate()
      // var hour = value.getHours()
      // var minutes = value.getMinutes()
      // var seconds = value.getSeconds()
      // return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
      return year + '-' + month + '-' + day
    },
  }
}
</script>

<style scoped>
.demo-form-inline {
  margin-top: 20px;
  margin-left: 20px;
}
.footer-page{
  display: flex;
  justify-content: flex-end;
}
</style>
