ylrz_his_scrm_companyUI/src/views/qw/sopUserLogsInfo/sopUserLogsInfoDetails.vue

<template>
  <div class="app-container">
    <el-alert
      title="注意事项"
      type="warning"
      description="搜索【客户备注】【标签】 只能搜索/筛选出 【当前页】的数据）"
      :closable="false"
      show-icon>
    </el-alert>
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
<!--      <el-form-item label="企微员工账号" prop="qwUserId">-->
<!--        <el-input-->
<!--          v-model="queryParams.qwUserId"-->
<!--          placeholder="请输入企微员工账号"-->
<!--          clearable-->
<!--          size="small"-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item label="客户名称" prop="externalUserName">
        <el-input
          v-model="queryParams.externalUserName"
          placeholder="请输入客户名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客户备注" prop="remark">
        <el-input
          v-model="queryParams.remark"
          placeholder="请输入客户备注"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="标签" prop="tagIds">
<!--        <el-select v-model="selectTags" remote multiple placeholder="请选择" filterable  style="width: 100%;">-->
<!--          <el-option-->
<!--            v-for="dict in tagList"-->
<!--            :label="dict.name"-->
<!--            :value="dict.tagId">-->
<!--          </el-option>-->
<!--        </el-select>-->

        <div @click="hangleChangeTags()" style="cursor: pointer; border: 1px solid #e6e6e6; background-color: white; overflow: hidden; flex-grow: 1;width: 250px">
          <div style="min-height: 35px; max-height: 200px; overflow-y: auto;">
            <el-tag type="success"
                    closable
                    :disable-transitions="false"
                    v-for="list in this.selectTags"
                    :key="list.tagId"
                    @close="handleCloseTags(list)"
                    style="margin: 3px;"
            >{{list.name}}
            </el-tag>
          </div>
        </div>

      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-s-promotion"
          size="medium"
          :disabled="multiple"
          @click="handleSendMsg"
          v-hasPermi="['qw:sopUserLogsInfo:msg']"
        >一键群发</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="medium"
          :disabled="multiple"
          @click="handleUpdate"
          v-if="queryParams.filterMode == 1"
          v-hasPermi="['qw:sopUserLogsInfo:edit']"
        >批量修改客户营期</el-button>
      </el-col>

<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="success"-->
<!--          plain-->
<!--          icon="el-icon-download"-->
<!--          size="mini"-->
<!--          :loading="exportLoading"-->
<!--          @click="handleExport"-->
<!--          v-hasPermi="['qw:sop:export']"-->
<!--        >导出</el-button>-->
<!--      </el-col>-->
    </el-row>

    <el-table border v-loading="loading" :data="sopUserLogsInfoList" @selection-change="handleSelectionChange" v-if="queryParams.filterMode == 1">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="编号" align="center" prop="id" width="100"/>
<!--      <el-table-column label="企微员工账号" align="center" prop="qwUserId" width="100"/>-->
      <el-table-column label="客户ID" align="center" prop="externalId" width="100"/>
