<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>
            <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">
            <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 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="200" align="center" label="操作">
          <template slot-scope="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 :dialogVisible.sync="dialogVisible" :detailData.sync="detailData" />
    <partical-dialog
      type="线下到会"
      :offlineId="offlineId"
      :dialogVisiblepartica.sync="dialogVisiblepartica"
      :particlaDlg="particlaDlg"
      :submitDialog.sync="submitDialog"
    />
  </div>
</template>

<script>
import mPage from "@/components/mPage.vue";
import { raiInterface } from "@/api/api.js";
import AtcParticulars from "../components/atcParticulars.vue";
import ParticalDialog from "../components/particalDialog.vue";
export default {
  name: "",
  components: { mPage, ParticalDialog, AtcParticulars },
  props: {},
  data() {
    return {
      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: "",
    };
  },
  computed: {
    exportUser() {
      return import.meta.env.VITE_APP_API_ROOT + "/cygx/activityMeet/meetingExport?" + localStorage.getItem("auth") || "";
    },
  },
  watch: {
    keyWord() {
      this.page_no = 1;
      this.init();
      this.getsDataList();
    },
  },
  created() {},
  mounted() {
    this.chartPermission();
    this.getsDataList();
  },
  methods: {
    init() {
      this.industry = ""; //行业
      this.issueTime = ""; //时间
      this.cactivityTypeVal = ""; //活动
    },
    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 _b = xhr.getResponseHeader('Content-Disposition');
          //var _c = _b.split('filename=')[1];
          //var _d = decodeURIComponent(_c.split('.')[0])+'.'+_c.split('.')[1];
          var blob = this.response;
          var a = document.createElement("a");
          var url = window.URL.createObjectURL(blob); //创建url对象
          a.href = url;
          // a.download = _d;
          a.download = "客户参会详情.xlsx";
          a.click();
          window.URL.revokeObjectURL(url); //释放url对象
        } else {
          this.$message.error("下载失败！");
        }
      };
      xhr.send();
    },
    //获取行业
    chartPermission() {
      raiInterface.chartPermission().then((res) => {
        if (res.Ret === 200) {
          this.chartPermissionList = res.Data.List;
        }
      });
    },
    //活动类型
    activityType() {
      raiInterface
        .activityTypeMeetType({
          MeetType: 2,
        })
        .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: 2,
        })
        .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();
    },
    //详情弹框
    particulars(id, text) {
      this.offlineId = id;
      this.particlaDlg = {
        id: id,
        title: text,
      };
      this.dialogVisiblepartica = true;
    },
    //到会情况
    particularsSubmit(id) {
      this.offlineId = id;
      this.submitDialog = true;
    },
    //点击标题的弹框
    titleBtnClick(id) {
      raiInterface.activityDetail({ ActivityId: Number(id) }).then((res) => {
        if (res.Ret == 200) {
          this.detailData = res.Data;
        }
      });
      this.dialogVisible = true;
    },
  },
};
</script>
<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>
