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

import mPage from "@/components/mPage.vue";
import { raiInterface } from "@/api/api.js";
import AtcParticulars from "../components/atcParticulars.vue";
import MatchingDlg from "../components/matchingDlg.vue";
import ParticalDialog from "../components/particalDialog.vue";
import SearchCustomerDlg from "../components/apply/searchCustomerDlg.vue";
import { Search } from "@element-plus/icons-vue";

import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
const $route = useRoute();
const $router = useRouter();

const pageState = reactive({
  meetingTab: 1,
  dataList: [], //表格的列表
  tableDataSub: [],
  page_no: sessionStorage.getItem("interviewListBack") ? JSON.parse(sessionStorage.getItem("interviewListBack")).page_no : 1,
  total: 0, //条数
  PageSize: 10, //每页显示几条
  keyWord: "",
  industry: "", //行业
  cactivityTypeVal: "", //活动
  chartPermissionList: [], //行业的数组
  cactivityTypeList: [], //活动类型
  issueTime: "", //时间
  tabsPitchonType: 1,
  detailData: {}, //
  dialogVisible: false,
  dialogLeparticaShow: false,
  companyId: "", //
  excelType: "",
  isLimitPeople: "",
  totalDlg: 0,
  myTotalDlg: 0,
  memberType: "",
  matchingDlgShow: false, //匹配弹框
  matchingId: "",
  gridData: [],
  submitDialog: false, //
  offlineId: "",
  dialogVisiblepartica: false, //
  searchCustomer: false, //搜索流失客户
  isYidongConduct: 0,
  particlaDlg: {
    isSpecial: false,
    id: "",
    title: "",
    type: "",
  },
});

// 弘则 研选 是否是研选
const isResearch = computed(() => {
  return $route.path.indexOf("purchaser") != -1 ? true : false;
});

watch(
  () => pageState.keyWord,
  () => {
    pageState.page_no = 1;
    init();
    getsDataList();
  }
);
watch(
  () => pageState.meetingTab,
  (value) => {
    if (!pageState.keyWord) {
      pageState.page_no = 1;
      init();
      getsDataList();
    } else pageState.keyWord = "";
  }
);

onMounted(() => {
  !isResearch.value && chartPermission();
  getsDataList();
});

function init() {
  pageState.industry = ""; //行业
  pageState.issueTime = ""; //时间
  pageState.cactivityTypeVal = ""; //活动
}
//获取行业
function chartPermission() {
  raiInterface.chartPermission({ IsHideResearch: !isResearch.value }).then((res) => {
    if (res.Ret === 200) {
      pageState.chartPermissionList = res.Data.List;
    }
  });
}
//活动类型
function activityType() {
  raiInterface
    .activityTypeMeetType({
      MeetType: pageState.meetingTab,
      IsResearch: isResearch.value,
    })
    .then((res) => {
      if (res.Ret === 200) {
        pageState.cactivityTypeList = res.Data.List;
      }
    });
}
//change事件
function conditionChange() {
  pageState.page_no = 1;
  getsDataList();
}
//列表表格
function getsDataList() {
  raiInterface
    .activityMeetList({
      CurrentIndex: pageState.page_no,
      PageSize: pageState.PageSize,
      StartDate: pageState.issueTime[0],
      EndDate: pageState.issueTime[1],
      KeyWord: pageState.keyWord,
      SearchType: pageState.tabsPitchonType,
      ChartPermissionId: pageState.industry,
      ActivityTypeId: pageState.cactivityTypeVal,
      MeetType: pageState.meetingTab,
      IsResearch: isResearch.value,
    })
    .then((res) => {
      if (res.Ret !== 200) return;
      pageState.dataList = res.Data.List;
      pageState.total = res.Data.Paging.Totals;
    });
}
//分页
function handleCurrentChange(page) {
  pageState.page_no = page;
  getsDataList();
}
//手动匹配
function matching(id) {
  pageState.matchingId = id;
  pageState.matchingDlgShow = true;
}
//到会详情
function attendMeeting(item, text) {
  if (item.SubmitMeetingType == 1 || item.YidongActivityId) {
    pageState.offlineId = item.ActivityId;
    pageState.particlaDlg = {
      id: item.ActivityId,
      title: text,
      type: item.SubmitMeetingType,
    };
    pageState.dialogVisiblepartica = true;
  } else {
    goDetail(item.ActivityId);
  }
}
//详情弹框
function particulars(id) {
  if (pageState.meetingTab == 1) {
    raiInterface
      .appointmentList({
        ActivityId: id,
      })
      .then((res) => {
        if (res.Ret !== 200) return;
        pageState.excelType = res.Data.ExcelType;
        pageState.isLimitPeople = res.Data.IsLimitPeople;
        pageState.totalDlg = res.Data.Total;
        pageState.myTotalDlg = res.Data.MyTotal;
        pageState.memberType = res.Data.MemberType;
        pageState.isYidongConduct = res.Data.IsYidongConduct;
        nextTick(() => {
          pageState.tableDataSub = res.Data.List;
        });
      });
    pageState.dialogLeparticaShow = true;
  } else if (pageState.meetingTab == 2) {
    particularsOffline(id, "报名详情");
  }
}
function particularsOffline(id, text) {
  pageState.offlineId = id;
  pageState.particlaDlg = {
    id,
    title: text,
  };
  pageState.dialogVisiblepartica = true;
}

