
<template>
  <div id="root">
    <el-form :inline="true" :model="listQuery" class="form-inline">
      <el-form-item label="报名人姓名">
        <el-input v-model="listQuery.userName" placeholder="报名人姓名"/>
      </el-form-item>
      <el-form-item label="报名人手机号">
        <el-input v-model="listQuery.phone" placeholder="报名人手机号"/>
      </el-form-item>
      <!--<el-form-item label="活动内容">-->
      <!--<el-input v-model="formInline.user" placeholder="活动内容"/>-->
      <!--</el-form-item>-->
      <el-form-item>
        <el-button type="info" @click="clearListQuery">清空</el-button>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      ref="multipleTable"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%; margin-top: 20px;"
      border
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        align="center"/>
      <!--<el-table-column-->
      <!--label="编号"-->
      <!--align="center">-->
      <!--<template slot-scope="scope">{{ scope.row.id }}</template>-->
      <!--</el-table-column>-->
      <el-table-column
        prop="userName"
        label="姓名"
        align="center"/>
      <el-table-column
        prop="userRole"
        label="角色"
        show-overflow-tooltip
        align="center">
        <template slot-scope="scope">{{ getRoleName(scope.row.roleName) }}</template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="房号"
        align="center"/>
      <el-table-column
        prop="signUpTime"
        label="报名时间"
        align="center">
        <template slot-scope="scope">{{ formatDate(scope.row.signUpTime) }}</template>
      </el-table-column>
      <el-table-column
        prop="remark"
        label="报名备注"
        align="center">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <div style="max-width: 300px; word-wrap: break-word;">{{ scope.row.remark }}</div>
            <div slot="reference" class="text-remark" style="color: #409EFF;">
              {{ scope.row.remark }}
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="phone"
        label="联系电话"
        align="center"/>
      <el-table-column
        prop="id"
        label="操作"
        align="center">
        <template slot-scope="scope"><el-button type="danger" @click="deleteSignUp(scope.row.id)">删除报名</el-button></template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        :current-page.sync="listQuery.pageNum"
        :page-sizes="[10, 20, 40, 100]"
        :page-size.sync="listQuery.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
    <el-dialog :visible.sync="dialogTableVisible" title="收货地址">
      <div>{{ dialogContent }}</div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogSMSVisible"
      title="提示"
      width="30%">
      <div style="width: 400px;height: 100px;margin-left: auto;margin-right: auto; margin-top: 10px;align-content: center;">
        <span>确定要删除此人报名吗？</span>
        <p><el-checkbox v-model="deleteData.sendSMS">发送短信通知报名人已取消他的报名</el-checkbox></p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogSMSVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteById">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'Index',
  data() {
    return {
      listQuery: {
        id: '',
        userName: '',
        phone: '',
        pageNum: 1,
        pageSize: 10
      },
      deleteData: {
        deleteId: '', // 需要删除的id
        sendSMS: false // 是否发生短信
      },
      total: 0, // 数据总数
      list: [],
      listLoading: true, // 表格加载框
      dialogTableVisible: false, // 是否显示弹框
      dialogContent: '提示信息', // 弹框内容
      dialogSMSVisible: false // 是否删除报名弹框
    }
  },
  mounted() {
    this.listQuery.id = this.$route.query.id
    this.signUpList()
  },
  methods: {
    onSubmit() {
      this.listQuery.pageNum = 1
      this.signUpList()
    },
    clearListQuery() {
      this.listQuery.userName = ''
      this.listQuery.phone = ''
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = 10
      this.signUpList()
    },
    handleSelectionChange(data) { // 表格选择
      // 设置为 空
      this.deleteIds = []
      for (let i = 0; i < data.length; i++) {
        this.deleteIds.push(data[i].id)
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = val
      this.signUpList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.listQuery.pageNum = val
      this.signUpList()
    },
    signUpList() { // 查询列表
      this.listLoading = true
      this.$store.dispatch('GetSignUp', this.listQuery).then((res) => {
        const resData = res.data
        this.list = resData.list
        this.listQuery.pageNum = resData.pageNum
        this.listQuery.pageSize = resData.pageSize
        this.total = resData.total
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
        console.log('error GetSignUp get')
      })
    },
    formatDate(val) {
      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
    },
    getRoleName(roleName) {
      let role = ''
      switch (roleName) {
        case 'OWNER':
          role = '户主'
          break
        case 'TENANT':
          role = '租客'
          break
        case 'RELATION':
          role = '家属'
          break
        default:
          role = '未认证'
      }
      return role
    },
    showDialog(remark) { // 备注 弹框
      this.dialogContent = remark
      this.dialogTableVisible = true
    },
    deleteSignUp(id) { // 显示 删除报名人员的弹窗
      this.dialogSMSVisible = true
      this.deleteData.sendSMS = false // 默认不发送
      this.deleteData.deleteId = id
    },
    deleteById() { // 删除报名人员
      console.log(this.deleteData.sendSMS, this.deleteData.deleteId)
      // 发送请求
      this.$store.dispatch('DeleteSignUp', this.deleteData).then((res) => {
        if (res.code === '0') {
          this.$message({
            message: res.message,
            type: 'success'
          })
          // 获取列表
          this.signUpList()
          this.deleteData.deleteId = ''
          return
        }
        this.$message.error(res.message)
        this.deleteData.deleteId = ''
      }).catch(() => {
        console.log('error DeleteSignUp')
      })

      // 关闭弹窗
      this.dialogSMSVisible = false
    }
  }
}
</script>

<style scoped>
#root {
  margin-top: 20px;
}
.form-inline{
  margin-left: 20px;
}
.operation {
  margin-left: 20px;
}
.block {
  display: flex;
  justify-content: flex-end;
}
.text-remark{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap !important;
  outline: 0 !important
}
</style>
