<template>
  <el-dialog
      v-dialogDrag
      :modal-append-to-body="false"
      :center="true"
      close-on-press-escape
      :close-on-click-modal="false"
      :visible.sync="isShow"
      @close="detailClose"
      append-to-body
      title="线下报名详情"
    >
      <!-- 内容部分 -->
      <a class="downloadBtn" :href="exportUser" download>
          <el-button type="primary">下载名单</el-button>
        </a>
      <el-table max-height="260px" :data="detailList" border>
        <el-table-column align="center" prop="RealName" label="姓名" />
        <el-table-column align="center" prop="CompanyName" label="公司名称" />
        <el-table-column align="center" prop="SellerName" label="所属销售" />
        <el-table-column align="center" label="报名时间">
            <template slot-scope="scope">
                {{$moment(scope.row.CreateTime).format('YYYY-MM-DD HH:mm:SS')}}
            </template>
        </el-table-column>
        <el-table-column v-if="state===1" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="signupCancel(scope.row)"
              >取消报名</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="detailClose">知道了</el-button>
      </span>
    </el-dialog>
</template>

<script>
import { ficcManageInterface } from "@/api/api.js";
export default {
    props: {
        // 活动Id
        ActivityId: {
            type: [Number,String],
            required:true,
        },
        // 当前状态
        state:{
            type:Number,
            require:true
        },
        // 弹窗是否显示
        isShow: {
            type: Boolean,
            required:true,
        },
    },
    data() {
        return {
            detailList:[], // 报名详情列表
        }
    },
    created () {
        this.getSignUpUserList()
    },
    methods: {
        // 获取活动报名详情列表
        async getSignUpUserList(){
            try{
                const {Data} = await ficcManageInterface.activitySignupDetailList({ActivityId:this.ActivityId})
                this.detailList=Data.List
            }catch(err){
                console.dir(err);
            }
        },
        // 详情弹窗关闭
        detailClose(){
            this.detailList=[]
            this.$emit('update:isShow',false)
            this.$parent.CurrentActivityId=-1
        },
        // 取消报名
        async signupCancel({ActivityId,UserId}){
            try{
                await this.$confirm('确定要取消该用户的报名吗?','提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                await ficcManageInterface.activitySignupCancelUser({
                    ActivityId,
                    UserId,
                })
                this.$message.success('操作成功')
                this.getSignUpUserList()
                this.$parent.getSignUpList()
            }catch(err){
                console.log(err);
                this.$message.info('取消操作')
            }
        },
    },
    computed: {
        // 下载链接
        exportUser() {
            return process.env.API_ROOT + "/yb/activity_register_user/list?IsExport=true&ActivityId=" + this.ActivityId + "&" + localStorage.getItem("auth") || "";
        }
    },
}
</script>

<style lang="scss" scoped>
.downloadBtn{
    display: inline-block;
    margin-bottom: 20px;
}
.dialog-footer{
    .el-button{
        margin: 10px 0;
    }
}
</style>