<template>
  <div style="display: flex;justify-content: normal;width: 100%">
    <div style="width: 1000px">
      <!-- 添加或修改入群欢迎语管理对话框 -->
        <el-form ref="form" :model="form" :rules="rules" label-width="160px" size="medium">

          <el-form-item label="消息文本内容：" prop="textContent">
            <el-input v-model="form.textContent" type="textarea" :rows="8" maxlength="1300" show-word-limit placeholder="请输入消息文本内容（图片,视频等附件不上传，则默认为纯文本欢迎语）" />
          </el-form-item>


          <div v-if="!form.msgid" >
              <el-form-item label="群发文本类型：" prop="msgType">
              <el-radio-group v-model="form.msgType" size="medium">
                <el-radio :label="item.dictValue" v-for="item in groupMsgTextTypeOptions">{{item.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>

          <div v-if="form.msgType=='1'">
            <el-form-item label="图片：" prop="imagePicUrl">
              <ImageUpload v-model="form.imagePicUrl"  type="image" :num="10" :width="150" :height="150"  disabled/>
            </el-form-item>
          </div>
          <div v-if="form.msgType=='2'">
            <el-form-item label="图文标题：" prop="linkTitle" required>
              <el-input v-model="form.linkTitle" :rows="2" maxlength="42"  show-word-limit placeholder="请输入图文消息标题，最长为42字" />
            </el-form-item>
            <el-form-item label="上传图文封面：" prop="linkPicurl">
              <ImageUpload v-model="form.linkPicurl"  type="image" :num="10" :width="150" :height="150" />
            </el-form-item>
            <el-form-item label="图文的描述：" prop="linkDesc">
              <el-input v-model="form.linkDesc" :rows="4" maxlength="170" show-word-limit type="textarea" placeholder="请输入内容,，最长为170字" />
            </el-form-item>
            <el-form-item label="上传图文地址" prop="linkUrl" required>
<!--              <ImageUpload v-model="form.linkUrl"   type="image" :num="10" :width="150" :height="150" required />-->
              <el-input v-model="form.linkUrl"  placeholder="请输入图文链接地址" />

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

          <div v-if="form.msgType=='3'">
            <el-form-item label="小程序标题：" prop="miniprogramTitle">
              <el-input v-model="form.miniprogramTitle" placeholder="请输入小程序消息标题，最长为21字"  />
            </el-form-item>
            <el-form-item label="上传小程序封面：" prop="miniprogramPicUrl">
              <ImageUpload v-model="form.miniprogramPicUrl"  type="image" :num="10" :width="150" :height="150" />
            </el-form-item>
            <el-form-item label="小程序appid：" prop="miniprogramAppid">
              <el-input v-model="form.miniprogramAppid" placeholder="请输入小程序appid，必须是关联到企业的小程序应用" />
            </el-form-item>
            <el-form-item label="小程序page路径：" prop="miniprogramPage">
              <el-input v-model="form.miniprogramPage" placeholder="请输入小程序page路径" />
            </el-form-item>
          </div>

          <div v-if="form.msgType=='4'">

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

          </div>

          <div v-if="form.msgType=='5'">
            <el-form-item label="上传视频：" prop="videoUrl">
              <el-upload
                         v-model="form.videoUrl"
                         class="avatar-uploader"
                         :action="uploadUrl"
                         :show-file-list="false"
                         :on-success="handleAvatarSuccessVideo"
                         :before-upload="beforeAvatarUploadVideo">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <video v-if="form.videoUrl"
                     :src="form.videoUrl"
                     controls style="width: 200px;height: 100px">
              </video>
            </el-form-item>
          </div>

            <el-form-item label="允许成员选择客户发送" prop="allowSelect">
              <el-radio-group v-model="form.allowSelect" size="medium">
                <el-radio v-for="dict in allowSelectOptions" :label="dict.dictValue">{{dict.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>

          <el-form-item label="是否定时发送" prop="isTimerSend">
            <el-radio-group v-model="form.isTimerSend" size="medium">
              <el-radio v-for="dict in allowSelectOptions" :label="dict.dictValue">{{dict.dictLabel}}</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item v-if="form.isTimerSend == '1'" prop="timerSend">
            <el-date-picker
              v-model="form.timerSend"
              type="datetime"
              placeholder="选择定时发送时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="09:00:00">
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <div style="background-color:#ecf8fe;width: 100%">
              <div style="padding:1%">
                <span style="font-size: 15px">注意，客户每个月最多接收来自同一企业的管理员的30条群发消息，每位客户每日可收到1次群发内容</span>
              </div>
            </div>
          </el-form-item>


        </el-form>



      <!-- 大图预览对话框 -->
      <el-dialog
        :visible.sync="dialogVisible"
        :modal="false"
        width="1200"
        append-to-body>
        <img
          :src="this.dialogImageUrl"
          style="display: block; max-width: 100%; margin: 0 auto"
        />
      </el-dialog>
    </div>

    <div style="width: 400px;height: 666px;background-color:rgb(255 255 255);
                   display: flex;justify-content: flex-end;align-items: center;margin-top: -20%;margin-left: -2%">
      <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="form.textContent" class="message-stayle">
              <img src="../../../assets/image/character.png" style="width: 30px;height: 30px;margin: 5px">
              <div style="background-color:rgb(201 231 255); padding: 10px;">
                <span>{{ form.textContent }}</span>
              </div>
            </div>
            <div  v-if="form.imagePicUrl&&form.msgType=='1' " class="message-stayle">
              <img src="../../../assets/image/character.png" style="width: 30px;height: 30px;margin: 5px">
              <el-image
                style="width: 100px; height: 100px"
                :src="form.imagePicUrl"
                fit="contain"
                @click="openImageViewer(form.imagePicUrl)"/>
            </div>
            <div  v-if="form.linkTitle&&form.msgType=='2'"  class="message-stayle" @click="openImageViewer(form.linkUrl)">
              <img src="../../../assets/image/character.png" style="width: 30px;height: 30px;margin: 5px">
              <div style="background-color: white;width: 60%;padding: 10px">
                <div>
                  <span>{{form.linkTitle}}</span>
                </div>
                <div style="display: flex;justify-content:space-between;">
                  <span style="font-size: 13px;flex: 1">{{form.linkDesc}}</span>
                  <el-image
                    style="width: 50px; height: 50px;flex-shrink: 0"
                    :src="form.linkPicurl"
                    fit="contain"
                    @click="openImageViewer(form.linkPicurl)"/>
                </div>
              </div>

            </div>
            <div v-if="form.fileUrl &&form.msgType=='4'"  class="message-stayle" >
              <img src="../../../assets/image/character.png" style="width: 30px;height: 30px;margin: 5px">
              <el-link type="primary" :href="form.fileUrl" download style="padding: 10px" >
                {{form.fileUrl}}
              </el-link>
            </div>
            <div v-if="form.videoUrl &&form.msgType=='5'" class="message-stayle">
              <img src="../../../assets/image/character.png" style="width: 30px;height: 30px;margin: 5px">
              <video
                :src="form.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>
</template>

<script>
import { listWelcome, getWelcome, delWelcome, addWelcome, updateWelcome, exportWelcome } from "@/api/qw/welcome";
import ImageUpload from "@/views/qw/material/ImageUpload";

export default {
  name: "Welcome",
  components: {ImageUpload},

  data() {
    return {
      //上传地址
      uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
      //放大图片
      dialogImageUrl:null,
      dialogVisible:false,
      // 遮罩层
      loading: true,
      //群发文本类型(复用)
      groupMsgTextTypeOptions:[],
      //是否允许成员在待发送列表中再次选择
      allowSelectOptions:[],
      formData:null,

      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,

      details:{
        title:"",
        open:false,
      },

      // 表单参数
      form: {
        // gender:99,
        // groupMsgSelectType:'1',
        allowSelect: '1',
        msgType:'1',
        fileUrl:null,
        videoUrl: null,
        isTimerSend:'2'
      },
      // 表单校验
      rules: {
        msgType:[
          {required:true,message:"类型不能为空",trigger:"blur"}
        ],
        textContent:[
          {required:true,message:"消息文本不能为空",trigger:"blur"}
        ],
        createName:[
          {required:true,message:"创建人也要填噢",trigger:"blur"}
        ],
        timerSend:[
          {required:true,message:"时间不能为空",trigger:"blur"}
        ],
        linkUrl:[
          {required:true,message:"图文链接地址不能为空",trigger:"blur"}
        ]
      }
    };
  },
  created() {

    //文本类型字典
    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_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: {

    /** 表单验证 */
    async validateChildForm() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate(async valid => {
          if (valid) {
            resolve(true);
          } else {
            reject(false);
          }
        });
      });
    },
    handleAvatarSuccessFile(res, file) {
      if(res.code==200){

        this.form.fileUrl=res.url;
      }
      else{
        this.msgError(res.msg);
      }
    },
    handleAvatarSuccessVideo(res, file) {
      if(res.code==200){
        this.form.videoUrl=res.url;
        // this.self.$forceUpdate()
      }
      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;
    },
    openImageViewer(url) {
      // 打开大图预览对话框
      this.dialogImageUrl=url
      this.dialogVisible = true;
    },
    //下载文件
    downloadUrl(materialUrl) {
      // 直接返回文件 URL
      return materialUrl;
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        // sender: null,
        // gender:99,
        allowSelect: '1',
        textContent: null,
        msgid: null,
        // corpId: null,
        // companyId: null,
        // tagNames: null,
        // groupChatNamesList: [],
        // fromUserCount: null,
        // toUserCount: null,
        // fromUserNum: null,
        // toUserNum: null,
        // createTime: null,
        // createTime:null,
        // updateTime: null,
        timerSend:'',
        isTimerSend:'2',
        msgType:'1',
        // //选择的成员账号
        // userIdsSelectList:[],
        // //选择的群聊
        // groupChatSelectList:[],
        // //选择的时间
        // timeScreenCharge:[],

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

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

        imageMediaId: null,
        imagePicUrl: null,
        linkTitle: null,
        linkPicurl: null,
        linkDesc: null,
        linkUrl: null,
        miniprogramTitle: null,
        miniprogramPicMediaId: null,
        miniprogramPicUrl: null,
        miniprogramAppid: null,
        miniprogramPage: null,
        fileMediaId: null,
        fileUrl: null,
        videoMediaId: null,
        videoUrl:null,
      };
      this.resetForm("form");
    },
  }
};
</script>
<style scoped>
.flex-container {
  display: flex; /* 启用Flexbox布局 */
  flex-direction: column; /* 子元素垂直排列 */
  align-items: flex-start; /* 子元素在主轴上（水平）从左到右排列 */
}
.el-form-item {
  margin-bottom: 30px; /* 增加间距，可以根据需要调整具体数值 */
}
.flex-container > div {
  width: 100%; /* 确保每个子div宽度充满容器宽度 */
}
.phone {
  width: 330px;
  height: 100%;
  border: 8px solid #ccc;
  border-radius: 36px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  position: relative;
  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-stayle{
  display: flex;
  justify-content: normal;
  align-items: center;
  margin-top: 10px;
}
.message-stayle .el-link {
  white-space: normal; /* 允许换行 */
  word-break: break-all; /* 单词中间断行 */
  overflow-wrap: break-word; /* 允许在单词内换行 */
}
.message-area {
  flex: 1;
  background-color: rgb(240, 242, 245);
  padding: 10px;
  overflow-y: auto;
}

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