<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <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="消息文本" prop="textContent">
        <el-input
          v-model="queryParams.textContent"
          placeholder="请输入想查询的消息文本内容"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </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"  size="small" @click="handleAdd()">新建群群发</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="groupMsgList" @selection-change="handleSelectionChange" border>

      <el-table-column label="群发标题" align="center" prop="groupChatNames">
        <template slot-scope="scope">
          <div class="text-title">
            <span >{{scope.row.groupChatNames}}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="消息文本内容" align="left" prop="textContent" width="350px">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.textContent" placement="top">
            <div style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis;">
              <span>{{ scope.row.textContent }}</span>
            </div>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="群发任务的类型" align="center" prop="chatType">
        <template slot-scope="scope">
          <span v-for="it in groupMsgChatType" v-if="it.dictValue==scope.row.chatType">{{it.dictLabel}}</span>
        </template>
      </el-table-column>

      <el-table-column label="发送类型" align="center" prop="isTimerSend">
        <template slot-scope="scope">
          <span v-for="it in groupMsgTimerType" v-if="it.dictValue==scope.row.isTimerSend">{{it.dictLabel}}</span>
        </template>
      </el-table-column>
      <el-table-column label="发送状态" align="center"  width="110px">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.isSend==1"
            type="success"
            size="mini"
            plain>
            发送成功
          </el-tag >
          <el-tag
            v-else-if="scope.row.isSend==0"
            type="danger"
            size="mini"
            plain>
            发送失败
          </el-tag >
          <el-tag
            v-else-if="scope.row.isSend==2"
            type="primary"
            size="mini"
            plain>
            发送成功待录入详细信息
          </el-tag>
          <el-tag
            v-else-if="scope.row.isSend==3"
            type="warning"
            size="mini"
            plain>
            待发送
          </el-tag >
        </template>
      </el-table-column>
      <el-table-column label="发送时间" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.isTimerSend==2">{{scope.row.createTime}}</span>
          <span v-else>{{ scope.row.timerSend }}</span>
        </template>
      </el-table-column>



      <el-table-column label="创建人" align="center" prop="createName"  />
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width"  fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-notebook-2"
            @click="hangdleDitels(scope.row)"
            v-hasPermi="['qw:groupMsg:query']"
          >详情</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['qw:groupMsg: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 v-loading="loadingAdd" :title="title" :visible.sync="open" width="1500px" style="font-weight: bold;font-size: 20px" append-to-body>
      <div style="display: flex;flex-wrap: wrap">
        <div style="width: 1000px;">
          <el-form ref="form" :model="form" :rules="rules" label-width="160px"  size="medium">
            <div>
              <span style="font-size: 20px">基础信息</span>
              <el-divider></el-divider>
            </div>
            <el-form-item label="群发标题:" prop="groupChatNames">
              <el-input v-model="form.groupChatNames" placeholder="请输入客户群群发标题" size="medium" maxlength="42"  show-word-limit />
            </el-form-item>

            <el-form-item label="选择群主账号:" prop="userIdsSelectList" >
              <div>
                <div>
                  <el-button
                    size="medium"
                    type="primary"
                    icon="el-icon-circle-plus-outline"
                    plain
                    @click="handlelistUser">请选择群主账号</el-button>
                </div>
                <div>
                  <el-tag
                    style="margin-left: 5px"
                    size="medium"
                    type="success"
                    :key="list.id"
                    v-for="list in userSelectList"
                    closable
                    :disable-transitions="false"
                    @close="handleClosegroupUser(list)">
                    {{list.nickName}}({{list.qwUserName}})
                  </el-tag>
<!--                  <span v-for="item in userSelectList" class="user-box">{{item.nickName}}</span>-->
                </div>

              </div>

              <div style="background-color:#ecf8fe;width: 100%;margin-top: 2%">
                <div style="padding:1%">
                  <span style="font-size: 15px">注意，群主收到群发任务后，可在企业微信上选择群聊发送群发消息</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="筛选群:" prop="groupChatNamesMap" v-if="userSelectList.length>0">
              <div v-if="userSelectList.length>0">
                <div>
                  <el-button
                    size="medium"
                    type="primary"
                    icon="el-icon-connection"
                    plain
                    @click="handlelistGroup(userSelectList)">筛选群</el-button>
                </div>
                <div>
                  <el-tag
                    style="margin-left: 5px"
                    size="medium"
                    type="success"
                    :key="list.chatId"
                    v-for="list in groupSelectList"
                    closable
                    :disable-transitions="false"
                    @close="handleCloseGroup(list)">
                    {{list.name}}
                  </el-tag>
                </div>
              </div>
            </el-form-item>

            <div>
              <span style="font-size: 20px">编辑群发信息</span>
              <el-divider></el-divider>
            </div>

          </el-form>
        </div>
      </div>
        <WelComeAdd ref="WelComeAdd"></WelComeAdd>

        <div slot="footer" class="dialog-footer" style="display: flex;justify-content: 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-drawer :title="detailsDialog.title" :visible.sync="detailsDialog.open" size="75%" style="font-weight: bolder">
      <div style="background-color:  rgb(240 242 245)">
        <div style="display: flex;flex-wrap: nowrap;background-color:  rgb(240 242 245);height: 850px;margin: 15px;padding-top: 15px"  >
          <el-card class="box-card"  style="width: 700px">
            <el-descriptions :column="1" border  :labelStyle="{width: '150px'}">
              <el-descriptions-item label="群发标题:">
                <span class="custom-span-title">{{formDetails.groupChatNames}}</span>
              </el-descriptions-item>
              <el-descriptions-item label="消息文本内容:">
                <span class="custom-span">{{formDetails.textContent}}</span>
              </el-descriptions-item>
              <el-descriptions-item label="图片" v-if="formDetails.msgType=='1'">
                <el-image
                  v-if="formDetails.mediaPicUrl"
                  style="width: 100px; height: 100px"
                  :src="formDetails.mediaPicUrl"
                  fit="contain"
                  @click="openImageViewer(formDetails.mediaPicUrl)"/>
              </el-descriptions-item>
              <el-descriptions-item label="图文标题:" v-if="formDetails.msgType=='2'">
                <span  class="custom-span-title">{{formDetails.title}}</span>
              </el-descriptions-item>
              <el-descriptions-item label="图文封面:" v-if="formDetails.msgType=='2'">
                <el-image
                  v-if="formDetails.picurl"
                  style="width: 100px; height: 100px"
                  :src="formDetails.picurl"
                  fit="contain"
                  @click="openImageViewer(formDetails.picurl)"/>
              </el-descriptions-item>
              <el-descriptions-item label="图文的描述:" v-if="formDetails.msgType=='2'">

                <span class="custom-span">{{formDetails.description}}</span>

              </el-descriptions-item>
              <el-descriptions-item label="图文的链接:" v-if="formDetails.msgType=='2'">
                <el-link :href="formDetails.url" target="_blank">{{ formDetails.url }}</el-link>

                <!--                <el-image-->
<!--                  v-if="formDetails.url"-->
<!--                  style="width: 100px; height: 100px"-->
<!--                  :src="formDetails.url"-->
<!--                  fit="contain"-->
<!--                  @click="openImageViewer(formDetails.url)"/>-->
              </el-descriptions-item>
              <el-descriptions-item label="小程序标题:" v-if="formDetails.msgType=='3'">{{formDetails.miniprogramTitle}}</el-descriptions-item>
              <el-descriptions-item label="小程序封面:" v-if="formDetails.msgType=='3'">
                <el-image
                  v-if="formDetails.miniprogramPicUrl"
                  style="width: 100px; height: 100px"
                  :src="formDetails.miniprogramPicUrl"
                  fit="contain"
                  @click="openImageViewer(formDetails.miniprogramPicUrl)"/>
              </el-descriptions-item>
              <el-descriptions-item label="小程序appid:" v-if="formDetails.msgType=='3'">{{formDetails.miniprogramAppid}}</el-descriptions-item>
              <el-descriptions-item label="小程序page路径:" v-if="formDetails.msgType=='3'">{{formDetails.miniprogramPage}}</el-descriptions-item>
              <el-descriptions-item label="企微临时文件mediaId:" v-if="formDetails.msgType=='4'">{{formDetails.fileMediaId}}</el-descriptions-item>
              <el-descriptions-item label="文件:" v-if="formDetails.msgType=='4'">
                <el-link v-if="formDetails.fileUrl" type="primary" :href="formDetails.fileUrl" download>
                  {{formDetails.fileUrl}}
                </el-link>
              </el-descriptions-item>
              <el-descriptions-item label="视频临时文件mediaId:" v-if="formDetails.msgType=='5'">{{formDetails.videoMediaId}}</el-descriptions-item>
              <el-descriptions-item label="视频:" v-if="formDetails.msgType=='5'">
                <video v-if="formDetails.videoUrl"
                       :src="formDetails.videoUrl"
                       controls style="width: 200px;height: 100px">
                </video>
              </el-descriptions-item>
              <el-descriptions-item label="是否允许成员分配:" >
                <span v-for="dict in allowSelectOptions" v-if="dict.dictValue==formDetails.allowSelect">{{dict.dictLabel}}</span>
              </el-descriptions-item>
              <el-descriptions-item label="创建人:">{{formDetails.createName}}</el-descriptions-item>
              <el-descriptions-item label="创建时间:">{{formDetails.createTime}}</el-descriptions-item>

            </el-descriptions>
          </el-card>

          <div style="width: 700px;background-color: rgb(255 255 255);display: flex;justify-content: center;align-items: center">
            <div class="container">
              <div class="phone">
                <div class="chat-interface">
                  <div class="header">
                    <span class="back">
                       <img src="../../../assets/image/return.png"  class="back">
                    </span>
                    <span class="title">客服账号</span>
                    <span class="menu">
                        <img src="../../../assets/image/more.png"  class="menu">
                    </span>
                  </div>
                  <div class="message-area">

                    <div v-if="formDetails.textContent" class="message-stayle">
                      <img src="../../../assets/image/character.png" style="width: 30px;height: 30px;margin: 5px">
                      <div style="background-color:rgb(255 255 255); padding: 10px;">
                        <span>{{ formDetails.textContent }}</span>
                      </div>
                    </div>
                    <div  v-if="formDetails.mediaPicUrl" class="message-stayle">
                      <img src="../../../assets/image/character.png" style="width: 30px;height: 30px;margin: 5px">
                      <el-image
                        style="width: 100px; height: 100px"
                        :src="formDetails.mediaPicUrl"
                        fit="contain"
                        @click="openImageViewer(formDetails.mediaPicUrl)"/>
                    </div>
                    <div  v-if="formDetails.title"  class="message-stayle" @click="openImageViewer(formDetails.url)">
                      <img src="../../../assets/image/character.png" style="width: 30px;height: 30px;margin: 5px">
                      <div style="background-color: white;padding: 10px" class="two">

                          <span>{{formDetails.title}}</span>

                        <div style="display: flex;justify-content:space-between;" class="three">
                          <span style="font-size: 13px;flex: 1">{{formDetails.description}}</span>
                          <el-image
                            style="width: 50px; height: 50px;flex-shrink: 0"
                            :src="formDetails.picurl"
                            fit="contain"
                            @click="openImageViewer(formDetails.picurl)"/>
                        </div>
                      </div>

                    </div>
                    <div v-if="formDetails.fileUrl"  class="message-stayle" >
                      <img src="../../../assets/image/character.png" style="width: 30px;height: 30px;margin: 5px">
                      <el-link type="primary" :href="formDetails.fileUrl" download style="padding: 10px" >
                        {{formDetails.fileUrl}}
                      </el-link>
                    </div>
                    <div v-if="formDetails.videoUrl" class="message-stayle">
                      <img src="../../../assets/image/character.png" style="width: 30px;height: 30px;margin: 5px">
                      <video
                        :src="formDetails.videoUrl"
                        controls style="width: 200px;height: 100px">
                      </video>
                    </div>

                  </div>
                  <div class="footer">
                    <span class="voice-button">
                         <img src="../../../assets/image/voice.png"  class="voice-button">
                    </span>
                    <input type="text" class="input-box" placeholder="">
                    <span class="emoji-button">
                            <img src="../../../assets/image/smilingface.png" class="emoji-button">
                    </span>
                    <span class="add-button">
                            <img src="../../../assets/image/plus.png"  class="add-button">
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div style="width: 100%" >
          <customer-base-details ref="customerGroupDetails" :rowDetailFrom="formDetails"></customer-base-details>
        </div>
      </div>
      <!-- 大图预览对话框 -->
      <el-dialog
        :visible.sync="dialogVisible"
        :modal="false"
        width="1200px"
        append-to-body>
        <img
          :src="this.dialogImageUrl"
          style="display: block; max-width: 100%; margin: 0 auto"
        />
      </el-dialog>
    </el-drawer>
    <!-- 选择群聊    -->
    <el-dialog :title="groupChart.title" :visible.sync="groupChart.open" style="width: 100%;height: 100%" append-to-body>
      <group-chat ref="GroupChat" @selectGroupChatList="selectGroupChatList"></group-chat>
    </el-dialog>
  </div>

</template>

<script>
import {
  listGroupMsg,
  getGroupMsg,
  delGroupMsg,
  addGroupMsg,
} from '@/api/qw/groupMsg'
import GroupMsgUser from '@/views/qw/groupMsgUser/groupMsg'
import ImageUpload from "@/views/qw/material/ImageUpload";
import qwUserList from "@/views/qw/user/qwUserList"
import GroupChat from '@/views/qw/groupChat/groupChat'
import tagGroupList from '@/views/qw/tagGroup/tagGroupList'
import WelComeAdd from '@/views/qw/welcome/welComeAdd'
import CustomerBaseDetails from '@/views/qw/groupMsg/customerBaseDetails'
import { getMyQwUserList,getMyQwCompanyList } from "@/api/qw/user";
export default {
  name: "customerBaseMsg",
  components: { CustomerBaseDetails, tagGroupList, GroupChat, GroupMsgUser,ImageUpload,qwUserList,WelComeAdd},
  data() {
    return {
      //上传地址
      uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",

      //放大图片
      dialogImageUrl:null,
      dialogVisible:false,
      myQwCompanyList:[],
      // 遮罩层
      loading: true,
      loadingAdd:false,

      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,

      //详情
      formDetails:{},

      //消息类型
      msgTypeOptions:[],

      // 客户群发记录主表格数据
      groupMsgList: [],

      //任务类型
      groupMsgChatType:[],
      //发送类型
      groupMsgTimerType:[],

      //是否允许成员在待发送列表中再次选择
      allowSelectOptions:[],

      //成员选择列表
      userSelectList:[],

      //选择群发账号列表
      listUser:{
        title:"",
        open:false
      },

      //选择群聊
      changeTagDialog:{
        title:"",
        open:false,
        type:null,
      },
      //详情的弹窗
      detailsDialog:{
        title:"",
        open:false,
        type:null,
      },
      //群聊选择
      groupChart:{
        title:"",
        open:false,
      },
      //选定的群聊
      groupSelectList:[],

      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        chatType: "group",
        sender: null,
        allowSelect: null,
        textContent: null,
        msgid: null,
        corpId: null,
        companyId: null,
        tagNames: null,
        groupChatNames: null,
        fromUserCount: null,
        toUserCount: null,
        fromUserNum: null,
        toUserNum: null,
      },
      // 表单参数
      form: {
      },

      // 表单校验
      rules: {
        chatType: [
          { required: true, message: "群发任务的类型，默认为single，表示发送给客户，group表示发送给客户群不能为空", trigger: "change" }
        ],
        userIdsSelectList: [
          { required: true, message: "发送企业群发消息的成员账号不能为空", trigger: "blur" }
        ],
        groupChatNamesMap: [
          { required: true, message: "群聊不能为空", trigger: "blur" }
        ],
        allowSelect: [
          { required: true, message: "是否允许成员在待发送客户列表中重新进行选择，默认为true", trigger: "blur" }
        ],
        textContent:[
          { required: true, message: "消息文本不能为空噢", trigger: "blur" }
        ],
        createName:[
          { required: true, message: "创建人不能为空", trigger: "blur" }
        ],
        groupChatNames:[
          { required: true, message: "群发到群的标题不能为空", trigger: "blur" }
        ]

      },

    };
  },
  created() {
    getMyQwCompanyList().then(response => {
            this.myQwCompanyList = response.data;
            if(this.myQwCompanyList!=null){
              this.queryParams.corpId=this.myQwCompanyList[0].dictValue
              this.getList();
            }
    });

    //任务类型
    this.getDicts("sys_qw_group_msg_chat_type").then(response => {
      this.groupMsgChatType = response.data;
    });

    //发送类型
    this.getDicts("sys_qw_group_msg_timer_type").then(response => {
      this.groupMsgTimerType = response.data;
    });

    //文本类型字典(复用)
    this.getDicts("sys_qw_welcome_type").then(response => {
      this.msgTypeOptions = response.data;
    });

    //客户性别
    this.getDicts("sys_qw_external_contact_gender").then(response => {
      this.sysUserSex = response.data;

      // 要添加的新对象数据
      let newUserData = {
        dictValue: 99,
        dictLabel: '全部',
      };
      // 添加对象到数组
      this.sysUserSex.push(newUserData);
    });

    //是否允许成员在待发送列表中再次选择
    this.getDicts("sys_qw_allow_select").then(response => {
      this.allowSelectOptions = response.data;
    });
  },
  watch: {
    // 监听 userSelectList 的变化，并同步更新 form.userIdsSelectList
    userSelectList(newList) {
      this.form.userIdsSelectList = newList.map(item => item.qwUserId);
    },
    groupSelectList(newList){

      const groupMap = {}; // 创建一个空对象来存储结果

      newList.forEach(item => {
        // 检查 owner 是否已经作为键存在于对象中
        if (!groupMap[item.owner]) {
          // 如果不存在，创建一个新的 Set 并将其与 owner 键关联
          groupMap[item.owner] = new Set(); // 使用 Set 来确保 chatId 不重复
        }
        // 获取与当前 owner 关联的 Set
        const chatIds = groupMap[item.owner];

        // 添加 chatId 到 Set 中，Set 会自动处理重复的情况
        chatIds.add(item.chatId);
      });

      // 将 Set 转换为 ArrayList
      const groupMapForBackend = {};
      for (const owner in groupMap) {
        groupMapForBackend[owner] = Array.from(groupMap[owner]);
      }

      this.form.groupChatNamesMap= groupMapForBackend;

    }
  },
  methods: {
    updateCorpId(){
           this.getList();
     },
    /** 查询客户群发记录主列表 */
    getList() {

      this.loading = true;
      listGroupMsg(this.queryParams).then(response => {

        this.groupMsgList = response.rows;
        this.total = response.total;
        this.loading = false;

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

    handleAvatarSuccessFile(res, file) {
      if(res.code==200){
        this.form.fileUrl=res.url;
        this.FileOne=file.raw
      }
      else{
        this.msgError(res.msg);
      }
    },
    handleAvatarSuccessVideo(res, file) {

      if(res.code==200){
        this.form.videoUrl=res.url;
        // this.self.$forceUpdate()
        this.FileOne=file.raw
      }
      else{
        this.msgError(res.msg);
      }
    },
    beforeAvatarUploadFile(file){
      const isLt1M = file.size / 1024 / 1024 < 10;
      if (!isLt1M) {
        this.$message.error('上传大小不能超过 10MB!');
      }
      return isLt1M;
    },
    beforeAvatarUploadVideo(file){
      const isLt1M = file.size / 1024 / 1024 < 10;
      if (!isLt1M) {
        this.$message.error('上传大小不能超过 10MB!');
      }
      return isLt1M;
    },

    //下载文件
    downloadUrl(materialUrl) {
      // 直接返回文件 URL
      return materialUrl;
    },



    //选择的成员账号列表
    selectUserList(list){

      this.listUser.open=false;
      //用于显示
      this.userSelectList=list;

      // //用于查询
      // this.form.userIdsSelectList=this.userSelectList.map(item => item.qwUserId);

    },

    //根据选定的成员获取相应的群
    handlelistGroup(userList) {

      this.groupChart.title = "选择群主下的群聊"
      this.groupChart.open = true;

      const qwUserIds=userList.map(item => item.qwUserId).join(',');
      setTimeout(() => {
         this.$refs.GroupChat.getDetailsListByUserList(qwUserIds,this.queryParams.corpId)
        }, 200);

    },

    //选择的群聊
    selectGroupChatList(list){

      this.groupChart.open=false;
      //用于显示
      this.groupSelectList=list;
    },
    //删除一些选择了的账号
    handleClosegroupUser(list){

      // 假设 list 对象具有一个 id 属性
      const index = this.userSelectList.findIndex(t => t.id === list.id);
      if (index !== -1) {
        this.userSelectList.splice(index, 1);
      }
      // //表单同时清除
      // this.form.userIdsSelectList= this.userSelectList.map(item => item.id);
    },

    //删除一些已经选择了的群聊
    handleCloseGroup(list){

      // 假设 list 对象具有一个 id 属性
      const ls = this.groupSelectList.findIndex(t => t.chatId === list.chatId);
      if (ls !== -1) {
        this.groupSelectList.splice(ls, 1);
        this.groupSelectList = [...this.groupSelectList];
      }
    },

    //选择群发的企业成员账号
    handlelistUser(){
      setTimeout(() => {
        this.$refs.QwUserList.getDetails(this.queryParams.corpId);
      }, 1);
      this.listUser.title="选择企业成员"
      this.listUser.open=true;
      //预计人数制空
      this.expectCountCustomer=null;
    },


    // 表单重置
    reset() {
      this.form = {
        id: null,
        chatType: "group",
        sender: null,
        allowSelect: "Y",
        textContent: null,
        msgid: null,
        corpId: null,
        companyId: null,
        tagNames: null,
        groupChatNamesList: [],
        fromUserCount: null,
        toUserCount: null,
        fromUserNum: null,
        toUserNum: null,
        createTime: null,
        updateTime: null,
        msgType:null,
        mediaId: null,
        mediaPicUrl: null,
        title: null,
        picurl: null,
        description: null,
        url: null,
        miniprogramTitle: null,
        miniprogramPicMediaId: null,
        miniprogramPicUrl: null,
        miniprogramAppid: null,
        miniprogramPage: null,
        fileMediaId: null,
        fileUrl: null,
        videoMediaId: null,
        videoUrl: null,
        //选择的成员账号
        userIdsSelectList:[],
      };
      this.userSelectList=[];
      this.groupSelectList=[];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    hangdleDitels(row){
      this.reset();
      const id = row.id || this.ids
      getGroupMsg(id).then(response => {
        this.formDetails = response.data;
        this.detailsDialog.open = true;
        this.detailsDialog.title = "客户群发记录详情";
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.corpId= this.myQwCompanyList[0].dictValue
      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.form.msgType="1"
      this.title = "新建群发";
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getGroupMsg(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改客户群发记录主";
      });
    },

    openImageViewer(url) {
      // 打开大图预览对话框
      this.dialogImageUrl=url
      this.dialogVisible = true;
    },

    /** 提交按钮 */
    async  submitForm() {
      this.form.corpId=this.queryParams.corpId;
      try {
        // 验证子组件表单
        await this.$refs.WelComeAdd.validateChildForm();

        // 父组件表单验证逻辑
        await this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              return this.$message.error("没有修改选项");
            }if (Object.keys(this.form.groupChatNamesMap).length === 0){
              return this.$message.error("请选择要发送的群哦");
            }
            else {
              this.loadingAdd=true;
              Object.assign(this.form, this.$refs.WelComeAdd.form);
              this.form.chatType="group";

              addGroupMsg(this.form).then(response => {
                this.loadingAdd=false;
                this.msgSuccess("创建成功");
                this.open = false;
                this.getList();
              }).catch(error => {
                this.loadingAdd = false;
                this.open = false;
              }).finally(() => {
                this.$refs["form"].resetFields();
                this.$refs.WelComeAdd.reset();
                this.reset();
                this.userSelectList=[];

              });
            }
          }
        });

      } catch (error) {
        console.error('表单编辑群发信息验证不用过:', error.message);
      }


    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除客户群发记录主编号为"' + ids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return delGroupMsg(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(() => {});
    },
  }
};
</script>
<style scoped>
.user-box {
  width: 50px;           /* 盒子宽度 */
  height: 30px;           /* 盒子高度 */
  padding: 5px 10px;          /* 内边距 */
  border: 1px solid #d5d1d1;/* 边框 */
  margin: 3px;            /* 外边距 */
  background-color: #f9f9f9;/* 背景颜色 */
  color: #333;            /* 文本颜色 */
  font-size: 14px;        /* 字体大小 */
  text-align: center;     /* 文本居中 */
}
.elFormItemClass{
  margin: 20px 0px
}

.message-stayle{
  display: flex;
  justify-content: normal;
  align-items: center;
  margin-top: 10px;
  width: 100%;
}
.message-stayle span {
  word-break: break-all;
}

.container {
  position: relative; /* 使 phone div 的 absolute 定位基于这个容器 */
  width: 100%;
  height: 100%;
}

.phone {
  position: absolute; /* 定位到容器内 */
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 375px;
  height: 100%;
  max-height: 90%;
  border: 8px solid #ccc;
  border-radius: 36px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  overflow: hidden;
}

.phone::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 60px;
  height: 5px;
  background-color: #ccc;
  border-radius: 10px;
  transform: translateX(-50%);
}

