<script setup>
import { ficcManageInterface } from "@/api/api.js";
import { ref, computed, getCurrentInstance } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import moment from 'moment'
const props = defineProps({
    // 活动Id
    ActivityId: {
        type: [Number,String],
        required:true,
    },
    // 当前状态
    state:{
        type:Number,
        require:true
    },
    // 弹窗是否显示
    isShow: {
        type: Boolean,
        required:true,
    },
    getSignUpList:{
        type:Function,
        default:()=>{}
    }
})
let exportUser = computed(()=>{
    return import.meta.env.VITE_APP_API_ROOT + "/yb/activity_register_user/list?IsExport=true&ActivityId=" + props.ActivityId + "&" + localStorage.getItem("auth") || "";
})
let detailList = ref([])
// 获取活动报名详情列表
async function getSignUpUserList(){
    try{
        const {Data} = await ficcManageInterface.activitySignupDetailList({ActivityId:props.ActivityId})
        detailList.value=Data.List
    }catch(err){
        console.dir(err);
    }
}
getSignUpUserList()
// 详情弹窗关闭
const emit = defineEmits(["closeDia"]);
function detailClose(){
    detailList.value=[]
    emit('closeDia')
}
// 取消报名
async function signupCancel({ActivityId,UserId}){
    try{
        await ElMessageBox.confirm('确定要取消该用户的报名吗?','提示',{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
        await ficcManageInterface.activitySignupCancelUser({
            ActivityId,
            UserId,
        })
        ElMessage.success('操作成功')
        getSignUpUserList()
        props.getSignUpList()
    }catch(err){
        console.log(err);
        ElMessage.info('取消操作')
    }
}
</script>
<template>
  <el-dialog
      :modal-append-to-body="false"
      :center="true"
      close-on-press-escape
      :close-on-click-modal="false"
      :model-value="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 #default="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 #default="scope">
            <el-link :underline="false" type="primary" @click="signupCancel(scope.row)"
              >取消报名</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部按钮 -->
      <div class="dialog-footer" style="text-align: center;">
        <el-button type="primary" @click="detailClose">知道了</el-button>
      </div>
    </el-dialog>
</template>

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