ylrz_his_scrm_companyUI/src/views/qw/friendWelcome/myIndexNew.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="120px">
      <el-form-item label="企微公司" prop="corpId">
        <el-select v-model="queryParams.corpId" placeholder="企微公司" size="small" @change="updateCorpId()">
          <el-option
            v-for="dict in myQwCompanyList"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="使用的成员">
        <el-select v-model="queryParams.qwUserIds" filterable clearable placeholder="公司员工" size="small">
          <el-option
            v-for="dict in companyUserList"
            :key="dict.qwUserId"
            :label="dict.nickName"
            :value="dict.qwUserId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否开启分时段" prop="isDayparting">
        <el-select v-model="queryParams.isDayparting" placeholder="请选择" clearable size="small">
          <el-option v-for="dict in allowSelectOptions" :key="dict.dictValue" :label="dict.dictLabel"
                     :value="dict.dictValue"/>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker clearable size="small"
                        v-model="queryParams.createTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择创建时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="更新时间" prop="updateTime">
        <el-date-picker clearable size="small"
                        v-model="queryParams.updateTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择更新时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="是否发送欢迎语" prop="isSendMsg">
        <el-select v-model="queryParams.isSendMsg" placeholder="请选择" clearable size="small">
          <el-option v-for="dict in allowSelectOptions" :key="dict.dictValue" :label="dict.dictLabel"
                     :value="dict.dictValue"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button
          type="primary"
          plain
          size="mini"
          icon="el-icon-plus"
          @click="handleAdd"
          v-hasPermi="['qw:friendWelcome:add']"
        >新增
        </el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>


    <el-table v-loading="loading" :data="friendWelcomeList" @selection-change="handleSelectionChange" border>
      <el-table-column label="消息内容" align="left" prop="welcomeText" width="400px">
        <template slot-scope="scope">
          <span style="color:rgb(19, 154, 50);"
                v-if="scope.row.isDayparting==='1'">[共 {{ JSON.parse(scope.row.daypartingItemlist).length + 1 }} 时段]</span>
          <span style="color:rgb(19, 154, 50);" v-else>[默认时段]</span>
          <el-tooltip class="item" effect="dark" :content="scope.row.welcomeText" placement="top">
            <div
              style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis;">
              <span>{{ scope.row.welcomeText }}</span>
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="使用成员" align="center" prop="qwUserIds">
        <template slot-scope="scope">
          <div v-for="id in JSON.parse(scope.row.qwUserIds)" :key="id" style="display: inline;" class="text-container">
            <el-tag type="success" v-for="list in companyUserList" :key="list.qwUserId" style="margin: 3px;"
                    v-if="list.id==id">{{ list.qwUserName }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="是否开启分时段" align="center" prop="isDayparting">
        <template slot-scope="scope">
          <dict-tag :options="allowSelectOptions" :value="scope.row.isDayparting"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column label="是否发送欢迎语" align="center" prop="isSendMsg">
        <template slot-scope="scope">
          <dict-tag :options="allowSelectOptions" :value="scope.row.isSendMsg"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180"/>
      <el-table-column label="更新时间" align="center" prop="updateTime" width="180"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['qw:friendWelcome:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['qw:friendWelcome:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

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

    <!-- 添加或修改好友欢迎语对话框 -->
    <el-dialog :title="title" :visible.sync="open" v-loading="loading" width="1700px" append-to-body>
      <div style="width: 1130px" class="app-container">
        <div>
          <span style="font-size: 15px">基础信息</span>
          <el-divider></el-divider>
          <el-alert
            title="注意事项"
            type="warning"
            description="这是提示~根据特色还不知道写点啥"
            :closable="false"
            show-icon>
          </el-alert>
        </div>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">

          <el-form-item label="选择使用成员：" prop="qwUserIds" style="margin-top: 2%">
            <div>
              <el-button
                size="medium"
                icon="el-icon-circle-plus-outline"
                plain
                @click="handlelistUser">请选择使用成员
              </el-button>
            </div>
            <div>
              <el-tag
                style="margin-left: 5px"
                size="medium"
                :key="list.id"
                v-for="list in userSelectList"
                closable
                :disable-transitions="false"
                @close="handleClosegroupUser(list)">
                {{ list.qwUserName }}({{ list.nickName }})
              </el-tag>
            </div>
          </el-form-item>
          <el-form-item label="是否发送欢迎语">
            <el-switch
              v-model="form.isSendMsg"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="2">
            </el-switch>
            <span v-if="form.isSendMsg == '1'" style="margin-left: 10px;color: #13ce66">允许</span>
            <span v-if="form.isSendMsg == '2'" style="margin-left: 10px;color: #ff4949">不允许</span>

          </el-form-item>
          <div>
            <span style="font-size: 15px">发送欢迎语</span>
            <el-divider></el-divider>
          </div>
          <el-form-item label="默认欢迎语：" prop="welcomeText">
            <el-input v-model="form.welcomeText" type="textarea" :rows="12" maxlength="1300" show-word-limit
                      placeholder="请输入消息内容"/>
            <!-- 附件和链接列表 -->
            <el-row>
              <el-col>
                <div v-for="(item, index) in form.attachments" :key="index"
                     style="background-color: #f5f7fa;padding: 5px;border: 1px solid  #d9d9d9;">
                  <div slot="header" style="display: flex;justify-content: space-between;align-items: center; ">
                    <div style="flex: 1;">
                      <span v-if="item.msgtype === 'image'">【图片】: {{ item.image.pic_url }}</span>
                      <span v-if="item.msgtype === 'link'">【链接】: {{ item.link.title }}-{{ item.link.desc }}</span>
                      <span v-if="item.msgtype === 'miniprogram'">【小程序】: {{ item.miniprogram.title }}</span>
                    </div>
                    <div style="  display: flex;gap: 10px;">
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        style="float: left;"
                        @click="editFileItem(item,index,-1)"
                      >修改
                      </el-button>
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        style="float: right;"
                        @click="removeFileItem(item,index,-1)"
                      >删除
                      </el-button>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>

            <el-dropdown @command="(command) => handleCommand(command, -1)" trigger="click" placement="top-start">
              <el-dropdown-menu slot="dropdown" style="width: 120px;">
                <el-dropdown-item command="image">
                  <i class="el-icon-picture" style="margin-right: 10px;"></i>图片
                </el-dropdown-item>
                <el-dropdown-item command="link">
                  <i class="el-icon-link" style="margin-right: 10px;"></i>链接
                </el-dropdown-item>
                <el-dropdown-item command="miniprogram">
                  <i class="el-icon-link" style="margin-right: 10px;"></i>小程序
                </el-dropdown-item>
              </el-dropdown-menu>

              <span class="el-dropdown-link">
                <el-link icon="el-icon-paperclip" type="text" style="color: rgb(24, 144, 255)">
                  添加附件(最多9个)
                </el-link>
              </span>
            </el-dropdown>

          </el-form-item>

          <el-form-item label="分时段欢迎语">
            <el-switch
              v-model="form.isDayparting"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="2">
            </el-switch>
            <span v-if="form.isDayparting == '1'" style="margin-left: 10px;color: #13ce66">已启用</span>
            <span v-if="form.isDayparting == '2'" style="margin-left: 10px;color: #ff4949">已禁用</span>
          </el-form-item>

          <el-form-item v-if="form.isDayparting == '1'">
            <div style="background-color:#ecf8fe;width: 100%;border: 1px solid #dcdfe6">
              <span
                style="margin-left:20px;font-size: 15px;display: block">注意：1、员工上下班不同时间段可设置不同欢迎语;</span>
              <span
                style="margin-left:65px;font-size: 15px;display: block">2、分时段之外的时间将发送已允许的默认欢迎语。</span>
              <span
                style="margin-left:65px;font-size: 15px;display: block">3、不设置分时段欢迎语则使用已允许的默认欢迎语</span>
              <span style="margin-left:65px;font-size: 15px;display: block">4、若员工没有设置过欢迎语则不会发送</span>
            </div>
          </el-form-item>
          <el-form-item v-if="form.isDayparting == '2'">
            <div style="background-color:#ecf8fe;width: 100%;border: 1px solid #dcdfe6">
              <span
                style="margin-left:20px;font-size: 15px;display: block">注意：1、新建欢迎语最多可发送1条文字消息和9个附件;</span>
              <span
                style="margin-left:65px;font-size: 15px;display: block">2、文字消息和附件不能同时为空，当两者均填写时用户会收到多条消息;</span>
              <span
                style="margin-left:65px;font-size: 15px;display: block">3、欢迎语将在客户加为好友后20秒内下发，因网络延迟可能造成发送不成功</span>
            </div>
          </el-form-item>
          <div v-if="form.isDayparting == '1'" v-for="(item, index) in form.daypartingItemlist" :key="index">
            <el-form-item :label="`时段 ${index + 1}：`">
              <el-row>
                <el-col style="width: 965px">
                  <div
                    style="background-color: #fbfbfb;padding: 10px;  border: 1px solid #e6e6e6; margin-bottom: 20px;">
                    <el-form ref="friendWelcomeItemForm" :rules="itemRules" :model="item">
                      <div style="display: flex; gap: 10px;">
                        <el-form-item label="发起时间:" prop="week" style="flex: 8;">
                          <el-select v-model="item.week" remote multiple placeholder="请选择" filterable
                                     style="width: 580px">
                            <el-option
                              v-for="dict in weekOptions"
                              :key="dict.value"
                              :label="dict.label"
                              :value="dict.value">
                            </el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item prop="startTime" style="flex: 1;">
                          <el-time-select style="width: 120px;"
                                          placeholder="起始时间"
                                          v-model="item.startTime"
                                          :picker-options="{
                                            start: '00:00',
                                            step: '00:15',
                                            end: '24:00'
                                          }">
                          </el-time-select>
                        </el-form-item>
                        <el-form-item prop="endTime" style="flex: 1;">
                          <el-time-select style="width: 120px;"
                                          placeholder="结束时间"
                                          v-model="item.endTime"
                                          :picker-options="{
                                            start: '00:00',
                                            step: '00:15',
                                            end: '24:00',
                                            minTime: item.startTime
                                          }">
                          </el-time-select>
                        </el-form-item>
                      </div>

                      <el-form-item style="margin-top: 20px" prop="welcomeText">
                        <el-input v-model="item.welcomeText" type="textarea" :rows="12" maxlength="1300" show-word-limit
                                  placeholder="请输入消息内容"/>
                        <!-- 附件和链接列表 -->
                        <el-row>
                          <el-col>
                            <div v-for="(attachment, attachIndex) in item.attachments" :key="attachIndex"
                                 style="background-color: #f5f7fa;padding: 5px;border: 1px solid  #d9d9d9;">
                              <div slot="header"
                                   style="  display: flex;justify-content: space-between;align-items: center; ">
                                <div style="flex: 1;">
                                  <span v-if="attachment.msgtype === 'image'">【图片】: {{
                                      attachment.image.pic_url
                                    }}</span>
                                  <span v-if="attachment.msgtype === 'link'">【链接】: {{
                                      attachment.link.title
                                    }}-{{ attachment.link.desc }}</span>
                                  <span v-if="attachment.msgtype === 'miniprogram'">【小程序】: {{
                                      attachment.miniprogram.title
                                    }}</span>
                                </div>
                                <div style="  display: flex;gap: 10px;">
                                  <el-button
                                    size="mini"
                                    type="text"
                                    icon="el-icon-edit"
                                    style="float: left;"
                                    @click="editFileItem(attachment,attachIndex,index)"
                                  >修改
                                  </el-button>
                                  <el-button
                                    size="mini"
                                    type="text"
                                    icon="el-icon-delete"
                                    style="float: right;"
                                    @click="removeFileItem(attachment,attachIndex,index)"
                                  >删除
                                  </el-button>
                                </div>
                              </div>
                            </div>
                          </el-col>
                        </el-row>

                        <el-dropdown @command="(command) => handleCommand(command, index)" trigger="click"
                                     placement="top-start">
                          <el-dropdown-menu slot="dropdown" style="width: 120px;">
                            <el-dropdown-item command="image">
                              <i class="el-icon-picture" style="margin-right: 10px;"></i>图片
                            </el-dropdown-item>
                            <el-dropdown-item command="link">
                              <i class="el-icon-link" style="margin-right: 10px;"></i>链接
                            </el-dropdown-item>
                            <!--                              <el-dropdown-item command="miniprogram">-->
                            <!--                                <i class="el-icon-link" style="margin-right: 10px;"></i>小程序-->
                            <!--                              </el-dropdown-item>-->
                          </el-dropdown-menu>

                          <span class="el-dropdown-link">
                            <el-link icon="el-icon-paperclip" type="text" style="color: rgb(24, 144, 255)">
                              添加附件(最多9个)
                            </el-link>
                            </span>
                        </el-dropdown>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-col>
                <el-col style="width: 15px;">
                  <el-link v-if="form.daypartingItemlist.length>1" icon="el-icon-delete-solid"
                           @click="delItemList(index)" type="text"
                           style="color: rgb(24, 144, 255);margin-top: 350px"></el-link>
                </el-col>
              </el-row>
            </el-form-item>
          </div>
          <div v-if="form.isDayparting == '1'" style="margin-left: 10%">
            <el-link type="primary" class="el-icon-plus" :underline="false" @click='addItemList()'>
              添加其他分时段欢迎语
            </el-link>
          </div>

        </el-form>
      </div>

      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 选择成员账号弹窗   -->
    <el-dialog :title="listUser.title" :visible.sync="listUser.open" style="width: 1600px;height: 100%" append-to-body>
      <qwUserList ref="QwUserList" @selectUserList="selectUserList"></qwUserList>
    </el-dialog>

    <el-dialog :title="welcomeItem.title" :visible.sync="welcomeItem.open" style="width: 1300px;height: 100%"
               append-to-body>
      <el-form ref="fileFrom" :model="fileFrom" :rules="fuleRules" label-width="110px">
        <div v-if="welcomeItem.type==='image'">
          <el-form-item label="图片：" prop="imagePicUrl">
            <ImageUpload v-model="fileFrom.imagePicUrl" type="image" :num="10" :width="150" :height="150" disabled/>
          </el-form-item>
        </div>
        <div v-if="welcomeItem.type==='link'">

          <el-form-item label="选择课程">
            <el-select v-model="fileFrom.courseId" placeholder="请选择课程" style=" margin-right: 10px;" size="mini"
                       @change="courseChange(fileFrom,welcomeItem.index,welcomeItem.itemIndex)">
              <el-option
                v-for="dict in courseList"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="parseInt(dict.dictValue)"
              />
            </el-select>
            <el-select v-model="fileFrom.videoId" placeholder="请选择小节" size="mini" style=" margin-right: 10px;"
                       @change="videoIdChange(fileFrom, welcomeItem.index, welcomeItem.itemIndex,welcomeItem.type)">
              <el-option
                v-for="dict in videoList"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="parseInt(dict.dictValue)"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="图文标题：" prop="linkTitle">
            <el-input v-model="fileFrom.linkTitle" :rows="2" maxlength="42" show-word-limit
                      placeholder="请输入图文消息标题，最长为42字"/>
          </el-form-item>
          <el-form-item label="图文封面：" prop="linkPicUrl">
            <ImageUpload v-model="fileFrom.linkPicUrl" type="image" :num="10" :width="150" :height="150"/>
          </el-form-item>
          <el-form-item label="图文的描述：" prop="linkDesc">
            <el-input v-model="fileFrom.linkDesc" :rows="4" maxlength="170" show-word-limit type="textarea"
                      placeholder="请输入内容,，最长为170字"/>
          </el-form-item>
          <div v-if="fileFrom.videoId==null" style="margin-top: 1%">
            <el-form-item label="图文链接:" label-width="100px">
              <el-input v-model="fileFrom.linkUrl" placeholder="请输入链接地址" style="width: 90%;"/>
            </el-form-item>
          </div>
          <div v-if="fileFrom.videoId!=null">
            <el-form-item label="图文链接:" label-width="100px">
              <el-tag type="warning" v-model="fileFrom.linkUrl='待生成'">选择的课程小节 即为卡片链接地址</el-tag>
            </el-form-item>
          </div>
          <div v-if="fileFrom.videoId!=null">
            <el-form-item label="课节过期时间" style="margin-top: 1%" required label-width="110px">
              <el-row>
                <el-input-number v-model="fileFrom.expiresDays" :min="1" :max="9999"></el-input-number>
                （天）
              </el-row>
              <el-row>
                <span class="tip">默认为30天</span>
              </el-row>
            </el-form-item>
          </div>
          <!--          <el-form-item label="图文链接：" prop="linkUrl">-->
          <!--            <el-input v-model="fileFrom.linkUrl" :rows="2"  placeholder="选择了课程小节会自动设置地址" />-->
          <!--          </el-form-item>-->
        </div>
        <div v-if="welcomeItem.type==='miniprogram'">

          <el-form-item label="选择课程">
            <el-select v-model="fileFrom.courseId" placeholder="请选择课程" style=" margin-right: 10px;" size="mini"
                       @change="courseChange(fileFrom,welcomeItem.index,welcomeItem.itemIndex)">
              <el-option
                v-for="dict in courseList"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="parseInt(dict.dictValue)"
              />
            </el-select>
            <el-select v-model="fileFrom.videoId" placeholder="请选择小节" size="mini" style=" margin-right: 10px;"
                       @change="videoIdChange(fileFrom, welcomeItem.index, welcomeItem.itemIndex,welcomeItem.type)">
              <el-option
                v-for="dict in videoList"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="parseInt(dict.dictValue)"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="小程序标题：" prop="miniprogramTitle">
            <el-input v-model="fileFrom.miniprogramTitle" :rows="2" maxlength="64"
                      placeholder="请输入小程序消息标题，最长为64字节" @input="checkByteLength(fileFrom)"/>
          </el-form-item>
          <div v-if="fileFrom.videoId!=null">
            <el-form-item label="小程序链接:" label-width="100px">
              <el-tag type="warning" v-model="fileFrom.miniprogramPage='待生成'">选择的课程小节 即为卡片小程序链接地址
              </el-tag>
            </el-form-item>
          </div>
          <el-form-item label="appid" prop="miniprogramAppid" v-show="false">
            <el-input v-model="fileFrom.miniprogramAppid='wx73f85f8d62769119' " disabled/>
          </el-form-item>

          <div v-if="fileFrom.videoId!=null">
            <el-form-item label="课节过期时间" style="margin-top: 1%" required label-width="110px">
              <el-row>
                <el-input-number v-model="fileFrom.expiresDays" :min="1" :max="9999"></el-input-number>
                （天）
              </el-row>
              <el-row>
                <span class="tip">默认为30天</span>
              </el-row>
            </el-form-item>
          </div>
          <!--          <el-form-item label="图文链接：" prop="linkUrl">-->
          <!--            <el-input v-model="fileFrom.linkUrl" :rows="2"  placeholder="选择了课程小节会自动设置地址" />-->
          <!--          </el-form-item>-->
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="confirmUpload">确定</el-button>
        <el-button type="primary" @click="cancelUpload">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  listFriendWelcome,
  getFriendWelcome,
  delFriendWelcome,
  addFriendWelcome,
  myList,
  updateFriendWelcome,
  exportFriendWelcome
} from "@/api/qw/friendWelcome";
import qwUserList from '@/views/qw/user/qwUserList.vue'
import ImageUploadWeclome from '@/views/qw/friendWelcome/ImageUploadWeclome.vue'
import ImageUpload from '@/views/qw/material/ImageUpload.vue'
import {getQwAllUserList} from '@/api/company/companyUser'
import {getMyQwUserList, getMyQwCompanyList} from "@/api/qw/user";
import {courseList, videoList} from "@/api/qw/sop";