.chat-interface {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 15px;
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
}

.header .back,
.header .menu {
  height: 25px;
  width: 25px;
}
.header .title{
  font-size: 16px;
  margin: auto;
}

.message-area {
  flex: 1;
  background-color: rgb(240, 242, 245);
  padding: 10px;
  overflow-y: auto;
  width: 100%;
}

.footer {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  border-top: 1px solid #e0e0e0;
}

.footer .voice-button,
.footer .emoji-button,
.footer .add-button {
  width: 25px;
  height: 25px;
  border: none;
  cursor: pointer;
  flex-shrink: 0; /* 不允许缩小 */
}
.footer .emoji-button,
.footer .add-button {
  margin: 0px 5px;
}


.footer .input-box {
  flex: 1;
  border: 1px solid #e0e0e0;
  margin-left: 5px;
}

.el-form-item {
  margin-bottom: 30px;
}
.text-title{
  max-height: 7.5em; /* 设置最大高度，根据字体大小调整 */
  overflow-y: auto; /* 内容超出时显示滚动条 */
  line-height: 1.5em; /* 行高设置，确保每行高度一致 */
}

.custom-span {
  display: block; /* 确保元素是块级元素 */
  height: 110px; /* 设置固定高度 */
  overflow-y: auto; /* 超出高度时显示滚动条 */
  word-wrap: break-word; /* 自动换行 */
  word-break: break-all; /* 在必要时进行换行 */
}
.custom-span-title {
  display: block; /* 确保元素是块级元素 */
  height: 45px; /* 设置固定高度 */
  overflow-y: auto; /* 超出高度时显示滚动条 */
  word-wrap: break-word; /* 自动换行 */
  word-break: break-all; /* 在必要时进行换行 */
}
</style>
