<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>
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </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 slot-scope="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 slot-scope="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 slot-scope="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 slot-scope="{ row }">
                    {{ row.StopTime }}
                    <span v-if="row.StopTime">s</span>
                  </template>
                </el-table-column>
              </el-table>
              <p slot="reference" 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 slot-scope="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 :dialogVisible.sync="dialogVisible" :detailData.sync="detailData" />
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      center
      :visible.sync="dialogLeparticaShow"
      customClass="custom-applydialog"
      :before-close="confirmPerson"
    >
      <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">
          {{ excelType == "Teleconference" && isLimitPeople == 1 ? "预约外呼详情" : "报名详情" }}
        </span>
      </div>
      <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 slot-scope="{ row }">
              <span>
                {{ row.SignupType == 1 ? "预约外呼" : row.SignupType == 2 ? "自主拨入" : row.SignupType == 4 ? "自主入会" : "" }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmPerson">知道了</el-button>
      </span>
    </el-dialog>
    <matching-dlg :matchingDlgShow.sync="matchingDlgShow" :matchingId="matchingId" />
    <partical-dialog
      :type="attendType"
      :offlineId="offlineId"
      :submitDialog.sync="submitDialog"
      :dialogVisiblepartica.sync="dialogVisiblepartica"
      :particlaDlg="particlaDlg"
    />
    <search-customer-dlg :searchCustomer.sync="searchCustomer" />
  </div>
</template>

<script>
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";

export default {
  name: "meetingManagement",
  components: { mPage, AtcParticulars, MatchingDlg, ParticalDialog, SearchCustomerDlg },
  props: {},
  data() {
    return {
      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: "",
      },
    };
  },
  computed: {
    // 弘则 研选 是否是研选
    isResearch(){
      return this.$route.path.indexOf("purchaser")!=-1?true:false
    },
    exportUser() {
      return import.meta.env.VITE_APP_API_ROOT + "/cygx/activityMeet/meetingExport?" + localStorage.getItem("auth") || "";
    },
    isYiDongShow() {
      return this.isYidongConduct === 1 || this.excelType !== "CClass";
    },
    isCClassNot() {
      return this.isYidongConduct != 1 && this.excelType == "CClass";
    },
    attendType(){
      return this.meetingTab == 1 ? "" : "线下到会";
    }
  },
  watch: {
    keyWord() {
      this.page_no = 1;
      this.init();
      this.getsDataList();
    },
    meetingTab(value) {
      if(!this.keyWord){
        this.page_no = 1;
        this.init();
        this.getsDataList();
      } else this.keyWord=""
    },
  },
  created() {},
  mounted() {
    !this.isResearch && this.chartPermission();
    this.getsDataList();
  },
  methods: {
    init() {
      this.industry = ""; //行业
      this.issueTime = ""; //时间
      this.cactivityTypeVal = ""; //活动
    },
    //获取行业
    chartPermission() {
      raiInterface.chartPermission({IsHideResearch:!this.isResearch}).then((res) => {
        if (res.Ret === 200) {
          this.chartPermissionList = res.Data.List;
        }
      });
    },
    //活动类型
    activityType() {
      raiInterface
        .activityTypeMeetType({
          MeetType: this.meetingTab,
          IsResearch:this.isResearch
        })
        .then((res) => {
          if (res.Ret === 200) {
            this.cactivityTypeList = res.Data.List;
          }
        });
    },
    //change事件
    conditionChange() {
      this.page_no = 1;
      this.getsDataList();
    },
    //列表表格
    getsDataList() {
      raiInterface
        .activityMeetList({
          CurrentIndex: this.page_no,
          PageSize: this.PageSize,
          StartDate: this.issueTime[0],
          EndDate: this.issueTime[1],
          KeyWord: this.keyWord,
          SearchType: this.tabsPitchonType,
          ChartPermissionId: this.industry,
          ActivityTypeId: this.cactivityTypeVal,
          MeetType: this.meetingTab,
          IsResearch:this.isResearch
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          this.dataList = res.Data.List;
          this.total = res.Data.Paging.Totals;
        });
    },
    //分页
    handleCurrentChange(page) {
      this.page_no = page;
      this.getsDataList();
    },
    //手动匹配
    matching(id) {
      this.matchingId = id;
      this.matchingDlgShow = true;
    },
    //到会详情
    attendMeeting(item, text) {
      if (item.SubmitMeetingType == 1 || item.YidongActivityId) {
        this.offlineId = item.ActivityId;
        this.particlaDlg = {
          id: item.ActivityId,
          title: text,
          type: item.SubmitMeetingType,
        };
        this.dialogVisiblepartica = true;
      } else {
        this.goDetail(item.ActivityId);
      }
    },
    //详情弹框
    particulars(id) {
      if(this.meetingTab == 1){
        raiInterface
        .appointmentList({
          ActivityId: id,
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          this.excelType = res.Data.ExcelType;
          this.isLimitPeople = res.Data.IsLimitPeople;
          this.totalDlg = res.Data.Total;
          this.myTotalDlg = res.Data.MyTotal;
          this.memberType = res.Data.MemberType;
          this.isYidongConduct = res.Data.IsYidongConduct;
          this.$nextTick(() => {
            this.tableDataSub = res.Data.List;
          });
        });
        this.dialogLeparticaShow = true;
      }else if(this.meetingTab == 2){
        this.particularsOffline(id,'报名详情')
      }

    },
    particularsOffline(id,text){
      this.offlineId = id;
      this.particlaDlg = {
        id,
        title: text,
      };
      this.dialogVisiblepartica = true;
    },
    // meetingExport() {
    //   const loading = this.$loading({
    //     lock: true,
    //     text: "客户参会详情文件下载中...",
    //     spinner: "el-icon-loading",
    //     background: "rgba(0, 0, 0, 0.7)",
    //   });
    //   const xhr = new XMLHttpRequest();
    //   xhr.open("GET", this.exportUser, true);
    //   xhr.responseType = "blob";
    //   xhr.onload = function () {
    //     if (this.status == 200) {
    //       loading.close();
    //       var blob = this.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 {
    //       this.$message.error("下载失败！");
    //     }
    //   };
    //   xhr.send();
    // },
    //到会情况
    // particularsSubmit(id) {
    //   this.companyId = id;
    //   $("#fileImport").click();
    // },
    //点击标题的弹框
    titleBtnClick(id) {
      raiInterface.activityDetail({ ActivityId: Number(id) }).then((res) => {
        if (res.Ret == 200) {
          this.detailData = res.Data;
        }
      });
      this.dialogVisible = true;
    },
    //关闭弹框
    confirmPerson() {
      this.tableDataSub = [];
      this.dialogLeparticaShow = false;
    },
    //到会情况
    arriveHandel(id) {
      this.offlineId = id;
      this.submitDialog = true;
    },
    // 上传
    // fileSelected(type) {
    //   const that = this;
    //   if (document.getElementById("fileImport").files[0]) {
    //     let hostfile = document.getElementById("fileImport").files[0];
    //     let size = Math.floor(hostfile.size / 1024 / 1024);
    //     if (size > 200) {
    //       that.$message.error("上传文件大小不能大于200M！");
    //       hostfile = {};
    //       return false;
    //     }
    //     if (hostfile.name.toLowerCase().includes(".xlsx")) {
    //       let form = new FormData();
    //       form.append("File", hostfile); //hostfile.name
    //       form.append("ActivityId", that.companyId);

    //       raiInterface.activityMeetImport(form).then((res) => {
    //         if (res.Ret === 200) {
    //           that.isShowImportDia = true;
    //           that.importParams = form;
    //           that.importData = res.Data || [];
    //           this.$confirm("参会情况已提交成功，可点击【到会详情】查看", "提示", {
    //             confirmButtonText: "知道了",
    //             type: "warning",
    //             showCancelButton: false,
    //           });
    //           this.getsDataList();
    //         }
    //         $("#fileImport").val("");
    //         hostfile = {};
    //       });
    //     } else {
    //       that.$message.error("请上传.xlsx的文件格式！");
    //     }
    //   }
    // },
    goDetail(id) {
      let routerUrl = this.$router.resolve({
        path: "attendMeeting",
        query: {
          id: id,
        },
      });
      window.open(routerUrl.href, "_blank");
    },
    async popoverMouseenter(id) {
      const res = await raiInterface.activityMeetHistoryList({
        ActivityId: id,
      });
      if (res.Ret === 200) {
        this.gridData = res.Data.List || [];
      }
    },
  },
};
</script>
<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>
