<template>
  <div class="container-summaryRemind">
    <el-dialog v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center :visible.sync="summaryRemindDlg" width="1000px" :before-close="confirmPerson" :append-to-body="true">
      <div slot="title" 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">{{ subscribe }}</span>
      </div>
      <div>
        <template v-if="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="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 slot-scope="{ row }">
                <span class="editsty" @click="cancelTableHandler(row)"> {{ subscribe === "纪要预约人数" ? "取消预约" : "取消提醒" }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { raiInterface } from "@/api/api.js";
export default {
  name: "",
  components: {},
  props: {
    summaryRemindDlg: {
      type: Boolean,
      default: false,
    },
    subscribe: {
      type: String,
      default: "",
    },
    dialogVisibleId: {
      type: Number,
    },
  },
  data() {
    return {
      fromData: {}, //数据
      dataList: [], //表格
    };
  },
  computed: {},
  watch: {
    summaryRemindDlg: {
      handler(newval) {
        if (newval) {
          this.getsDataList();
        }
      },
    },
  },
  created() {},
  mounted() {},
  methods: {
    //获取表格数据
    async getsDataList() {
      const res =
        this.subscribe === "纪要预约人数"
          ? await raiInterface.activitySignupSummaryList({ ActivityId: this.dialogVisibleId })
          : await raiInterface.activitySignupReminder({ ActivityId: this.dialogVisibleId });
      if (res.Ret === 200) {
        this.fromData = res.Data;
        this.$nextTick(() => {
          this.dataList = res.Data.List;
        });
      }
    },
    //弹框的关闭事件
    confirmPerson() {
      this.$parent.summaryRemindDlg = false;
    },
    //取消提醒、取消外呼
    cancelTableHandler(item) {
      let str = this.subscribe === "纪要预约人数" ? "纪要预约" : "会议提醒";
      this.$confirm(`确定要取消该用户的${str}吗？`, `取消${str}`, {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(async () => {
          const res = this.subscribe === "纪要预约人数" ? await raiInterface.activityAppointmentCancel({ SignupId: item.Id }) : await raiInterface.activityReminderCancel({ SignupId: item.Id });
          if (!res.Ret === 200) return;
          this.$message({
            type: "success",
            message: `取消${str}成功!`,
          });
          this.getsDataList();
          this.$parent.getsDataList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
  },
};
</script>
<style lang="scss"></style>
