<template>
  <div class="container special-research">
    <div class="top-wrap">
      <div class="tabs-content">
        <span @click="tabsHandle(item)" :class="['item', tabsActive == item.id && 'active-item']" v-for="item in tabsTop" :key="item.id">{{ item.name }}</span>
      </div>
    </div>
    <div class="top-wrap">
      <div>
        <el-button v-if="tabsActive == 2" type="primary" style="margin-right: 20px" @click="addapply">新增报名</el-button>
        <el-button v-if="tabsActive == 2" type="primary" @click="sendMessage" style="margin-right: 20px">发送模板消息</el-button>
        <el-select placeholder="请选择行业" clearable v-model="industryValue" @change="changeHandel" style="margin: 0 20px 20px 0">
          <el-option v-for="item in chartPermissionList" :label="item.PermissionName" :key="item.ChartPermissionId" :value="item.ChartPermissionId"></el-option>
        </el-select>
        <el-select placeholder="发布状态" clearable v-model="status" @change="changeHandel" style="margin: 0 30px 20px 0">
          <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <template v-if="tabsActive == 1">
          <el-button style="margin-bottom: 20px" type="primary" @click="$router.push('/addResearch')">添加活动</el-button>
          <el-button style="margin-bottom: 20px" type="primary" @click="interestHandler">客户兴趣总览</el-button>
        </template>
      </div>
      <div style="width: 520px">
        <el-input v-model="themeVal" @input="themeInput" placeholder="请输入主题名称" clearable>
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
    </div>
    <el-card>
      <el-table @selection-change="selectChange" :data="dataList" style="width: 100%; margin-top: 20px" border>
        <el-table-column v-if="tabsActive == 2" align="center" type="selection" width="55"> </el-table-column>
        <el-table-column v-for="item in tableColums" :key="item.label" :label="item.label" :width="item.widthsty" :min-width="item.minwidthsty" align="center">
          <template slot-scope="{ row }">
            <span @click="handleRowClick(row, item.key)" :style="handleRowStyle(item.key)">{{ handleRowContent(row, item.key) }}</span>
          </template>
        </el-table-column>
        <el-table-column width="230" prop="" align="center" label="操作">
          <template slot-scope="{ row }">
            <div v-if="tabsActive == 1">
              <template v-if="row.PublishStatus !== 4">
                <span class="editsty" v-if="row.PublishStatus == 1" @click="applyHandleAllOperate(row.ActivityId, '下线')">下线 &nbsp;&nbsp;</span>
                <span class="editsty" v-if="row.PublishStatus == 3" @click="applyHandleAllOperate(row.ActivityId, '重新发布')">重新发布 &nbsp;&nbsp;</span>
                <span v-if="row.PublishStatus == 0" class="editsty" @click="applyHandleAllOperate(row.ActivityId, '发布')">发布 &nbsp;&nbsp;</span>
                <span class="editsty" @click="editBtn(row.ActivityId, row.PublishStatus, '')">编辑 &nbsp;&nbsp;</span>
                <span class="editsty" v-if="row.PublishStatus == 1" @click="editBtn(row.ActivityId, row.PublishStatus, '行程')">确定行程</span>
                <span class="deletesty" v-if="row.PublishStatus == 0" @click="applyHandleAllOperate(row.ActivityId, '删除')">删除</span>
              </template>
            </div>
            <div v-else>
              <span class="editsty" v-if="row.PublishStatus == 1 && isStart(row.ActivityTime)" @click="applyHandleAllOperate(row.ActivityId, '取消发布')">取消发布 &nbsp;&nbsp;</span>
              <span class="editsty" v-if="row.PublishStatus !== 1" @click="applyHandleAllOperate(row.ActivityId, '重新发布')">重新发布 &nbsp;&nbsp;</span>
              <span class="editsty" @click="editBtn(row.ActivityId, row.PublishStatus, '行程')">编辑 &nbsp;&nbsp;</span>
              <span class="editsty" v-if="row.IsShowUpdateMeeting" @click="particularsSubmit(row.ActivityId)"> 修改到会情况 </span>
              <span class="editsty" v-if="row.IsShowSubmitMeeting" @click="particularsSubmit(row.ActivityId)"> 提交到会情况 </span>
              <span class="editsty" v-if="row.IsShowAttendanceDetails" @click="particulars(row.ActivityId)">&nbsp;&nbsp;到会详情</span>
            </div>
          </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>
    <!-- <el-dialog width="1000px" v-dialogDrag :modal-append-to-body="false" center :title="dialogTitle" :visible.sync="dialogVisibleActivity" :before-close="handleCloseSubject">
      <div class="rai-detail-wrap" v-if="dialogTitle == '活动详情'">
        <div class="activity-top">
          {{ activityDetail.ResearchTheme }}
        </div>
        <p>所属行业： {{ activityDetail.ChartPermissionName }}</p>
        <p v-if="tabsActive == 1">预期时间： {{ activityDetail.ActivityTimeText }}</p>
        <p v-else>活动开始时间： {{ activityDetail.ActivityTimeTextByDay }}</p>
        <p>调研形式： {{ activityDetail.SpecialType == 1 ? "线上" : "线下" }} {{ activityDetail.SpecialType == 2 && activityDetail.City ? "(" + activityDetail.City + ")" : "" }}</p>
        <template v-if="!activityDetail.IndustrialName && !activityDetail.IndustrialSubjectName">
          <p>相关主题： {{ activityDetail.Label }}</p>
        </template>
        <template v-else>
          <p>产业名称： {{ activityDetail.IndustrialName }}</p>
          <p>相关公司： {{ activityDetail.IndustrialSubjectName }}</p>
        </template>
        <div class="text-box">
          <div style="flex-shrink: 0">活动可见：</div>
          <div>
            <span>{{ activityDetail.CustomerName }}</span>
            <div>
              <span v-if="activityDetail.Scale.includes('3')"> 100亿以上</span>
              <span v-if="activityDetail.Scale.includes('2')"> 150~100亿</span>
            </div>
          </div>
        </div>
        <p v-if="activityDetail.Host">主持人： {{ activityDetail.Host }}</p>
        <p v-if="activityDetail.Host">主持人： {{ activityDetail.PersonInCharge }}</p>
        <el-image v-if="tabsActive == 1" style="width: 0px; height: 0px" :src="activityDetail.TripImgLink" id="TripImgLink" :preview-src-list="previewList"></el-image>
        <el-image v-else style="width: 0px; height: 0px" :src="activityDetail.TripImgLinkFix" id="TripImgLink" :preview-src-list="previewList"></el-image>
        <div class="arrange" @click.stop="imgLink">
          查看行程安排
          <i class="el-icon-d-arrow-right"></i>
        </div>
      </div>
      <div v-else>
        <el-table :data="interestData" style="width: 100%; margin: 20px 0" height="400px" border>
          <el-table-column min-width="" prop="RealName" align="center" label="姓名"></el-table-column>
          <el-table-column min-width="" prop="CompanyName" align="center" label="公司名称"></el-table-column>
          <el-table-column min-width="" prop="SellerName" align="center" label="所属销售"></el-table-column>
          <el-table-column min-width="180" prop="CreateTime" align="center" label="反馈时间"></el-table-column>
        </el-table>
        <div class="dialog-footer">
          <a :href="exportInterest" download>
            <el-button type="primary" @click="confirmSubmit">下载名单</el-button>
          </a>
          <el-button style="margin-left: 20px" @click="handleCloseSubject">取消</el-button>
        </div>
      </div>
    </el-dialog> -->
    <special-research-dlg :specialDetailId="specialDetailId" :dialogVisibleActivity.sync="dialogVisibleActivity" :dialogTitle="dialogTitle" :tabsActive="tabsActive" />
    <partical-dialog :offlineId="offlineId" :dialogVisiblepartica.sync="dialogVisiblepartica" :particlaDlg="particlaDlg" :submitDialog.sync="submitDialog" />
    <apply-dialog :addDialogVisible.sync="addDialogVisible" :selectList="selectList" :signUpAdd="signUpAdd" :addDialogType="addDialogType" />
    <particulars-all :particularsDialogVisible.sync="particularsDialogVisible" :dialogVisibleList="dialogVisibleList" />
    <template-message :messageDialog.sync="messageDialogVisible" :selectionArr="selectionArr" typeMessage="确定行程"/>
  </div>
