<script setup>
import { ref, watch, onMounted, computed, reactive, nextTick, toRefs } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { raiInterface } from "@/api/api.js";
import EditMobile from "../editMobile.vue";
import { NameListDownload } from "./applyTableColums";

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

const pageState = reactive({
  page_no: 1,
  PageSize: 10,
  dataList: [], //表格
  value1: true,
  radioArr: [
    {
      name: "限制报名",
      id: 3,
    },
    {
      name: "预约外呼",
      id: 1,
    },
    {
      name: "自主拨入",
      id: 2,
    },
  ],
  excelType: "", //下载类型
  excelId: "", //下载的id
  total: "", //条数
  myTotal: "", //条数
  isLimitPeople: "", //条数
  memberType: "", //
  editMobileDialogVisible: false, //
  editMobileId: "", //
  outboundMobile: "",
  isFullNum: false, //报名人数是否已满
  isNameListDownloadShow: false, //下载名单弹框
  downloadTypeName: 0,
  isYidongConduct: false, // 是否是易懂
});

// 下载
const exportUser = computed(() => {
  if (pageState.Teleconference || props.subscribe == "预约外呼详情") {
    return import.meta.env.VITE_APP_API_ROOT + "/cygx/activitySignup/callExport?ActivityId=" + pageState.excelId + "&" + localStorage.getItem("auth") || "";
  } else {
    return import.meta.env.VITE_APP_API_ROOT + "/cygx/activitySignup/signupFailExport?ActivityId=" + pageState.excelId + "&" + localStorage.getItem("auth") || "";
  }
});

// 手机号是否展示
const isMobileShow = computed(() => {
  return pageState.AppointmentCall || pageState.Teleconference || pageState.excelType == "YiDong" || pageState.isYidongConduct || pageState.excelType == "OfflineResearch";
});

// 预约外呼是否展示
const isOutboundMobileShow = computed(() => {
  return (pageState.AppointmentCall || pageState.Teleconference || pageState.isYidongConduct || pageState.excelType == "OfflineResearch") && pageState.isCancelApply;
});

// 是否展示参会方式
const isSignupTypeShow = computed(() => {
  return (pageState.Teleconference || pageState.AppointmentCall || pageState.isYidongConduct || pageState.excelType == "OfflineResearch") && props.subscribe == "报名详情";
});
const isCancelApply = computed(() => {
  return props.subscribe !== "报名失败详情";
});
const nameListDownload = computed(() => {
  return NameListDownload;
});
const Teleconference = computed(() => {
  return pageState.excelType == "Teleconference";
});
const AppointmentCall = computed(() => {
  return pageState.excelType == "AppointmentCall";
});

