<script setup>
import { ref, watch, onMounted, nextTick } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { raiInterface } from "@/api/api.js";

const props = defineProps({
  summaryRemindDlg: {
    type: Boolean,
    default: false,
  },
  subscribe: {
    type: String,
    default: "",
  },
  dialogVisibleId: {
    type: Number,
  },
});

const fromData = ref({}); //数据
const dataList = ref([]); //表格

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

//获取表格数据
async function getsDataList() {
  const res =
    props.subscribe === "纪要预约人数"
      ? await raiInterface.activitySignupSummaryList({
          ActivityId: props.dialogVisibleId,
        })
      : await raiInterface.activitySignupReminder({
          ActivityId: props.dialogVisibleId,
        });
  if (res.Ret === 200) {
    fromData.value = res.Data;
    nextTick(() => {
      dataList.value = res.Data.List;
    });
  }
}

const $emit = defineEmits(["getsDataList"]);
//弹框的关闭事件
function confirmPerson() {
  $emit("update:summaryRemindDlg", false);
}
//取消提醒、取消外呼
function cancelTableHandler(item) {
  let str = props.subscribe === "纪要预约人数" ? "纪要预约" : "会议提醒";
  ElMessageBox.confirm(`确定要取消该用户的${str}吗？`, `取消${str}`, {
    confirmButtonText: "是",
    cancelButtonText: "否",
    type: "warning",
  })
    .then(async () => {
      const res =
        props.subscribe === "纪要预约人数"
          ? await raiInterface.activityAppointmentCancel({
              SignupId: item.Id,
            })
          : await raiInterface.activityReminderCancel({
              SignupId: item.Id,
            });
      if (!res.Ret === 200) return;
      ElMessage({
        type: "success",
        message: `取消${str}成功!`,
      });
      getsDataList();
      $emit("getsDataList");
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消操作",
      });
    });
}
</script>

<template>
  <div class="container-summaryRemind">
    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center v-model="props.summaryRemindDlg" width="1000px" :before-close="confirmPerson" :append-to-body="true">
      <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">{{ props.subscribe }}</span>
        </div>
      </template>
      <div>
        <template v-if="props.subscribe === '纪要预约人数'">
          <span v-if="fromData.ExcelType !== 'ExpertSalon' && fromData.ExcelType !== 'OfflineResearch'">共有{{ fromData.Total }}人预约纪要，其中本人名下{{ fromData.MyTotal }}人</span>
        </template>
        <template v-else>共有{{ fromData.Total }}人设置会议提醒，其中本人名下{{ fromData.MyTotal }}人</template>
        <div style="margin: 30px 0">
          <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="fromData.ExcelType == 'AppointmentCall' || fromData.ExcelType == 'Teleconference'"
              min-width="115"
              align="center"
              prop="Mobile"
              key="mobile"
              label="手机号"
            ></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="props.subscribe === '纪要预约人数'" align="center" prop="CreateTime" key="create" label="预约时间"></el-table-column>
            <el-table-column v-else align="center" prop="CreateTime" key="createTime" min-width="160" label="报名时间"></el-table-column>
            <el-table-column align="center" label="操作">
              <template #default="{ row }">
                <span class="editsty" @click="cancelTableHandler(row)"> {{ props.subscribe === "纪要预约人数" ? "取消预约" : "取消提醒" }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss"></style>