</template>

<script>
import { raiInterface, raiSpecial } from "@/api/api.js";
import mPage from "@/components/mPage.vue";
import { inAdvanceOptions, tableColums, TabsTop, ConfirmOptions } from "../components/special/optionsTabs";
import ParticalDialog from "../components/particalDialog.vue";
import ApplyDialog from "../components/apply/applyDialog.vue";
import ParticularsAll from "./specialResearch/particularsAll.vue";
import SpecialResearchDlg from "../components/special/specialResearchDlg.vue";
import TemplateMessage from "../components/apply/templateMessage.vue";
export default {
  name: "",
  components: { mPage, ParticalDialog, ApplyDialog, ParticularsAll, SpecialResearchDlg, TemplateMessage },
  props: {},
  data() {
    return {
      status: "",
      industryValue: "",
      chartPermissionList: [],
      themeVal: "",
      dataList: [],
      page_no: 1,
      total: 0,
      dialogVisibleActivity: false,
      dialogTitle: "",
      activityDetail: {},
      previewList: [],
      interestData: [], //感兴趣人数
      exportInterest: "",
      tableColums: [],
      tabsActive: 1,
      offlineId: 0, //提交的ID
      dialogVisiblepartica: false, //到会详情的隐现
      particlaDlg: {
        isSpecial: true,
        title: "到会详情",
      }, //提交的标题
      submitDialog: false, //提交到会情况的隐现
      addDialogVisible: false,
      signUpAdd: "专项",
      addDialogType: "新增报名",

      particularsDialogVisible: false,
      dialogVisibleList: {},

      specialDetailId: null,
      messageDialogVisible: false, // 发送模版消息
      selectionArr: {},

      specialDetailId: 0,
      selectList: [],
    };
  },
  computed: {
    options() {
      return this.tabsActive == 1 ? inAdvanceOptions : ConfirmOptions;
    },
    tabsTop() {
      return TabsTop;
    },
  },
  created() {},
  mounted() {
    if (sessionStorage.getItem("specialResearchListBack")) {
      let { tabsActive, page, status, industryValue, themeVal } = JSON.parse(sessionStorage.getItem("specialResearchListBack"));
      this.themeVal = themeVal;
      this.page_no = page;
      this.tabsActive = tabsActive;
      this.status = status;
      this.industryValue = industryValue;
    }
    this.chartPermission();
    this.getsDataList();
    this.tableColums = tableColums(this.tabsActive);
  },
  methods: {
    //点击了头部切换
    tabsHandle(item) {
      this.tabsActive = item.id;
      this.tableColums = tableColums(this.tabsActive);
      this.status = "";
      this.page_no = 1;
      this.getsDataList();
    },
    //change 变化
    changeHandel() {
      this.page_no = 1;
      this.getsDataList();
    },
    //分页
    handleCurrentChange(page) {
      this.page_no = page;
      this.getsDataList();
    },
    //获取表格
    async getsDataList() {
      const res = await raiSpecial.getSpecialList({
        PageSize: 10,
        CurrentIndex: this.page_no,
        PublishStatus: this.status ? Number(this.status) : 2,
        ChartPermissionId: this.industryValue,
        IsTrip: this.tabsActive == 2,
        KeyWord: this.themeVal,
      });
      if (res.Ret === 200) {
        this.dataList = res.Data.List;
        this.total = res.Data.Paging.Totals;
      }
    },
    //获取行业
    chartPermission() {
      raiInterface.getActivitySpecial().then((res) => {
        if (res.Ret === 200) {
          this.chartPermissionList = res.Data.List;
        }
      });
    },
    //获取调研主题详情
    async themeDetails(id) {
      this.specialDetailId = id;
      this.dialogVisibleActivity = true;
      this.dialogTitle = "活动详情";

      return;
      const res = await raiSpecial.specialDetail({ ActivityId: id });
      if (res.Ret === 200) {
        this.previewList = [];
        this.activityDetail = res.Data;
        this.previewList.push(this.tabsActive == 1 ? this.activityDetail.TripImgLink : this.activityDetail.TripImgLinkFix);
      }
    },
    //感兴趣人数
    async interestDetails(id) {
      this.specialDetailId = id;
      this.dialogTitle = "感兴趣人数";
      this.dialogVisibleActivity = true;
      return;
      const res = await raiSpecial.specialInterested({ ActivityId: id });
      if (res.Ret === 200) {
        this.exportInterest = `${process.env.API_ROOT}/cygx/special/export?${localStorage.getItem("auth") || ""}&ActivityId=${id}`;
        this.$nextTick(() => {
          this.interestData = res.Data.List;
        });
      }
    },
    //发布、取消发布 、删除、下线、重新发布、取消发布
    applyHandleAllOperate(id, value) {
      this.$confirm(`确定${value}该活动吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res =
            value == "删除"
              ? await raiSpecial.specialDelete({
                  ActivityId: id,
                })
              : value == "发布"
              ? await raiSpecial.specialPublishAndCancel({
                  ActivityId: id,
                })
              : value == "下线"
              ? await await raiSpecial.postSpecialOffline({
                  ActivityId: id,
                })
              : value == "取消发布"
              ? await raiSpecial.specialPublishAndCancel({
                  ActivityId: id,
                })
              : value == "重新发布" && this.tabsActive == 1
              ? await await await raiSpecial.postSpecialOffline({
                  ActivityId: id,
                })
              : await await raiSpecial.specialPublishAndCancel({
                  ActivityId: id,
                });

          if (res.Ret !== 200) return;
          this.$message.success(`${value}成功!`);
          if (value == "删除") {
            let page_num = Math.ceil((this.total - 1) / 10);
            if (this.page_no > page_num) {
              this.page_no = page_num;
            }
          }
          this.getsDataList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: `已取消${value}`,
          });
        });
    },
    //点击了编辑
    editBtn(id, show, type = "") {
      type == ""
        ? this.$router.push({
            path: "/editResearch",
            query: { id, isShow: show },
          })
        : this.$router.push({
            path: "/determineTravel",
            query: { id },
          });
    },
    //提交到会情况
    particularsSubmit(id) {
      this.offlineId = id;
      this.submitDialog = true;
    },
    //到会详情
    particulars(id) {
      this.offlineId = id;
      this.dialogVisiblepartica = true;
    },
    handleCloseSubject() {
      this.dialogTitle = "";
      this.exportInterest = "";
      this.activityDetail = {};
      this.dialogVisibleActivity = false;
    },
    //感兴趣人数总览
    interestHandler() {
      let routeUrl = this.$router.resolve("/interestAllPreview");
      window.open(routeUrl.href, "_blank");
    },
    applyNum(item) {
      this.particularsDialogVisible = true;
      this.dialogVisibleList = item;
    },
    /* 表格行的样式 */
    handleRowStyle(key) {
      const style = {
        ResearchTheme: "color: #409eff; cursor: pointer",
        InterestedNum: "color: #409eff; cursor: pointer",
        SignupPeopleNum: "color: #409eff; cursor: pointer",
      };
      return style[key] ? style[key] : "";
    },
    /* 表格行的点击事件 */
    handleRowClick(row, key) {
      if (key === "ResearchTheme") {
        this.themeDetails(row.ActivityId);
      } else if (key === "InterestedNum") {
        this.interestDetails(row.ActivityId);
      } else if (key === "SignupPeopleNum") {
        this.applyNum(row);
      }
    },
    /* 表格行的数据处理 */
    handleRowContent(row, key) {
      if (key == "SpecialType") {
        return row[key] == 1 ? "线上" : `线下(${row["City"]})`;
      } else if (key == "PublishStatus") {
        return row[key] == 1
          ? "已发布"
          : row[key] == 0 && this.tabsActive == 1
          ? "未发布"
          : row[key] == 0 && this.tabsActive == 2
          ? "已取消"
          : row[key] == 3
          ? "已下线"
          : row[key] == 4
          ? "已确定行程"
          : "";
      } else if (key == "InterestedNum") {
        return row[key] ? row[key] : "";
      } else {
        return row[key];
      }
    },
    // 新增活动报名
    addapply() {
      if (!this.selectList) return this.$message.error("请先选择活动");
      this.addDialogVisible = true;
    },
    // 新增活动报名的表格选择
    selectChange(selection) {
      this.selectionArr = selection;
      let arr = [];
      selection.forEach((item) => {
        arr.push(item.ActivityId);
      });
      this.selectList = arr.join(",");
    },
    // 判断活动时间对比当前时间
    isStart(val) {
      return this.$moment().isBefore(val);
    },
    // 主题名称的输入框
    themeInput() {
      this.page_no = 1;
      this.status = "";
      this.industryValue = "";
      this.getsDataList();
    },
    // 发送模版消息
    sendMessage() {
      if (this.selectList && this.selectList.split(",").length === 1) {
        this.messageDialogVisible = true;
      } else {
        this.$message.error("请选择一个活动");
      }
    },
  },
  beforeRouteEnter(to, from, next) {
    if (from.path !== "/addResearch" && from.path !== "/determineTravel" && from.path !== "/editResearch") {
      sessionStorage.removeItem("specialResearchListBack");
    }
    next();
  },
  beforeRouteLeave(to, from, next) {
    let obj = {
      page: this.page_no,
      tabsActive: this.tabsActive,
      status: this.status,
      industryValue: this.industryValue,
      themeVal: this.themeVal,
    };
    sessionStorage.setItem("specialResearchListBack", JSON.stringify(obj));
    next();
  },
};
</script>
<style scoped lang="scss">
.special-research {
  .top-wrap {
    margin-bottom: 28px;
    padding: 20px 30px 0;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
  }
  .tabs-content {
    display: flex;
    padding-bottom: 20px;
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 18px;
      height: 40px;
      background: #ecf5ff;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #b3d8ff;
      margin-right: 20px;
      color: #3385ff;
      font-size: 16px;
      cursor: pointer;
    }
    .active-item {
      height: 40px;
      background: #409eff;
      color: #fff;
    }
  }
  .rai-detail-wrap {
    .activity-top {
      width: 100%;
      height: 55px;
      background: #f4f4f4;
      border-radius: 4px 4px 4px 4px;
      opacity: 1;
      line-height: 55px;
      padding-left: 23px;
      margin-bottom: 30px;
    }
    p {
      margin-bottom: 20px;
      padding-left: 10px;
    }
    .arrange {
      margin: 50px auto 20px;
      cursor: pointer;
      text-align: center;
      color: #3385ff;
    }
    .text-box {
      display: flex;
      padding-left: 10px;
      span {
        display: block;
        margin-bottom: 10px;
      }
    }
  }
  .dialog-footer {
    text-align: center;
    margin-bottom: 20px;
  }
}
</style>
