hz_crm_web/src/views/roadshow_manage/myCalendar.vue

<template>
  <div class="my-calendar">
    <el-card class="my-calendar-list">
      <div class="top-wrap">
        <ul class="tabs-type">
          <li :class="['type-item',{ 'act': default_tab === tab.key }]" v-for="tab in tabs" :key="tab.key"  @click="default_tab=tab.key">{{tab.label}}</li>
        </ul>
        <!-- 已处理申请筛选模块 -->
        <div class="filter-wrap" v-if="default_tab===2 ">
          <el-select placeholder="请选择状态" v-model="roadStatus" clearable @change="handleCurrentChange(1)">
            <el-option 
              v-for="item in roadStatusOpts" 
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-date-picker
            clearable
            v-model="roadTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="handleCurrentChange(1)"
          />
          <el-input
            placeholder="客户名称"
            prefix-icon="el-icon-search"
            v-model="roadSearchVal"
            style="display:inline-block;width:300px;margin-left: auto;"
            clearable
            @change="handleCurrentChange(1)"
          />
        </div>
      </div>
      <el-table
				:data="tableData"
        v-loading="tableLoading"
        element-loading-text="数据加载中..." 
				style="box-shadow: 0px 3px 6px rgba(155, 170, 219, 0.2);margin-top:20px;"
				border
      >
        <el-table-column
          v-if="!item.hidden"
          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 v-if="item.key === 'time'">
              {{
                row.StartDate === row.EndDate
                ? ($moment(row.StartDate + " " + row.StartTime).format(
                  "MM.DD(ddd) HH:mm") + '~' +  $moment(row.EndDate + " " + row.EndTime).format("HH:mm"))
                : (
                  $moment(row.StartDate + " " + row.StartTime).format(
                  "MM.DD(ddd) HH:mm") + '~' + $moment(row.EndDate + " " + row.EndTime).format("MM.DD(ddd) HH:mm")
                )
              }}
            </span>

            <!-- 活动形式 -->
            <span v-else-if="item.key === 'RoadshowType'">
              {{row.RoadshowType}} {{ row.RoadshowType === '线上' ? `(${row.RoadshowPlatform}  )` : `(${row.Province}${row.City}${row.District})`}}
            </span>

            <!-- 状态 -->
            <span v-else-if="item.key === 'Status'" 
            :class="row.Status === 2 ? 'successty' : row.Status === 3 ? 'deletesty' : '' ">
              {{statusMap.get(row.Status)}}
              <i 
                class="el-icon-info" 
                style="color:#666;" 
                v-if="[3,4].includes(row.Status) && ENUM_RESEARCHLIST.includes(Role)"
                @click="iconClick(row)"
              />
            </span>

            <!-- 客户拼接 -->
            <span v-else-if="item.key === 'company'">
              {{ row.CooperationName || row.CompanyName || '——'}}

              <el-tooltip effect="dark" placement="top-start" v-if="row.CompanyId"  @mouseenter.native="getCompanyInfo(row)" popper-class="company-tip-poper">
                <i class="el-icon-info"/>
                <div slot="content" v-if="companyInfo">
                  <!-- 权益客户 -->
                  <template v-if="Role.includes('rai')">
                      <p style="margin: 6px 0;">客户状态：{{companyInfo.Status}}</p>
                      <p style="margin: 6px 0;">所属行业：{{companyInfo.IndustryName}}</p>
                      <p style="margin: 6px 0;text-indent: -70px;margin-left: 70px;">行业权限：{{companyInfo.PermissionName}}</p>
                      <p style="margin: 6px 0;">累计互动次数：{{companyInfo.ReportReadTotal}}</p>
                  </template>
                  <!-- ficc客户分国内海外 -->
                  <template v-else>
                      <template v-if="companyInfo.EnglishCompany===1">
                          <p style="margin: 6px 0;">所属国家：{{companyInfo.EnglishCountry}}</p>
                          <p style="margin: 6px 0;">累计点击量：{{companyInfo.EnglishViewTotal}}</p>
                      </template>
                      <template v-else>
                          <p style="margin: 6px 0;">客户状态：{{companyInfo.Status}}</p>
                          <p style="margin: 6px 0;">所属行业：{{companyInfo.IndustryName}}</p>
                          <p style="margin: 6px 0;text-indent: -70px;margin-left: 70px;">开通品种：{{companyInfo.PermissionName}}</p>
                          <p style="margin: 6px 0;">累计报告阅读次数：{{companyInfo.ReportReadTotal}}</p>
                      </template>
                  </template>
                </div>
              </el-tooltip>
            </span>

            <span v-else>{{ row[item.key] || '——' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" v-if="handleArr.length">
          <template slot-scope="{ row }" >
          
          <template  v-if="![4,6].includes(row.Status) && ($moment(`${row.StartDate} ${row.StartTime}`).valueOf() > new Date().getTime())">
            <template v-if="default_tab === 1">
              <span
                class="editsty"
                v-if="handleArr.includes('撤回')"
                @click="revocation(row)"
                >撤回</span>
              <span
                class="editsty"
                v-if="handleArr.includes('接受')"
                @click="accept(row)"
                >接受</span>
              <span
                class="editsty"
                v-if="handleArr.includes('拒绝')"
                @click="refuse(row)"
                >拒绝</span>
            </template>

            <template v-if="default_tab === 2"> 
              <span
                class="deletesty"
                v-if="handleArr.includes('删除') && row.Status === 2"
                @click="deleteRoadshow(row)"
                >删除</span
              >
              <span
                class="editsty"
                v-if="handleArr.includes('拒绝理由') && row.Status === 3"
                @click="showRefuseReason(row)"
                >拒绝理由</span>
              <span
                class="editsty"
                v-if="handleArr.includes('修改重提') &&  [3,5].includes(row.Status)"
                @click="resubmit(row)"
                >修改重提</span>
            </template>

            <template v-if="[3,4].includes(default_tab)">
              <span
                class="editsty"
                v-if="handleArr.includes('修改')"
                @click="editActivityHandle(row)"
                >修改</span>
              <span
                class="deletesty"
                @click="delNormalHandle(row)"
                v-if="handleArr.includes('删除')"
                >删除</span>
            </template>
          </template>
          <!-- 事项的操作栏由后端控制 -->
          <template v-if="default_tab===5">
              <!-- <span class="editsty" v-if="row.EditReason" @click="showReason(row)">最近修改记录</span> -->
              <span
                class="editsty"
                v-if="!row.ButtonAuth.EditDisabled"
                @click="editActivityHandle(row)"
                >修改</span>
              <span
                class="deletesty"
                @click="delNormalHandle(row)"
                v-if="!row.ButtonAuth.RemoveDisabled"
                >删除</span>
          </template>
          <!-- 提交/查看参会名单 按钮由后端控制 -->
          <template v-if="default_tab===2&&!ENUM_RESEARCHLIST.includes(Role)">
            <span
                class="editsty"
                v-if="row.EditButton"
                @click="editActivityHandle(row)"
                >修改</span>
                <span 
                  class="deletesty"
                  v-if="row.SubmitButton"
                  @click="submitAttendees(row,'提交')"
                >提交参会名单</span>
                <span
                  class="editsty"
                  v-if="row.ViewButton"
                  @click="submitAttendees(row,'查看')"
                >查看参会名单
                </span>
                <span
                  class="editsty"
                  v-if="row.QuestionStatus===1"
                  @click="handleShowAddAnswer(row,'view')"
                >问答详情
            </span>
          </template>

          <!-- 客户问答、问答详情(仅针对路演) -->
          <template v-if="default_tab===2&&ENUM_RESEARCHLIST.includes(Role)">
            <span 
              class="editsty"
              v-if="row.Status===2&&row.ActivityType==='路演'&&row.QuestionStatus===0"
              @click="handleShowAddAnswer(row)"
            >填写客户问答</span> 
            <span
              class="editsty"
              v-if="row.QuestionStatus===1"
              @click="handleShowAddAnswer(row,'view')"
            >问答详情
            </span>
          </template>

          </template>
        </el-table-column>
        <div slot="empty" style="padding: 20px 0;">
          <img src="~@/assets/img/data_m/table_no.png" alt="" style="display:block;width:135px;height:90px;margin: 0 auto;">
          <span>暂无数据</span>
        </div>
			</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-card class="my-calendar-context" v-if="Role!=='admin'">
      <!-- 日程组件 -->
      <calendar
        ref="calendarRef"
        :eventList="eventList"
        @eventClick="eventClick"
        @cellClick="cellClick"
        @weekChange="getEventList"
        @editCallback="editCallback"
        @delAuthHandle="deleteRoadshow"
      >
        <template #left>
          <p class="left-title">我的日历</p>
        </template>
        <template #right>
          <el-button type="primary" @click="addMatterBtn" v-if="ENUM_RESEARCHLIST.includes(Role)||sellerList.includes(Role)">添加事项</el-button>
        </template>
      </calendar>
    </el-card>
    <!-- 添加事项弹窗 -->
    <addMatterDia 
      :isShow.sync="isAddMatterDiaShow" 
      :edit_matter_id="edit_matter_id" 
      :matter_form="matter_form"
      :matter_date="matter_date"
      @ensureCallback="refreshData"
    />
    <!-- 修改活动弹窗(修改重提) -->
    <addActivityBtnDia
      :isShow.sync="isActivityBtnDiaShow"
      :initData="resubmitData"
      :edit_id="edit_id"
      :edit_rs_id="edit_rs_id"
      @ensureCallback="refreshData"
      ref="activityCellDia"
    />

    <!-- 表格活动弹窗 -->
    <addActivityCellDia
      :isShow.sync="isActivityCellDiaShow"
      :initData="sonData"
      :edit_id="edit_id"
      :edit_rs_id="edit_rs_id"
      @ensureCallback="refreshData"
      ref="addActivityCellDia"
      :isEditType='isRaiEditType'
    />


    <!-- 拒绝弹窗 -->
    <el-dialog
      title="拒绝"
      :visible.sync="isRefuseDiaShow"
      :modal-append-to-body="false"
      width="500px"
      @close="refuseDiaCancel"
    >
      <el-input
        type="textarea"
        v-model.trim="refuseReason"
        :autosize="{ minRows: 4, maxRows: 8 }"
        placeholder="请输入拒绝理由"
        resize="none"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="refuseDiaCancel">取消</el-button>
        <el-button type="primary" @click="refuseDiaConfirm">确定</el-button>
      </span>
    </el-dialog>
    <!-- 删除弹窗 -->
    <el-dialog
      title="删除"
      :visible.sync="isDeleteDiaShow"
      :modal-append-to-body="false"
      width="500px"
      @close="deleteDiaCancel"
    >
      <el-input
        type="textarea"
        v-model.trim="deleteReason"
        :autosize="{ minRows: 4, maxRows: 8 }"
        placeholder="请输入删除理由"
        resize="none"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDiaCancel">取消</el-button>
        <el-button type="primary" @click="deleteDiaConfirm">确定</el-button>
      </span>
    </el-dialog>
    <!-- 最近变更记录弹窗 -->
    <el-dialog
      title="最近修改记录"
      :visible.sync="isReasonDiaShow"
      :modal-append-to-body="false"
      width="500px"
      @close="isReasonDiaShow=false"
    >
        <div class="reason-dialog-container">
            <div class="form-item">
                <p>修改原因</p>
                <div class="reason">
                    <textarea  rows="10" disabled v-model="modifyReason.text" placeholder="修改原因描述"></textarea>
                    <span class="hint">最近变更时间：{{modifyReason.time||''}}</span>
                </div>
                
            </div>
        </div>
    </el-dialog>
    <!-- 提交参会名单弹窗 -->
    <addParticipateDia 
        :isAddParticipateShow="isAddParticipateShow"
        :RsCalendarId="currentRsCalendarId"
        :ResearcherId="currentResearcherId"
        @close="isAddParticipateShow=false"
        @confirm="getCalendarList();isAddParticipateShow=false;"
    />
    <!-- 查看参会名单弹窗 -->
    <showParticipateListDia 
        :isParticipateShow="isParticipateShow"
        :RsCalendarId="currentRsCalendarId"
        :ResearcherId="currentResearcherId"
        @close="isParticipateShow=false"
    />
    <!-- 添加问答 -->
    <addAnswer 
      :companyName="currentAddAnswerData.CompanyName"
      :RsCalendarResearcherId="edit_rs_id"
      :RsCalendarId="edit_id"
      :isShow.sync="isShowAddAnswer"
      @success="getCalendarList()"
    />
    <!-- 查看问答 -->
    <viewAnswer 
      :isShow.sync="isShowViewAnswer"
      :roadAnswerData="currentAddAnswerData"
      :RsCalendarResearcherId="edit_rs_id"
    />
  </div>
</template>

<script>
import { roadshowInterence } from "@/api/api.js";
import calendar from "@/components/calendar.vue";
import { getTabs,tableColums,handleArr,ENUM_RESEARCHLIST,sellerList } from "./roleConfig/myCalendarConfig";
import addMatterDia from "./compononts/addMatterDia.vue";
import addActivityCellDia from "./compononts/addActivityCellDia.vue";
import addActivityBtnDia from "./compononts/addActivityBtnDia.vue";
import addParticipateDia from "./compononts/addParticipateDia.vue";
import mPage from "@/components/mPage.vue";
import showParticipateListDia from "./compononts/showParticipateListDia.vue";
import addAnswer from "./compononts/addAnswer.vue";
import viewAnswer from './compononts/viewAnswer.vue'

export default {
  components: {
    calendar,
    addMatterDia,
    mPage,
    addActivityBtnDia,
    addActivityCellDia,
    addParticipateDia,
    showParticipateListDia,
    addAnswer,
    viewAnswer
},
  watch: {
    default_tab(newval) {
      this.tableColums = tableColums(newval);
      this.handleArr = handleArr(newval);
      this.page_no = 1;
      newval && this.getCalendarList();
    }
  },
  computed: {
    Role() {
      return localStorage.getItem("Role");
    }
  },
  data() {
    return {
      sellerList,
      ENUM_RESEARCHLIST,
      tabs: getTabs(localStorage.getItem("Role")),
      default_tab: 0,
      tableColums: [],//默认列
      handleArr: [],//操作栏
      tableLoading: false,
      statusMap: new Map([
        [1, '待接受'],
        [2, '已接受'],
        [3, '已拒绝'],
        [4, '已删除'],
        [5, '已撤回'],
        [6, '已结束'],
      ]),
      tableData:[],//表格数据
      total: 0,
      page_no: 1,
      // 添加事项弹窗显示
      isAddMatterDiaShow: false,
      // 拒绝弹窗显示
      isRefuseDiaShow: false,
      // 删除弹窗显示
      isDeleteDiaShow: false,
      //添加参会名单弹窗显示
      isAddParticipateShow:false,
      //查看参会名单弹窗显示
      isParticipateShow:false,
      currentRsCalendarId:0,//当前选择的路演id
      // 当前行信息
      rowInfo: null,
      // 拒绝理由
      refuseReason: "",
      // 删除原因
      deleteReason: "",
      // 修改活动弹窗(修改重提)
      isActivityBtnDiaShow: false,
      // 研究员列表
      researcherList: [],
      // 日历日程列表
      eventList: [],
      // 重提初始数据
      resubmitData: null,

      companyInfo: null,

      edit_id:'',//编辑日历id
      edit_rs_id:'',

      edit_matter_id:'',
      matter_form: {},
      matter_date:new Date(),
      isActivityCellDiaShow: false,
      sonData: null,
      edit_id:0,
      edit_rs_id: 0,

      modifyReason:{
          text:'',
          time:''
      },
      isReasonDiaShow:false,
      currentResearcherId:0,
      isRaiEditType:'',

      currentAddAnswerData:{},
      isShowAddAnswer:false,//添加问答
      isShowViewAnswer:false,//查看客户问答
      roadStatus:'',
      roadStatusOpts:[
        {
          label:'已结束',
          value:6
        },
        {
          label:'已接受',
          value:2
        },
        {
          label:'已撤回',
          value:5
        },
        {
          label:'已删除',
          value:4
        },
        {
          label:'已拒绝',
          value:3
        },
      ],
      roadTime:'',
      roadSearchVal:''
    };
  },
  methods: {
    // 填写客户问答
    handleShowAddAnswer(row,type){
      this.edit_id = row.RsCalendarId;
      this.edit_rs_id = row.RsCalendarResearcherId;
      this.currentAddAnswerData=row
      if(type==='view'){
        this.isShowViewAnswer=true
      }else{
        this.isShowAddAnswer = true;
      }
      
    },

    // 添加事项按钮
    addMatterBtn() {
      const { currentStart } = this.$refs.calendarRef.calendarApi.view;
      this.matter_date=currentStart
      this.edit_matter_id = 0;
      this.matter_form = {};
      this.isAddMatterDiaShow = true;
    },
    // 获取日历表格列表数据
    async getCalendarList() {
      this.tableLoading = true;
      // 发送请求
      const { Ret,Data } = this.default_tab === 5 ? await roadshowInterence.mattersList({
        PageSize: 10,
        CurrentIndex: this.page_no
      }) : await roadshowInterence.getCalendarList({
        PageSize: 10,
        CurrentIndex: this.page_no,
        CalendarType: this.default_tab,
        Status:this.roadStatus,
        StartDate:this.roadTime?this.roadTime[0]:'',
        EndDate:this.roadTime?this.roadTime[1]:'',
        Keyword:this.roadSearchVal,
      });

      this.tableLoading = false;
      if(Ret !== 200) return;
      
      this.total = Data.Paging.Totals;
      this.tableData = this.default_tab === 5 ? Data.List&&Data.List.map(item => ({...item, ActivityType: '事项'})) : Data.List;


    },

    // 页码改变事件
    handleCurrentChange(page, index) {
      this.page_no = page;
      this.getCalendarList();
    },
    
    /* 获取客户信息 */
    async getCompanyInfo({CompanyId,EnglishCompany,ActivityType,ResearcherId,SysUserId}) {
      const { Data }  = await roadshowInterence.componyDetail({ CompanyId,EnglishCompany,SellerId:SysUserId });
      this.companyInfo = Data;
    },

    // 撤回操作
    async revocation(row) {
      await this.$confirm("确定要撤回该活动申请吗？", "撤回", {
        confirmButtonName: "确定",
        cancelButtonName: "取消",
        type: "warning",
      });
      const { Ret } = await roadshowInterence.revocationRoadshow({
        RsCalendarId: row.RsCalendarId,
        RsCalendarResearcherId: row.RsCalendarResearcherId,
      });

      if(Ret !== 200) return;
      this.$message.success('撤回成功');

      this.page_no = this.tableData.length === 1 ? this.page_no -1 : this.page_no;

      this.refreshData()
    },

    // 接受操作
    async accept(row) {
      await this.$confirm("接受申请后会加入您的日历，请确认", "接受", {
        confirmButtonName: "确定",
        cancelButtonName: "取消",
        type: "warning",
      });
      const { Ret } =  await roadshowInterence.acceptRoadshow({
        RsCalendarId: row.RsCalendarId,
        RsCalendarResearcherId: row.RsCalendarResearcherId,
      });
      
      if( Ret !== 200) return;
      this.$message.success('加入成功');

      this.page_no = this.tableData.length === 1 ? this.page_no -1 : this.page_no;

      this.refreshData()
    },
    // 拒绝操作
    refuse(row) {
      this.rowInfo = row;
      this.isRefuseDiaShow = true;
    },
    // 拒绝弹窗取消操作
    refuseDiaCancel() {
      this.refuseReason = "";
      this.rowInfo = null;
      this.isRefuseDiaShow = false;
    },
    // 拒绝弹窗确定操作
    async refuseDiaConfirm() {
      if (!this.refuseReason) return this.$message.warning("拒绝理由不能为空");
      const { Ret } =  await roadshowInterence.refuseRoadshow({
        RsCalendarId: this.rowInfo.RsCalendarId,
        RsCalendarResearcherId: this.rowInfo.RsCalendarResearcherId,
        RefuseReason: this.refuseReason,
      });
      
      if(Ret !== 200) return

      this.page_no = this.tableData.length === 1 ? this.page_no -1 : this.page_no;
      
      this.refuseDiaCancel();
      this.getCalendarList();
    },
    // 拒绝理由
    showRefuseReason(row) {
      this.$alert(row.RefuseReason || "拒绝理由", "拒绝理由", {
        confirmButtonText: "知道了",
      });
    },
    // 图标点击事件
    iconClick(row) {
      if (row.Status === 4) {
        // 删除原因
        this.$alert(row.DeleteReason || "删除原因", "删除原因", {
          confirmButtonText: "知道了",
        });
      } else if (row.Status === 3) {
        // 拒绝理由
        this.showRefuseReason(row);
      }
    },

    // 审核删除
    deleteRoadshow(row) {
      if(['内部会议'].includes(row.ActivityType)) return this.delNormalHandle(row);

      this.rowInfo = row;
      this.isDeleteDiaShow = true;
      
    },

    /* 非审核删除 气泡确认 内部会议 电话会 事项*/
    delNormalHandle({RsCalendarId,RsCalendarResearcherId,RsMattersId}) {

      this.$confirm("删除该活动后，将从日历中移除，确定继续吗?", "删除", {
        type: "warning"
      }).then( async() => {
        //删除事项
        let { Ret } = RsMattersId ? await roadshowInterence.delMatters({ RsMattersId }) 
        //删除活动
        : await roadshowInterence.deleteRoadshow({ RsCalendarId, RsCalendarResearcherId });

        if(Ret !== 200) return;
        
        this.$message.success('删除成功');
        
        this.page_no = this.tableData.length === 1 ? this.page_no -1 : this.page_no;

        this.refreshData()

        })
        .catch(() => {});
    },

    /* 编辑活动 或事项 */
    editActivityHandle(row) {
      this.isRaiEditType ='RaiEdit'
      if(this.default_tab==5){
        this.editMatterHandle(row);
      }else{
        this.raiEditMatterHandle(row)
      }
    },

    // 删除弹窗取消操作
    deleteDiaCancel() {
      this.deleteReason = "";
      this.rowInfo = null;
      this.isDeleteDiaShow = false;
    },
    // 删除弹窗确定操作
    async deleteDiaConfirm() {
      if (!this.deleteReason) return this.$message.warning("删除原因不能为空");

      const { Ret } = await roadshowInterence.deleteRoadshow({
        RsCalendarId: this.rowInfo.RsCalendarId,
        RsCalendarResearcherId: this.rowInfo.RsCalendarResearcherId,
        DeleteReason: this.deleteReason,
      });
      
      if( Ret !== 200) return;
      this.$message.success('删除成功');

      this.deleteDiaCancel();
      this.refreshData();
    },
    // 修改重提
    resubmit(row) {
      this.resubmitData = this.editInfoBack(row);
      this.edit_id = row.RsCalendarId;
      this.edit_rs_id = row.RsCalendarResearcherId;
      this.isActivityBtnDiaShow = true;
    },

    refreshData() {
      this.getCalendarList();
      this.getEventList();
    },

    /* 回显表单 type回显的研究员是[]还是'' */
    editInfoBack({ ActivityType,RoadshowType,RoadshowPlatform,City,Province,CompanyId,CompanyName,ResearcherId,Theme,CooperationName,ActivityCategory,StartDate,EndDate,StartTime,EndTime,EnglishCompany},type = 1) {
      return {
        activityType: ActivityType, // 活动类型
        roadshowType: RoadshowType, // 路演形式
        roadshowPlatform: RoadshowPlatform, // 路演平台
        roadshowCity: Province ? [Province,City] : [], // 路演城市
        companyId: CompanyId, // 客户id
        companyName: CompanyName, // 客户名称
        englishCompany:EnglishCompany,// 是否是海外客户
        meetingType: RoadshowType, // 会议形式
        meetingPlatform: RoadshowPlatform, // 会议平台
        meetingCity: Province ? [Province,City] : [], // 会议城市
        meetingTheme: Theme, // 会议主题
        partnersName: CooperationName, // 合作方名称
        activityClass: ActivityCategory, // 活动类别
        selectResearchers: [
          // 选择的研究员
          {
            researcherId: type === 2 ? ResearcherId.split(',').map(item => Number(item)) : Number(ResearcherId),
            startDate: new Date(StartDate),
            startTime: new Date(`${StartDate} ${StartTime}`),
            endDate: new Date(EndDate),
            endTime: new Date(`${EndDate} ${EndTime}`),
          },
        ],
      };

    },

    // 获取日历日程列表
    async getEventList() {

      if(this.Role === 'admin') return;
       //当前的起始日期
      const { currentStart,currentEnd } = this.$refs.calendarRef.calendarApi.view;

      const { formateDate } = this.$refs.calendarRef;
      const res = await roadshowInterence.myCalendarDetail({
        StartDate: formateDate(currentStart),
        EndDate: formateDate(new Date(currentEnd.getTime()- 24*60*60*1000)),
      });
      // 赋值
      this.eventList = [
        ...(res.Data.CalendarList || []),
        ...(res.Data.RsMattersList || []),
      ].map((item, index) => {
        return { ...item, id: index };
      });
    },

    /* 日历入口 编辑活动时 回显内容 */
    editCallback({ ActivityType,RoadshowType,RoadshowPlatform,City,Province,CompanyId,CompanyName,ResearcherId,RsCalendarResearcherId,Theme,CooperationName,ActivityCategory,StartDate,EndDate,RsCalendarId,RsMattersId,StartTime,EndTime,MatterContent,EnglishCompany}) {
      if(RsCalendarId) { // 编辑活动
       this.raiEditMatterHandle({ActivityType,RoadshowType,RoadshowPlatform,City,Province,CompanyId,CompanyName,ResearcherId,RsCalendarResearcherId,Theme,CooperationName,ActivityCategory,StartDate,EndDate,RsCalendarId,RsMattersId,StartTime,EndTime,MatterContent,EnglishCompany})
      }else { //编辑事项
        this.editMatterHandle({ RsMattersId,StartDate,StartTime,EndDate,EndTime,MatterContent });
      }
    },

    raiEditMatterHandle({ ActivityType,RoadshowType,RoadshowPlatform,City,Province,CompanyId,CompanyName,ResearcherId,RsCalendarResearcherId,Theme,CooperationName,ActivityCategory,StartDate,EndDate,RsCalendarId,RsMattersId,StartTime,EndTime,MatterContent,EnglishCompany,District=''}){
        this.sonData = {
                  activityType: ActivityType, // 活动类型
                  roadshowType: RoadshowType, // 路演形式
                  roadshowPlatform: RoadshowPlatform, // 路演平台
                  roadshowCity: Province ? [Province,City] : [], // 路演城市
                  companyId: CompanyId, // 客户id
                  companyName: CompanyName, // 客户名称
                  englishCompany:EnglishCompany,// 是否是海外客户
                  meetingType: RoadshowType, // 会议形式
                  meetingPlatform: RoadshowPlatform, // 会议平台
                  meetingCity: Province ? [Province,City] : [], // 会议城市
                  meetingTheme: Theme, // 会议主题
                  partnersName: CooperationName, // 合作方名称
                  activityClass: ActivityCategory, // 活动类别
                  District: District || '',

                  selectResearchers: [
                    // 选择的研究员
                    {
                      researcherId: Number(ResearcherId),
                      startDate: new Date(StartDate),
                      startTime: new Date(`${StartDate} ${StartTime}`),
                      endDate: new Date(EndDate),
                      endTime: new Date(`${EndDate} ${EndTime}`),
                    },
                  ],
                };
                this.edit_id = RsCalendarId;
                this.edit_rs_id = RsCalendarResearcherId;
                this.isActivityCellDiaShow = true;
    },
    /* 编辑事项 */
    editMatterHandle({ RsMattersId,StartDate,StartTime,EndDate,EndTime,MatterContent }) {
      this.edit_matter_id = RsMattersId;
      this.matter_form = { 
        startDate: new Date(`${StartDate} ${StartTime}`),
        startTime: new Date(`${StartDate} ${StartTime}`),
        endDate: new Date(`${EndDate} ${EndTime}`),
        endTime: new Date(`${EndDate} ${EndTime}`),
        matterContent: MatterContent,
      };
      this.isAddMatterDiaShow = true;
    },
    //查看最近变更原因
    showReason(row){
        this.modifyReason = {
            text:row.EditReason,
            time:row.ModifyTime,
        }
        this.isReasonDiaShow = true
    },

    /* 初始化默认tab 表格列和操作  */
    init() {

      this.default_tab = this.$route.query.act_tab ? this.$route.query.act_tab : this.Role === 'admin' ? 3 : 1;
      this.tableColums = tableColums(this.default_tab);
      this.handleArr = handleArr(this.default_tab);
    },
    // 提交参会名单
    submitAttendees(row,type){
      type==='查看'? (this.isParticipateShow = true)  : (this.isAddParticipateShow = true)
      this.currentRsCalendarId = row.RsCalendarId
      this.currentResearcherId = row.ResearcherId
    },
  },
  mounted() {
    this.init();

  },
};
</script>

<style lang="scss">
.my-calendar {
  .my-calendar-list {
    .top-wrap{
      display: flex;
      .filter-wrap{
        flex: 1;
        display: flex;
        align-items: center;
        gap: 0 5px;
      }
    }
    .tabs-type {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      .type-item {
        border-bottom: 3px solid transparent;
        font-size: 16px;
        margin-right: 40px;
        padding: 4px 0;
        cursor: pointer;

        &.act {
          font-size: 18px;
          color: #000;
          font-weight: 600;
          border-color: #409EFF;
        }
      }
    }
  }
  .my-calendar-context {
    margin-top: 20px;
    .left-title {
      font-weight: 700;
      line-height: 40px;
      font-size: 16px;
    }
  }
  .reason-dialog-container{
      .form-item{
          display: flex;
          justify-content: space-between;
          margin:0 30px 30px;
          p{
              margin-top: 15px;
              word-break: keep-all;
          }
          .reason{
              margin-left: 15px;
              textarea{
                width:100%;
                resize: none;
                padding:5px;
                box-sizing: border-box;
                color: #999;
              }
              .hint{
                  display: inline-block;
                  margin-top: 5px;
                  color:#999;
              }
          }
          
      }
  }
}

.company-tip-poper {
  max-width: 400px;
}
</style>