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

import mPage from "@/components/mPage.vue";
import { raiInterface } from "@/api/api.js";
import AtcParticulars from "../components/atcParticulars.vue";
import ParticalDialog from "../components/particalDialog.vue";

import { ElMessageBox, ElMessage, ElLoading } from "element-plus";

import { Search } from "@element-plus/icons-vue";

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

const pageState = reactive({
  dataList: [], //表格的列表
  page_no: sessionStorage.getItem("interviewListBack") ? JSON.parse(sessionStorage.getItem("interviewListBack")).page_no : 1,
  total: 0, //条数
  PageSize: 10, //每页显示几条
  keyWord: "",
  dialogVisiblepartica: false, //详情弹框
  particlaDlg: {
    isSpecial: false,
    id: "",
    title: "",
  },
  submitDialog: false,
  industry: "", //行业
  cactivityTypeVal: "", //活动
  chartPermissionList: [], //行业的数组
  cactivityTypeList: [], //活动类型
  issueTime: "", //时间
  tabsPitchonType: 1,
  detailData: {}, //
  dialogVisible: false,
  offlineId: "",
});

const exportUser = computed(() => {
  return import.meta.env.VITE_APP_API_ROOT + "/cygx/activityMeet/meetingExport?" + localStorage.getItem("auth") || "";
});

watch(
  () => pageState.keyWord,
  () => {
    pageState.page_no = 1;
    init();
    getsDataList();
  }
);

onMounted(() => {
  chartPermission();
  getsDataList();
});

function init() {
  pageState.industry = ""; //行业
  pageState.issueTime = ""; //时间
  pageState.cactivityTypeVal = ""; //活动
}
function meetingExport() {
  const loading = ElLoading.service({
    lock: true,
    text: "客户参会详情文件下载中...",
    spinner: "el-icon-loading",
    background: "rgba(0, 0, 0, 0.7)",
  });
  const xhr = new XMLHttpRequest();
  xhr.open("GET", pageState.exportUser, true);
  xhr.responseType = "blob";
  xhr.onload = function () {
    if (pageState.status == 200) {
      loading.close();
      var blob = pageState.response;
      var a = document.createElement("a");
      var url = window.URL.createObjectURL(blob); //创建url对象
      a.href = url;
      a.download = "客户参会详情.xlsx";
      a.click();
      window.URL.revokeObjectURL(url); //释放url对象
    } else {
      ElMessage.error("下载失败！");
    }
  };
  xhr.send();
}
//获取行业
function chartPermission() {
  raiInterface.chartPermission().then((res) => {
    if (res.Ret === 200) {
      pageState.chartPermissionList = res.Data.List;
    }
  });
}
//活动类型
function activityType() {
  raiInterface
    .activityTypeMeetType({
      MeetType: 2,
    })
    .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: 2,
    })
    .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 particulars(id, text) {
  pageState.offlineId = id;
  pageState.particlaDlg = {
    id: id,
    title: text,
  };
  pageState.dialogVisiblepartica = true;
}
//到会情况
function particularsSubmit(id) {
  pageState.offlineId = id;
  pageState.submitDialog = true;
}
//点击标题的弹框
function titleBtnClick(id) {
  raiInterface.activityDetail({ ActivityId: Number(id) }).then((res) => {
    if (res.Ret == 200) {
      pageState.detailData = res.Data;
    }
  });
  pageState.dialogVisible = true;
}
</script>

<template>
  <!-- 实际到会管理页面 -->
  <div class="container-practical">
    <!-- 头部el-card -->
    <el-card style="margin-bottom: 20px">
      <div class="top-card-box">
        <div class="tabs-box"></div>
        <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">
            <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>
          <!-- <a>
               <el-button type="primary" @click="meetingExport">下载客户参会记录</el-button>
          </a> -->
          <el-button style="margin-left: 20px" type="primary" @click="$router.push('/appointment')">查看客户爽约记录</el-button>
        </div>
      </div>
      <!-- 表格部分 -->
      <el-table :data="dataList" style="width: 100%; margin-top: 20px" border="">
        <el-table-column min-width="350" 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="200" align="center" label="操作">
          <template #default="scope">
            <span v-if="scope.row.OperationStyle == 1" class="editsty" @click="particularsSubmit(scope.row.ActivityId)">&nbsp;&nbsp;提交到会情况</span>

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

            <span class="editsty" v-if="scope.row.OperationStyle == 2" @click="particulars(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="10" @handleCurrentChange="handleCurrentChange" />
      </el-col>
    </el-card>

    <!-- 详情弹框 -->
    <atc-particulars v-model:dialogVisible="dialogVisible" v-model:detailData="detailData" />
    <partical-dialog  @getsDataList="getsDataList" @particulars="particulars" type="线下到会" :offlineId="offlineId" v-model:dialogVisibleparticav-model="dialogVisiblepartica" :particlaDlg="particlaDlg" v-model:submitDialog="submitDialog" />
  </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;
    .el-select {
      margin-right: 25px;
    }
  }
  .mx-datepicker {
    width: 220px !important;
    margin-right: 25px;
  }
}
</style>