//点击标题的弹框
function titleBtnClick(id) {
  raiInterface.activityDetail({ ActivityId: Number(id) }).then((res) => {
    if (res.Ret == 200) {
      pageState.detailData = res.Data;
    }
  });
  pageState.dialogVisible = true;
}
//关闭弹框
function confirmPerson() {
  pageState.tableDataSub = [];
  pageState.dialogLeparticaShow = false;
}
//到会情况
function arriveHandel(id) {
  pageState.offlineId = id;
  pageState.submitDialog = true;
}

function goDetail(id) {
  let routerUrl = $router.resolve({
    path: "attendMeeting",
    query: {
      id: id,
    },
  });
  window.open(routerUrl.href, "_blank");
}
async function popoverMouseenter(id) {
  const res = await raiInterface.activityMeetHistoryList({
    ActivityId: id,
  });
  if (res.Ret === 200) {
    pageState.gridData = res.Data.List || [];
  }
}

// 下面这个三个是判断的
const isYiDongShow = computed(() => {
  return pageState.isYidongConduct === 1 || pageState.excelType !== "CClass";
});
const isCClassNot = computed(() => {
  return pageState.isYidongConduct != 1 && pageState.excelType == "CClass";
});
const attendType = computed(() => {
  return pageState.meetingTab == 1 ? "" : "线下到会";
});

const {
  meetingTab,
  dataList,
  tableDataSub,
  page_no,
  total,
  PageSize,
  keyWord,
  industry,
  cactivityTypeVal,
  chartPermissionList,
  cactivityTypeList,
  issueTime,
  tabsPitchonType,
  detailData,
  dialogVisible,
  dialogLeparticaShow,
  companyId,
  excelType,
  isLimitPeople,
  totalDlg,
  myTotalDlg,
  memberType,
  matchingDlgShow,
  matchingId,
  gridData,
  submitDialog,
  offlineId,
  dialogVisiblepartica,
  searchCustomer,
  isYidongConduct,
  particlaDlg,
} = toRefs(pageState);
</script>

