<script setup>
import { computed, watch, nextTick, ref } from "vue";

import { raiInterface, raiSpecial } from "@/api/api.js";
import EditMobile from "../../components/editMobile.vue";
import { ElMessageBox, ElMessage } from "element-plus";

const props = defineProps({
  particularsDialogVisible: {
    type: Boolean,
    default: false,
  },
  subscribe: {
    type: String,
    default: "报名详情",
  },
  dialogVisibleList: {
    type: Object,
  },
});

const dataList = ref([]); //表格
const total = ref("");
const myTotal = ref("");
const memberType = ref("");
const editMobileDialogVisible = ref(false); //
const editMobileId = ref(""); //
const outboundMobile = ref("");
const isFullNum = ref(false); //报名人数是否已满

const exportUser = computed(() => {
  let param_token = localStorage.getItem("auth") || "";
  return import.meta.env.VITE_APP_API_ROOT + "/cygx/special/tripList?ActivityId=" + props.dialogVisibleList.ActivityId + "&IsExport=" + true + "&" + param_token;
});

watch(
  () => props.particularsDialogVisible,
  (newval) => {
    if (newval) {
      getsDataList();
    }
  }
);

const $emit = defineEmits(["getsDataList"]);

function okBtn() {
  $emit("update:particularsDialogVisible", false);
}
//列表表格
function getsDataList() {
  raiSpecial
    .getSpecialtripList({
      ActivityId: props.dialogVisibleList.ActivityId,
    })
    .then((res) => {
      if (res.Ret !== 200) return;
      nextTick(() => {
        dataList.value = res.Data.List;
        total.value = res.Data.Total;
        memberType.value = res.Data.MemberType;
        myTotal.value = res.Data.MyTotal;
      });
    });
}

function modification(id, value) {
  editMobileDialogVisible.value = true;
  editMobileId.value = id;
  outboundMobile.value = value;
}
//取消报名
function cancelApply(item) {
  ElMessageBox.confirm(`确定要取消该用户的报名吗？`, `取消报名`, {
    confirmButtonText: "是",
    cancelButtonText: "否",
    type: "warning",
  })
    .then(async () => {
      const res = await raiSpecial.cancelSpecialtripList({
        UserId: item.UserId,
        ActivityId: item.ActivityId,
      });
      if (res.Ret !== 200) return;
      ElMessage({
        type: "success",
        message: `取消报名成功!`,
      });
      getsDataList();
      $emit("getsDataList");
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消操作",
      });
    });
}
</script>

<template>
  <div class="container-particulars">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      center
      :append-to-body="true"
      v-model="props.particularsDialogVisible"
      :before-close="okBtn"
      :width="props.subscribe == '报名失败详情' ? '1000px' : '1100px'"
    >
      <template #header>
        <div style="display: flex; align-items: center">
          <img :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
          <span style="font-size: 16px">报名人数</span>
        </div>
      </template>
      <div class="content-box">
        <div class="top-text" style="margin-bottom: 20px">
          <template v-if="memberType == 'Admin'"> 共有{{ total }}人报名</template>
          <template v-else-if="memberType == 'Sale'"> 共有{{ total }}人报名，其中本人名下客户{{ myTotal }}人 </template>
          <template v-else> 共有{{ total }}人报名，其中本组名下客户{{ myTotal }}人 </template>
        </div>
        <div class="table-box">
          <el-table height="400px" :data="dataList" border style="width: 100%">
            <el-table-column min-width="80" align="center" prop="RealName" key="name" label="姓名"></el-table-column>
            <el-table-column v-if="props.dialogVisibleList.SpecialType == 1" min-width="115" align="center" prop="Mobile" key="mobile" label="手机号"></el-table-column>
            <el-table-column v-if="props.dialogVisibleList.SpecialType == 1" min-width="140" align="center" key="outboundMobile" label="外呼号码">
              <template #default="scope">
                <span>{{ scope.row.OutboundMobile }}</span>
                <img @click="modification(scope.row.Id, scope.row.OutboundMobile)" :src="$icons.amend" style="color: #fff; width: 12px; height: 12px; margin-left: 5px; vertical-align: middle" />
              </template>
            </el-table-column>
            <el-table-column min-width="135" align="center" prop="CompanyName" key="company" label="公司名称"></el-table-column>
            <el-table-column min-width="110" align="center" prop="SellerName" key="seller" label="所属销售"></el-table-column>
            <el-table-column min-width="160" align="center" prop="CreateTime" key="seller" label="报名时间"></el-table-column>
            <el-table-column min-width="135" align="center" prop="" key="cz1" label="操作">
              <template #default="scope">
                <span class="editsty" @click="cancelApply(scope.row)">取消报名</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <div style="margin: 10px 0">
            <span style="margin-left: 30px">
              <a :href="exportUser" download>
                <el-button type="primary">下载名单</el-button>
              </a>
            </span>
            <el-button style="margin-left: 30px" type="primary" plain @click="okBtn">知道了</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
    <edit-mobile v-model:editMobileDialogVisible="editMobileDialogVisible" :editMobileId="editMobileId" :outboundMobile="outboundMobile" @getsDataList="getsDataList" isType="专项" />
  </div>
</template>

<style lang="less">
.container-particulars {
  .table-box {
    margin: 20px auto;
  }
  .top-text {
    display: flex;
    align-items: center;
    div {
      margin-left: 20px;
    }
  }
  .el-radio {
    margin-right: 15px !important;
  }
  .el-switch__label {
    color: #606266;
    font-size: 14px;
    font-weight: 400;
  }
  .is-active {
    color: #409eff !important;
  }
  .el-radio__label {
    font-weight: 400;
  }
}
</style>