<!--      <el-table-column label="客户小程序id" align="center" prop="fsUserId" width="100">-->
<!--        <template slot-scope="scope">-->
<!--          <el-tag type="success">-->
<!--            {{ scope.row.fsUserId === 0 || scope.row.fsUserId ===  null ? '无' : scope.row.fsUserId }}-->
<!--          </el-tag>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="客户名称" align="center" prop="externalUserName" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="客户标签" align="center" prop="tagIds" width="240">
        <template slot-scope="scope">
          <div v-for="name in scope.row.tagIdsName" v-if="scope.row.tagIdsName && scope.row.tagIdsName.length > 0 && scope.row.tagIdsName[0] != '无标签'" style="display: inline;">
            <el-tag type="success">{{ name }}</el-tag>
          </div>
          <div v-else>
            <span style="color: red;">无标签</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="进线时间" align="center" prop="inComTime" width="180"/>
      <el-table-column label="添加日期" align="center" prop="createTime" width="180"/>
      <el-table-column label="添加时间" align="center" prop="crtTime" width="180"/>
      <el-table-column label="修改时间" align="center" prop="updateTime" width="180"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120" fixed="right">
        <template slot-scope="scope">
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-edit"-->
<!--            @click="handleUpdate(scope.row)"-->
<!--            v-hasPermi="['qw:sopUserLogsInfo:edit']"-->
<!--          >修改客户营期</el-button>-->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['qw:sopUserLogsInfo:remove']"
          >删除客户营期</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-table border v-loading="loading" :data="sopUserLogsInfoList" @selection-change="handleSelectionChange" v-if="queryParams.filterMode == 2">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="编号" align="center" prop="id" width="100"/>
      <el-table-column label="客户名称" align="center" prop="name" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="客户标签" align="center" prop="tagIds" width="240">
        <template slot-scope="scope">
          <div v-for="name in scope.row.tagNames" v-if="scope.row.tagNames && scope.row.tagNames.length > 0 && scope.row.tagNames[0] != '无标签'" style="display: inline;">
            <el-tag type="success">{{ name }}</el-tag>
          </div>
          <div v-else>
            <span style="color: red;">无标签</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="加群时间" align="center" prop="joinTime" width="180"/>
      <el-table-column label="进线时间" align="center" prop="inComTime" width="180"/>
    </el-table>

    <pagination-more
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog :title="sendMsgOpen.title" :visible.sync="sendMsgOpen.open"  width="1000px" append-to-body>
        <el-form ref="msgForm" :model="msgForm" :rules="msgRules" label-width="100px">
          <el-form-item label="选择课程">
            <el-select  v-model="msgForm.courseId" placeholder="请选择课程" style=" margin-right: 10px;" size="mini" remote  filterable  @change="courseChange()">
              <el-option
                v-for="dict in courseList"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="parseInt(dict.dictValue)"
              />
            </el-select>
            <el-select  v-model="msgForm.videoId" placeholder="请选择小节" size="mini" style=" margin-right: 10px;" remote  filterable @change="videoIdChange()"  >
              <el-option
                v-for="dict in videoList"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="parseInt(dict.dictValue)"
              />
            </el-select>
            <el-select  v-model="msgForm.courseType" placeholder="请选择消息类型" size="mini" style=" margin-right: 10px;">
              <el-option
                v-for="dict in sysFsSopWatchStatus"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="parseInt(dict.dictValue)"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="规则" prop="setting"  >
            <div v-for="(item, index) in setting" :key="index" style="background-color: #fdfdfd; border: 1px solid #e6e6e6; margin-bottom: 20px;">
              <el-row>
                <el-col :span="22">
                  <el-form :model="item" label-width="70px">
                    <el-form-item label="内容类别" style="margin: 2%">
                      <el-radio-group  v-model="item.contentType">
                        <el-radio   :label="item.dictValue" v-for="item in sysQwSopAiContentType"  @change="handleContentTypeChange()">{{item.dictLabel}}</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="内容" style="margin-bottom: 2%" >
                      <el-input
                        v-if="item.contentType == 1"
                        v-model="item.value"
                        type="textarea"
                        :rows="3"
                        placeholder="内容"
                        style="width: 90%; margin-top: 10px;"
                        @keydown.native="handleKeydown($event, index)"
                        :ref="`textarea-${index}`"
                      >
                      </el-input>
                      <el-link
                        v-if="item.contentType == 1"
                        type="primary"
                        @click="toggleSalesCall(index)"
                        style="margin-top: 10px;"
                      >
                        {{ item.isSalesCallAdded ? '移除#销售称呼#' : '添加#销售称呼#' }}
                      </el-link>
                      <el-link
                        v-if="item.contentType == 1"
                        type="primary"
                        @click="toggleSalesCallCustomer(index)"
                        style="margin-top: 10px;margin-left: 2%"
                      >
                        {{ item.isSalesCallCustomerAdded ? '移除#客户称呼#' : '添加#客户称呼#' }}
                      </el-link>


                      <ImageUpload v-if="item.contentType == 2 " v-model="item.imgUrl" type="image" :num="1"  :width="150" :height="150" />

                      <div v-if="item.contentType == 3 || item.contentType ==9 ">
                        <el-card class="box-card">
                          <el-form-item label="链接标题:"  label-width="100px">
                            <el-input v-model="item.linkTitle" placeholder="请输入链接标题" style="width: 90%;"/>
                          </el-form-item>
                          <el-form-item label="链接描述:"   label-width="100px" >
                            <el-input type="textarea" :rows="3" v-model="item.linkDescribe" placeholder="请输入链接描述" style="width: 90%;margin-top: 1%;"/>
                          </el-form-item>
                          <el-form-item label="链接封面:"   label-width="100px">
                            <ImageUpload v-model="item.linkImageUrl" type="image" :num="1" :file-size="2" :width="150" :height="150" style="margin-top: 1%;" />
                          </el-form-item>
                          <el-form-item label="链接地址:"  label-width="100px" >
                            <el-tag type="warning" v-model="item.isBindUrl=1">选择的课程小节 即为卡片链接地址</el-tag>
                          </el-form-item>
                        </el-card>
                      </div>
                      <div v-if="item.contentType == 4">
                        <el-card class="box-card">
                          <el-form-item label="标题" prop="miniprogramTitle">
                            <el-input v-model="item.miniprogramTitle" placeholder="请输入小程序消息标题，最长为64字"  />
                          </el-form-item>
                          <el-form-item label="封面" prop="miniprogramPicUrl">
                            <ImageUpload v-model="item.miniprogramPicUrl"  type="image" :num="10" :width="150" :height="150" />
                          </el-form-item>
                          <el-form-item label="appid" prop="miniprogramAppid" v-show="false" >
                            <el-input v-model="item.miniprogramAppid='wx73f85f8d62769119' " disabled />
                          </el-form-item>
                          <el-form-item label="page路径" prop="miniprogramPage" v-show="false" label-width="100px" style="margin-left: -30px" >
                            <el-input v-model="item.miniprogramPage" placeholder="小程序消息打开后的路径"  disabled />
                          </el-form-item>
                        </el-card>
                      </div>
                      <div v-if="item.contentType == 5 ">

                        <el-form-item label="上传文件:" prop="fileUrl" label-width="100px">
                          <el-upload
                            v-model="item.fileUrl"
                            class="avatar-uploader"
                            :action="uploadUrl"
                            :show-file-list="false"
                            :on-success="(res, file) => handleAvatarSuccessFile(res, file, item)"
                            :before-upload="beforeAvatarUploadFile">
                            <i class="el-icon-plus avatar-uploader-icon"></i>
                          </el-upload>
                          <el-link v-if="item.fileUrl" type="primary" :href="downloadUrl(item.fileUrl)" download>
                            {{item.fileUrl}}
                          </el-link>
                        </el-form-item>

                      </div>

                      <div v-if="item.contentType == 6 ">
                        <el-form-item label="上传视频：" prop="videoUrl" label-width="100px">
                          <el-upload
                            v-model="item.videoUrl"
                            class="avatar-uploader"
                            :action="uploadUrl"
                            :show-file-list="false"
                            :on-success="(res, file) => handleAvatarSuccessVideo(res, file, item)"
                            :before-upload="beforeAvatarUploadVideo">
                            <i class="el-icon-plus avatar-uploader-icon"></i>
                          </el-upload>
                          <video v-if="item.videoUrl"
                                 :src="item.videoUrl"
                                 controls style="width: 200px;height: 100px">
                          </video>
                        </el-form-item>
                      </div>
                      <div v-if="item.contentType == 7 ">
                        <el-input
                          v-model="item.value"
                          type="textarea" :rows="3" maxlength="66" show-word-limit
                          placeholder="输入要转为语音的内容" style="width: 90%;margin-top: 10px;"
                          @input="handleInputVideoText(item.value,item)"/>
                      </div>
                      <div v-if="item.contentType == 8">

                      </div>

                    </el-form-item>

                    <el-form-item label="添加短链" v-if="item.contentType == 1 "  >
                      <el-tooltip content="请先根据课程选定课程小节之后再添加" effect="dark" :disabled="!!msgForm.videoId">
                        <el-switch
                          v-model="item.isBindUrl"
                          :disabled="!msgForm.videoId"
                          active-color="#13ce66"
                          inactive-color="#DCDFE6"
                          active-value="1"
                          inactive-value="2">
                        </el-switch>
                      </el-tooltip>

                      <span v-if="item.isBindUrl == '1'" style="margin-left: 10px; color: #13ce66">添加URL</span>
                      <span v-if="item.isBindUrl == '2'" style="margin-left: 10px; color: #b1b4ba">不加URL</span>
                    </el-form-item>
                    <el-form-item label="课节过期时间" v-if="item.isBindUrl == '1'
                                                          && item.contentType != 2
                                                          && item.contentType != 5
                                                          && item.contentType != 6
                                                          && item.contentType != 8"
                                  style="margin-top: 1%" label-width="100px">
                      <el-row>
                        <el-input-number  v-model="item.expiresDays"  :min="1" :max="100" ></el-input-number>
                        （天）
                      </el-row>
                      <el-row>
                        <span class="tip">填写0或不填时，默认为系统配置的默认时间</span>
                      </el-row>
                    </el-form-item>
                  </el-form>
                </el-col>
                <el-col :span="1" :offset="1">
                  <i class="el-icon-delete" @click="delSetList(index)" style="margin-top: 20px;" v-if="setting.length>1"></i>
                </el-col>
              </el-row>
            </div>
            <el-link type="primary" class="el-icon-plus" :underline="false" @click='addSetList()'  >添加内容</el-link>

          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitMsgForm">确 定</el-button>
          <el-button @click="cancelMsgForm">取 消</el-button>
        </div>
    </el-dialog>

    <!-- 添加或修改sopUserLogsInfo对话框 -->
    <el-dialog title="批量修改客户营期" :visible.sync="updateOpen" width="500px" append-to-body>
      <el-form ref="updateLogsInfoFrom" :model="updateLogsInfoFrom" :rules="batchRules" label-width="120px">
        <el-form-item label="选择营期时间" prop="paramTime">
          <el-date-picker clearable size="small"
            v-model="updateLogsInfoFrom.paramTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择营期时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <!--  搜索标签   -->
    <el-dialog :title="changeTagDialog.title" :visible.sync="changeTagDialog.open" style="width:100%;height: 100%" append-to-body>

      <div>搜索标签：
        <el-input v-model="queryTagParams.name" placeholder="请输入标签名称" clearable size="small" style="width: 200px;margin-right: 10px" />
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearchTags(queryTagParams.name)">搜索</el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="cancelSearchTags">重置</el-button>
      </div>
      <div v-for="item in tagGroupList" :key="item.id"  >
        <div style="font-size: 20px;margin-top: 20px;margin-bottom: 20px;">
          <span class="name-background">{{ item.name }}</span>
        </div>
        <div class="tag-container">
          <a
            v-for="tagItem in item.tag"
            class="tag-box"
            @click="tagSelection(tagItem)"
            :class="{ 'tag-selected': tagItem.isSelected }"
          >
            {{ tagItem.name }}
          </a>
        </div>
      </div>

      <pagination
        v-show="tagTotal>0"
        :total="tagTotal"
        :page.sync="queryTagParams.pageNum"
        :limit.sync="queryTagParams.pageSize"
        @pagination="getPageListTagGroup"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="tagSubmitForm()">确 定</el-button>
        <el-button @click="tagCancel()">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  listSopUserLogsInfo,
  delSopUserLogsInfo,
  addSopUserLogsInfo,
  updateSopUserLogsInfo,
  exportSopUserLogsInfo,
  sendMsgSop, batchUpdateSopUserLogsInfoToTime
} from "@/api/qw/sopUserLogsInfo";
import ImageUpload from "@/views/qw/sop/ImageUpload.vue";
import {courseList, videoList} from "@/api/qw/sop";
import {addCourseFinishTemp, updateCourseFinishTemp} from "@/api/course/courseFinishTemp";
import {allListTagGroup} from "@/api/qw/tagGroup";
import {listTag} from "@/api/qw/tag";
import {searchTags} from "../../../api/qw/tag";