watch(
  () => props.particularsDialogVisible,
  () => {
    if (props.particularsDialogVisible) {
      if (props.subscribe == "报名失败详情") {
        pageState.dataList = [];
        salonFailSignupList();
      } else {
        pageState.dataList = [];
        getsDataList();
      }
    }
  }
);
const $emit = defineEmits(["getsDataList"]);
// 关闭弹框
function okBtn() {
  $emit("update:particularsDialogVisible", false);
}
//列表表格
function getsDataList() {
  raiInterface
    .appointmentList({
      ActivityId: props.dialogVisibleId,
    })
    .then((res) => {
      if (res.Ret !== 200) return;
      pageState.excelType = res.Data.ExcelType;
      pageState.excelId = res.Data.ActivityId;
      pageState.total = res.Data.Total;
      pageState.myTotal = res.Data.MyTotal;
      pageState.isLimitPeople = res.Data.IsLimitPeople;
      pageState.memberType = res.Data.MemberType;
      pageState.isFullNum = res.Data.IsFull;
      pageState.isYidongConduct = res.Data.IsYidongConduct == 1 ? true : false;
      nextTick(() => {
        pageState.dataList = res.Data.List;
      });
    });
}
// 报名失败的列表
function salonFailSignupList() {
  raiInterface
    .salonFailSignupList({
      ActivityId: props.dialogVisibleId,
    })
    .then((res) => {
      if (res.Ret !== 200) return;
      pageState.excelType = res.Data.ExcelType;
      pageState.excelId = res.Data.ActivityId;
      pageState.total = res.Data.Total;
      pageState.myTotal = res.Data.MyTotal;
      pageState.isLimitPeople = res.Data.IsLimitPeople;
      pageState.memberType = res.Data.MemberType;
      pageState.isFullNum = res.Data.IsFull;
      pageState.isYidongConduct = res.Data.IsYidongConduct == 1 ? true : false;
      nextTick(() => {
        pageState.dataList = res.Data.List;
      });
    });
}
// 报名方式的选择
function redioChange(name, id, row) {
  raiInterface
    .callSignupEdit({
      Id: id,
      OperationStatus: name,
    })
    .then((res) => {
      if (res.Ret !== 200) return;
      ElMessage.success("操作成功");
    });
}
function switchChange(item) {
  raiInterface
    .salonSignupEdit({
      Id: item.Id,
    })
    .then((res) => {
      if (res.Ret === 200) {
        ElMessage.success("操作成功");
        $emit("getsDataList");
      } else {
        item.SalonOperation = !item.SalonOperation;
      }
    });
}
// 点击了修改预约外呼
function modification(id, value) {
  pageState.editMobileDialogVisible = true;
  pageState.editMobileId = id;
  pageState.outboundMobile = value;
}
//取消报名
function cancelApply(item, num) {
  if (num == 1) {
    const str = item.ActivityTime.replace(/-/g, "/");
    const date = new Date(str);
    const times = date.getTime();
    const num = new Date().getTime();
    if (times - num <= 3600000) return ElMessage.error("外呼名单已发送专家组，请联系专家组取消");
  }
  let str = num == 1 ? "外呼" : "报名";
  ElMessageBox.confirm(`确定要取消该用户的${str}吗？`, `取消${str}`, {
    confirmButtonText: "是",
    cancelButtonText: "否",
    type: "warning",
  })
    .then(async () => {
      const res = await raiInterface.activitySignupApply({
        SignupId: item.Id,
        CancelClass: num,
      });
      console.log(res);
      if (res.Ret !== 200) return;
      ElMessage({
        type: "success",
        message: `取消${str}成功!`,
      });
      getsDataList();
      $emit("getsDataList");
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消操作",
      });
    });
}
//文字显示
function yidongStatus(row) {
  let str = row.YidongExamineStatus == 0 ? "待审核" : row.YidongExamineStatus == 1 ? "审核通过" : "未通过";
  return str;
}
function yidongStyle(row) {
  const style = row.YidongExamineStatus == 0 ? "color: #3385FF" : row.YidongExamineStatus == 1 ? "color: #07C635" : "color: #D7584F";
  return style;
}
// 专家/分析师电话会 下载名单 弹框
function appointmentCallDownloadHandler() {
  pageState.downloadTypeName = 0;
  pageState.isNameListDownloadShow = true;
}
// 专家/分析师电话会 下载名单 确定事件
function handleConfirmDownload() {
  let url =
    import.meta.env.VITE_APP_API_ROOT + "/cygx/activitySignup/signupFailExport?ActivityId=" + pageState.excelId + "&ExcelType=" + pageState.downloadTypeName + "&" + localStorage.getItem("auth") || "";
  let a = document.createElement("a"); // 创建a标签
  a.href = url; // 设置下载地址
  a.download = ""; // 设置下载文件名
  a.click();
  pageState.isNameListDownloadShow = false;
  pageState.downloadTypeName = 0;
}

const {
  page_no,
  PageSize,
  dataList, //表格
  value1,
  radioArr,
  excelType, //下载类型
  excelId, //下载的id
  total, //条数
  myTotal, //条数
  isLimitPeople, //条数
  memberType, //
  editMobileDialogVisible, //
  editMobileId, //
  outboundMobile,
  isFullNum, //报名人数是否已满
  isNameListDownloadShow, //下载名单弹框
  downloadTypeName,
  isYidongConduct, // 是否是易懂
} = toRefs(pageState);
</script>