<template>
  <!-- 实际到会管理页面 -->
  <div class="container-practical">
    <!-- 头部el-card -->
    <el-card style="margin-bottom: 20px">
      <div class="top-card-box">
        <el-radio-group v-model="meetingTab" class="tabs-box">
          <el-radio-button :label="1">线上到会管理</el-radio-button>
          <el-radio-button :label="2">线下到会管理</el-radio-button>
        </el-radio-group>
        <div>
          <el-input v-model="keyWord" placeholder="请输入活动名称" style="width: 521px" clearable :prefix-icon="Search"> </el-input>
        </div>
      </div>
    </el-card>
    <!-- 内容el-card -->
    <el-card>
      <!-- 选择部分 -->
      <div class="screen-box">
        <div>
          <el-select placeholder="行业" clearable v-model="industry" @change="conditionChange" style="margin-bottom: 20px" v-if="!isResearch">
            <el-option v-for="item in chartPermissionList" :label="item.PermissionName" :key="item.ChartPermissionId" :value="item.ChartPermissionId"></el-option>
          </el-select>
          <el-select placeholder="活动类型" clearable @focus="activityType" v-model="cactivityTypeVal" @change="conditionChange" style="margin-bottom: 20px">
            <el-option v-for="item in cactivityTypeList" :label="item.ActivityTypeName" :key="item.ActivityTypeId" :value="item.ActivityTypeId"></el-option>
          </el-select>
          <date-picker v-model="issueTime" type="date" range placeholder="活动时间" value-type="format" @change="conditionChange"> </date-picker>
        </div>
        <div class="top-buttons">
          <el-button type="primary" @click="searchCustomer = true" v-if="meetingTab == 1">搜索流失客户</el-button>
          <el-button style="margin-left: 20px" type="primary" @click="$router.push(isResearch ? '/purchaserAppointment' : '/appointment')">查看客户爽约记录</el-button>
        </div>
      </div>
      <!-- 表格部分 -->
      <el-table :data="dataList" style="width: 100%; margin-top: 20px" border="">
        <el-table-column min-width="400" align="center" label="活动名称">
          <template #default="scope">
            <span class="editsty" @click="titleBtnClick(scope.row.ActivityId)"> {{ scope.row.ActivityName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ChartPermissionName" align="center" label="行业"></el-table-column>
        <el-table-column min-width="120" prop="ActivityTypeName" align="center" label="活动类型"></el-table-column>
        <el-table-column min-width="219" prop="ActivityTimeText" align="center" label="活动时间"></el-table-column>
        <el-table-column prop="" align="center" label="报名人数">
          <template #default="scope">
            <span class="editsty" @click="particulars(scope.row.ActivityId)">{{ scope.row.SignupPeopleNum }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="105" prop="MeetPeopleNum" align="center" label="实际参会人数"></el-table-column>
        <el-table-column min-width="105" prop="UpdateTime" align="center" label="数据更新时间" v-if="meetingTab == 1"></el-table-column>
        <el-table-column min-width="115" align="center" label="操作" v-if="meetingTab == 1">
          <template #default="scope">
            <!-- <input type="file" size="small" name="file" @change="fileSelected()" id="fileImport" class="true-file" style="display: none" /> -->
            <p class="editsty" v-if="scope.row.IsShowHandMovement" @click="matching(scope.row.ActivityId)">&nbsp;&nbsp;手动匹配</p>
            <!-- <span class="editsty" v-if="scope.row.IsYidongConduct === 1" @click="particularsSubmit(scope.row.ActivityId)"
              >{{ scope.row.IsSubmitMeeting === 0 ? "上传" : "修改" }}参会表格</span
            > -->
            <span class="editsty" v-if="scope.row.IsShowSubmitMeeting" @click="arriveHandel(scope.row.ActivityId)">&nbsp;&nbsp;提交到会情况</span>
            <span class="editsty" v-if="scope.row.IsShowUpdateMeeting" @click="arriveHandel(scope.row.ActivityId)">&nbsp;&nbsp;修改到会情况</span>
            <span class="editsty" v-if="scope.row.IsShowAttendanceDetails" @click="attendMeeting(scope.row, '到会详情')">&nbsp;&nbsp;到会详情</span>
            <el-popover v-else-if="scope.row.IsSubmitMeeting == 1 && scope.row.OperationStyle == 2" width="500" trigger="hover" placement="right">
              <p>到会详情浏览记录</p>
              <el-table :data="gridData" style="width: 100%" border height="350">
                <el-table-column align="center" property="RealName" label="浏览人"></el-table-column>
                <el-table-column align="center" property="CreateTime" label="浏览时间"></el-table-column>
                <el-table-column align="center" property="StopTime" label="停留时长">
                  <template #default="{ row }">
                    {{ row.StopTime }}
                    <span v-if="row.StopTime">s</span>
                  </template>
                </el-table-column>
              </el-table>
              <p class="editsty" @mouseenter="popoverMouseenter(scope.row.ActivityId)" @click="goDetail(scope.row.ActivityId)">&nbsp;&nbsp;到会详情</p>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column min-width="200" align="center" label="操作" v-else-if="meetingTab == 2">
          <template #default="scope">
            <span v-if="scope.row.OperationStyle == 1" class="editsty" @click="arriveHandel(scope.row.ActivityId)">&nbsp;&nbsp;提交到会情况</span>

            <span class="editsty" v-if="scope.row.OperationStyle == 2" @click="arriveHandel(scope.row.ActivityId)">&nbsp;&nbsp;修改到会情况</span>

            <span class="editsty" v-if="scope.row.OperationStyle == 2" @click="particularsOffline(scope.row.ActivityId, '到会详情')">&nbsp;&nbsp;到会详情</span>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="toolbar">
        <m-page :total="total" :page_no="page_no" :pageSize="PageSize" @handleCurrentChange="handleCurrentChange" />
      </el-col>
    </el-card>
    <!-- 详情弹框 -->
    <atc-particulars v-model:dialogVisible="dialogVisible" v-model::detailData="detailData" />
    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center v-model="dialogLeparticaShow" customClass="custom-applydialog" :before-close="confirmPerson">
      <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">
            {{ excelType == "Teleconference" && isLimitPeople == 1 ? "预约外呼详情" : "报名详情" }}
          </span>
        </div>
      </template>
      <div>
        <p style="margin-bottom: 10px" v-if="isYiDongShow">
          <template v-if="memberType == 'Admin'"> 共有{{ totalDlg }}人{{ excelType == "AppointmentCall" ? "预约外呼" : "报名" }} </template>
          <template v-else-if="memberType == 'Sale'"> 共有{{ totalDlg }}人{{ excelType == "AppointmentCall" ? "预约外呼" : "报名" }}，其中本人名下客户{{ myTotalDlg }}人 </template>
          <template v-else> 共有{{ totalDlg }}人{{ excelType == "AppointmentCall" ? "预约外呼" : "报名" }}，其中本组名下客户{{ myTotalDlg }}人 </template>
        </p>
        <p style="margin-bottom: 10px" v-else>
          <template v-if="memberType == 'Admin'"> 共有{{ totalDlg }}人报名</template>
        </p>
        <el-table max-height="260px" :data="tableDataSub" border style="width: 100%">
          <el-table-column width="130" align="center" prop="RealName" key="name" label="姓名"></el-table-column>
          <el-table-column width="150" align="center" prop="Mobile" key="mobile" label="手机号" v-if="isYiDongShow"></el-table-column>
          <el-table-column width="150" align="center" prop="OutboundMobile" key="outboundMobile" label="外呼号码" v-if="isYiDongShow"></el-table-column>
          <el-table-column align="center" prop="CompanyName" key="company" label="公司名称" v-if="isCClassNot"></el-table-column>
          <el-table-column width="150" align="center" prop="SellerName" key="seller" label="所属销售"></el-table-column>
          <el-table-column min-width="110" key="meeting" align="center" label="参会方式" v-if="isYiDongShow">
            <template #default="{ row }">
              <span>
                {{ row.SignupType == 1 ? "预约外呼" : row.SignupType == 2 ? "自主拨入" : row.SignupType == 4 ? "自主入会" : "" }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="confirmPerson">知道了</el-button>
        </span>
      </template>
    </el-dialog>
    <matching-dlg v-model:matchingDlgShow="matchingDlgShow" :matchingId="matchingId" @getsDataList="getsDataList" />
    <partical-dialog
      @getsDataList="getsDataList"
      @particulars="particulars"
      :type="attendType"
      :offlineId="offlineId"
      v-model:submitDialog="submitDialog"
      v-model:dialogVisiblepartica="dialogVisiblepartica"
      :particlaDlg="particlaDlg"
    />
    <search-customer-dlg v-model:searchCustomer="searchCustomer" />
  </div>
</template>

<style scoped lang="scss">
.container-practical {
  .top-card-box {
    display: flex;
    justify-content: space-between;
  }
  .screen-box {
    display: flex;
    justify-content: space-between;
    .top-buttons {
      display: flex;
      align-items: flex-start;
    }
    .el-select {
      margin-right: 25px;
    }
  }
  .mx-datepicker {
    width: 220px !important;
    margin-right: 25px;
  }
  .custom-applydialog {
    height: 820px;
  }
}
</style>
