<template>
  <div class="app-container sop-temp-container"
       v-loading="!form.id"
       element-loading-text="页面加载中..."
       element-loading-background="rgba(255, 255, 255, 0.95)">
    <!-- 页面头部 -->
<!--    <div class="page-header">-->
<!--      <div class="header-title">-->
<!--        <i class="el-icon-document"></i>-->
<!--        <span v-if="this.form.sendType == 1 && formType==1">sop规则【修改企微接口】模板</span>-->
<!--        <span v-if="this.form.sendType == 1 && formType==2">sop规则【复制企微接口】模板</span>-->
<!--        <span v-if="this.form.sendType == 1 && formType==3">sop规则【查看企微接口】模板</span>-->
<!--        <span v-if="this.form.sendType == 2 && formType==1">sop规则【修改群发助手】模板</span>-->
<!--        <span v-if="this.form.sendType == 2 && formType==2">sop规则【复制群发助手】模板</span>-->
<!--        <span v-if="this.form.sendType == 2 && formType==3">sop规则【查看群发助手】模板</span>-->
<!--      </div>-->
<!--      <div class="header-subtitle">-->
<!--        <span class="template-id">模板编号：{{ this.form.id }}</span>-->
<!--      </div>-->
<!--    </div>-->

    <!-- 表单内容区 -->
    <div class="form-content">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="sop-form">
        <!-- 基本信息卡片 -->
        <el-card class="info-card" shadow="never">
          <div slot="header" class="card-header">
            <i class="el-icon-info"></i>
            <span>基本信息</span>
          </div>
          <div class="info-items">
            <div class="info-item">
              <span class="info-label">名称</span>
              <span class="info-value">{{ form.name }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">状态</span>
              <el-tag v-for="dict in statusOptions" v-if="dict.dictValue == form.status" :key="dict.dictValue" size="small">{{ dict.dictLabel }}</el-tag>
            </div>
            <div class="info-item">
              <span class="info-label">间隔天数</span>
              <span class="info-value">{{ form.gap }}天</span>
            </div>
            <div class="info-item">
              <span class="info-label">模板编号</span>
              <span class="info-value">{{ form.id }}</span>
            </div>
          </div>
        </el-card>
        <!-- 规则配置 -->
        <el-form-item label="规则" prop="setting" class="rule-form-item">
          <div class="rule-actions">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="small"
              @click='addSetting()'
              v-if="formType != 3 && roles.includes('add_sop_temp_day')">
              添加天数
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-sort"
              size="small"
              plain
              @click='openUpdateDaySorts()'
              v-if="formType != 3">
              修改天数排序
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-sort"
              size="small"
              plain
              @click='openUpdateSorts()'
              v-if=" formType != 3">
              修改规则排序
            </el-button>
          </div>
          <el-tabs v-model="tabIndex" type="card" @tab-remove="delSetting" v-if="setting && setting.length > 0"
                   :before-leave="leave" @tab-click="tabClick" class="rule-tabs">
            <el-tab-pane v-for="(item, index) in setting" :closable="formType != 3 && roles.includes('del_sop_temp_day')" :key="index" :name="index + ''">
              <el-badge slot="label" :is-dot="!item.id" class="item" style="display: inline-block">
                <span>{{ '第' + item.dayNum + '天' }}</span>
              </el-badge>
              <el-row v-loading="loading" element-loading-text="加载中..." element-loading-background="rgba(255, 255, 255, 0.9)" class="tab-content-row">
                <el-col :span="22">
                  <el-card shadow="never" class="day-content-card">
                    <el-form :model="item" label-width="100px" class="content-form">
                      <el-form-item v-if="form.sendType != 4" label="内容名称" style="height: 50px;">
                        <el-input :disabled="formType == 3" v-model="item.name"
                                  placeholder="内容名称,仅内部可见"/>
                      </el-form-item>
                      <el-form-item label="课程" v-if="form.sendType == 11 && item.content && item.content.length > 0" required>
                        <el-select :disabled="((formType == 3 || form.sendType == 11) && item.id != null) || !roles.includes('update_sop_temp_scourse')" v-model="item.content[0].courseId"
                                   placeholder="请选择课程" style=" margin-right: 10px;" size="mini" remote
                                   filterable
                                   @change="courseChangeUpdate(item.content[0], index, 0)">
                          <el-option
                            v-for="dict in courseList"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="parseInt(dict.dictValue)"
                          />
                        </el-select>
                        <el-select :disabled="((formType == 3 || form.sendType == 11) && item.id != null) || !roles.includes('update_sop_temp_scourse')" v-model="item.content[0].videoId"
                                   placeholder="请选择小节" size="mini" style=" margin-right: 10px;" remote
                                   filterable
                                   @change="videoIdChange(item.content[0],index,0)">
                          <el-option
                            v-for="dict in videoList[0]"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="parseInt(dict.dictValue)"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="规则" class="rule-content-item">
                        <div v-for="(content, contentIndex) in item.content" :key="contentIndex"
                             class="content-item-card">
                          <div class="content-item-header">
                            <span class="content-item-title">
                              <i class="el-icon-s-order"></i>
                              规则 {{ contentIndex + 1 }}
                            </span>
                          </div>
                          <el-row>
                            <el-col el-col :span="22">
                              <el-form :model="content" label-width="100px" class="content-form">
                                <div v-if="item.dayNum==1">
                                <el-form-item label="时间" v-if="form.sendType != 4" class="inline-form-item">
                                  <el-time-picker
                                    :disabled="formType == 3 || !roles.includes('update_sop_temp_time')"
                                    class="custom-input"
                                    v-model="content.time"
                                    value-format="HH:mm"
                                    format="HH:mm"
                                    :picker-options="{ selectableRange: ['01:00:00 - 01:59:00','05:00:00 - 23:59:59'] }"
                                    placeholder="时间"
                                    style="width: 120px;">
                                  </el-time-picker>
                                </el-form-item>
                                </div>
                                <div v-else>
                                  <el-form-item label="时间" v-if="form.sendType != 4" class="inline-form-item">
                                    <el-time-picker
                                      :disabled="formType == 3 || !roles.includes('update_sop_temp_time')"
                                      class="custom-input"
                                      v-model="content.time"
                                      :picker-options="{ selectableRange: ['00:01:00 - 00:59:00','05:00:00 - 23:59:59']}"
                                      value-format="HH:mm"
                                      format="HH:mm"
                                      placeholder="时间"
                                      style="width: 120px;">
                                    </el-time-picker>
                                  </el-form-item>
                                </div>
                                <el-form-item label="官方群发" v-if="contentIndex==0 && content.type==2  && form.sendType != 4" class="switch-form-item">
                                  <el-switch
                                    v-model="content.isOfficial"
                                    active-color="#13ce66"
                                    inactive-color="#DCDFE6"
                                    active-value="1"
                                    inactive-value="0">
                                  </el-switch>
                                  <div class="form-tip-info">
                                    <i class="el-icon-info"></i>
                                    请注意：官方群发 【第1天】 只能设置1点-1点30 的时间，【其他天数时间】 只能设置0点-0点30。此处仅为生成发送记录时间，实际发送可由 销售在公司规定的 【暂早上8点(前！！)】，在企业微信的【群发助手】处点击发送
                                  </div>
                                </el-form-item>
                                <el-form-item label="消息类别" v-if="form.sendType != 4 && form.sendType != 5" class="msg-category-item">
                                  <el-radio-group v-model="content.type"
                                                  :disabled="formType == 3 || content.isOfficial === '1'"
                                                  @change="updateHtml(() => content.contentType = '1',content)">
                                    <el-radio :label="1">普通</el-radio>
                                    <el-radio :label="2">课程</el-radio>
                                    <el-radio :label="4">AI触达</el-radio>
                                    <el-radio :label="5">打标签</el-radio>
                                    <el-radio :label="8">SIP外呼</el-radio>
                                    <el-radio :label="20">直播间</el-radio>
                                  </el-radio-group>
                                </el-form-item>
                                <el-form-item label="直播间" v-if="content.type == 20">
                                      <el-select  v-model="content.liveId"
                                                  filterable
                                                  placeholder="请选择直播间" size="mini"
                                                  @change="liveChangeContent(content)" >
                                        <el-option
                                          v-for="dict in liveList"
                                          :key="dict.liveId"
                                          :label="dict.liveName"
                                          :value="dict.liveId"
                                        />
                                      </el-select>
                                </el-form-item>
                                <el-form-item label="课程选择" v-if="(content.type == 2 || content.type == 8) && form.sendType != 5" required class="course-select-item">
                                  <div class="course-select-row">
                                    <el-select :disabled="formType == 3 || form.sendType == 11 || !roles.includes('edit_sop_temp_content')" v-model="content.courseId"
                                               placeholder="请选择课程" size="small" remote
                                               filterable
                                               @change="courseChangeUpdate(content,index,contentIndex)">
                                      <el-option
                                        v-for="dict in courseList"
                                        :key="dict.dictValue"
                                        :label="dict.dictLabel"
                                        :value="parseInt(dict.dictValue)"
                                      />
                                    </el-select>
                                    <el-select :disabled="formType == 3 || form.sendType == 11 || !roles.includes('edit_sop_temp_content')" v-model="content.videoId"
                                               placeholder="请选择小节" size="small" remote
                                               filterable
                                               @change="videoIdChange(content,index,contentIndex)">
                                      <el-option
                                        v-for="dict in videoList[contentIndex]"
                                        :key="dict.dictValue"
                                        :label="dict.dictLabel"
                                        :value="parseInt(dict.dictValue)"
                                      />
                                    </el-select>
                                  </div>
                                  <div class="course-type-row" v-if="content.type != 4">
                                    <el-select :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')" v-model="content.courseType"
                                               placeholder="请选择消息类型" size="small">
                                      <el-option
                                        v-for="dict in sysFsSopWatchStatus"
                                        :key="dict.dictValue"
                                        :label="dict.dictLabel"
                                        :value="Number(dict.dictValue)"
                                      />
                                    </el-select>
                                  </div>

                                </el-form-item>
                                <el-form-item label="AI触达" v-if="content.type == 4">
                                  <el-select :disabled="formType == 3" v-model="content.aiTouch"
                                             placeholder="请选择Ai触达类型" size="mini"
                                             style=" margin-right: 10px;" v-if="content.type == 4 ">
                                    <el-option label="非首次交流" value="非首次交流"></el-option>
                                    <el-option label="首次交流1" value="首次交流1"></el-option>
                                    <el-option label="首次交流2" value="首次交流2"></el-option>
                                    <el-option label="交流状态1" value="交流状态1"></el-option>
                                    <el-option label="交流状态2" value="交流状态2"></el-option>
                                    <el-option label="交流状态3" value="交流状态3"></el-option>
                                  </el-select>
                                </el-form-item>
                                <el-form-item label="添加标签" prop="addTag" v-if="content.type == 5 "
                                              v-model="content.addTag">

                                  <el-tag
                                    :key="tag"
                                    v-for="tag in content.addTag"
                                    closable
                                    :disable-transitions="false"
                                    @close="handleClose(contentIndex,tag,content)">
                                    {{ tag }}
                                  </el-tag>
                                  <el-input
                                    style="width:110px"
                                    class="input-new-tag"
                                    v-if="addTag[contentIndex] && addTag[contentIndex].inputVisible"
                                    v-model="addTag[contentIndex].inputValue"
                                    ref="saveTagInput"
                                    size="small"
                                    @keyup.enter.native="handleInputConfirm(contentIndex,content)"
                                    @blur="handleInputConfirm(contentIndex,content)"
                                  >
                                  </el-input>
                                  <el-button v-else class="button-new-tag" size="small" style="width: 110px"
                                             @click="showInput(contentIndex)">新增标签
                                  </el-button>
                                </el-form-item>

                                <el-form-item label="移除标签" prop="remarkMobiles" v-if="content.type == 5 ">

                                  <el-tag
                                    :key="tag"
                                    v-for="tag in content.delTag"
                                    closable
                                    :disable-transitions="false"
                                    @close="handleCloseDel(contentIndex,tag,content)">
                                    {{ tag }}
                                  </el-tag>
                                  <el-input
                                    style="width:110px"
                                    class="input-new-tag"
                                    v-if="addTag[contentIndex] && addTag[contentIndex].delTagVisible"
                                    v-model="addTag[contentIndex].delTagValue"
                                    ref="saveTagInputDel"
                                    size="small"
                                    @keyup.enter.native="handleInputConfirmDel(contentIndex,content)"
                                    @blur="handleInputConfirmDel(contentIndex,content)"
                                  >
                                  </el-input>
                                  <el-button v-else class="button-new-tag" size="small" style="width: 110px"
                                             @click="showInputDel(contentIndex)">新增标签
                                  </el-button>

                                </el-form-item>

                                <el-card class="box-card"  v-if="content.type === 8 ">
                                      <el-form-item label="外呼任务" >
                                          <el-select v-model="content.aiCustomerRoleId"
                                                     placeholder="请选择外呼任务" size="mini"
                                                     @change="getAiSipCallTask(content)" >
                                              <el-option
                                                  v-for="template in aiSipCallTaskList"
                                                  :key="template.batchId"
                                                  :label="template.batchName"
                                                  :value="template.batchId"
                                              />
                                          </el-select>
                                      </el-form-item>
                                </el-card>

                                <div v-for="(setList, setIndex) in content.setting" :key="setIndex"
                                     class="setting-item-card"
                                     v-if="content.type != 4 && content.type != 5 && content.type != 8">
                                  <div class="setting-item-header">
                                    <span class="setting-item-title">
                                      <i class="el-icon-document"></i>
                                      内容 {{ setIndex + 1 }}
                                    </span>
                                  </div>
                                  <el-row class="setting-content">
                                    <el-col :span="22">
                                      <el-form  :model="setList" label-width="100px" class="content-form">
                                        <el-form-item label="内容类别" class="content-type-item">
                                          <div v-if="form.sendType == 1 ">
                                            <el-radio-group v-model="setList.contentType" :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')">
                                              <!--                                              <el-radio  :label="item.dictValue" v-for="item in sysQwSopContentType">{{item.dictLabel}}</el-radio>-->
                                              <el-radio
                                                v-for="item in sysQwSopContentType"
                                                :key="item.dictValue"
                                                :label="item.dictValue"
                                                :disabled="item.dictValue === '1' && content.setting.some(s => s.contentType == '1') ">
                                                {{ item.dictLabel }}
                                              </el-radio>
                                            </el-radio-group>
                                          </div>
                                          <div v-if="form.sendType == 2">
                                            <el-radio-group v-model="setList.contentType"
                                                            :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')"
                                                            @change="handleContentTypeChange(content,index,contentIndex,setIndex, item, 'contentType', $event)">
                                              <el-radio
                                                :key="item.dictValue"
                                                :label="item.dictValue"
                                                :disabled="(content.type!=2 && item.dictValue === '9') || (content.isOfficial==1 && ['5','6','7','8','9'].includes(item.dictValue))"
                                                v-for="item in sysQwSopAiContentType">{{ item.dictLabel }}
                                              </el-radio>
                                            </el-radio-group>
                                          </div>
                                          <div v-if=" form.sendType == 4">
                                            <el-radio-group v-model="setList.contentType"
                                                            :disabled="formType == 3"
                                                            @change="handleContentTypeChange(content,index,contentIndex,setIndex)">
                                              <el-radio
                                                :key="item.dictValue"
                                                :label="item.dictValue"
                                                :disabled="((content.type!=2 || form.sendType == 4) && (item.dictValue === '8' || item.dictValue === '9') || (content.isOfficial==1 && ['5','6','7','8','9'].includes(item.dictValue)))"
                                                v-for="item in sysQwSopAiContentType">{{ item.dictLabel }}
                                              </el-radio>
                                            </el-radio-group>
                                          </div>
                                          <div v-if="form.sendType == 11">
                                            <el-radio-group v-model="setList.contentType"
                                                            :disabled="formType == 3 || (form.sendType == 11 && contentIndex != 0 && setIndex == 0)"
                                                            @change="handleContentTypeChange(content,index,contentIndex,setIndex, item, 'contentType', $event)">
                                              <el-radio
                                                :key="item.dictValue"
                                                :label="item.dictValue"
                                                :disabled="(content.type!=2 && item.dictValue === '9') || (content.isOfficial==1 && ['5','6','7','8','9'].includes(item.dictValue))"
                                                v-for="item in sysQwSopAiContentType"
                                                v-if="courseTypeList.includes(item.dictValue)">{{ item.dictLabel }}
                                              </el-radio>
                                            </el-radio-group>
                                          </div>
                                        </el-form-item>
                                        <el-form-item label="内容">
                                          <el-input :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')" v-if="setList.contentType == 1 || setList.contentType == 15"
                                                    v-model="setList.value"
                                                    type="textarea" :rows="3" placeholder="内容"
                                                    style="width: 90%;margin-top: 10px;"
                                                    @keydown.native="handleKeydown($event, index, contentIndex, setIndex)"
                                                    :ref="`textarea-${index}-${contentIndex}-${setIndex}`"
                                          />

                                          <div class="content-actions">
                                            <el-button
                                              v-if="(setList.contentType == 1 || setList.contentType == 15) && roles.includes('edit_sop_temp_content')"
                                              type="text"
                                              icon="el-icon-plus"
                                              size="small"
                                              @click="toggleSalesCall(index, contentIndex, setIndex)">
                                              {{ setList.isSalesCallAdded ? '移除#销售称呼#' : '添加#销售称呼#' }}
                                            </el-button>
                                            <el-button
                                              v-if="(setList.contentType == 1 || setList.contentType == 15) && roles.includes('edit_sop_temp_content')"
                                              type="text"
                                              icon="el-icon-user"
                                              size="small"
                                              @click="toggleUserNameCall(index, contentIndex, setIndex)">
                                              {{ setList.isUserNameCallAdded ? '移除#客户称呼#' : '添加#客户称呼#' }}
                                            </el-button>
                                          </div>

                                          <div v-if="setList.contentType == 2">
                                            <el-card class="box-card image-card">
                                              <div slot="header" class="card-header-mini">
                                                <i class="el-icon-picture-outline"></i>
                                                <span>图片内容</span>
                                              </div>
                                              <el-form-item label="上传图片" required>
                                                <ImageUpload :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')"
                                                           v-model="setList.imgUrl"
                                                           type="image" :num="1" :width="150" :height="150"/>
                                              </el-form-item>
                                            </el-card>
                                          </div>

                                          <div
                                            v-if="(setList.contentType == 3 || item.contentType ==9 || setList.contentType == 28 || setList.contentType == 29) || (setList.contentType == 9 && content.type==2 )">
                                            <el-card class="box-card link-card">
                                              <div slot="header" class="card-header-mini">
                                                <i class="el-icon-link"></i>
                                                <span>链接内容</span>
                                              </div>
                                              <el-form-item label="链接标题" label-width="100px" prop="linkTitle" :rules="[{ required: true, message: '链接标题不能为空', trigger: ['blur', 'change'] }]">
                                                <el-input :disabled="formType == 3 || (form.sendType == 11 && contentIndex != 0 && setIndex == 0)" v-model="setList.linkTitle"
                                                          @change="updateAll(setIndex, item, 'linkTitle', $event)"
                                                          placeholder="请输入链接标题"
                                                          style="width: 90%;"/>
                                              </el-form-item>
                                              <el-form-item label="链接描述" label-width="100px" prop="linkDescribe" :rules="[{ required: true, message: '链接描述不能为空', trigger: ['blur', 'change'] }]">
                                                <el-input :disabled="formType == 3 || (form.sendType == 11 && contentIndex != 0 && setIndex == 0)" type="textarea" :rows="3"
                                                          v-model="setList.linkDescribe"
                                                          @change="updateAll(setIndex, item, 'linkDescribe', $event)"
                                                          placeholder="请输入链接描述"
                                                          style="width: 90%;margin-top: 1%;"/>
                                              </el-form-item>
                                              <el-form-item label="链接封面" label-width="100px" prop="linkImageUrl" :rules="[{ required: true, message: '链接封面不能为空', trigger: ['blur', 'change'] }]">
                                                <ImageUpload :disabled="formType == 3 || (form.sendType == 11 && contentIndex != 0 && setIndex == 0)" v-model="setList.linkImageUrl"
                                                             type="image" :num="1"
                                                             @input="updateAll(setIndex, item, 'linkImageUrl', $event)"
                                                             :file-size="2" :width="150" :height="150"
                                                             style="margin-top: 1%;"/>
                                              </el-form-item>
                                              <div v-if="content.type != 2" class="link-url-section">
                                                <el-form-item label="链接地址" label-width="100px" prop="linkUrl" :rules="[{ required: true, message: '链接地址不能为空', trigger: ['blur', 'change'] }]">
                                                  <el-input :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')" v-model="setList.linkUrl"
                                                            placeholder="请输入链接地址"
                                                            style="width: 90%;"/>
                                                </el-form-item>
                                              </div>
                                              <div v-if="content.type == 2" class="link-tip-section">
                                                <el-form-item label="链接地址" label-width="100px">
                                                  <el-tag type="warning" v-model="setList.isBindUrl = 1 ">
                                                    <i class="el-icon-info"></i>
                                                    选择的课程小节即为卡片链接地址
                                                  </el-tag>
                                                </el-form-item>
                                              </div>
                                            </el-card>
                                          </div>

                                          <div v-if="setList.contentType == 4 || setList.contentType == 10 || setList.contentType == 17  || setList.contentType == 23">
                                            <el-card class="box-card miniprogram-card">
                                              <div slot="header" class="card-header-mini">
                                                <i class="el-icon-mobile-phone"></i>
                                                <span>小程序内容</span>
                                              </div>
                                              <el-form-item label="标题" prop="miniprogramTitle" required>
                                                <el-input v-model="setList.miniprogramTitle"
                                                          :disabled="formType == 3 || (form.sendType == 11 && contentIndex != 0 && setIndex == 0)"
                                                          @change="updateAll(setIndex, item, 'miniprogramTitle', $event)"
                                                          placeholder="请输入小程序消息标题，最长为64字节" :rows="2"
                                                          maxlength="64" type="textarea"
                                                          @input="checkByteLength(content,setList.contentType,content.isOfficial)"/>
                                              </el-form-item>
                                              <el-form-item label="封面" prop="miniprogramPicUrl" required>
                                                <ImageUpload v-if="content.isOfficial !== '1'"
                                                             @change="updateAll(setIndex, item, 'miniprogramPicUrl', $event)"
                                                             :disabled="formType == 3 || (form.sendType == 11 && contentIndex != 0 && setIndex == 0)"
                                                             v-model="setList.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="setList.miniprogramAppid='wx73f85f8d62769119' " :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')"
                                                          disabled/>
                                              </el-form-item>
                                              <el-form-item label="page路径" prop="miniprogramPage" v-show="setList.contentType == 10"
                                                            label-width="100px" style="margin-left: -30px">
                                                <el-input v-model="setList.miniprogramPage"
                                                          :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')"
                                                          placeholder="小程序消息打开后的路径" type="textarea" :rows="3" />
                                              </el-form-item>
                                            </el-card>
                                          </div>
                                          <div v-if="setList.contentType == 12 || setList.contentType == 18 || setList.contentType == 19 || setList.contentType == 24">
                                            <el-card class="box-card miniprogram-card">
                                              <div slot="header" class="card-header-mini">
                                                <i class="el-icon-video-camera"></i>
                                                <span>直播小程序</span>
                                              </div>
                                              <el-form-item label="直播间" required>
                                                <el-select  v-model="setList.liveId"
                                                            placeholder="请选择直播间" size="mini"
                                                            filterable
                                                            :disabled="content.type==20"
                                                            @change="liveChange(setList)" >
                                                  <el-option
                                                    v-for="dict in liveList"
                                                    :key="dict.liveId"
                                                    :label="dict.liveName"
                                                    :value="dict.liveId"
                                                  />
                                                </el-select>
                                              </el-form-item>

                                              <el-form-item label="标题" prop="miniprogramTitle" required>
                                                <el-input  :disabled="content.type==20" v-model="setList.miniprogramTitle" placeholder="请输入小程序消息标题，最长为64字节" :rows="2" maxlength="64"
                                                          type="textarea" @input="checkByteLength(content,setList.contentType,content.isOfficial)"   />
                                              </el-form-item>
                                              <el-form-item label="封面" prop="miniprogramPicUrl" required>
                                                <ImageUpload  :disabled="content.type==20" v-model="setList.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="setList.miniprogramAppid='wxcfd4cd6e2375e42f' " 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="setList.miniprogramPage" placeholder="小程序消息打开后的路径"  disabled />
                                              </el-form-item>
                                            </el-card>
                                          </div>


                                          <div v-if="setList.contentType == 5">
                                            <el-card class="box-card upload-card">
                                              <div slot="header" class="card-header-mini">
                                                <i class="el-icon-document"></i>
                                                <span>文件上传</span>
                                              </div>
                                              <el-form-item label="上传文件" prop="fileUrl" label-width="100px" required>
                                              <el-upload
                                                :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')"
                                                v-model="setList.fileUrl"
                                                class="avatar-uploader"
                                                :action="uploadUrl"
                                                :show-file-list="false"
                                                :on-success="(res, file) => handleAvatarSuccessFile(res, file, setList)"
                                                :before-upload="beforeAvatarUploadFile">
                                                <i class="el-icon-plus avatar-uploader-icon"></i>
                                              </el-upload>
                                              <el-link v-if="setList.fileUrl" type="primary"
                                                       :href="downloadUrl(setList.fileUrl)" download>
                                                {{ setList.fileUrl }}
                                              </el-link>
                                            </el-form-item>
                                            </el-card>
                                          </div>

                                          <div v-if="setList.contentType == 6">
                                            <el-card class="box-card upload-card">
                                              <div slot="header" class="card-header-mini">
                                                <i class="el-icon-video-play"></i>
                                                <span>视频上传</span>
                                              </div>
                                              <el-form-item label="上传视频" prop="videoUrl" label-width="100px" required>
                                              <el-upload
                                                :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')"
                                                v-model="setList.videoUrl"
                                                class="avatar-uploader"
                                                :action="uploadUrl"
                                                :show-file-list="false"
                                                :on-success="(res, file) => handleAvatarSuccessVideo(res, file, setList)"
                                                :before-upload="beforeAvatarUploadVideo">
                                                <i class="el-icon-plus avatar-uploader-icon"></i>
                                              </el-upload>
                                              <video v-if="setList.videoUrl"
                                                     :src="setList.videoUrl"
                                                     controls style="width: 200px;height: 100px">
                                              </video>
                                            </el-form-item>
                                            </el-card>
                                          </div>
                                          <div v-if="setList.contentType == 7 || setList.contentType == 16">
                                            <el-input
                                              :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')"
                                              v-model="setList.value"
                                              type="textarea" :rows="3" maxlength="66" show-word-limit
                                              placeholder="输入要转为语音的内容"
                                              style="width: 90%;margin-top: 10px;"
                                              @input="handleInputVideoText(setList.value,setList)"/>
                                            <el-button type="primary" size="mini" plain style="margin-top: 10px;" :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')" @click="openVoiceDialog(setList)">快捷语音</el-button>


                                          </div>
                                          <div v-if="setList.contentType == 8 ">
                                            <el-button :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')" type="primary"
                                                       style="margin-bottom: 1%"
                                                       @click="hanldeSelectVideoNum(content,index,contentIndex,setIndex)">
                                              选择视频号
                                            </el-button>
                                            <el-card class="box-card" v-if="setList.coverUrl">
                                              <el-form-item label="封面标题:" label-width="100px">
                                                <el-input :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')" v-model="setList.nickname"
                                                          style="width: 90%;margin-bottom: 1%" disabled/>
                                              </el-form-item>
                                              <el-form-item label="头像:" label-width="100px">
                                                <el-image
                                                  v-if="setList.avatar != null"
                                                  :src="setList.avatar"
                                                  :preview-src-list="[setList.avatar]"
                                                  :style="{ width: '50px', height: '50px' }"
                                                ></el-image>
                                              </el-form-item>
                                              <el-form-item label="封面:" label-width="100px">
                                                <el-image
                                                  v-if="setList.coverUrl != null"
                                                  :src="setList.coverUrl"
                                                  :preview-src-list="[setList.coverUrl]"
                                                  :style="{ width: '200px', height: '200px' }"
                                                ></el-image>

                                              </el-form-item>
                                              <el-form-item label="简介:" label-width="100px">
                                                <el-input :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')" type="textarea" :rows="3"
                                                          v-model="setList.desc"
                                                          style="width: 90%;margin-top: 1%;" disabled/>
                                              </el-form-item>
                                              <el-form-item label="视频地址:" label-width="100px"
                                                            style="margin-top: 1%">
                                                <el-input :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')" v-model="setList.url"
                                                          style="width: 90%;" disabled/>
                                              </el-form-item>

                                            </el-card>
                                          </div>
                                          <div v-if="setList.contentType == 14">
                                            <el-card class="box-card luckybag-card">
                                              <div slot="header" class="card-header-mini">
                                                <i class="el-icon-present"></i>
                                                <span>福袋设置</span>
                                              </div>
                                              <el-form-item label="福袋名称" required>
                                                <el-select :disabled="formType == 3"    v-model="setList.luckyBagId"
                                                           placeholder="请选择福袋" size="mini"
                                                           @change="getLuckyBagStatus(setList)" >
                                                  <el-option
                                                    v-for="dict in luckyBagList"
                                                    :key="dict.id"
                                                    :label="dict.name"
                                                    :value="dict.id"
                                                  />
                                                </el-select>
                                              </el-form-item>
                                              <el-form-item label="福袋状态">
                                                <el-tag  :disabled="formType == 3" :type="setList.luckyBagDataStatus == 1 ? 'success' : 'danger'">
                                                  {{ setList.luckyBagDataStatus == 1 ? '启用' : '禁用' }}
                                                </el-tag>
                                              </el-form-item>
                                            </el-card>
                                          </div>
                                          <div v-if="setList.contentType == 11">
                                            <el-input
                                              :disabled="formType == 3 || !roles.includes('edit_sop_temp_content')"
                                              v-model="setList.value"
                                              type="textarea"
                                              :rows="5"
                                              placeholder="请输入群公告内容"
                                              style="width: 90%;margin-top: 10px;"
                                            />
                                          </div>

                                          <div v-if="setList.contentType == 21">
                                            <el-card class="box-card">
                                              <el-form-item label="短信模板" >
                                                <el-select v-model="setList.smsTemplateId"
                                                           placeholder="请选择短信模板" size="mini"
                                                           @change="getSmsTemplateInfo(setList)" >
                                                  <el-option
                                                    v-for="template in smsTemplateList"
                                                    :key="template.tempId"
                                                    :label="template.title"
                                                    :value="template.tempId"
                                                  />
                                                </el-select>
                                              </el-form-item>
                                              <el-form-item label="内容预览" v-if="setList.smsTemplateContent">
                                                <div style="color: #666; font-size: 12px; padding: 8px; border: 1px solid #eee; border-radius: 4px; background-color: #f9f9f9; max-height: 100px; overflow-y: auto;">
                                                  {{ setList.smsTemplateContent }}
                                                </div>
                                              </el-form-item>
                                            </el-card>
                                          </div>
                                        </el-form-item>

                                        <el-form-item label="课节过期时间"
                                                      v-if="content.type == 2 && (setList.isBindUrl == '1' || setList.contentType==4) && setList.contentType != 2  && setList.contentType != 5  && setList.contentType != 6 && setList.contentType != 8 && setList.contentType != 9 && setList.contentType != 10  ">
                                          <el-row>
                                            <el-input type="number" v-model="setList.expiresDays"
                                                      :disabled="!roles.includes('edit_sop_temp_content') && (formType == 3 || (form.sendType == 11 && contentIndex != 0 && setIndex == 0))"
                                                      @change="updateAll(setIndex, item, 'expiresDays', $event)"
                                                      style="width: 200px">
                                              <template slot="append">天</template>
                                            </el-input>
                                          </el-row>
                                          <el-row>
                                            <span class="tip">填写0或不填时，默认为系统配置的默认时间</span>
                                          </el-row>
                                        </el-form-item>

                                      </el-form>
                                      <el-form v-if="form.sendType == 4" :model="setList" label-width="100px" class="content-form">
                                        <el-form-item label="添加客服" v-if="item.dayNum==1" prop="intervalTime" style="margin: 2%">
                                          <el-input-number
                                            v-model="setList.intervalTime"
                                            :min="1"
                                            :max="1440"
                                            style="width:150px;margin-top: 10px;"
                                          >
                                          </el-input-number>
                                          <span class="tip">单位：分钟，最大1440分钟(24小时)</span>
                                        </el-form-item>
                                          <el-form-item label="时间" v-if="item.dayNum > 1" class="inline-form-item">
                                              <el-time-picker
                                                  class="custom-input"
                                                  v-model="setList.time"
                                                  value-format="HH:mm"
                                                  format="HH:mm"
                                                  :picker-options="{ selectableRange: ['01:00:00 - 01:59:00','05:00:00 - 23:59:59'] }"
                                                  placeholder="时间"
                                                  style="width: 120px;">
                                              </el-time-picker>
                                          </el-form-item>
                                          <el-form-item label="发送用户类型" style="margin: 2%">
                                              <el-select v-model="setList.onlyUnregistered" placeholder="请选择" style="width: 150px;">
                                                  <el-option label="已注册" value="1"></el-option>
                                                  <el-option label="未注册" value="2"></el-option>
                                                  <el-option label="未对话" value="3"></el-option>
                                              </el-select>
                                              <div class="form-tip-info">
                                                  <i class="el-icon-info"></i>
                                                   给用户发送的类型，默认为未对话（即客户没给你对话 就）
                                              </div>
                                          </el-form-item>
                                      </el-form>
                                    </el-col>
                                    <el-col :span="1" :offset="1">
                                      <i class="el-icon-delete" @click="delSetList(index,contentIndex,setIndex)"
                                         style="margin-top: 20px;"
                                         v-if="content.setting.length>1 && (formType != 3) && roles.includes('del_sop_temp_content') && !(form.sendType == 11 && setIndex == 0)"></i>
                                    </el-col>
                                  </el-row>
                                </div>
                                <el-link type="primary" class="el-icon-plus" :underline="false"
                                         @click='addSetList(contentIndex,item.content)'
                                         v-if="content.type != 4 && content.type != 8 && formType != 3 && roles.includes('add_sop_temp_content')">添加内容
                                </el-link>
                              </el-form>
                            </el-col>
                            <el-col :span="1" :offset="1">
                              <i class="el-icon-delete" @click="delContent(index,contentIndex)"
                                 style="margin-top: 20px;"
                                 v-if="item.content.length>1 && formType != 3 && roles.includes('del_sop_temp_rule')"></i>
                            </el-col>
                          </el-row>
                        </div>
                        <el-link type="primary" class="el-icon-plus" :underline="false" @click='addContent(index)'
                                 v-if="formType != 3 && form.sendType != 4  && roles.includes('add_sop_temp_rule')">添加规则
                        </el-link>
                      </el-form-item>
                    </el-form>
                  </el-card>
                  <div style="float: right;" v-if="formType != 3 && roles.includes('update_sop_temp_day')">
                    <el-button type="primary" @click="save" v-if="!item.voice || item.voice == 0">
                      保存（{{ '第' + (1 + (form.gap * index)) + '天' }}）
                    </el-button>
                    <el-button type="primary" disabled v-if="item.voice == 1">语言生成中</el-button>
                    <el-button type="primary" @click="leave(tabIndex)" v-if="item.voice == 1">刷新状态</el-button>
                  </div>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-form-item>
      </el-form>
    </div>

    <el-dialog :title="videoNumOptions.title" :visible.sync="videoNumOptions.open" style="width: 1500px;height: 100%"
               append-to-body>
      <userVideo ref="QwUserVideo" @videoResult="qwUserVideoResult"></userVideo>
    </el-dialog>
    <el-dialog :title="voiceOptions.title" :visible.sync="voiceOptions.open" width="800px" append-to-body>
      <div style="margin-bottom: 10px;">
        <el-input v-model="voiceOptions.keyword" placeholder="请输入关键词搜索" style="width: 300px;" clearable @clear="searchVoice" @keyup.enter.native="searchVoice">
          <el-button slot="append" icon="el-icon-search" @click="searchVoice">搜索</el-button>
        </el-input>
      </div>
      <el-table :data="voiceOptions.list" v-loading="voiceOptions.loading" highlight-current-row @current-change="handleVoiceSelect">
        <el-table-column prop="voiceTxt" label="语音内容" min-width="200" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="80" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="selectVoice(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 10px; text-align: right;"
        background
        layout="total, prev, pager, next"
        :total="voiceOptions.total"
        :page-size="voiceOptions.pageSize"
        :current-page.sync="voiceOptions.pageNum"
        @current-change="searchVoice">
      </el-pagination>
    </el-dialog>
    <el-dialog title="修改天数排序" :visible.sync="openSort" width="600px" append-to-body class="sort-dialog">
      <div class="sort-dialog-content">
        <div class="sort-tip">
          <i class="el-icon-info"></i>
          拖动按钮调整顺序，红色表示顺序已变更
        </div>
        <draggable v-model="dayList" @end="onDragEndDay" class="sort-button-group">
          <el-button
            v-for="(item, index) in dayList"
            :key="index"
            :class="['sort-button', item.newDay != item.dayNum ? 'changed' : '']"
            icon="el-icon-rank">
            第{{ item.newDay }}天
            <span v-if="item.newDay != item.dayNum" class="origin-day">(原第{{ item.dayNum }}天)</span>
          </el-button>
        </draggable>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openSort = false">取消</el-button>
        <el-button type="primary" @click="saveSorts" icon="el-icon-check">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改规则排序" :visible.sync="openSort2" width="600px" append-to-body class="sort-dialog">
      <div class="sort-dialog-content">
        <div class="sort-tip">
          <i class="el-icon-info"></i>
          拖动按钮调整规则发送顺序
        </div>
        <draggable v-model="ruleList" @end="onDragEnd" class="sort-button-group">
          <el-button
            v-for="(item, index) in ruleList"
            :key="index"
            class="sort-button"
            icon="el-icon-time">
            {{ item.time }}
          </el-button>
        </draggable>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openSort2 = false">取消</el-button>
        <el-button @click="autoSortsRules" icon="el-icon-sort">自动排序</el-button>
        <el-button type="primary" @click="saveSortsRules" icon="el-icon-check">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<style scoped>
.el-button {
  margin-left: 10px;
}

.red:hover {
  color: #dbdbdb !important;
}

.red {
  background-color: #F56C6C !important;
  color: #fff !important;
}

.custom-input ::v-deep .el-input__inner {
  height: 20px;
  text-align: center;
}

.custom-input ::v-deep .el-input__icon {
  line-height: 10px;
}

.el-icon-delete {
  cursor: pointer;
}

::v-deep .el-badge__content.is-fixed {
  top: 10px !important;
  right: 0 !important;
  width: 8px;
}

.tip {
  color: #909399;
  font-size: 12px;
  margin-left: 10px;
}

.sortable-ghost {
  background: rgb(26, 164, 255) !important;
  color: #FFF !important;
}

/* ===== 页面头部样式 ===== */
.sop-temp-container {
  padding: 20px;
  background: #f5f7fa;
}

.page-header {
  background: linear-gradient(135deg, #1890ff 0%, #0066cc 100%);
  padding: 20px 30px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(24, 144, 255, 0.15);
}

.header-title {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.header-title i {
  font-size: 20px;
  margin-right: 10px;
}

.header-subtitle {
  padding-left: 30px;
}

.template-id {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 12px;
  border-radius: 4px;
  color: #fff;
  font-size: 13px;
  font-family: 'Courier New', monospace;
  backdrop-filter: blur(10px);
}

/* ===== 表单内容区样式 ===== */
.form-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* 基本信息卡片 */
.info-card {
  margin-bottom: 20px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
}

.info-card ::v-deep .el-card__header {
  padding: 12px 20px;
  background: #fafafa;
  border-bottom: 1px solid #e8e8e8;
}

.info-card .card-header {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: #333;
}

.info-card .card-header i {
  margin-right: 8px;
  font-size: 16px;
  color: #1890ff;
}

/* 基本信息项目布局 */
.info-items {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 8px 0;
}

.info-item {
  display: inline-flex;
  align-items: center;
  background: #f8f9fa;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  padding: 8px 16px;
  gap: 8px;
}

.info-label {
  color: #606266;
  font-size: 13px;
  white-space: nowrap;
}

.info-label::after {
  content: '：';
}

.info-value {
  color: #303133;
  font-size: 14px;
  font-weight: 600;
}

.info-item .el-tag {
  margin-left: 0;
}

/* 规则配置样式 */
.rule-form-item {
  margin-top: 20px;
}

.rule-form-item ::v-deep .el-form-item__label {
  font-weight: 600;
  color: #333;
}

.rule-actions {
  margin-bottom: 16px;
  padding: 12px;
  background: #f9f9f9;
  border-radius: 6px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.rule-actions .el-button {
  margin-left: 0;
}

/* 规则标签页样式 */
.rule-tabs {
  margin-top: 16px;
}

.rule-tabs ::v-deep .el-tabs__header {
  margin-bottom: 20px;
}

.rule-tabs ::v-deep .el-tabs__item {
  height: 42px;
  line-height: 42px;
  font-size: 14px;
}

.rule-tabs ::v-deep .el-tabs__item.is-active {
  background: #1890ff;
  color: #fff;
  border-color: #1890ff;
}

/* 红点样式优化 - 未选中状态 */
.rule-tabs ::v-deep .el-badge__content.is-dot {
  width: 6px;
  height: 6px;
  top: -3px;
  right: -8px;
  background-color: #f56c6c;
  border: none;
  box-shadow: none;
}

/* 红点样式优化 - 选中状态 */
.rule-tabs ::v-deep .el-tabs__item.is-active .el-badge__content.is-dot {
  background-color: #faad14;
  border: none;
  box-shadow: none;
}

/* 标签内容区域 */
.tab-content-row {
  min-height: 300px;
}

/* 加载动画优化 */
.tab-content-row ::v-deep .el-loading-mask {
  border-radius: 6px;
}

.tab-content-row ::v-deep .el-loading-spinner {
  top: 40%;
}

.tab-content-row ::v-deep .el-loading-spinner .circular {
  width: 42px;
  height: 42px;
}

.tab-content-row ::v-deep .el-loading-spinner .el-loading-text {
  color: #1890ff;
  font-size: 14px;
  margin-top: 10px;
}

/* 天内容卡片 */
.day-content-card {
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  margin-bottom: 20px;
}

.day-content-card ::v-deep .el-card__body {
  padding: 20px;
}

/* 内容项卡片 */
.content-item-card {
  background-color: #fafafa;
  padding: 16px;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  margin-bottom: 16px;
  transition: all 0.3s;
}

.content-item-card:hover {
  border-color: #1890ff;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
}

/* 内容类别样式 */
.content-type-item {
  margin-bottom: 20px;
}

.content-type-item ::v-deep .el-form-item__label {
  font-weight: 600;
  line-height: 32px;
}

.content-type-item ::v-deep .el-form-item__content {
  line-height: 32px;
}

.content-type-item ::v-deep .el-radio-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  line-height: 32px;
}

.content-type-item ::v-deep .el-radio {
  margin-right: 0;
  line-height: 32px;
}

/* 表单优化 */
.sop-form ::v-deep .el-form-item {
  margin-bottom: 18px;
}

.sop-form ::v-deep .el-form-item__label {
  color: #606266;
  font-size: 14px;
}

/* 标签优化 */
.sop-form ::v-deep .el-tag {
  border-radius: 4px;
  padding: 0 10px;
  height: 28px;
  line-height: 28px;
}

/* 输入框优化 */
.sop-form ::v-deep .el-input__inner,
.sop-form ::v-deep .el-textarea__inner {
  border-radius: 4px;
  transition: all 0.3s;
}

.sop-form ::v-deep .el-input__inner:focus,
.sop-form ::v-deep .el-textarea__inner:focus {
  border-color: #1890ff;
}

/* 卡片样式统一 */
.sop-form ::v-deep .el-card {
  border-radius: 6px;
  overflow: hidden;
}

.sop-form ::v-deep .box-card {
  margin-top: 12px;
  background: #f9f9f9;
  border: 1px solid #e8e8e8;
}

.sop-form ::v-deep .box-card .el-card__body {
  padding: 16px;
}

/* 按钮组样式 */
.sop-form ::v-deep .el-button-group {
  display: flex;
  gap: 8px;
}

/* 开关样式优化 */
.sop-form ::v-deep .el-switch {
  margin-right: 12px;
}

/* 提示信息样式 */
.sop-form ::v-deep .el-form-item__content > div[style*="color: #999"] {
  background: #f0f9ff;
  padding: 8px 12px;
  border-radius: 4px;
  border-left: 3px solid #1890ff;
  margin-top: 8px;
}

.sop-form ::v-deep .el-form-item__content > div[style*="color: #999"] i {
  color: #1890ff;
  margin-right: 6px;
}

/* ===== 规则内容优化 ===== */
.rule-content-item {
  margin-top: 20px;
}

.rule-content-item ::v-deep .el-form-item__label {
  font-weight: 600;
  font-size: 15px;
  color: #333;
}

/* 内容项卡片头部 */
.content-item-header {
  background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
  padding: 12px 16px;
  margin: -16px -16px 16px -16px;
  border-bottom: 2px solid #1890ff;
  border-radius: 6px 6px 0 0;
}

.content-item-title {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.content-item-title i {
  margin-right: 6px;
  color: #1890ff;
  font-size: 16px;
}

/* 设置项卡片 */
.setting-item-card {
  background: #fff;
  border: 1px solid #e0e6ed;
  border-radius: 6px;
  margin-bottom: 16px;
  padding: 16px;
  transition: all 0.3s;
}

.setting-item-card:hover {
  border-color: #1890ff;
  box-shadow: 0 2px 12px rgba(24, 144, 255, 0.12);
}

.setting-item-header {
  margin: -16px -16px 16px -16px;
  padding: 10px 16px;
  background: #f9fafb;
  border-bottom: 1px solid #e8e8e8;
  border-radius: 6px 6px 0 0;
}

.setting-item-title {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 13px;
  color: #606266;
}

.setting-item-title i {
  margin-right: 6px;
  color: #909399;
  font-size: 14px;
}

.setting-content {
  padding-bottom: 12px;
}

/* 内容表单统一样式 */
.content-form ::v-deep .el-form-item__label {
  padding-right: 8px;
  text-align: right;
}

/* 内联表单项 */
.inline-form-item {
  margin-bottom: 18px;
}

.inline-form-item ::v-deep .el-form-item__content {
  display: inline-flex;
  align-items: center;
  margin-left: 0 !important;
}

/* 开关表单项 */
.switch-form-item {
  margin-bottom: 20px;
}

.switch-form-item ::v-deep .el-form-item__label {
  line-height: 32px;
}

.switch-form-item ::v-deep .el-form-item__content {
  display: block;
}

.switch-form-item ::v-deep .el-switch {
  vertical-align: middle;
}

/* 表单提示信息 */
.form-tip-info {
  background: #f0f9ff;
  color: #666;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 4px;
  border-left: 3px solid #1890ff;
  display: flex;
  align-items: flex-start;
  line-height: 1.6;
  margin-top: 8px;
}

.form-tip-info i {
  color: #1890ff;
  margin-right: 8px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* 内容操作按钮 */
.content-actions {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 4px;
}

.content-actions .el-button {
  margin-left: 0;
  padding: 8px 15px;
}

.content-actions .el-button [class*="el-icon-"] {
  margin-right: 4px;
}

/* 消息类别 Radio 组优化 */
.sop-form ::v-deep .el-radio {
  margin-right: 16px;
  margin-bottom: 8px;
}

.sop-form ::v-deep .el-radio__label {
  font-size: 13px;
  padding-left: 8px;
}

/* Select 下拉框优化 */
.sop-form ::v-deep .el-select {
  margin-right: 12px;
  margin-bottom: 8px;
}

.sop-form ::v-deep .el-select .el-input__inner {
  border-radius: 4px;
}

/* 标签输入优化 */
.sop-form ::v-deep .el-tag {
  margin-right: 8px;
  margin-bottom: 8px;
}

.sop-form ::v-deep .input-new-tag {
  margin-right: 8px;
  margin-bottom: 8px;
}

.sop-form ::v-deep .button-new-tag {
  margin-bottom: 8px;
}

/* ===== 小程序、福袋、上传卡片优化 ===== */
.miniprogram-card,
.luckybag-card,
.upload-card {
  margin-top: 12px;
  border: 1px solid #e8e8e8;
}

.miniprogram-card ::v-deep .el-card__header,
.luckybag-card ::v-deep .el-card__header,
.upload-card ::v-deep .el-card__header {
  padding: 0;
  border-bottom: none;
}

.miniprogram-card ::v-deep .el-card__body,
.luckybag-card ::v-deep .el-card__body,
.upload-card ::v-deep .el-card__body {
  padding: 16px 20px;
}

.card-header-mini {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
  color: #333;
  padding: 10px 16px;
  background: linear-gradient(135deg, #f9fafb 0%, #f0f4f8 100%);
  border-bottom: 1px solid #e8e8e8;
}

.card-header-mini i {
  margin-right: 8px;
  font-size: 16px;
  color: #1890ff;
}

.miniprogram-card .el-form-item,
.luckybag-card .el-form-item,
.upload-card .el-form-item {
  margin-bottom: 16px;
}

.miniprogram-card .el-form-item:last-child,
.luckybag-card .el-form-item:last-child,
.upload-card .el-form-item:last-child {
  margin-bottom: 0;
}

.miniprogram-card .el-form-item__label::before,
.luckybag-card .el-form-item__label::before,
.upload-card .el-form-item__label::before {
  color: #f56c6c;
  margin-right: 4px;
}

/* 上传组件优化 */
.avatar-uploader ::v-deep .el-upload {
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}

.avatar-uploader ::v-deep .el-upload:hover {
  border-color: #1890ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
  transition: all 0.3s;
}

.avatar-uploader ::v-deep .el-upload:hover .avatar-uploader-icon {
  color: #1890ff;
}

/* ===== 排序对话框优化 ===== */
.sort-dialog ::v-deep .el-dialog {
  border-radius: 8px;
}

.sort-dialog ::v-deep .el-dialog__header {
  background: linear-gradient(135deg, #1890ff 0%, #0066cc 100%);
  padding: 16px 20px;
  border-radius: 8px 8px 0 0;
}

.sort-dialog ::v-deep .el-dialog__title {
  color: #fff;
  font-weight: 600;
  font-size: 16px;
}

.sort-dialog ::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
  font-size: 18px;
}

.sort-dialog ::v-deep .el-dialog__body {
  padding: 20px;
}

.sort-dialog-content {
  min-height: 200px;
}

.sort-tip {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background: #f0f9ff;
  border-left: 3px solid #1890ff;
  border-radius: 4px;
  margin-bottom: 20px;
  color: #666;
  font-size: 13px;
}

.sort-tip i {
  color: #1890ff;
  margin-right: 8px;
  font-size: 16px;
}

.sort-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px;
  background: #fafafa;
  border-radius: 6px;
  min-height: 120px;
}

.sort-button {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  cursor: move;
  transition: all 0.3s;
  border: 2px solid #e8e8e8;
  background: #fff;
}

.sort-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #1890ff;
}

.sort-button.changed {
  background: linear-gradient(135deg, #fff1f0 0%, #ffccc7 100%);
  border-color: #ff4d4f;
  color: #cf1322;
  font-weight: 600;
}

.origin-day {
  font-size: 12px;
  color: #999;
  margin-left: 6px;
  font-weight: normal;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 10px;
}

.dialog-footer .el-button {
  margin-left: 0;
}

/* ===== 图片和链接卡片优化 ===== */
.image-card,
.link-card {
  margin-top: 12px;
  border: 1px solid #e8e8e8;
}

.image-card ::v-deep .el-card__header,
.link-card ::v-deep .el-card__header {
  padding: 0;
  border-bottom: none;
}

.image-card ::v-deep .el-card__body,
.link-card ::v-deep .el-card__body {
  padding: 16px 20px;
}

.image-card .el-form-item,
.link-card .el-form-item {
  margin-bottom: 16px;
}

.image-card .el-form-item:last-child,
.link-card .el-form-item:last-child {
  margin-bottom: 0;
}

.image-card .el-form-item__label::before,
.link-card .el-form-item__label::before {
  color: #f56c6c;
  margin-right: 4px;
}

/* 图片上传区域 */
.image-card ::v-deep .image-upload {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

/* 链接地址区域 */
.link-url-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.link-tip-section {
  margin-top: 16px;
  padding: 16px;
  background: #fffbf0;
  border-radius: 6px;
  border: 1px solid #ffe7ba;
}

.link-tip-section .el-tag {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.6;
  border: none;
  background: transparent;
}

.link-tip-section .el-tag i {
  margin-right: 8px;
  font-size: 16px;
}

/* 链接卡片输入框优化 */
.link-card ::v-deep .el-input__inner,
.link-card ::v-deep .el-textarea__inner {
  border-radius: 6px;
}

.link-card ::v-deep .el-form-item__label {
  font-weight: 500;
  color: #606266;
}

/* 图片上传组件增强 */
.image-card ::v-deep .el-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  transition: all 0.3s;
}

.image-card ::v-deep .el-upload:hover {
  border-color: #1890ff;
}

.image-card ::v-deep .el-upload-list__item {
  border-radius: 8px;
  transition: all 0.3s;
}

.image-card ::v-deep .el-upload-list__item:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* ===== 消息类别和课程选择优化 ===== */
.msg-category-item {
  margin-bottom: 20px;
}

.msg-category-item ::v-deep .el-form-item__label {
  font-weight: 500;
  white-space: nowrap;
  line-height: 32px;
}

.msg-category-item ::v-deep .el-form-item__content {
  line-height: 32px;
}

.msg-category-item ::v-deep .el-radio-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  line-height: 32px;
}

.msg-category-item ::v-deep .el-radio {
  margin-right: 0;
  margin-bottom: 0;
  line-height: 32px;
}

/* 课程选择区域 */
.course-select-item {
  margin-bottom: 20px;
}

.course-select-item ::v-deep .el-form-item__label {
  font-weight: 500;
  white-space: nowrap;
}

.course-select-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.course-select-row .el-select {
  min-width: 160px;
  flex: 1;
}

.course-type-row {
  display: flex;
  gap: 12px;
}

.course-type-row .el-select {
  width: 180px;
}
</style>
<script>
import draggable from 'vuedraggable';
import {
  listSopTemp,
  getSopTemp,
  delSopTemp,
  addSopTemp,
  sortDay,
  dayListFun,
  updateSopTemp,
  exportSopTemp,
  addOrUpdateSetting,
  getSelectableRange,
  selectRulesInfo,
  delRules
} from "@/api/qw/sopTemp";
import {courseList, videoList} from "@/api/qw/sop";
import {listToLiveNoEnd} from "@/api/live/live";
import ImageUpload from "@/views/qw/sop/ImageUpload";
import userVideo from "@/views/qw/userVideo/userVideo.vue";
import {listReward} from "@/api/qw/luckyBag";
import { getSmsTempList } from "@/api/company/companySmsTemp";
import { getQwSopTempVoiceCompanyUser } from "@/api/qw/QwSopTempVoice";
import {
  getRoles,
} from "@/api/qw/sop";
import { listAiSipCallTask } from '@/api/aiSipCall/aiSipCallTask'

export default {
  name: "updateSopTemp",
  components: {ImageUpload, userVideo, draggable},
  data() {
    return {
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
        dataStatus: '1',
        name: null,
        type: null
      },
      luckyBagList: [],
      projectFrom:process.env.VUE_APP_PROJECT_FROM,
      addTag: [{
        addTag: [],
        inputVisible: false,
        inputValue: '',
        delTag: [],
        delTagVisible: false,
        delTagValue: ''
      }],
      uploadUrl: process.env.VUE_APP_BASE_API + "/common/uploadOSS2",
      uploadUrlByVoice: process.env.VUE_APP_BASE_API + "/common/uploadOSSByHOOKVoice",
      //上传语音的遮罩层
      voiceLoading: false,
      openSort: false,
      openSort2: false,
      // 遮罩层
      loading: false,
      loading2: false,
      loading3: false,
      // 导出遮罩层
      exportLoading: false,
      roles: [],
      // 选中数组
      dayList: [],
      ruleList: [],
      ids: [],
      // startTimeRange: [],
      courseTypeList: ['1','2', '4','5','6', '7','8','9','10','14','15','16','11','28','29'],
      sysFsSopWatchStatus: [],
      //消息内容类型 企微版
      sysQwSopContentType: [],
      //插件版
      sysQwSopAiContentType: [],

      //类别
      sysQwSopSettingType: [],
      smsTemplateList: [],

      courseList: [],
      videoList: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      defaultContentType: 1,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      id: "",
      total: 0,
      tabIndex: null,
      // sop模板表格数据
      setting: [],
      data: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 状态字典
      statusOptions: [],
      videoNumOptions: {
        title: '选择视频号',
        open: false,
        content: null,
        contentIndex: null,
        setIndex: null,
      },
      voiceOptions: {
        title: '快捷语音',
        open: false,
        keyword: '',
        list: [],
        loading: false,
        total: 0,
        pageNum: 1,
        pageSize: 5,
        currentSetList: null,
      },
      //1 修改 2 复制 3 查看
      formType: null,
      // 查询参数
      form: {
        name: null,
        setting: null,
        status: "1",
        sort: 1,
        companyId: null,
        gap: 1,
      },
      // 缓存对象用于存储预加载的数据
      tabCache: {},
      // 标记哪些tab已经被请求过
      loadedTabs: new Set(),
      // 标记正在加载的tab，避免重复请求
      loadingTabs: new Set(),
      // 表单校验
      rules: {
        name: [
          {required: true, message: '名称不能为空', trigger: 'blur'}
        ],
        status: [
          {required: true, message: '状态不能为空', trigger: 'blur'}
        ],
        sort: [
          {required: true, message: '排序不能为空', trigger: 'blur'}
        ],
        gap: [
          {required: true, message: '间隔天数不能为空', trigger: 'blur'}
        ],
      },
      liveList: [],
      aiSipCallTaskList: [],
    };
  },
  created() {
    getRoles().then(res => {
      this.roles = res.data;
    })
    this.getDicts("sys_qwSopAi_contentType").then(response => {
      this.sysQwSopAiContentType = response.data;
    });
    this.getDicts("sys_fs_sop_watch_status").then(response => {
      this.sysFsSopWatchStatus = response.data;
    });
    // getSelectableRange().then(e => {
    //   this.startTimeRange = e.data;
    // })

    this.getDicts("sys_qwSop_contentType").then(response => {
      this.sysQwSopContentType = response.data;
    });

    this.getDicts("sys_company_status").then(response => {
      this.statusOptions = response.data;
    });

    this.getDicts("sys_qwSop_settingType").then(response => {
      this.sysQwSopSettingType = response.data;
    });

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

    listToLiveNoEnd().then(response => {
      this.liveList = response.rows;
    })
    listReward(this.queryParams1).then(response => {
      this.luckyBagList = response.rows;
    });

    const id = this.$route.params && this.$route.params.id;
    this.id = id;
    this.formType = this.$route.params && this.$route.params.type;
    this.handleUpdate(id);

    this.loadSmsTemplates();
    this.loadSipTemplates();
  },
  methods: {

      // 获取sip模板信息
      getAiSipCallTask() {
          // 如果短信模板列表为空，先加载数据
          if (this.aiSipCallTaskList.length === 0) {
              listAiSipCallTask({taskType: 1,status: 0,pageNum: 1,pageSize: 100}).then(response => {
                  this.aiSipCallTaskList = response.rows || response.data || [];
              }).catch(error => {
                  console.error('加载sip模板失败:', error);
                  this.$message.error('加载sip模板失败');
              });
          }
      },

      loadSipTemplates() {
          if (this.aiSipCallTaskList.length > 0) {
              return; // 如果已经有数据，不再重复加载
          }

          listAiSipCallTask({taskType: 1,status: 0,pageNum: 1,pageSize: 100}).then(response => {
              this.aiSipCallTaskList = response.rows || response.data || [];
              if (this.aiSipCallTaskList.length === 0) {
              }
          }).catch(error => {
              console.error('加载sip模板失败:', error);
              this.$message.error('加载sip模板失败');
          });
      },
    getLuckyBagStatus(content) {
      const selectedLuckyBag = this.luckyBagList.find(item => item.id === content.luckyBagId);
      if (selectedLuckyBag) {
        content.luckyBagDataStatus = selectedLuckyBag.dataStatus; // 自动填充标题
      } else {
        // 若未找到对应直播间，清空标题和封面（可选）
        content.luckyBagDataStatus = null;
      }
    },

    // 获取短信模板信息
    getSmsTemplateInfo(content) {
      // 如果短信模板列表为空，先加载数据
      if (this.smsTemplateList.length === 0) {
        getSmsTempList().then(response => {
          this.smsTemplateList = response.rows || response.data || [];
          // 加载完成后再次调用自身来处理选中项
          this.processSelectedSmsTemplate(content);
        }).catch(error => {
          console.error('加载短信模板失败:', error);
          this.$message.error('加载短信模板失败');
        });
      } else {
        // 直接处理选中项
        this.processSelectedSmsTemplate(content);
      }
    },

    // 处理选中的短信模板
    processSelectedSmsTemplate(content) {
      const selectedTemplate = this.smsTemplateList.find(item => item.tempId === content.smsTemplateId);
      if (selectedTemplate) {
        // 自动填充模板内容预览
        this.$set(content, 'smsTemplateContent', selectedTemplate.content || selectedTemplate.templateContent || '');
      } else {
        // 清空相关内容
        this.$set(content, 'smsTemplateContent', '');
      }
    },

    // 加载短信模板列表
    loadSmsTemplates() {
      if (this.smsTemplateList.length > 0) {
        return; // 如果已经有数据，不再重复加载
      }

      getSmsTempList().then(response => {
        this.smsTemplateList = response.rows || response.data || [];
        if (this.smsTemplateList.length === 0) {
          this.$message.info('暂无可用的短信模板');
        }
      }).catch(error => {
        console.error('加载短信模板失败:', error);
        this.$message.error('加载短信模板失败');
      });
    },
    liveChange(content) {
      // content.liveId 是选中的直播间 ID（liveId）
      const selectedLive = this.liveList.find(live => live.liveId === content.liveId);
      if (selectedLive) {
        // 从选中的直播间对象中提取标题和封面，赋值给当前内容的对应字段
        // 假设直播间对象中标题字段为 liveTitle，封面字段为 coverImg（根据实际接口字段调整）
        content.miniprogramTitle = selectedLive.liveName || ''; // 自动填充标题
        content.miniprogramPicUrl = selectedLive.liveImgUrl || ''; // 自动填充封面
      } else {
        // 若未找到对应直播间，清空标题和封面（可选）
        content.miniprogramTitle = '';
        content.miniprogramPicUrl = '';
      }
    },
    liveChangeContent(e){
      //循环修改当前content下面的直播间内容
      //并且禁用直播间编辑
      if(!!e && !!e.setting){
        for(let i=0;i<e.setting.length;i++){
          if(!!e.liveId){
             this.$set(e.setting[i], 'liveId', e.liveId);
             this.liveChange(e.setting[i]);
          }
          //直播间变为不可编辑
           this.$set(e.setting[i], 'setListDisabled', true);
        }
      }
    },
    handleClose(index, tag, content) {
      content.addTag.splice(content.addTag.indexOf(tag), 1);
    },
    showInput(index) {
      this.addTag[index].inputVisible = true;
    },
    handleInputConfirm(index, content) {
      let inputValue = this.addTag[index].inputValue;
      if (inputValue) {
        if (!content.hasOwnProperty('addTag')) {
          this.$set(content, 'addTag', []);
        }
        content.addTag.push(inputValue);
      }
      this.addTag[index].inputVisible = false;
      this.addTag[index].inputValue = '';
    },

    // 检查字节长度
    checkByteLength(content, type, isOfficial) {

      if (type == 4 && isOfficial == '1')
        for (let i = 0; i < content.setting.length; i++) {
          const text = content.setting[i].miniprogramTitle;
          const byteLength = this.getByteLength(text); // 获取当前字节数
          // 如果字节数超过64，截断输入内容
          if (byteLength > 64) {
            this.$set(content.setting[i], 'miniprogramTitle', this.truncateTextByByteLength(text, 60));
          }

        }

    },

    // 计算字符串的字节数
    getByteLength(text) {
      return new Blob([text]).size; // 使用 Blob 计算字节数
    },

    // 根据字节数截断字符串
    truncateTextByByteLength(text, maxByteLength) {
      let byteLength = 0;
      let result = "";

      for (let i = 0; i < text.length; i++) {
        const char = text[i];
        const charByteLength = this.getByteLength(char); // 获取当前字符的字节数

        // 如果加上当前字符的字节数后不超过限制，则添加到结果中
        if (byteLength + charByteLength <= maxByteLength) {
          result += char;
          byteLength += charByteLength;
        } else {
          break; // 超过限制时停止
        }
      }

      return result;
    },

    handleCloseDel(index, tag, content) {
      content.delTag.splice(content.delTag.indexOf(tag), 1);
    },

    showInputDel(index) {
      this.addTag[index].delTagVisible = true;
    },
    handleInputConfirmDel(index, content) {

      let delTagValue = this.addTag[index].delTagValue;

      if (delTagValue) {
        if (!content.hasOwnProperty('delTag')) {
          this.$set(content, 'delTag', []);
        }
        content.delTag.push(delTagValue);

      }
      this.addTag[index].delTagVisible = false;
      this.addTag[index].delTagValue = '';
    },
    saveSorts() {
      let list = this.dayList.filter(e => e.dayNum != e.newDay).map(e => {
        return {dayNum: e.newDay, id: e.id}
      })
      this.loading3 = true;
      sortDay(list).then(e => {
        window.location.reload();
      })
    },
    saveSortsRules() {
      this.$set(this.setting[this.tabIndex], 'content', this.ruleList);
      this.openSort2 = false;
    },
    autoSortsRules() {
      this.ruleList = this.ruleList.sort((a, b) => {
        // 将 time 字段转换为 Date 对象进行比较
        const timeA = new Date(`1970-01-01T${a.time}Z`);
        const timeB = new Date(`1970-01-01T${b.time}Z`);

        // 比较时间顺序
        return timeA - timeB; // 升序排序
      });
    },
    openUpdateDaySorts() {
      dayListFun(this.id).then(response => {
        response.data.forEach((item) => item.newDay = item.dayNum);
        this.dayList = response.data;
        if (this.dayList == null || this.dayList.length == 0) {
          this.$message.error("暂无天数")
        } else {
          this.openSort = true;
        }
      })
    },
    openUpdateSorts() {
      this.ruleList = JSON.parse(JSON.stringify(this.setting[this.tabIndex].content));
      if (this.ruleList == null || this.ruleList.length == 0) {
        this.$message.error("暂无规则")
      } else {
        this.openSort2 = true;
      }
    },
    onDragEndDay() {
      this.dayList.forEach((item, index) => {
        item.newDay = (this.form.gap * index) + 1;
      })
      this.$forceUpdate()
    },
    onDragEnd() {
      // 更新排序值
      // this.setting[this.tabIndex].content.forEach((item, index) => {
      //   item.sorts = index;
      // });
    },
    // 切换标签保存数据
    async leave(index, oldIndex) {
      const newData = this.setting[index]
      if (newData.dayNum && newData.id) {
        // 检查是否已经有缓存数据
        if (this.tabCache[newData.id]) {
          // 使用缓存数据，无需loading
          this.applyCachedData(index, newData);
        } else {
          // 没有缓存，需要请求数据
          this.loading = true;
          try {
            const res = await selectRulesInfo(newData.id);
            // 缓存数据
            this.tabCache[newData.id] = res.data;
            this.loadedTabs.add(index);
            this.applyDataToTab(index, newData, res.data);
          } catch (error) {
            console.error("获取规则信息失败:", error);
          } finally {
            this.loading = false;
          }
        }

        // 预加载下一个tab的数据
        this.preloadNextTab(index);
      }
    },

    // 应用缓存数据到tab
    applyCachedData(index, newData) {
      const cachedData = this.tabCache[newData.id];
      this.$nextTick(() => {
        this.videoList = [];
        this.addTag = [];
        this.$set(this.setting, index, {
          ...newData,
          voice: cachedData.voice,
          content: cachedData.list || [{type: this.defaultContentType, contentType: '1', setting: [{contentType: '1', value: ""}]}]
        });

        for (let j = 0; j < this.setting[index].content.length; j++) {
          if (this.setting[index].content[j].addTag != null) {
            this.setting[index].content[j].addTag = JSON.parse(this.setting[index].content[j].addTag)
          }
          if (this.setting[index].content[j].delTag != null) {
            this.setting[index].content[j].delTag = JSON.parse(this.setting[index].content[j].delTag)
          }
          this.videoList.push([])
          this.addTag.push({
            addTag: [],
            inputVisible: false,
            inputValue: '',
            delTag: [],
            delTagVisible: false,
            delTagValue: ''
          })
          if (this.setting[index].content[j].type == 2) {
            if (this.setting[index].content[j].hasOwnProperty('courseId')) {
              this.courseChange(this.setting[index].content[j], index, j);
            }
          }
        }
      });
    },

    // 应用新获取的数据到tab
    applyDataToTab(index, newData, data) {
      this.$nextTick(() => {
        this.videoList = [];
        this.addTag = [];
        this.$set(this.setting, index, {
          ...newData,
          voice: data.voice,
          content: data.list || [{type: this.defaultContentType, contentType: '1', setting: [{contentType: '1', value: ""}]}]
        });

        for (let j = 0; j < this.setting[index].content.length; j++) {
          if (this.setting[index].content[j].addTag != null) {
            this.setting[index].content[j].addTag = JSON.parse(this.setting[index].content[j].addTag)
          }
          if (this.setting[index].content[j].delTag != null) {
            this.setting[index].content[j].delTag = JSON.parse(this.setting[index].content[j].delTag)
          }
          this.videoList.push([])
          this.addTag.push({
            addTag: [],
            inputVisible: false,
            inputValue: '',
            delTag: [],
            delTagVisible: false,
            delTagValue: ''
          })
          if (this.setting[index].content[j].type == 2) {
            if (this.setting[index].content[j].hasOwnProperty('courseId')) {
              this.courseChange(this.setting[index].content[j], index, j);
            }
          }
        }
      });
    },

    // 预加载下一个tab的数据
    async preloadNextTab(currentIndex) {
      const nextIndex = parseInt(currentIndex) + 1;
      // 检查是否有下一个tab
      if (nextIndex >= this.setting.length) {
        return;
      }

      const nextTabData = this.setting[nextIndex];
      // 只预加载已存在的tab（有id的），跳过新建的tab
      if (!nextTabData.id || !nextTabData.dayNum) {
        return;
      }

      // 如果已经加载过或正在加载，则跳过
      if (this.loadedTabs.has(nextIndex) || this.loadingTabs.has(nextIndex) || this.tabCache[nextTabData.id]) {
        return;
      }

      // 标记为正在加载
      this.loadingTabs.add(nextIndex);

      try {
        const res = await selectRulesInfo(nextTabData.id);
        // 缓存数据
        this.tabCache[nextTabData.id] = res.data;
        this.loadedTabs.add(nextIndex);
      } catch (error) {
        console.error("预加载tab数据失败:", error);
      } finally {
        // 移除加载标记
        this.loadingTabs.delete(nextIndex);
      }
    },
    save() {
      let data = this.setting[this.tabIndex];
      let check = this.checkData(data);
      if (!check) {
        return;
      }
      for (let j = 0; j < data.content.length; j++) {

        //如果不是每天第一条,全刷为非官方
        if (j!==0){
          data.content[j].isOfficial=0;
        }

        if (data.content[j].type != 4 && data.content[j].type != 5) {
          for (let k = 0; k < data.content[j].setting.length; k++) {
            if (data.content[j].setting[k].contentType == 4 && (data.content[j].setting[k].miniprogramTitle != null || data.content[j].setting[k].miniprogramTitle != "")) {
              data.content[j].setting[k].miniprogramTitle = this.truncateTextByByteLength(data.content[j].setting[k].miniprogramTitle, 60)
            }
            // 处理短信模板数据映射
            if (data.content[j].setting[k].contentType == 21 && data.content[j].setting[k].smsTemplateId) {
              // 根据选中的短信模板ID查找对应的模板信息
              const selectedTemplate = this.smsTemplateList.find(template => template.tempId === data.content[j].setting[k].smsTemplateId);
              if (selectedTemplate) {
                // 设置短信模板的相关字段
                this.$set(data.content[j].setting[k], 'smsTemplateCode', selectedTemplate.tempCode || '');
                this.$set(data.content[j].setting[k], 'smsTemplateTitle', selectedTemplate.title || '');
              }
            }

          }
        }
      }

      let index = 0;
      const dataList = data.content.map(e => {
        e.name = data.name;
        e.tempId = this.id;
        e.sorts = Number(this.tabIndex);
        e.dayNum = (this.form.gap * e.sorts) + 1;
        e.sorts = index++;
        data.dayNum = e.dayNum;
        e.contentType = e.type;
        e.settingList = e.setting;
        e.settingList.forEach(e => e.content = JSON.stringify(e));
        if (e.addTag != null) {
          e.addTag = JSON.stringify(e.addTag);
        }
        if (e.delTag != null) {
          e.delTag = JSON.stringify(e.delTag);
        }
        return e;
      })
      data.tempId = this.id;
      data.list = dataList;
      this.loading = true;
      addOrUpdateSetting(data).then(e => {
        this.$message.success(e.msg)
        let content = this.setting[this.tabIndex].content;
        for (let j = 0; j < content.length; j++) {
          if (content[j].addTag != null) {
            content[j].addTag = JSON.parse(content[j].addTag);
          }
          if (content[j].delTag != null) {
            content[j].delTag = JSON.parse(content[j].delTag);
          }
        }
        this.loading = false;
        // 使用Vue.set确保响应式更新
        this.$set(this.setting, this.tabIndex, {
          ...this.setting[this.tabIndex],
          id: e.data.id,
        });

        // 更新缓存中的数据
        const currentTabId = this.setting[this.tabIndex].id;
        if (currentTabId) {
          // 重新获取最新数据并更新缓存
          selectRulesInfo(currentTabId).then(res => {
            this.tabCache[currentTabId] = res.data;
            this.loadedTabs.add(parseInt(this.tabIndex));
          }).catch(error => {
            console.error("更新缓存失败:", error);
          });
        }
      }).catch(() => {
        this.loading = false;
      });
    },
    checkData(data) {
      if (this.form.sendType != 4) {

        for (let j = 0; j < data.content.length; j++) {
          if (data.name == null || data.name == "") {
            this.$message.error("内容名称不能为空")
            return false;
          }
          if (data.content[j].time == null || data.content[j].time == "") {
            this.$message.error("时间不能为空")
            return false;
          }

          if (data.content[j].type == 20){
            if (data.content[j].liveId == null || data.content[j].liveId == "") {
              this.$message.error("请选择直播间")
              return false;
            }
          }

          if (data.content[j].type == 2 || data.content[j].type == 8) {
            if (data.content[j].courseId == null || data.content[j].courseId == "") {
              this.$message.error("请选择课程")
              return false;
            }
            if (data.content[j].videoId == null || data.content[j].videoId == "") {
              this.$message.error("请选择课节")
              return false;
            }
            if (data.content[j].courseType == null || data.content[j].courseType === "") {
              this.$message.error("请选择消息类型")
              return false;
            }
          }

          if (data.content[j].type != 4 && data.content[j].type != 5 && data.content[j].type != 8) {
            for (let k = 0; k < data.content[j].setting.length; k++) {
              if (data.content[j].setting[k].contentType == 1 && (data.content[j].setting[k].value == null || data.content[j].setting[k].value == "")) {
                this.$message.error("内容不能为空")
                return false;
              }
              if (data.content[j].setting[k].contentType == 2 && (data.content[j].setting[k].imgUrl == null || data.content[j].setting[k].imgUrl == "")) {
                this.$message.error("图片不能为空")
                return false;
              }
              if ((data.content[j].setting[k].contentType == 3 || data.content[j].setting[k].contentType == 9 || data.content[j].setting[k].contentType == 10 || data.content[j].setting[k].contentType == 17|| data.content[j].setting[k].contentType == 23 || data.content[j].setting[k].contentType == 28 || data.content[j].setting[k].contentType == 29) && (data.content[j].setting[k].linkTitle == null || data.content[j].setting[k].linkTitle == "")) {
                this.$message.error("链接标题不能为空")
                return false;
              }
              if ((data.content[j].setting[k].contentType == 3 || data.content[j].setting[k].contentType == 9 || data.content[j].setting[k].contentType == 10|| data.content[j].setting[k].contentType == 17|| data.content[j].setting[k].contentType == 23 || data.content[j].setting[k].contentType == 28 || data.content[j].setting[k].contentType == 29) && (data.content[j].setting[k].linkDescribe == null || data.content[j].setting[k].linkDescribe == "")) {
                this.$message.error("链接描述不能为空")
                return false;
              }
              if ((data.content[j].setting[k].contentType == 3 || data.content[j].setting[k].contentType == 9 || data.content[j].setting[k].contentType == 10|| data.content[j].setting[k].contentType == 17|| data.content[j].setting[k].contentType == 23 || data.content[j].setting[k].contentType == 28 || data.content[j].setting[k].contentType == 29) && (data.content[j].setting[k].linkImageUrl == null || data.content[j].setting[k].linkImageUrl == "")) {
                this.$message.error("链接图片不能为空")
                return false;
              }
              if (data.content[j].setting[k].contentType == 3 && data.content[j].setting[k].type == 1 && (data.content[j].setting[k].linkUrl == null || data.content[j].setting[k].linkUrl == "")) {
                this.$message.error("链接地址不能为空")
                return false;
              }

              if ((data.content[j].setting[k].contentType == 4 || data.content[j].setting[k].contentType == 10 || data.content[j].setting[k].contentType == 17 || data.content[j].setting[k].contentType == 23) && (data.content[j].setting[k].miniprogramTitle == null || data.content[j].setting[k].miniprogramTitle == "")) {
                this.$message.error("小程序消息标题不能为空")
                return false;
              }
              if ((data.content[j].setting[k].contentType == 4 || data.content[j].setting[k].contentType == 10 || data.content[j].setting[k].contentType == 17 || data.content[j].setting[k].contentType == 23) && data.content[j].isOfficial !== '1' && (data.content[j].setting[k].miniprogramPicUrl == null || data.content[j].setting[k].miniprogramPicUrl == "")) {
                this.$message.error("小程序封面地址不能为空")
                return false;
              }

              if (data.content[j].setting[k].contentType == 10 && data.content[j].isOfficial !== '1' && (data.content[j].setting[k].miniprogramPage == null || data.content[j].setting[k].miniprogramPage == "")) {
                this.$message.error("小程序page地址不能为空")
                return false;
              }

              if (data.content[j].setting[k].contentType == 5 && (data.content[j].setting[k].fileUrl == null || data.content[j].setting[k].fileUrl == "")) {
                this.$message.error("文件不能为空")
                return false;
              }
              if (data.content[j].setting[k].contentType == 6 && (data.content[j].setting[k].videoUrl == null || data.content[j].setting[k].videoUrl == "")) {
                this.$message.error("视频不能为空")
                return false;
              }
              if (data.content[j].setting[k].contentType == 7 && (data.content[j].setting[k].value == null || data.content[j].setting[k].value == "")) {
                this.$message.error("语音文本不能为空")
                return false;
              }
              if (data.content[j].setting[k].contentType == 8 && (data.content[j].setting[k].url == null || data.content[j].setting[k].url == "")) {
                this.$message.error("视频号信息不能为空")
                return false;
              }
              if (data.content[j].setting[k].contentType == 21 && (data.content[j].setting[k].smsTemplateId == null || data.content[j].setting[k].smsTemplateId == "")) {
                this.$message.error("短信模板不能为空")
                return false;
              }
            }
          } else if (data.content[j].type == 4) {
            if (data.content[j].aiTouch == null || data.content[j].aiTouch == '') {
              this.$message.error("AI触达不能为空")
              return false;
            }
          }
        }
      } else {
        for (let day of this.setting) {
          for (let content of day.content) {
            for (let set of content.setting) {
              // if (!set.intervalTime) {
              //   this.$message.error("客服时间不能为空");
              //   return false;
              // }
                // 第一天校验intervalTime，第二天及以后校验time
                if (day.dayNum == 1) {
                    if (!set.intervalTime) {
                        this.$message.error("客服时间不能为空");
                        return false;
                    }
                } else {
                    if (!set.time) {
                        this.$message.error("触发时间不能为空");
                        return false;
                    }
                }
                // 校验发送用户类型
                if (!set.onlyUnregistered) {
                    this.$message.error("发送用户类型不能为空");
                    return false;
                }
              if (set.contentType == 1 && (set.value == null || set.value == "")) {
                this.$message.error("内容不能为空")
                return false;
              }
              if (set.contentType == 2 && (set.imgUrl == null || set.imgUrl == "")) {
                this.$message.error("图片不能为空")
                return false;
              }
              if ((set.contentType == 3 || set.contentType == 9 || set.contentType == 28 || set.contentType == 29) && (set.linkTitle == null || set.linkTitle == "")) {
                this.$message.error("链接标题不能为空")
                return false;
              }
              if ((set.contentType == 3 || set.contentType == 9 || set.contentType == 28 || set.contentType == 29) && (set.linkDescribe == null || set.linkDescribe == "")) {
                this.$message.error("链接描述不能为空")
                return false;
              }
              if ((set.contentType == 3 || set.contentType == 9 || set.contentType == 28 || set.contentType == 29) && (set.linkImageUrl == null || set.linkImageUrl == "")) {
                this.$message.error("链接图片不能为空")
                return false;
              }
              if (set.contentType == 3 && set.type == 1 && (set.linkUrl == null || set.linkUrl == "")) {
                this.$message.error("链接地址不能为空")
                return false;
              }

              if (set.contentType == 4 && (set.miniprogramTitle == null || set.miniprogramTitle == "")) {
                this.$message.error("小程序消息标题不能为空")
                return false;
              }
              if (set.contentType == 4 && (set.miniprogramPicUrl == null || set.miniprogramPicUrl == "")) {
                this.$message.error("小程序封面地址不能为空")
                return false;
              }

              if (set.contentType == 5 && (set.fileUrl == null || set.fileUrl == "")) {
                this.$message.error("文件不能为空")
                return false;
              }
              if (set.contentType == 6 && (set.videoUrl == null || set.videoUrl == "")) {
                this.$message.error("视频不能为空")
                return false;
              }
              if (set.contentType == 7 && (set.value == null || set.value == "")) {
                this.$message.error("语音文本不能为空")
                return false;
              }
              if (set.contentType == 8 && (set.url == null || set.url == "")) {
                this.$message.error("视频号信息不能为空")
                return false;
              }
              if (set.contentType == 21 && (set.smsTemplateId == null || set.smsTemplateId == "")) {
                this.$message.error("短信模板不能为空")
                return false;
              }
            }
          }
        }
      }

      return true;
    },
    tabClick(obj) {

    },
    addSetList(contentIndex, content) {
      if (this.form.sendType == 1) {
        for (let i = 0; i < content.length; i++) {
          if (!content[i].setting) {
            content[i].setting = []; // 初始化 setting 数组如果不存在
          }

          if (content[i].setting.length > 9) {
            return this.$message.error("因为企微接口限制，企微模板一条消息只能设置最多~9个内容！！")
          } else {

            // 动态生成新的设置项
            const newSetting = content[i].setting.some(item => item.contentType === '1')
              ? {contentType: '2', imgUrl: ''}  // 如果存在 contentType = '1'，添加 contentType = '2'
              : {contentType: '1', value: ''};  // 如果不存在 contentType = '1'，添加 contentType = '1'

            // 将新设置项添加到 content[i].setting 数组中
            content[i].setting.push(newSetting);
          }

        }
      } else {
        if (!content[contentIndex].setting) {
          content[contentIndex].setting = []; // 初始化 setting 数组如果不存在
        }

        const newSetting = {
          contentType: '1',
          value: '',
          onlyUnregistered: '3',
        };
        if (this.form.sendType === 4) {
          for (let i = 0; i < content.length; i++) {
            if (content[i].setting.length < 5) {
              // 将新设置项添加到 content.setting 数组中
              content[contentIndex].setting.push(newSetting);
            } else {
              return this.$message.error("因为要求限制，新课对话模板一条消息只能设置最多~5个内容！！")
            }
          }
        } else {
          // 将新设置项添加到 content.setting 数组中
          content[contentIndex].setting.push(newSetting);
        }
      }


    },
    delSetList(index, contentIndex, setIndex) {
      this.setting[index].content[contentIndex].setting.splice(setIndex, 1)

    },

    addContent(index) {
      if (this.setting[index].content.length > 0 && this.form.sendType == 1) {
        return this.$message.error("因为企微接口限制，企微模板一天只能设置一条消息~")
      } else {
        const sourceContent = this.setting[index].content[0];
        const newContent = {
          type: this.defaultContentType,
          contentType: 1,
          setting: [{contentType: '1', value: ""}],
          // 复制课程相关字段，如 courseId、videoId，根据实际数据结构补充
          courseId: sourceContent.courseId,
          videoId: sourceContent.videoId,
          courseType: sourceContent.courseType,
          isAtAll: '0',
        };
        this.setting[index].content.push(newContent);
        this.videoList.push([]);
        this.addTag.push({
          addTag: [],
          inputVisible: false,
          inputValue: '',
          delTag: [],
          delTagVisible: false,
          delTagValue: ''
        });
        // 如果有视频列表关联，也可同步处理 videoList，根据 courseId 重新请求或复制已有视频数据
        if (sourceContent.courseId) {
          this.courseUpdate(newContent, index, this.setting[index].content.length - 1);
        }
      }
    },
    delContent(index, contentIndex) {
      this.setting[index].content.splice(contentIndex, 1)
      this.videoList.splice(contentIndex, 1)
      this.addTag.splice(contentIndex, 1)
    },
    addSetting() {
      // 当 sendType == 4 时，限制最多添加7天
      if (this.form.sendType == 4 && this.setting.length >= 7) {
        this.$message.warning('新客对话消息，最多只能添加7天');
        return;
      }

      let content = [{type: this.defaultContentType, contentType: '1', setting: [{contentType: '1', value: "",}],isAtAll: '0'}];
      if (this.form.sendType == 4) {
        content = [{type: 2, contentType: '1', setting: [{contentType: '1', value: "", onlyUnregistered: '3'}]}];
        content[0].setting[0].intervalTime = 5;
      }
      this.setting.push({
        name: null,
        dayNum: (this.form.gap * this.setting.length) + 1,
        content
      })

    },
    delSetting(index) {
      const newData = this.setting[index]
      if (newData.id && newData.dayNum) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delRules(newData.id, newData.name, newData.dayNum).then(res => {
            this.del(index);
          });
        });
      } else {
        this.del(index);
      }

    },
    del(index) {
      if (index == 0) {
        this.tabIndex = "0";
      } else {
        this.tabIndex = (index - 1) + "";
      }
      this.setting.splice(index, 1)

    },
    handleClosegroupUser(list) {
      const index = this.userSelectList.findIndex(t => t === list);
      if (index !== -1) {
        this.userSelectList.splice(index, 1);
      }

    },
    //选择视频号
    hanldeSelectVideoNum(content, index, contentIndex, setIndex) {
      this.videoNumOptions.content = content;
      this.videoNumOptions.contentIndex = contentIndex;
      this.videoNumOptions.setIndex = setIndex;
      this.videoNumOptions.open = true;

    },

    qwUserVideoResult(val) {

      // 根据选中的内容，将返回的数据更新到相应的表单项
      const content = this.videoNumOptions.content;
      const setList = content.setting[this.videoNumOptions.setIndex];

      setList.nickname = val.nickname;
      setList.avatar = val.avatar;
      setList.coverUrl = val.coverUrl;
      setList.thumbUrl = val.thumbUrl;
      setList.desc = val.desc;
      setList.url = val.url;
      setList.extras = val.extras;
      setList.videoId = val.id;

      this.videoNumOptions.open = false;

    },
    //首次刷新
    courseChange(content, index, countIndex) {

      this.courseUpdate(content, index, countIndex);
    },

    //修改
    courseChangeUpdate(content, index, countIndex) {

      this.$set(content, 'videoId', null);
      // 查找选中的课程对应的 label
      const selectedCourse = this.courseList.find(course => parseInt(course.dictValue) === content.courseId);
      for (let i = 0; i < content.setting.length; i++) {


        this.$set(content.setting[i], 'linkTitle', null);
        this.$set(content.setting[i], 'linkDescribe', null);
        this.$set(content.setting[i], 'linkImageUrl', null);


        //如果是链接的才上
        if (selectedCourse && content.type == 2 && content.courseId != null) {
          //响应式直接给链接的标题/封面上值

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


        }
      }


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

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

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

    },
    courseUpdate(content, index, countIndex) {
      videoList(content.courseId).then(response => {
        // this.$set(this.videoList, countIndex, response.list); // 响应式设置videoList
        this.videoList.splice(countIndex, 1, response.list);

      });

    },
    toggleSalesCall(itemIndex, contentIndex, setIndex) {
      // 获取目标对象
      const setItem = this.setting[itemIndex].content[contentIndex].setting[setIndex];
      const salesCall = '#销售称呼#';
      const refKey = `textarea-${itemIndex}-${contentIndex}-${setIndex}`;
      const textarea = this.$refs[refKey][0]?.$refs?.textarea;

      if (!textarea) return;

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

      if (setItem.isSalesCallAdded) {
        // 移除所有标签
        setItem.value = setItem.value.replace(new RegExp(salesCall, 'g'), '');
      } else {
        // 插入到光标位置
        setItem.value =
          setItem.value.slice(0, cursorPosition) +
          salesCall +
          setItem.value.slice(cursorPosition);
      }

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

      // 保持光标位置
      this.$nextTick(() => {
        const newCursorPos = cursorPosition + (setItem.isSalesCallAdded ? salesCall.length : 0);
        textarea.setSelectionRange(newCursorPos, newCursorPos);
      });
    },
    toggleUserNameCall(itemIndex, contentIndex, setIndex) {
      // 获取目标对象
      const setItem = this.setting[itemIndex].content[contentIndex].setting[setIndex];
      const salesCall = '#客户称呼#';
      const refKey = `textarea-${itemIndex}-${contentIndex}-${setIndex}`;
      const textarea = this.$refs[refKey][0]?.$refs?.textarea;

      if (!textarea) return;

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

      if (setItem.isUserNameCallAdded) {
        // 移除所有标签
        setItem.value = setItem.value.replace(new RegExp(salesCall, 'g'), '');
      } else {
        // 插入到光标位置
        setItem.value =
          setItem.value.slice(0, cursorPosition) +
          salesCall +
          setItem.value.slice(cursorPosition);
      }

      // 切换状态
      setItem.isUserNameCallAdded = !setItem.isUserNameCallAdded;

      // 保持光标位置
      this.$nextTick(() => {
        const newCursorPos = cursorPosition + (setItem.isUserNameCallAdded ? salesCall.length : 0);
        textarea.setSelectionRange(newCursorPos, newCursorPos);
      });
    },
    handleKeydown(event, itemIndex, contentIndex, setIndex) {

      const setItem = this.setting[itemIndex].content[contentIndex].setting[setIndex];
      const refKey = `textarea-${itemIndex}-${contentIndex}-${setIndex}`;
      const textarea = this.$refs[refKey][0]?.$refs?.textarea;

      if (!textarea) return;

      const tags = ['#销售称呼#', '#客户称呼#'];
      const key = event.key;
      const value = setItem.value;
      const cursorPosition = textarea.selectionStart;

      if (key === 'Backspace' || key === 'Delete') {
        tags.forEach(tag => {
          let start, end;

          // Backspace 处理
          if (key === 'Backspace' && cursorPosition >= tag.length) {
            start = cursorPosition - tag.length;
            if (value.slice(start, cursorPosition) === tag) {
              event.preventDefault();
              setItem.value = value.slice(0, start) + value.slice(cursorPosition);
              if (tag === '#销售称呼#') setItem.isSalesCallAdded = false;
              this.$nextTick(() => textarea.setSelectionRange(start, start));
            }
          }

          // Delete 处理
          if (key === 'Delete') {
            end = cursorPosition + tag.length;
            if (value.slice(cursorPosition, end) === tag) {
              event.preventDefault();
              setItem.value = value.slice(0, cursorPosition) + value.slice(end);
              if (tag === '#销售称呼#') setItem.isSalesCallAdded = false;
            }
          }
        });
      }
    },
    handleContentTypeChange(content, index, countIndex, setIndex, item, fieldName, val) {

      //消息类别是直播间&&选择了发送直播间

      if(content.type == 20 && val == 12){
          //如果选择了直播间 直接赋值
          if(!!content.liveId){
             this.$set(content.setting[setIndex], 'liveId', content.liveId);
             this.liveChange(content.setting[setIndex]);
          }
          //直播间变为不可编辑
          this.$set(content.setting[setIndex], 'setListDisabled', true);
      }else{
        //取消禁用
        for (let i = 0; i < content.setting.length; i++) {
            this.$set(content.setting[i], 'setListDisabled', true);
        }
      }

      //如果是链接的才上
      if (content.courseId != null && content.type == 2) {
        const selectedCourse = this.courseList.find(course => parseInt(course.dictValue) === content.courseId);

        for (let i = 0; i < content.setting.length; i++) {
          //响应式直接给链接的标题/封面上值
          if (selectedCourse && content.type == 2 && content.courseId != null) {
            if (content.setting[i].contentType == 3 || content.setting[i].contentType == 9 || content.setting[i].contentType == 28 || content.setting[i].contentType == 29) {
              this.$set(content.setting[i], 'linkTitle', selectedCourse.dictLabel);
              this.$set(content.setting[i], 'linkImageUrl', selectedCourse.dictImgUrl);
            }
            if ((content.setting[i].contentType == 4 || content.setting[i].contentType == 10 || content.setting[i].contentType == 17 || content.setting[i].contentType == 23) && (content.isOfficial == '0' || content.isOfficial == null)) {
              this.$set(content.setting[i], 'miniprogramPicUrl', selectedCourse.dictImgUrl);
            }

          }

        }

      }
      if (content.videoId != null && content.type == 2) {
        // 查找选中的课节对应的 label
        const selectedVideo = this.videoList[countIndex].find(course => parseInt(course.dictValue) === content.videoId);

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

            if (content.setting[i].contentType == 3 || content.setting[i].contentType == 9 || content.setting[i].contentType == 28 || content.setting[i].contentType == 29) {
              this.$set(content.setting[i], 'linkDescribe', selectedVideo.dictLabel);

              if (this.projectFrom == 'sxjz' && selectedVideo.dictImgUrl) {
                this.$set(content.setting[i], 'linkImageUrl', selectedVideo.dictImgUrl);
              }

            }
            if (content.setting[i].contentType == 4 || content.setting[i].contentType == 10 || content.setting[i].contentType == 17 || content.setting[i].contentType == 23) {
              this.$set(content.setting[i], 'miniprogramTitle', this.truncateTextByByteLength(selectedVideo.dictLabel, 60));

              if (this.projectFrom == 'sxjz' && selectedVideo.dictImgUrl) {
                this.$set(content.setting[i], 'miniprogramPicUrl', selectedVideo.dictImgUrl);
              }

            }
          }
        }
      }
      if(countIndex == 0 && setIndex == 0){
        this.updateAll(setIndex, item, fieldName, val);
        for (let index in item.content) {
          if(index != 0){
            this.handleContentTypeChange(item.content[index], 0, index, 0, item, fieldName, val);
          }
        }
      }
    },
    videoIdChange(content, index, countIndex) {

      //选择了课程小节则 默认绑上
      let selectedVideo;
      // 查找选中的课程对应的 label
      if (content.videoId != null) {
        selectedVideo = this.videoList[countIndex].find(course => parseInt(course.dictValue) === content.videoId);
      }
      for (let i = 0; i < content.setting.length; i++) {
        //课程消息-文本内容
        if (content.setting[i].contentType == 1 && content.type == 2) {
          this.$set(content.setting[i], 'isBindUrl', '2');
        }
        //如果是链接的才上
        if (selectedVideo && content.type == 2 && content.videoId != null) {

          if (content.setting[i].contentType == 3 || content.setting[i].contentType == 9 || content.setting[i].contentType == 28 || content.setting[i].contentType == 29) {
            this.$set(content.setting[i], 'linkDescribe', selectedVideo.dictLabel);

            if (this.projectFrom == 'sxjz' && selectedVideo.dictImgUrl) {
              this.$set(content.setting[i], 'linkImageUrl', selectedVideo.dictImgUrl);
            }

          }

          if (content.setting[i].contentType == 4 || content.setting[i].contentType == 10 || content.setting[i].contentType == 17 || content.setting[i].contentType == 23 ) {
            this.$set(content.setting[i], 'miniprogramTitle', this.truncateTextByByteLength(selectedVideo.dictLabel, 60));

            if (this.projectFrom == 'sxjz' && selectedVideo.dictImgUrl) {
              this.$set(content.setting[i], 'miniprogramPicUrl', selectedVideo.dictImgUrl);
            }

          }


        }
      }

    },
    //上传文件
    handleAvatarSuccessFile(res, file, content) {
      if (res.code === 200) {
        // 使用 $set 确保响应式更新
        this.$set(content, '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, content) {
      if (res.code == 200) {
        // 使用 $set 确保响应式更新
        this.$set(content, '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;
    },

    handleAvatarSuccessVoice(res, file, content) {
      if (res.code == 200) {
        // 创建 Audio 对象加载音频
        const audio = new Audio(res.mp3Url);
        audio.addEventListener('loadedmetadata', () => {
          // 获取音频时长
          this.$set(content, 'voiceDuration', Math.ceil(audio.duration));
        });
        // 使用 $set 确保响应式更新
        this.$set(content, 'voiceUrl', res.silkUrl);
        this.$set(content, 'mp3Url', res.mp3Url);
      } else {
        this.msgError(res.msg);
      }
      this.voiceLoading = false;

    },
    beforeAvatarUploadVoice(file) {
      return new Promise((resolve, reject) => {
        const isLt10M = file.size / 1024 / 1024 < 10; // 假设语音文件大小限制为10MB
        const isVoiceType = ['audio/mp3', 'audio/mpeg', 'audio/wav', 'audio/x-wav'].includes(file.type);

        if (!isVoiceType) {
          this.$message.error('仅支持上传 MP3, WAV, X-WAV 格式的语音文件!');
          return reject(false); // 不允许继续上传
        }

        if (!isLt10M) {
          this.$message.error('上传大小不能超过 10MB!');
          return reject(false); // 不允许继续上传
        }

        // 使用 FileReader 读取文件
        const reader = new FileReader();
        reader.onload = (event) => {
          const audio = new Audio(event.target.result);
          audio.addEventListener('loadedmetadata', () => {
            // 获取时长并保存
            if (Math.ceil(audio.duration) > 30) {
              this.$message.error('音频时长不能超过30秒！');
              this.voiceLoading = false;
              return reject(false); // 不允许继续上传
            }
            resolve(true); // 允许上传
          });
        };

        reader.onerror = () => {
          this.$message.error('无法读取音频文件！请上传正确的音频文件');
          reject(false); // 不允许继续上传
        };

        this.voiceLoading = true;
        reader.readAsDataURL(file); // 开始读取文件
      });

    },

    /** 查询sop模板列表 */
    getList() {
      this.loading = true;
      listSopTemp(this.queryParams).then(response => {
        this.sopTempList = response.rows;
        this.total = response.total;
        this.loading = false;
      });

    },
    // 取消按钮
    cancel() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.replace('/qw/conversion/sopTemp')
      // this.reset();

    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
        setting: null,
        status: "0",
        sort: null,
        createTime: null,
        createBy: null,
        companyId: null
      };
      this.resetForm("form");

    },


    /** 修改按钮操作 */
    handleUpdate(id) {
      getSopTemp(id).then(response => {
        this.videoList = []
        this.form = response.data;
        this.setting = this.form.list || [];

        if (Array.isArray(this.setting)) {
          this.setting.forEach(item => {
            if (item && Array.isArray(item.content)) {
              item.content.forEach(content => {
                if (content.isAtAll === undefined || content.isAtAll === null) {
                  this.$set(content, 'isAtAll', '0') // 默认关闭
                }
                // 如果后端返回的是数字，转换为字符串
                if (typeof content.isAtAll === 'number') {
                  this.$set(content, 'isAtAll', content.isAtAll.toString())
                }
                if (content && Array.isArray(content.setting)) {
                  content.setting.forEach(setList => {
                    if (setList && !Object.hasOwn(setList, 'isSalesCallAdded')) {
                      this.$set(setList, 'isSalesCallAdded', false);
                    }
                    if (setList && !Object.hasOwn(setList, 'isUserNameCallAdded')) {
                      this.$set(setList, 'isUserNameCallAdded', false);
                    }
                  });
                }
              });
            }
          });
        }
        this.form.list.forEach(e => e.newDay = e.dayNum)
        this.dayList = JSON.parse(JSON.stringify(this.form.list));
        this.videoList.push([]);
        this.addTag = [];
        this.setting.forEach(item => {
          if (item && Array.isArray(item.content)) {
            item.content.forEach(content => {
              this.addTag.push({
                addTag: content.addTag ? JSON.parse(content.addTag) : [],
                inputVisible: false,
                inputValue: '',
                delTag: content.delTag ? JSON.parse(content.delTag) : [],
                delTagVisible: false,
                delTagValue: ''
              });
            });
          }
        });
        // this.addTag.push({
        //   addTag: [],
        //   inputVisible: false,
        //   inputValue: '',
        //   delTag: [],
        //   delTagVisible: false,
        //   delTagValue: ''
        // })
      });

    },
    /** 提交按钮 */
    submitForm() {
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除sop模板编号为"' + ids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delSopTemp(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(() => {
      });

    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有sop模板数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.exportLoading = true;
        return exportSopTemp(queryParams);
      }).then(response => {
        this.download(response.msg);
        this.exportLoading = false;
      }).catch(() => {
      });

    },
    updateHtml(val,content) {
      val || val();
      if(!!content  && !!content.liveId ){
        content.liveId = null;
      }
    },
    updateAll(setIndex, list, fieldName, newVal) {
      if(this.form.sendType == 11 && setIndex == 0) {
        for (let index in list.content) {
          this.$set(list.content[index].setting[0], fieldName, newVal);
        }
      }
    },
    openVoiceDialog(setList) {
      this.voiceOptions.open = true;
      this.voiceOptions.currentSetList = setList;
      this.voiceOptions.keyword = '';
      this.voiceOptions.pageNum = 1;
      this.searchVoice();
    },
    searchVoice() {
      this.voiceOptions.loading = true;
      getQwSopTempVoiceCompanyUser({
        pageNum: this.voiceOptions.pageNum,
        pageSize: this.voiceOptions.pageSize,
        keyword: this.voiceOptions.keyword || undefined,
      }).then(response => {
        this.voiceOptions.list = response.rows || response.list || [];
        this.voiceOptions.total = response.total || 0;
      }).finally(() => {
        this.voiceOptions.loading = false;
      });
    },
    selectVoice(row) {
      if (this.voiceOptions.currentSetList) {
        this.$set(this.voiceOptions.currentSetList, 'value', row.voiceTxt || '');
      }
      this.voiceOptions.open = false;
    },
    handleVoiceSelect(row) {
      // 预留行选中事件
    }
  }
};
</script>
