<template>
    <section>
    <p><span>活动预告></span>报名详情</p>
    <div class="content">
      <div style="line-height:35px;color:#666;margin-bottom:20px;">
          <div style="float:right;padding-right:30%;">
               <img  width="150" :src="info.img" alt=""><br>
          </div>
          <p>活动名称：{{info.name}}</p>
            <p>活动地址：{{info.address}}</p>
            <p>活动时间：{{info.begin_time}}--{{info.end_time}}</p>
            <p>活动简介：{{info.desc}}</p>
            <el-button @click="sendmsg" size='small' type="primary">发送短信</el-button>
      </div>
       
      <el-table
                    class="table"
                    :data="list"
                    height='38vh'
                     @selection-change="handleSelectionChange"
                    border  v-loading="loading"
                    default-expand-all row-key="id"
                    style="width: 100%">
                    <el-table-column
                    type="selection"
                    width="55">
                    </el-table-column>
                    <el-table-column
                    prop="name"  
                    label="姓名">
                    </el-table-column>
                    <el-table-column
                    prop="phone"  width="120"
                    label="手机号">
                    </el-table-column>
                    <el-table-column
                    prop="phone"  
                    label="单位">
                    </el-table-column>
                    <el-table-column
                    prop="age"  
                    label="年龄">
                    </el-table-column>
                    <el-table-column
                    prop="idcard"  
                    label="身份证号">
                    </el-table-column>
                    <el-table-column
                    prop=""  
                    label="性别">
                    <template slot-scope="scope">
                        {{scope.row.sex==0?'男':'女'}}
                    </template>
                    </el-table-column>
               
                    <el-table-column width="250"
                    prop="tax_company"  
                    label="发票单位">
                    </el-table-column>
                    <el-table-column
                    prop="user_nickname"  
                    label="昵称">
                    </el-table-column>
                    <el-table-column
                    prop="email"  
                    label="邮箱">
                    </el-table-column>
                    <el-table-column
                    prop="title"  
                    label="职称">
                    </el-table-column>
      </el-table>
      <Page
        ref="pageButton"
        :current="form.page"
        :page_size="form.page_size"
        :total="total"
        @pageChange="gopage"
      />
    </div>
  </section>
</template>
<script>
import Page from '../../components/Page';
export default {
    components:{
        Page
    },
    data(){
        return{
            form:{order_status:'-2',type:'activity'},
            conferenceList:[],
            hotelList:[],
            list:[{}],
            reason:{},
            invoice:{},
            total:0,
            loading:false,
            dialogVisible:false,
            dialogVisible1:false,
            dialogVisible2:false,
            dialogVisible3:false,
            proof_img:'',
            info:{},
            signup_ids:[]
        }
    },
    methods:{
        sendmsg(){
            if(this.signup_ids.length<=0){
                    this.$message({
                                message: "请选择需要发送短信的用户",
                                type: "error",
                    });
                    return
            }
            this.$confirm("确定发送短信吗", "提示", {
                type: "warning",
            }).then(() => {
                this.$api.sendMsg({ signup_ids: this.signup_ids.join(',') }).then((res) => {
                    if(res.data.code == 0){
                            this.$message({
                                message: "发送成功",
                                type: "success",
                            });
                    }
                });
            });  
        },
        handleSelectionChange(val) {
            console.log(val)
            var ids=[]
            val.forEach(item => {
                ids.push(item.id)
            });
            this.signup_ids=ids;
        },
        download(){
            this.$api.getSignupData().then(res=>{
                var elink = document.createElement("a");
                let blob = new Blob([res.data], {
                    type: "application/vnd.ms-excel,charset=UTF-8",
                });
                let objUrl = URL.createObjectURL(blob);
                let file_name = decodeURIComponent(
                    res.headers["content-disposition"].split("=")[1]
                );
                console.log(file_name);
                elink.download = file_name;
                elink.style.display = "none";
                elink.href = objUrl;
                document.body.appendChild(elink);
                elink.click();
                document.body.removeChild(elink);
            })
        },
        gopage(size){
            if(size){
                this.form.page_size=size
            }
            this.form.page=this.$refs.pageButton.page
            this.getData()
        },
        tabClick(){
            this.getData()
        },
        getReason(data){
            if(data.reject_reason){
                data.reject_reason=JSON.parse(data.reject_reason);
            }else{
               data.reject_reason=[] 
            }
            this.reason=data
        },
        getData(){
            var parm={...this.form};        
            if(parm.order_status==-2){parm.order_status=''}
            this.loading=true
            this.$api.getSignupList(parm).then(res=>{
                this.list=res.data.data.list;
                this.total=res.data.data.total
                this.loading=false;
            })

            this.$api.getConferenceList().then(res=>{
                this.conferenceList=res.data.data.list;
            })
             this.$api.getHotelList().then(res=>{
                this.hotelList=res.data.data.list;
            })
        },
        check(status){
            this.$api.putSignup({signup_status:status,reject_reason:this.invoice.reject_reason,id:this.invoice.id}).then(res=>{
                            this.$message({
                                message: '操作成功',
                                type: 'success'
                            })
                            this.dialogVisible2=false
                            this.getData()
            })
        }
    },
    created(){
        this.form.conference_id=this.$route.query.id
        this.getData();
        this.$api.getActivity({id:this.$route.query.id}).then(res=>{
                if(res.data.code != 0){
                    this.$message({
                            message: res.data.message,
                            type: 'error'
                    })
                    return
                }
                this.info=res.data.data
        })
    }
}



</script>