<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <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>
    <div style="margin-top: 10px;display: flex;padding-left: 10px">
      <el-button type="primary" @click="handleAdd()">新建群发</el-button>
    </div>
    <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">
      <el-table-column type="selection" width="55" align="center" disabled />
      <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="textContent" />
      <el-table-column label="已发送成员数" align="center" prop="fromUserCount" />
      <el-table-column label="送达客户数" align="center" prop="toUserCount" />
      <el-table-column label="未发送成员数" align="center" prop="fromUserNum" />
      <el-table-column label="未送达客户数" align="center" prop="toUserNum" />
      <el-table-column label="创建人" align="center" prop="createName" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <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 :title="title" :visible.sync="open" width="1200px" append-to-body>
      <div style="display: flex;flex-wrap: nowrap">
        <div style="width: 600px;">
          <el-form ref="form" :model="form" :rules="rules" label-width="140px">
            <div>
              <span>基础信息</span>
              <hr>
            </div>
            <el-form-item label="选择群发成员账号:" prop="userIdsSelectList">
              <div>
                <div>
                  <el-button
                    size="small"
                    icon="el-icon-circle-plus-outline"
                    plain
                    @click="handlelistUser()">请选择群发账号</el-button>
                </div>
                <div>
                  <span v-for="item in userSelectList" class="user-box">{{item.nickName}}</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="选择客户">
              <el-radio-group v-model="form.selectType" @input="clearExpectCountCustomer">
                <el-radio :label="item.dictValue" v-for="item in groupMsgTypeOptions">{{item.dictLabel}}</el-radio>
              </el-radio-group>
              <div style="background-color:#f1caaf;width: 100%;height: 10%">
                <span style="margin-left: 2%">系统会推送任务给最后跟客户进行聊天互动的企业成员</span>
              </div>
              <div style="background-color:#b9f6e7;width: 100%;height: 10%" v-if="form.selectType==1">
                <span style="margin-left: 2%">查看该消息预计送达人数:</span>
                <el-link style="color: #1aa4ff;margin-left: 3%" v-if="this.expectCountCustomer==null" @click="viewReceiveNum">点我查看
                </el-link>
                <span style="color: #d440ec;margin-left: 2%" v-if="this.expectCountCustomer!=null">{{this.expectCountCustomer}} 人</span>
              </div>
              <div v-if="form.selectType==2" style="padding-top: 1%;background-color: #e2f1ee">

                <el-form-item label="按性别筛选客户:" class="elFormItemClass">
                  <el-radio-group v-model="form.gender"  @input="clearExpectCountCustomer">
                    <el-radio v-for="item in sysUserSex" :label="item.dictValue">{{item.dictLabel}}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="按所在群聊筛选:" class="elFormItemClass">
                  <div>
                    <div>
                      <el-button
                        icon="el-icon-s-comment"
                        plain
                        @click="handleGroupChatList()">请选择群聊</el-button>
                    </div>
                    <div>
                      <span v-for="item in groupChatList" class="user-box">{{item.name}}</span>
                    </div>
                  </div>

                </el-form-item>
                <el-form-item label="按添加时间筛选" class="elFormItemClass">
                  <div style="width: 100%;display: flex">
                    <el-date-picker
                      v-model="form.timeScreenCharge"
                      @change="clearExpectCountCustomer"
                      type="daterange"
                      align="right"
                      unlink-panels
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :picker-options="pickerOptions"
                      :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                  </div>

                </el-form-item>
                <el-form-item label="按客户标签筛选:" class="elFormItemClass">
                  <div>
                    <div>
                      <el-button icon="el-icon-s-check" plain @click="hangleChangeTags()">请选择标签</el-button>
                    </div>

                    <div>
                      <el-tag
                        :key="tag[0]"
                        v-for="(tag,index) in this.tagsIdsChangeSelectList"
                        closable
                        :disable-transitions="false"
                        @close="handleCloseTags(tag)">
                        {{tag[1]}}
                      </el-tag>
                    </div>

                  </div>
                </el-form-item>

                <el-form-item label="排除标签筛选" class="elFormItemClass">
                  <div>
                    <div>
                      <el-button icon="el-icon-s-check" plain @click="hangleChangeOutTags()">请选择排除的标签</el-button>
                    </div>

                    <div>
                      <el-tag
                        :key="tag[0]"
                        v-for="(tag,index) in this.outTagsIdsChangeSelectList"
                        closable
                        :disable-transitions="false"
                        @close="handleCloseOutTags(tag)">
                        {{tag[1]}}
                      </el-tag>
                    </div>

                  </div>
                </el-form-item>

                <div style="background-color:#b9f6e7;width: 100%;height: 10%">
                  <span style="margin-left: 2%">查看该消息预计送达人数:</span>
                  <el-link style="color: #1aa4ff;margin-left: 3%" v-if="this.expectCountGroupChat==null" @click="viewReceiveGroupChatNum">点我查看
                  </el-link>
                  <span style="color: #d440ec;margin-left: 2%" v-if="this.expectCountGroupChat!=null">{{this.expectCountGroupChat}} 人</span>
                </div>
              </div>

            </el-form-item>

            <div v-if="form.chatType=='group'">
              <el-form-item label="客户群名:" prop="groupChatNames">
                <el-input v-model="form.groupChatNamesList" placeholder="请输入客户群名" />
              </el-form-item>
            </div>

            <div>
              <span>编辑群发信息</span>
              <hr>
            </div>

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

          <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>
        </div>
        <div style="width: 500px;background-color: #4AB7BD;height: 600px;margin-left: 50px">

        </div>

      </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="groupChart.title" :visible.sync="groupChart.open" style="width: 1300px;height: 100%" append-to-body>
      <GroupChat ref="GroupChat" @selectGroupChatList="selectGroupChatList"></GroupChat>
    </el-dialog>

    <!--  选择的标签   -->
    <el-dialog :title="changeTagDialog.title" :visible.sync="changeTagDialog.open"style="width: 1300px;height: 100%" append-to-body>
      <tag-group-list ref="TagGroupList" :change-type="changeTagDialog.type" @selectTagsList="selectTagsList"></tag-group-list>
    </el-dialog>

    <el-drawer :title="detailsDialog.title" :visible.sync="detailsDialog.open" size="65%">
      <div style="display: flex;flex-wrap: nowrap" class="app-container"   >
        <div style="width: 600px;">
          <el-descriptions :column="1" border >
            <el-descriptions-item label="消息文本内容:">
              <span>{{form.textContent}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="图片" v-if="form.msgType=='1'">
              <el-image
                v-if="form.mediaPicUrl"
                style="width: 100px; height: 100px"
                :src="form.mediaPicUrl"
                fit="contain"
                @click="openImageViewer(form.mediaPicUrl)"/>
            </el-descriptions-item>
            <el-descriptions-item label="图文标题:" v-if="form.msgType=='2'">{{form.title}}</el-descriptions-item>
            <el-descriptions-item label="图文封面:" v-if="form.msgType=='2'">
              <el-image
                v-if="form.picurl"
                style="width: 100px; height: 100px"
                :src="form.picurl"
                fit="contain"
                @click="openImageViewer(form.picurl)"/>
            </el-descriptions-item>
            <el-descriptions-item label="图文的描述:" v-if="form.msgType=='2'">{{form.description}}</el-descriptions-item>
            <el-descriptions-item label="图文的图片:" v-if="form.msgType=='2'">
              <el-image
                v-if="form.url"
                style="width: 100px; height: 100px"
                :src="form.url"
                fit="contain"
                @click="openImageViewer(form.url)"/>
            </el-descriptions-item>
            <el-descriptions-item label="小程序标题:" v-if="form.msgType=='3'">{{form.miniprogramTitle}}</el-descriptions-item>
            <el-descriptions-item label="小程序封面:" v-if="form.msgType=='3'">
              <el-image
                v-if="form.miniprogramPicUrl"
                style="width: 100px; height: 100px"
                :src="form.miniprogramPicUrl"
                fit="contain"
                @click="openImageViewer(form.miniprogramPicUrl)"/>
            </el-descriptions-item>
            <el-descriptions-item label="小程序appid:" v-if="form.msgType=='3'">{{form.miniprogramAppid}}</el-descriptions-item>
            <el-descriptions-item label="小程序page路径:" v-if="form.msgType=='3'">{{form.miniprogramPage}}</el-descriptions-item>
            <el-descriptions-item label="企微临时文件mediaId:" v-if="form.msgType=='4'">{{form.fileMediaId}}</el-descriptions-item>
            <el-descriptions-item label="文件:" v-if="form.msgType=='4'">
              <el-link v-if="form.fileUrl" type="primary" :href="form.fileUrl" download>
                {{form.fileUrl}}
              </el-link>
            </el-descriptions-item>
            <el-descriptions-item label="视频临时文件mediaId:" v-if="form.msgType=='5'">{{form.videoMediaId}}</el-descriptions-item>
            <el-descriptions-item label="视频:" v-if="form.msgType=='5'">
              <video v-if="form.videoUrl"
                     :src="form.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==form.allowSelect">{{dict.dictLabel}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="创建人:">{{form.createName}}</el-descriptions-item>

          </el-descriptions>
        </div>
        <div style="width: 500px;background-color: #4AB7BD;height: 600px;margin-left: 50px"></div>
      </div>
      <div style="background-color: lightsalmon;width: 100%;height: 600px" class="app-container">
      </div>

    </el-drawer>

  </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 { selectCountCustomer } from '@/api/qw/externalContact'
import GroupChat from '@/views/qw/groupChat/groupChat'
import tagGroupList from '@/views/qw/tagGroup/tagGroupList'
import WelComeAdd from '@/views/qw/welcome/welComeAdd'
export default {
  name: "GroupMsg",
  components: { tagGroupList, GroupChat, GroupMsgUser,ImageUpload,qwUserList,WelComeAdd},
  data() {
    return {
      //上传地址
      uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",

      // 遮罩层
      loading: true,

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

      //文件1图片，文件，视频，音频，图文的封面
      FileOne:'',

      //文件2 用来存上传图文的图片
      FileTwo:'',

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

      //任务类型
      groupMsgChatType:[],
      //群发文本类型(复用)
      groupMsgTextTypeOptions:[],
      //选择客户类型
      groupMsgTypeOptions:[],
      //是否允许成员在待发送列表中再次选择
      allowSelectOptions:[],
      //客户性别
      sysUserSex:[],
      //预期发送客户人数
      expectCountCustomer:null,

      //部分客户预期发送客户人数
      expectCountGroupChat:null,

      //客户群选择列表
      groupChatList:[],

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

      //查询预计通知人数
      countList:{
        //根据成员查
        userIds:{},
        //根据筛选客户条件查
        //1.群聊
        chartIds:{},

      },

      //选择的标签
      tagsIdsChangeSelectList:null,
      //排除的标签
      outTagsIdsChangeSelectList:null,

      //选择群发账号列表
      listUser:{
        title:"",
        open:false
      },
      //选择所在群聊里的人
      groupChart:{
        title:"",
        open:false,
      },
      //选择群聊
      changeTagDialog:{
        title:"",
        open:false,
        type:null,
      },
      detailsDialog:{
        title:"",
        open:false,
        type:null,
      },
      // 弹出层标题
      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" }
        ],
        allowSelect: [
          { required: true, message: "是否允许成员在待发送客户列表中重新进行选择，默认为true", trigger: "blur" }
        ],
        textContent:[
          { required: true, message: "消息文本不能为空噢", trigger: "blur" }
        ],
        createName:[
          { required: true, message: "创建人不能为空", trigger: "blur" }
        ]

      },
      //日期快捷选择
      pickerOptions: {
        shortcuts: [
          {
            text: '最近三天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
      },

    };
  },
  created() {
    this.getList();

    //群发文本类型，复用一哈
    this.getDicts("sys_qw_welcome_type").then(response => {
      this.groupMsgTextTypeOptions = response.data;
    });
    //全部客户还是部分客户
    this.getDicts("sys_qw_groupMsg_type").then(response => {
      this.groupMsgTypeOptions = response.data;
    });


    this.getDicts("sys_qw_group_msg_chat_type").then(response => {
      this.groupMsgChatType = 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;
    });
  },
  methods: {

    /** 查询客户群发记录主列表 */
    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;
    },

    //清除点我查看
    clearExpectCountCustomer(){
      //选择全部客户的统计
      this.expectCountCustomer=null;
      //选择部分客户的统计
      this.expectCountGroupChat=null;
    },

    //查看预计接收人数
    viewReceiveNum(){
      if (this.userSelectList.length==0){
        return  this.msgError("请选择群发成员账号");
      }else {

        selectCountCustomer(this.form).then(res=>{
          this.expectCountCustomer=res.data;
        })
      }
    },

    //查看部分客户预计接收人数
    viewReceiveGroupChatNum(){

      if (this.userSelectList.length==0){
        return  this.msgError("请选择群发成员账号");
      }else {

        // 使用 map 方法和解构赋值提取每个子数组的第一个元素
        //选择的标签
        if (this.tagsIdsChangeSelectList!=null){
          this.form.tagsIdsSelectList=this.tagsIdsChangeSelectList.map(([first]) => first);
        }

        //排除的标签
        if (this.outTagsIdsChangeSelectList!=null){
          this.form.outTagsIdsSelectList = this.outTagsIdsChangeSelectList.map(([first]) => first);
        }

        selectCountCustomer(this.form).then(res=>{
          this.expectCountGroupChat=res.data;
        })

      }
    },

    //选择的成员账号列表
    selectUserList(list){
      this.listUser.open=false;
      //用于显示
      this.userSelectList=list;

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

    },

    //选择的部分客户时,选择的群聊里的
    selectGroupChatList(list){

      this.groupChart.open=false;
      //用于显示
      this.groupChatList=list;

      //用于查询
      const chatIds=this.groupChatList.map(item=>item.chatId)
      this.form.groupChatSelectList=chatIds;
    },

    //选择的标签
    selectTagsList(list,type){

      const result = list.flatMap(item => {
        return item.tag.map(tag => [tag.tagId, tag.name]);
      });

      //获取到选择的标签列表
      const uniqueResult = Array.from(new Set(result.map(JSON.stringify)), JSON.parse);
      this.changeTagDialog.open=false

      if (type==1){
        this.tagsIdsChangeSelectList=uniqueResult;
      }else if (type==2){
        this.outTagsIdsChangeSelectList=uniqueResult;
      }

    },

    //删除一些选择的标签
    handleCloseTags(tag){
      const index = this.tagsIdsChangeSelectList.findIndex(t => t[0] === tag[0]);
      if (index !== -1) {
        this.tagsIdsChangeSelectList.splice(index, 1);
      }
    },

    //删除一些排除的标签
    handleCloseOutTags(tag){
      const index = this.outTagsIdsChangeSelectList.findIndex(t => t[0] === tag[0]);
      if (index !== -1) {
        this.outTagsIdsChangeSelectList.splice(index, 1);
      }
    },

    //选择群发的企业成员账号
    handlelistUser(){

      this.listUser.title="选择企业成员"
      this.listUser.open=true;
      //预计人数制空
      this.expectCountCustomer=null;
    },

    //选择群聊
    handleGroupChatList(){
      this.groupChart.title="选择所在群聊里的客户"
      this.groupChart.open=true;
      //预计人数制空
      this.expectCountGroupChat=null;

    },

    //选择标签
    hangleChangeTags(){

      this.changeTagDialog.title="选择标签"
      this.changeTagDialog.open=true;
      this.changeTagDialog.type=1;
      //预计人数制空
      this.expectCountGroupChat=null;
    },

    //选择排除标签
    hangleChangeOutTags(){
      this.changeTagDialog.title="选择排除的标签"
      this.changeTagDialog.open=true;
      this.changeTagDialog.type=2;
      //预计人数制空
      this.expectCountGroupChat=null;
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        chatType: "single",
        sender: null,
        gender:99,
        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:[],
        //选择的群聊
        groupChatSelectList:[],
        //选择的时间
        timeScreenCharge:[],

        //全部客户还是部分客户
        selectType:'1',

        //选择的标签列表
        tagsIdsSelectList:[],

        //排除的标签
        outTagsIdsSelectList:[],
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    //选择小板块方法
    handleClick(){},

    hangdleDitels(row){
      this.reset();
      const id = row.id || this.ids
      getGroupMsg(id).then(response => {
        this.form = response.data;
        this.detailsDialog.open = true;
        this.detailsDialog.title = "客户群发记录详情";
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.form.msgType="1"
      this.title = "新建群发";

    },

    /** 获取企业员工列表 */
    // getUserList(){
    //   //获取企业员工
    //   listUser(this.queryParams).then(response => {
    //     this.userList = response.rows;
    //     this.total = response.total;
    //     this.loading = false;
    //   });
    // },
    /** 修改按钮操作 */
    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.loading=true;

      try {
        // 验证子组件表单
        await this.$refs.WelComeAdd.validateChildForm();
        // 父组件表单验证逻辑
        await this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              return this.msgError("没有修改选项");
            } else {
              Object.assign(this.form, this.$refs.WelComeAdd.form);

              addGroupMsg(this.form).then(response => {
                this.loading=false;
                this.msgSuccess("立即发送成功");
                this.open = false;
                this.getList();
              }).catch(error => {
                this.loading = false;
              });
            }
          }
        });

      } 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>
.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
}
</style>