export default {
  name: "sopUserLogsInfoDetails",
  components: {ImageUpload},
  data() {
    return {
      //上传语音的遮罩层
      voiceLoading :false,
      uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
      uploadUrlByVoice:process.env.VUE_APP_BASE_API+"/common/uploadOSSByHOOKVoice",
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // sopUserLogsInfo表格数据
      sopUserLogsInfoList: [],
      sysFsSopWatchStatus: [],
      isSalesCallAdded:false,
      isSalesCallCustomerAdded:false,
      selectTags:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      updateOpen:false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        tagIds:null,
        remark:null,
        sopId: null,
        userLogsId: null,
        userIdParam:null,
        startTimeParam:null,
        externalContactId: null,
        qwUserId: null,
        corpId: null,
        externalId: null,
        fsUserId: null,
        externalUserName: null,
        createTime: null,
      },

      tagGroupList: [],

      tagTotal:0,

      //标签
      changeTagDialog:{
        title:"",
        open:false,
      },

      queryTagParams:{
        pageNum: 1,
        pageSize: 10,
        total:0,
        name:null,
        corpId:null,
      },

      courseList:[],
      videoList:[],
      //插件版
      sysQwSopAiContentType:[],

      sendMsgOpen:{
        title:'一键批量群发',
        open:false,
        ids:null,
      },
      // 表单参数
      form: {},
      updateLogsInfoFrom:{},
      setting:[{contentType:'1', value: '',}],
      msgForm:{
        videoId:null,
        courseId:null,
        courseType:null,
        userIdParam:null,
        setting:null,
        ids:null,
        sopId: null,
        startTime: null,
      },
      // 表单校验
      rules: {},
      batchRules:{
        paramTime: [
          { required: true, message: '选择的时间不能为空', trigger: 'blur' }
        ],
      },
      msgRules:{},
    };
  },

  created() {
    this.getDicts("sys_qwSopAi_contentType").then(response => {
      this.sysQwSopAiContentType = response.data;
    });
    this.getDicts("sys_fs_sop_watch_status").then(response => {
      this.sysFsSopWatchStatus = response.data;
    });

    courseList().then(response => {
      this.courseList = response.list;
    });
  },
  methods: {

    selectSopUserLogsInfo(val,externalUserName){

      this.loading = true;
      this.queryParams.sopId=val.sopId;
      this.queryParams.filterMode=val.filterMode;
      this.queryParams.userLogsId=val.id;
      this.queryParams.chatId=val.chatId;
      if (externalUserName!=null){
        this.queryParams.externalUserName = externalUserName;
      }

      listSopUserLogsInfo(this.queryParams).then(response => {
        this.sopUserLogsInfoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });


      this.queryParams.qwUserId=val.qwUserId;
      this.queryParams.corpId=val.corpId;
      //用于一键群发
      this.queryParams.userIdParam=val.userId;
      this.queryParams.startTimeParam=val.startTime;
      this.queryParams.corpIdParam=val.corpId;

    },

    //搜索的标签
    hangleChangeTags(){

      this.changeTagDialog.title="搜索的标签"
      this.changeTagDialog.open=true;

      // 获取 tagListFormIndex 中的所有 tagId，用于快速查找
      const selectedTagIds = new Set(
        (this.selectTags || []).map(tagItem => tagItem?.tagId)
      );

      this.queryTagParams.name=null;
      this.getPageListTagGroup();

      setTimeout(() => {
        for (let i = 0; i < this.tagGroupList.length; i++) {
          for (let x = 0; x < this.tagGroupList[i].tag.length; x++) {
            this.tagGroupList[i].tag[x].isSelected = selectedTagIds.has(this.tagGroupList[i].tag[x].tagId);
          }
        }
      }, 200);


    },

    tagSelection(row){

      row.isSelected= !row.isSelected;
      this.$forceUpdate();
    },


    //确定选择标签
    tagSubmitForm(){

      for (let i = 0; i < this.tagGroupList.length; i++) {
        for (let x = 0; x < this.tagGroupList[i].tag.length; x++) {
          if (this.tagGroupList[i].tag[x].isSelected === true) {

            if (!this.selectTags) {
              this.selectTags = [];
            }

            // 检查当前 tag 是否已经存在于 tagListFormIndex[index] 中
            let tagExists = this.selectTags.some(
              tag => tag.id === this.tagGroupList[i].tag[x].id
            );

            // 如果 tag 不存在于 tagListFormIndex[index] 中，则新增
            if (!tagExists) {
              this.selectTags.push(this.tagGroupList[i].tag[x]);
            }
          }
        }
      }
      if (!this.selectTags || this.selectTags.length === 0) {
        return this.$message('请选择标签');
      }

      this.changeTagDialog.open = false;
    },

    //取消选择标签
    tagCancel(){
      this.changeTagDialog.open = false;
    },

    //删除一些选择的标签
    handleCloseTags(list){
      const ls = this.selectTags.findIndex(t => t.tagId === list.tagId);
      if (ls !== -1) {
        this.selectTags.splice(ls, 1);
        this.selectTags = [...this.selectTags];
      }

      if (this.selectTags!=null && this.selectTags.length>0){
        // 确保 this.form.tags 是数组
        if (!this.queryParams.tagIds) {
          this.queryParams.tagIds = []; // 如果未定义，初始化
        } else {
          this.queryParams.tagIds = []; // 清空已有数据
        }

        // 遍历并添加 tagId
        this.selectTags.forEach(tag => {
          if (tag.tagId) { // 确保 tagId 存在
            this.queryParams.tagIds.push(tag.tagId);
          }
        });
        this.queryParams.tagIds=this.queryParams.tagIds.join(",");
      }else {
        this.queryParams.tagIds=null;
      }

    },

    handleSearchTags(name){

      searchTags({name:name,corpId:this.queryParams.corpId}).then(response => {
        this.tagGroupList = response.rows;
      });

    },


    cancelSearchTags(){

      this.resetSearchQueryTag()

      this.getPageListTagGroup();

    },

    getPageListTagGroup(){
      this.queryTagParams.corpId=this.queryParams.corpId
      allListTagGroup(this.queryTagParams).then(response => {
        this.tagGroupList = response.rows;
        this.tagTotal = response.total;
      });
    },

    resetSearchQueryTag(){

      this.queryTagParams= {
        pageNum: 1,
        pageSize: 10,
        total:0,
        name:null,
      };
    },


    courseChange() {
      if (this.msgForm.courseId != null ) {
        const selectedCourse = this.courseList.find(course => parseInt(course.dictValue) === this.msgForm.courseId);
        for (let i = 0; i < this.setting.length; i++) {
          //响应式直接给链接的标题/封面上值
          if (selectedCourse && this.msgForm.courseId != null) {
            if ( this.setting[i].contentType == 3 || this.setting[i].contentType == 9 ){
              this.$set(this.setting[i], 'linkTitle', selectedCourse.dictLabel);
              this.$set(this.setting[i], 'linkImageUrl', selectedCourse.dictImgUrl);
            }

            if ( this.setting[i].contentType == 4 ){
              this.$set(this.setting[i], 'miniprogramPicUrl', selectedCourse.dictImgUrl);
            }
          }

        }

      }
      videoList(this.msgForm.courseId).then(response => {
        this.videoList=response.list;
      });
    },

    videoIdChange() {
      if (this.msgForm.videoId != null ) {
        // 查找选中的课节对应的 label
        const selectedVideo = this.videoList.find(course => parseInt(course.dictValue) === this.msgForm.videoId);

        for (let i = 0; i < this.setting.length; i++) {
          //响应式直接给链接的描述上值
          if (selectedVideo && this.msgForm.videoId != null) {
            if (this.setting[i].contentType == 3 || this.setting[i].contentType == 9 ){
              this.$set(this.setting[i], 'linkDescribe', selectedVideo.dictLabel);
            }

            if (this.setting[i].contentType == 4){
              this.$set(this.setting[i], 'miniprogramTitle', selectedVideo.dictLabel);
            }


          }
        }
      }
    },
    handleAvatarSuccessFile(res, file, item) {
      if (res.code === 200) {
        // 使用 $set 确保响应式更新
        this.$set(item, 'fileUrl', res.url);
      } else {
        this.msgError(res.msg);
      }
    },
    beforeAvatarUploadFile(file){
      const isLt1M = file.size / 1024 / 1024 < 10;
      if (!isLt1M) {
        this.$message.error('上传大小不能超过 10MB!');
      }
      return isLt1M;
    },
    //下载文件
    downloadUrl(materialUrl) {
      // 直接返回文件 URL
      return materialUrl;
    },

    handleAvatarSuccessVideo(res, file, item) {
      if(res.code==200){
        // 使用 $set 确保响应式更新
        this.$set(item, 'videoUrl', res.url);
      }
      else{
        this.msgError(res.msg);
      }
    },

    beforeAvatarUploadVideo(file){
      const isLt30M = file.size / 1024 / 1024 < 10;
      const isMP4 = file.type === 'video/mp4';

      if (!isMP4) {
        this.$message.error('仅支持上传 MP4 格式的视频文件!');
        return false;
      }

      if (!isLt30M) {
        this.$message.error('上传大小不能超过 10MB!');
        return false;
      }

      return true;
    },

    handleInputVideoText(value,content){
      // 允许的字符：中文、英文（大小写）、数字和指定标点符号（，。！？）
      const regex = /^[\u4e00-\u9fa5，。！？,!?]+$/;

      // 删除不符合条件的字符
      const filteredValue = value.split('').filter(char => regex.test(char)).join('');

      this.$set(content, 'value', filteredValue);

    },

    delSetList(index){
      this.setting.splice(index,1)
    },
    addSetList(){
      const newSetting = {
        contentType:'1',
        value: '',
      };
      // 将新设置项添加到 content.setting 数组中
      this.setting.push(newSetting);

    },


    handleKeydown(event, index) {
      const item = this.setting[index];
      const textarea = this.$refs[`textarea-${index}`][0].$refs.textarea;
      const cursorPosition = textarea.selectionStart;

      // 检查是否按下了 Backspace 或 Delete 键
      if (event.key === 'Backspace' || event.key === 'Delete') {
        const tags = ['#销售称呼#', '#客户称呼#']; // 需要检查的标签
        const value = item.value;

        // 遍历标签，检查是否需要删除
        for (const tag of tags) {
          let start, end;

          if (event.key === 'Backspace') {
            // 检查光标前是否是当前标签的一部分
            start = cursorPosition - tag.length;
            if (start >= 0 && value.slice(start, cursorPosition) === tag) {
              // 删除整个标签
              item.value = value.slice(0, start) + value.slice(cursorPosition);
              // 更新光标位置
              this.$nextTick(() => {
                textarea.setSelectionRange(start, start);
              });
              // 更新状态
              if (tag === '#销售称呼#') item.isSalesCallAdded = false;
              if (tag === '#客户称呼#') item.isSalesCallCustomerAdded = false;
              event.preventDefault(); // 阻止默认删除行为
              break; // 找到匹配的标签后退出循环
            }
          } else if (event.key === 'Delete') {
            // 检查光标后是否是当前标签的一部分
            end = cursorPosition + tag.length;
            if (end <= value.length && value.slice(cursorPosition, end) === tag) {
              // 删除整个标签
              item.value = value.slice(0, cursorPosition) + value.slice(end);
              // 更新状态
              if (tag === '#销售称呼#') item.isSalesCallAdded = false;
              if (tag === '#客户称呼#') item.isSalesCallCustomerAdded = false;
              event.preventDefault(); // 阻止默认删除行为
              break; // 找到匹配的标签后退出循环
            }
          }

          // 检查光标是否位于标签的中间
          for (let i = 0; i <= tag.length; i++) {
            const tagStart = cursorPosition - i;
            const tagEnd = tagStart + tag.length;
            if (
              tagStart >= 0 &&
              tagEnd <= value.length &&
              value.slice(tagStart, tagEnd) === tag
            ) {
              // 删除整个标签
              item.value = value.slice(0, tagStart) + value.slice(tagEnd);
              // 更新光标位置
              this.$nextTick(() => {
                textarea.setSelectionRange(tagStart, tagStart);
              });
              // 更新状态
              if (tag === '#销售称呼#') item.isSalesCallAdded = false;
              if (tag === '#客户称呼#') item.isSalesCallCustomerAdded = false;
              event.preventDefault(); // 阻止默认删除行为
              break; // 找到匹配的标签后退出循环
            }
          }
        }
      }
    },

    // 切换添加销售称呼按钮点击事件
    toggleSalesCall(index) {
      const item = this.setting[index];
      const salesCall = '#销售称呼#';
      const textarea = this.$refs[`textarea-${index}`][0].$refs.textarea;

      // 获取当前光标位置
      const cursorPosition = textarea.selectionStart;

      if (item.isSalesCallAdded) {
        // 移除所有的 #销售称呼#
        item.value = item.value.replace(new RegExp(salesCall, 'g'), '');
      } else {
        // 添加 #销售称呼#
        item.value = item.value.slice(0, cursorPosition) + salesCall + item.value.slice(cursorPosition);
      }

      // 切换状态
      item.isSalesCallAdded = !item.isSalesCallAdded;

      // 保持光标位置
      this.$nextTick(() => {
        textarea.setSelectionRange(cursorPosition, cursorPosition);
      });
    },
    toggleSalesCallCustomer(index) {
      const item = this.setting[index];
      const salesCall = '#客户称呼#';
      const textarea = this.$refs[`textarea-${index}`][0].$refs.textarea;

      // 获取当前光标位置
      const cursorPosition = textarea.selectionStart;

      if (item.isSalesCallCustomerAdded) {
        // 移除所有的 #销售称呼#
        item.value = item.value.replace(new RegExp(salesCall, 'g'), '');
      } else {
        // 添加 #客户称呼#
        item.value = item.value.slice(0, cursorPosition) + salesCall + item.value.slice(cursorPosition);
      }

      // 切换状态
      item.isSalesCallCustomerAdded = !item.isSalesCallCustomerAdded;

      // 保持光标位置
      this.$nextTick(() => {
        textarea.setSelectionRange(cursorPosition, cursorPosition);
      });
    },

    handleContentTypeChange() {

      //如果是链接的才上
      if (this.msgForm.courseId != null ) {
        const selectedCourse = this.courseList.find(course => parseInt(course.dictValue) === this.msgForm.courseId);
        for (let i = 0; i < this.setting.length; i++) {
          //响应式直接给链接的标题/封面上值
          if (selectedCourse  && this.msgForm.courseId != null) {

            if (this.setting[i].contentType == 3 || this.setting[i].contentType == 9){
              this.$set(this.setting[i], 'linkTitle', selectedCourse.dictLabel);
              this.$set(this.setting[i], 'linkImageUrl', selectedCourse.dictImgUrl);
            }
            if (this.setting[i].contentType == 4){
              this.$set(this.setting[i], 'miniprogramPicUrl', selectedCourse.dictImgUrl);
            }


          }

        }

      }
      if (this.msgForm.videoId != null ) {
        // 查找选中的课节对应的 label
        const selectedVideo = this.videoList.find(course => parseInt(course.dictValue) === this.msgForm.videoId);

        for (let i = 0; i < this.setting.length; i++) {
          //响应式直接给链接的描述上值
          if (selectedVideo  && this.msgForm.videoId != null) {

            if (this.setting[i].contentType == 3 || this.setting[i].contentType == 9){
              this.$set(this.setting[i], 'linkDescribe', selectedVideo.dictLabel);
            }
            if (this.setting[i].contentType == 4){
              this.$set(this.setting[i], 'miniprogramTitle', selectedVideo.dictLabel);
            }

          }
        }
      }


    },


    /** 查询sopUserLogsInfo列表 */
    getList() {
      this.loading = true;
      listSopUserLogsInfo(this.queryParams).then(response => {
        this.sopUserLogsInfoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.updateOpen = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        sopId: null,
        userLogsId: null,
        externalContactId: null,
        qwUserId: null,
        corpId: null,
        externalId: null,
        fsUserId: null,
        externalUserName: null,
        createTime: null,
        crtTime: null,
        updateTime: null
      };
      this.resetForm("form");
    },


    resetSendMsgSop() {
      this.msgForm = {
        videoId:null,
        courseId:null,
        courseType:null,
        setting:null,
        ids:null,
      };
      this.resetForm("msgForm");
    },

    /** 搜索按钮操作 */
    handleQuery() {

      if (this.selectTags!=null && this.selectTags.length>0){
        // 确保 this.form.tags 是数组
        if (!this.queryParams.tagIds) {
          this.queryParams.tagIds = []; // 如果未定义，初始化
        } else {
          this.queryParams.tagIds = []; // 清空已有数据
        }

        // 遍历并添加 tagId
        this.selectTags.forEach(tag => {
          if (tag.tagId) { // 确保 tagId 存在
            this.queryParams.tagIds.push(tag.tagId);
          }
        });
        this.queryParams.tagIds=this.queryParams.tagIds.join(",");
      }else {
        this.queryParams.tagIds=null;
      }


      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.selectTags=[];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加客户营期";
    },

    /**
    * 一键群发
    */
    handleSendMsg(){
      this.sendMsgOpen.open=true;
      this.sendMsgOpen.ids=this.ids;
    },

    /** 修改按钮操作 */
    handleUpdate() {
      this.updateOpen= true;
    },
    submitMsgForm(){
      this.$refs["msgForm"].validate(valid => {
        if (valid) {

          this.msgForm.setting=JSON.stringify(this.setting)
          this.msgForm.ids=this.ids;
          this.msgForm.sopId=this.queryParams.sopId;
          this.msgForm.userIdParam=this.queryParams.userIdParam;
          this.msgForm.startTime=this.queryParams.startTimeParam;
          this.msgForm.corpId=this.queryParams.corpIdParam;
          this.msgForm.filterMode=this.queryParams.filterMode;

          if (this.setting.length <= 0) {
            return this.$message.error("请添加规则")
          }
          if (this.msgForm.courseId===null || this.msgForm.courseId===''){
           return this.$message.error("课程不能为空")
          }

          if (this.msgForm.videoId===null || this.msgForm.videoId===''){
            return this.$message.error("课节不能为空")
          }

          if (this.msgForm.courseType===null || this.msgForm.courseType===''){
            return this.$message.error("消息类型不能为空")
          }

          for (let i = 0; i < this.setting.length; i++) {
            if (this.setting[i].contentType == 1 && (this.setting[i].value == null || this.setting[i].value == "")) {
              return this.$message.error("内容不能为空")
            }
            if (this.setting[i].contentType == 2 && (this.setting[i].imgUrl == null || this.setting[i].imgUrl == "")) {
              return this.$message.error("图片不能为空")
            }
            if ((this.setting[i].contentType == 3 || this.setting[i].contentType == 9  ) && (this.setting[i].linkTitle == null || this.setting[i].linkTitle == "")) {
              return this.$message.error("链接标题不能为空")
            }
            if ((this.setting[i].contentType == 3 || this.setting[i].contentType == 9 ) && (this.setting[i].linkDescribe == null || this.setting[i].linkDescribe == "")) {
              return this.$message.error("链接描述不能为空")
            }
            if ((this.setting[i].contentType == 3 || this.setting[i].contentType == 9 ) && (this.setting[i].linkImageUrl == null || this.setting[i].linkImageUrl == "")) {
              return this.$message.error("链接图片不能为空")
            }
            if ((this.setting[i].contentType == 3 || this.setting[i].contentType == 9 )&& this.setting[i].type == 1 && (this.setting[i].linkUrl == null || this.setting[i].linkUrl == "")) {
              return this.$message.error("链接地址不能为空")
            }

            if (this.setting[i].contentType == 4 && (this.setting[i].miniprogramTitle == null || this.setting[i].miniprogramTitle == "")) {
              return this.$message.error("小程序消息标题不能为空")
            }
            if (this.setting[i].contentType == 4 && (this.setting[i].miniprogramPicUrl == null || this.setting[i].miniprogramPicUrl == "")) {
              return this.$message.error("小程序封面地址不能为空")
            }
            if (this.setting[i].contentType == 5 && (this.setting[i].fileUrl == null || this.setting[i].fileUrl == "")) {
              return this.$message.error("文件不能为空")
            }
            if (this.setting[i].contentType == 6 && (this.setting[i].videoUrl == null || this.setting[i].videoUrl == "")) {
              return this.$message.error("视频不能为空")
            }
            if (this.setting[i].contentType == 7 && (this.setting[i].value == null || this.setting[i].value == "")) {
              return this.$message.error("语音不能为空")
            }
          }

          this.sendMsgOpen.open = false;

          const loading = this.$loading({
            lock: true,
            text: '正在执行中请稍后~~请不要刷新页面！！',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });

          sendMsgSop(this.msgForm).then(response => {
            this.msgSuccess("一键群发成功");
            loading.close();
            this.setting=[];
            this.msgForm = {
              videoId:null,
              courseId:null,
              courseType:null,
              setting:null,
            }
            this.getList();
          }).finally(()=>{
            loading.close();
          });

        }
      });
    },
    cancelMsgForm(){
      this.sendMsgOpen.open = false;
      this.resetSendMsgSop();
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["updateLogsInfoFrom"].validate(valid => {
        if (valid) {

          this.updateLogsInfoFrom.ids=this.ids;
          this.updateLogsInfoFrom.sopId= this.queryParams.sopId
          this.updateLogsInfoFrom.qwUserId=this.queryParams.qwUserId
          this.updateLogsInfoFrom.corpId= this.queryParams.corpId


          let loadingRock = this.$loading({
            lock: true,
            text: '正在执行中请稍后~~请不要刷新页面！！',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });


          batchUpdateSopUserLogsInfoToTime(this.updateLogsInfoFrom).then(response => {
            this.msgSuccess("修改成功");
            this.open = false;
            this.updateOpen=false;
            this.getList();
            this.$emit('flashNotify')
            loadingRock.close();
          }).finally(res=>{
            loadingRock.close();
          })

        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除sopUserLogsInfo编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delSopUserLogsInfo(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有营期数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
          return exportSopUserLogsInfo(queryParams);
        }).then(response => {
          this.download(response.msg);
          this.exportLoading = false;
        }).catch(() => {});
    }
  }
};
</script>

<style scoped>
/* CSS 样式 */
.tag-container {
  display: flex;
  flex-wrap: wrap; /* 超出宽度时自动换行 */
  gap: 8px; /* 设置标签之间的间距 */
}
.name-background {
  display: inline-block;
  background-color: #abece6; /* 背景颜色 */
  padding: 4px 8px; /* 调整内边距，让背景包裹文字 */
  border-radius: 4px; /* 可选：设置圆角 */
}
.tag-box {
  padding: 8px 12px;
  border: 1px solid #989797;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
}

.tag-selected {
  background-color: #00bc98;
  color: #fff;
  border-color: #00bc98;
}

.el-tag + .el-tag {
  margin-left: 10px;
}


.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>