export default {
  name: "FriendWelcome",
  components: {ImageUpload, qwUserList, ImageUploadWeclome},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      myQwCompanyList: [],
      //选择成员列表
      listUser: {
        title: "",
        open: false
      },
      //选择成员列表
      userSelectList: [],
      fileFrom: {
        imagePicUrl: null,
        linkTitle: null,
        linkPicUrl: null,
        linkDesc: null,
        linkUrl: null,
        videoId: null,
        courseId: null,
        expiresDays: 30,
        miniprogramTitle: null,
        miniprogramPage: null,
        miniprogramPicUrl: null,
        miniprogramAppid: null,
      },
      courseList: [],
      videoList: [],
      fuleRules: {
        imagePicUrl: [{required: true, message: "图片不能为空", trigger: "submit"}],
        linkTitle: [{required: true, message: "图文标题不能为空", trigger: "submit"}],
        linkUrl: [{required: true, message: "图文链接不能为空", trigger: "submit"}],
        miniprogramTitle: [{required: true, message: "图文链接不能为空", trigger: "submit"}],
      },


      weekOptions: [{
        value: 1,
        label: '星期一'
      }, {
        value: 2,
        label: '星期二'
      }, {
        value: 3,
        label: '星期三'
      }, {
        value: 4,
        label: '星期四'
      }, {
        value: 5,
        label: '星期五'
      }
        , {
          value: 6,
          label: '星期六'
        }
        , {
          value: 7,
          label: '星期天'
        }],

      welcomeItem: {
        open: false,
        title: '',
        type: '',
        index: -1,
        itemIndex: -1
      },
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //是否
      allowSelectOptions: [],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 好友欢迎语表格数据
      friendWelcomeList: [],
      //账号列表
      companyUserList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: 1,
        qwUserIds: [],
        companyId: null,
        welcomeText: null,
        isDayparting: null,
        createTime: null,
        updateTime: null,
        isSendMsg: null,
        corpId: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        qwUserIds: [
          {required: true, message: "发送企业群发消息的成员账号不能为空", trigger: "submit"}
        ],
        welcomeText: [
          {required: true, message: "消息内容不能为空噢", trigger: "submit"}
        ],

      },
      itemRules: {
        week: [
          {required: true, message: '请选择发起时间的星期', trigger: 'submit'}
        ],
        startTime: [
          {required: true, message: '请选择开始时间', trigger: 'submit'},
        ],
        endTime: [
          {required: true, message: '请选择结束时间', trigger: 'submit'},

        ],
        welcomeText: [
          {required: true, message: '消息内容不能为空噢', trigger: 'submit'}
        ]
      }

    };
  },
  created() {
    //账号列表


    //是否允许发送
    this.getDicts("sys_qw_allow_select").then(response => {
      this.allowSelectOptions = response.data;
    });
    courseList().then(response => {
      this.courseList = response.list;
    });
    getMyQwCompanyList().then(response => {

      this.myQwCompanyList = response.data;
      if (this.myQwCompanyList != null) {
        this.queryParams.corpId = this.myQwCompanyList[0].dictValue
        getQwAllUserList(this.myQwCompanyList[0].dictValue).then(response => {
          this.companyUserList = response.data;
        });
        this.getList();
      }
    });
  },
  watch: {
    userSelectList(newList) {
      this.form.qwUserIds = newList.map(item => item.id);
    }
  },
  methods: {
    updateCorpId() {
      this.getList();
      getQwAllUserList(this.queryParams.corpId).then(response => {
        this.companyUserList = response.data;
      });
    },
    /** 查询好友欢迎语列表 */
    getList() {
      this.loading = true;

      myList(this.queryParams).then(response => {

        // 将处理后的数据赋值给 friendWelcomeList
        this.friendWelcomeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // // 检查字节长度
    checkByteLength(fileFrom) {
      const text = fileFrom.miniprogramTitle;
      const byteLength = this.getByteLength(text); // 获取当前字节数

      // 如果字节数超过64，截断输入内容
      if (byteLength > 64) {
        this.$set(fileFrom, 'miniprogramTitle', this.truncateTextByByteLength(text, 64));
      }
    },

    // 计算字符串的字节数
    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;
    },

    //选择群发的企业成员账号
    handlelistUser() {
      setTimeout(() => {
        this.$refs.QwUserList.getDetails(this.queryParams.corpId);
      }, 1);
      this.listUser.title = "选择企业成员"
      this.listUser.open = true;
    },
    //选择的成员账号列表
    selectUserList(list) {

      this.listUser.open = false;

      // 3. 遍历要添加的 list，逐条判断是否存在重复
      list.forEach(newItem => {
        // some() 判断是否存在相同 id
        const isExist = this.userSelectList.some(oldItem => oldItem.id === newItem.id);
        if (!isExist) {
          // 不存在重复的，才添加
          this.userSelectList.push(newItem);
        }
      });
      // //用于显示
      // this.userSelectList=list;

    },
    //删除一些选择了的账号
    handleClosegroupUser(list) {

      // 假设 list 对象具有一个 id 属性
      const index = this.userSelectList.findIndex(t => t.id === list.id);
      if (index !== -1) {
        this.userSelectList.splice(index, 1);
      }
    },
    //附件选择
    handleCommand(command, itemIndex) {

      if (this.form.attachments.length >= 9 && itemIndex === -1) {
        return this.$message.error('附件数量已达上限，无法添加更多附件');
      }

      if (this.isDayparting === '1' && this.form.daypartingItemlist[itemIndex].attachments.length >= 9) {
        return this.$message.error('附件数量已达上限，无法添加更多附件');
      }

      this.welcomeItem = {
        open: true,
        title: this.getTitleByCommand(command),
        type: command,
        index: itemIndex === -1 ? this.form.attachments.length : this.form.daypartingItemlist[itemIndex].attachments.length,
        itemIndex
      };
    },

    getTitleByCommand(command) {
      switch (command) {
        case 'image':
          return '添加图片';
        case 'link':
          return '添加链接';
        case 'miniprogram':
          return '添加小程序';
      }
    },


    courseChange(fileFrom, index, itemIndex) {

      // 清空 videoId 选择
      this.$set(fileFrom, 'videoId', null);
      // 清空 videoList
      this.videoList = [];

      if (fileFrom.courseId != null) {
        // 查找选中的课程对应的 label 和 dictImgUrl
        const selectedCourse = this.courseList.find(course => parseInt(course.dictValue) === fileFrom.courseId);

        if (selectedCourse) {
          // 设置 linkTitle 和 linkImageUrl
          this.$set(fileFrom, 'linkTitle', selectedCourse.dictLabel);
          this.$set(fileFrom, 'linkPicUrl', selectedCourse.dictImgUrl);
        }


        // 获取新的 videoList
        videoList(fileFrom.courseId).then(response => {
          this.videoList = response.list;
        });

      }
      //
      // // 更新对应的数据层级
      // if (itemIndex === -1) {
      //   // 更新 form.attachments
      //   this.$set(this.form.attachments, index, {
      //     ...this.form.attachments[index],
      //     courseId: fileFrom.courseId,
      //     videoId: null, // 因为已清空
      //     title: fileFrom.linkTitle,
      //     picurl: fileFrom.linkPicUrl
      //   });
      // } else {
      //
      //   this.$set(this.form.daypartingItemlist[itemIndex].attachments, index, {
      //     ...this.form.daypartingItemlist[itemIndex].attachments[index],
      //     courseId: fileFrom.courseId,
      //     videoId: null, // 因为已清空
      //     title: fileFrom.linkTitle,
      //     picurl: fileFrom.linkPicUrl
      //   });
      // }
    },
    videoIdChange(fileFrom, index, itemIndex, type) {
      //选择了课程小节则 默认绑上
      if (fileFrom.videoId != null) {
        // 根据 videoId 获取相关信息（假设有相关的 API 调用）
        let selectedVideo = this.videoList.find(course => parseInt(course.dictValue) === fileFrom.videoId);
        if (selectedVideo && type === 'link') {
          this.$set(fileFrom, 'linkDesc', selectedVideo.dictLabel);
          this.$set(fileFrom, 'expiresDays', 30);
        }
        if (selectedVideo && type === 'miniprogram') {
          this.$set(fileFrom, 'miniprogramTitle', this.truncateTextByByteLength(selectedVideo.dictLabel, 64));
          this.$set(fileFrom, 'expiresDays', 30);
        }

      }

      // // 更新对应的数据层级
      // if (itemIndex === -1) {
      //   // 更新 form.attachments
      //   this.$set(this.form.attachments, index, {
      //     ...this.form.attachments[index],
      //     videoId: fileFrom.videoId,
      //     desc: fileFrom.linkDesc,
      //   });
      // } else {
      //   // 更新 form.daypartingItemlist[itemIndex].attachments
      //   this.$set(this.form.daypartingItemlist[itemIndex].attachments, index, {
      //     ...this.form.daypartingItemlist[itemIndex].attachments[index],
      //     videoId: fileFrom.videoId,
      //     desc: fileFrom.linkDesc,
      //   });
      //
      // }

    },
    //修改附件
    editFileItem(item, index, itemIndex) {

      this.welcomeItem = {
        open: true,
        title: this.getEditTitleByMsgType(item.msgtype),
        type: item.msgtype,
        index,
        itemIndex
      };
      if (item.msgtype === 'image') {
        this.fileFrom.imagePicUrl = item.image.pic_url;
      } else if (item.msgtype === 'link') {
        this.fileFrom.linkTitle = item.link.title;
        this.fileFrom.linkPicUrl = item.link.picurl;
        this.fileFrom.linkDesc = item.link.desc;
        this.fileFrom.linkUrl = item.link.url;
        this.fileFrom.videoId = item.link.videoId;
        this.fileFrom.courseId = item.link.courseId;
        this.fileFrom.expiresDays = item.link.expiresDays;

        videoList(item.link.courseId).then(response => {
          this.videoList = response.list;
        });


      } else if (item.msgtype === 'miniprogram') {
        this.fileFrom.miniprogramAppid = 'wx73f85f8d62769119';
        this.fileFrom.miniprogramTitle = item.miniprogram.title;
        this.fileFrom.miniprogramPicUrl = "待生成";
        this.fileFrom.miniprogramPage = "待生成";
        this.fileFrom.videoId = item.miniprogram.videoId;
        this.fileFrom.courseId = item.miniprogram.courseId;
        this.fileFrom.expiresDays = item.miniprogram.expiresDays;

        videoList(item.miniprogram.courseId).then(response => {
          this.videoList = response.list;
        });

      }


    },


    getEditTitleByMsgType(msgType) {
      switch (msgType) {
        case 'image':
          return '编辑图片';
        case 'link':
          return '编辑链接';
        case 'miniprogram':
          return '编辑小程序';
      }
    },

    //删除附件
    removeFileItem(data, index, itemIndex) {

      if (itemIndex === -1) {
        this.form.attachments.splice(index, 1);
      } else {
        this.form.daypartingItemlist[itemIndex].attachments.splice(index, 1);
      }
    },

    //添加分时段欢迎语
    addItemList() {
      this.form.daypartingItemlist.push({
        welcomeText: null,
        attachments: [],
        week: [1, 2, 3, 4, 5, 6, 7],
        startTime: null,
        endTime: null
      })
    },


    //删除某一个分时段欢迎语
    delItemList(index) {
      this.form.daypartingItemlist.splice(index, 1)
    },

    //提交附件
    confirmUpload(fileFrom) {

      const {type, index, itemIndex} = this.welcomeItem;
      let attachment = {};
      if (type === 'image') {
        attachment = {
          msgtype: 'image',
          image: {
            pic_url: this.fileFrom.imagePicUrl
          }
        };
      } else if (type === 'link') {
        attachment = {
          msgtype: 'link',
          link: {
            title: this.fileFrom.linkTitle,
            picurl: this.fileFrom.linkPicUrl,
            desc: this.fileFrom.linkDesc,
            url: this.fileFrom.linkUrl,
            courseId: this.fileFrom.courseId,
            videoId: this.fileFrom.videoId,
            expiresDays: this.fileFrom.expiresDays,
          }
        };
      } else if (type === 'miniprogram') {
        attachment = {
          msgtype: 'miniprogram',
          miniprogram: {
            title: this.fileFrom.miniprogramTitle,
            pic_media_id: "待查询",
            appid: "wx73f85f8d62769119",
            page: this.fileFrom.miniprogramPage,
            courseId: this.fileFrom.courseId,
            videoId: this.fileFrom.videoId,
            expiresDays: this.fileFrom.expiresDays,
          }
        };
      }

      if (itemIndex === -1) {
        // 默认欢迎语附件处理
        if (index < this.form.attachments.length) {
          // 存在附件则更新
          this.form.attachments.splice(index, 1, attachment);
        } else {
          // 不存在附件则插入
          this.form.attachments.push(attachment);
        }

      } else {
        // 分时段欢迎语附件处理
        if (index < this.form.daypartingItemlist[itemIndex].attachments.length) {
          // 存在附件则更新
          this.form.daypartingItemlist[itemIndex].attachments.splice(index, 1, attachment);
        } else {
          // 不存在附件则插入
          this.form.daypartingItemlist[itemIndex].attachments.push(attachment);
        }
      }

      this.resetFileFrom();
    },

    //取消附件
    cancelUpload() {
      this.resetFileFrom();
      this.welcomeItem.open = false;
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    //重置附件表单
    resetFileFrom() {
      this.fileFrom = {
        imagePicUrl: null,
        linkTitle: null,
        linkPicUrl: null,
        linkDesc: null,
        linkUrl: null,
        videoId: null,
        courseId: null,
        miniprogramTitle: null,
        miniprogramPage: null,
        miniprogramPicUrl: null,
        miniprogramAppid: null,
      };

      this.welcomeItem = {
        open: false,
        title: '',
        type: '',
        index: -1,
        itemIndex: -1
      } // 重置编辑索引

      this.videoList = [];
    },

    // 表单重置
    reset() {
      this.form = {
        id: null,
        qwUserIds: [],
        companyId: null,
        //默认欢迎语附件
        attachments: [],
        createdTime: null,
        updateTieme: null,
        isSendMsg: '1',
        welcomeText: '',
        isDayparting: '2',
        //分时段欢迎语
        daypartingItemlist: [{
          welcomeText: null,
          attachments: [],
          week: [1, 2, 3, 4, 5, 6, 7],
          startTime: null,
          endTime: null
        }],
      };
      this.userSelectList = []
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.corpId = this.myQwCompanyList[0].dictValue
      getQwAllUserList(this.queryParams.corpId).then(response => {
        this.companyUserList = response.data;
      });
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新建好友欢迎语";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getFriendWelcome(id).then(response => {


        let data = response.row;

        // 转换 attachments
        if (typeof data.attachments === 'string') {
          data.attachments = JSON.parse(data.attachments);
        }

        // 转换 daypartingItemlist
        if (typeof data.daypartingItemlist === 'string') {
          data.daypartingItemlist = JSON.parse(data.daypartingItemlist);
        }

        // 转换 daypartingItemlist 中的每个项目的 attachments 和 week
        if (Array.isArray(data.daypartingItemlist)) {
          data.daypartingItemlist = data.daypartingItemlist.map(item => {
            return {
              ...item,
              attachments: typeof item.attachments === 'string' ? JSON.parse(item.attachments) : item.attachments,
              week: typeof item.week === 'string' ? JSON.parse(item.week) : item.week
            };
          });
        }

        // 赋值给表单
        this.form = data;
        this.userSelectList = this.form.userSelectList

        this.open = true;
        this.title = "修改好友欢迎语";
      });
    },
    /** 提交按钮 验证 from表单*/
    submitForm() {

      this.loading = true;

      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.corpId = this.queryParams.corpId;
          //有分时段欢迎语 验证分时段表单
          if (this.form.isDayparting === '1') {
            const itemForms = this.$refs.friendWelcomeItemForm;
            if (Array.isArray(itemForms)) {
              let allValid = true;

              itemForms.forEach((itemFormRef, index) => {
                itemFormRef.validate((itemValid) => {
                  if (!itemValid) {
                    this.loading = false;
                    allValid = false;
                  } else {
                    const {startTime, endTime} = itemFormRef.model;
                    if (startTime && endTime && startTime > endTime) {
                      this.$message.error(`时段 ${index + 1} 的开始时间不能大于结束时间`);
                      allValid = false;
                      this.loading = false;

                    }
                  }

                  if (index === itemForms.length - 1 && allValid) {
                    //全表单验证通过
                    this.commitForm();
                  }
                });
              });
            }
          } else {
            //只有默认的
            this.commitForm();

          }

        }
      });
    },

    //提交form表单
    commitForm() {

      // 深拷贝表单数据
      const requestData = {...this.form};
      // 将 `form.attachments` 转为 JSON 字符串
      requestData.attachments = JSON.stringify(this.form.attachments);
      requestData.qwUserIds = JSON.stringify(this.form.qwUserIds);

      // 遍历 `daypartingItemlist`，将其中的 `attachments` 和 `week` 转为 JSON 字符串
      requestData.daypartingItemlist = JSON.stringify(requestData.daypartingItemlist.map(item => ({
          ...item,
        }))
      );


      if (this.form.id != null) {
        updateFriendWelcome(requestData).then(response => {
          this.msgSuccess("修改成功");
          this.loading = false;
          this.open = false;
          this.getList();
        }).catch(error => {
          this.open = false;
          this.loading = false;
        });
      } else {
        addFriendWelcome(requestData).then(response => {
          this.msgSuccess("新增成功");
          this.loading = false;
          this.open = false;
          this.getList();
        }).catch(error => {
          this.open = false;
          this.loading = false;
        });
      }


      // 重置表单 无论成功还是失败-都重置表单
      this.reset();
    },

    //处理时间
    // formatTime(date) {
    //   const hours = date.getHours().toString().padStart(2, '0');
    //   const minutes = date.getMinutes().toString().padStart(2, '0');
    //   const seconds = date.getSeconds().toString().padStart(2, '0');
    //   return `${hours}:${minutes}:${seconds}`;
    // },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除好友欢迎语编号为"' + ids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delFriendWelcome(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有好友欢迎语数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.exportLoading = true;
        return exportFriendWelcome(queryParams);
      }).then(response => {
        this.download(response.msg);
        this.exportLoading = false;
      }).catch(() => {
      });
    }
  }
};
</script>

<style>
.text-container {
  max-height: 7.5em; /* 设置最大高度为6行，根据字体大小调整 */
  overflow-y: auto; /* 内容超出时显示滚动条 */
  line-height: 1.5em; /* 行高设置，确保每行高度一致 */
}
</style>