<template>
  <div class="container-particulars">
    <el-dialog
      draggable
      :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 v-if="props.subscribe == '预约外呼详情'" :src="$icons.delay" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
          <img v-else :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
          <span style="font-size: 16px">{{ props.subscribe }}</span>
        </div>
      </template>
      <div class="content-box">
        <div class="top-text" style="margin-bottom: 20px">
          <span v-if="props.subscribe == '报名失败详情'">
            <template v-if="memberType == 'Admin'"> 共有{{ total }}人名失败 </template>
            <template v-else-if="memberType == 'Sale'"> 共有{{ total }}名失败，其中本人名下客户{{ myTotal }}人 </template>
            <template v-else> 共有{{ total }}名失败，其中本组名下客户{{ myTotal }}人 </template>
          </span>
          <span v-else-if="props.subscribe == '预约外呼详情' || props.subscribe == '报名详情' || Teleconference">
            <template v-if="memberType == 'Admin'"> 共有{{ total }}人{{ AppointmentCall ? "预约外呼" : "报名" }} </template>
            <template v-else-if="memberType == 'Sale'"> 共有{{ total }}人{{ AppointmentCall ? "预约外呼" : "报名" }}，其中本人名下客户{{ myTotal }}人 </template>
            <template v-else> 共有{{ total }}人{{ AppointmentCall ? "预约外呼" : "报名" }}，其中本组名下客户{{ myTotal }}人 </template>
          </span>
        </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="isMobileShow" min-width="115" align="center" prop="Mobile" key="mobile" label="手机号"></el-table-column>
            <el-table-column v-if="isOutboundMobileShow" 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 v-if="isSignupTypeShow" min-width="110" key="meeting" align="center" label="参会方式">
              <template #default="{ row }">
                <span>
                  {{ row.SignupType == 1 ? "预约外呼" : row.SignupType == 2 ? "自主拨入" : row.SignupType == 4 ? "自主入会" : "--" }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="CreateTime" key="createTime" align="center" min-width="160" label="报名时间"></el-table-column>
            <el-table-column v-if="props.subscribe == '报名失败详情'" align="center" prop="" key="fail" label="失败原因">
              <template #default="scope">
                <span>{{ scope.row.FailType == 1 ? "总人数已满" : scope.row.FailType == 2 ? "单机构超限制" : scope.row.FailType == 3 ? "爽约次数超限" : "" }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="props.subscribe == '报名失败详情' && Teleconference && isLimitPeople == 1" key="callopen" min-width="330" align="center" prop="" label="操作">
              <template #default="scope">
                <el-radio-group v-model="scope.row.CallOperation">
                  <el-radio :disabled="isFullNum" v-for="item in radioArr" :key="item.id" :label="item.id" @change="redioChange(item.id, scope.row.Id, scope.row)">{{ item.name }}</el-radio>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column v-if="excelType == 'YiDong'" align="center" prop="" key="YiDong" label="操作">
              <template #default="{ row }">
                <span :style="yidongStyle(row)">{{ yidongStatus(row) }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="isCancelApply" min-width="135" align="center" prop="" key="cz1" label="操作">
              <template #default="scope">
                <span class="editsty" @click="cancelApply(scope.row, 0)">取消报名</span>
              </template>
            </el-table-column>
            <el-table-column
              min-width="215"
              key="salonopen"
              v-if="props.subscribe == '报名失败详情' && ((Teleconference && isLimitPeople == 0) || AppointmentCall || excelType == 'ExpertSalon' || excelType == 'OfflineResearch')"
              align="center"
              prop=""
              label="操作"
            >
              <template #default="scope">
                <el-switch :disabled="isFullNum" @change="switchChange(scope.row)" v-model="scope.row.SalonOperation" active-text="加入报名" inactive-text="限制报名"> </el-switch>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <div style="margin: 10px 0" v-if="props.subscribe !== '报名失败详情' && props.subscribe !== '预约外呼详情'">
            <span style="margin-left: 30px">
              <el-button type="primary" v-if="AppointmentCall || excelType == 'CClass' || excelType == 'Teleconference'" @click="appointmentCallDownloadHandler">下载名单</el-button>
              <a :href="exportUser" download v-else>
                <el-button type="primary">下载名单</el-button>
              </a>
            </span>
            <el-button style="margin-left: 30px" v-if="props.subscribe == '预约外呼详情' || (Teleconference && props.subscribe !== '报名失败详情')" type="primary" plain @click="okBtn">取消</el-button>
            <el-button v-else style="margin-left: 30px" type="primary" plain @click="okBtn">知道了</el-button>
          </div>
          <div v-if="props.subscribe == '报名失败详情'">
            <el-button style="margin: 10px 0" type="primary" @click="okBtn">知道了</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
    <edit-mobile v-model:editMobileDialogVisible="editMobileDialogVisible" @getsDataList="getsDataList" :editMobileId="editMobileId" :outboundMobile="outboundMobile" />
    <el-dialog draggable width="390px" title="下载名单" :append-to-body="true" v-model="isNameListDownloadShow" :modal-append-to-body="false" @close="isNameListDownloadShow = false">
      <div>
        <el-select style="width: 100%" v-model="downloadTypeName" placeholder="请选择">
          <el-option v-for="item in nameListDownload" :key="item.value" :label="item.type" :value="item.value"> </el-option>
        </el-select>
      </div>
      <div style="display: flex; justify-content: center; margin: 30px 0 20px">
        <el-button type="primary" @click="handleConfirmDownload">确定</el-button>
        <el-button type="primary" plain @click="isNameListDownloadShow = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.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>
