<template>
  <el-dialog title="报名信息" :visible.sync="dialogVisible">
    <div class="filter-container">
      <el-form ref="queryForm" :model="query" label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="邀请人">
              <el-input v-model="query.inviter" placeholder="邀请人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="姓名">
              <el-input v-model="query.name" placeholder="姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="已签到">
              <el-select class="filter-item" v-model="query.qdStatus" placeholder="签到状态">
                <el-option :key="undefined" label="所有" :value="undefined"></el-option>
                <el-option v-for="(val,index) in typeList " :key="index" :label="val.name"
                           :value="val.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button class="filter-item" type="primary" v-waves icon="search" @click="search"
                       style="margin-left: 10px;">搜索
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!--      <el-form :model="userOrderMessage" ref="alterUserOrder" label-width="100px">-->

    <el-table
      :data="list"
      style="width: 100%"
      border fit highlight-current-row>
      <el-table-column
        label="姓名"
        style="width: 100%" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="电话"
        width="180" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.phone}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="身份证" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.idNumber}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="邀请人" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.inviter}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="qdStatus"
        label="是否已签到" align="center">
        <template slot-scope="scope">
          <span>{{getStatusName(scope.row.qdStatus)}}</span>
        </template>
      </el-table-column>
    </el-table>
    <!--      </el-form>-->
    <div v-show="listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="query.page" :page-sizes="[10,20,30, 50]" :page-size="query.limit"
                     layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <div slot="footer" class="dialog-footer1">
<!--      <el-button type="primary" @click="">导出为excel</el-button>-->
      <el-button @click="cancelHandel"> 关   闭 </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import ElRow from "element-ui/packages/row/src/row";
  import ElInput from "../../../../node_modules/element-ui/packages/input/src/input.vue";
  import ElCol from "element-ui/packages/col/src/col";
  import ElFormItem from "../../../../node_modules/element-ui/packages/form/src/form-item.vue";
  import {
    page
  } from 'src/api/summit/activityBm';

  export default {
    props: ["enrollRow"],
    name: 'enrollDataPopup',
    components: {
      ElFormItem,
      ElCol,
      ElInput,
      ElRow
    },
    data() {
      return {
        dialogVisible: false,
        query: {
          page: 1,
          limit: 10,
          activityId: undefined,
          name: undefined,
          inviter: undefined,
          qdStatus: undefined,
        },
        list: [],
        total: 0,
        listLoading: true,
        typeList: [
          {id: 1, name: '否'},
          {id: 2, name: '是'}
        ],
        result:false,
      }
    },
    watch: {
      dialogVisible(newValue, oldValue) {
        if (!newValue) {
          this.$emit("enrollDialogEvent",this.result);
        }
      },
    },
    mounted() {
      this.query.activityId = this.enrollRow.id
      this.getOrderInfo();
    },
    methods: {
      getOrderInfo() {
        let param = this.dataProcessing()
        page(param).then(res => {
          this.list = res.data.list;
          this.total = res.data.total;
          this.dialogVisible = true
          this.listLoading = true
        })
      },
      search() {
        this.getOrderInfo()
      },
      dataProcessing() {
        this.listLoading = false
        let parse = JSON.parse(JSON.stringify(this.query))
        parse.qdStatus = parse.qdStatus ? (parse.qdStatus - 1) : parse.qdStatus
        return parse
      },
      getStatusName(status){
        if (this.$utils.isInteger(status)) {
           if (status==0){
             return '未签到'
           }
          if (status==1){
            return '已签到'
          }
        }
      },
      handleSizeChange(val) {
        this.query.limit = val;
        this.getList();
      }
      ,
      handleCurrentChange(val) {
        this.query.page = val;
        this.getList();
      }
      ,/**
       * 弹框-取消
       * */
      cancelHandel() {
        this.setSummitDialogEvent(false)
      },
      setSummitDialogEvent(e) {
        this.result=e
        this.dialogVisible = false
      },
    }

  }
</script>
<style>
  .label-text {
    margin-left: 10px;
    margin-right: 20px;
  }

  .label-title {
    margin-top: 10px;
  }

  .orderDetail tr th {
    background: #eef1f6;
  }

  .orderDetail tr td, .orderDetail tr th {
    width: 500px;
    text-align: center;
    border: 1px solid #dfe6ec;
    margin-left: 100px;
    margin-right: 100px;
    padding: 10px;
  }

  .label-value {
    margin-left: 80px;
    margin-right: 100px;
  }

  #license-img {
    width: 50px;
    height: 50px;
  }

  .order-details .el-form-item {
    margin-bottom: 10px !important;
  }

  .el-dialog__footer .dialog-footer1 {
    position: relative;
    text-align: center;
  }

  .fhjj {
    width: 500px;
  }

  .content {
    margin-left: 4%;
  }

  .height {
    margin-bottom: 2%;
  }

  . el-form-item__content {
    margin-left: 5% !important;
  }

  .status {
    margin-top: 4%;
  }
</style>

