<template>
  <div class="group-send-page">
      <el-form ref="form" :model="form" label-position="right" :rules="formRule" label-width="100px">
          
          <el-form-item label="跳转类型" prop="jump_type">
            <el-radio-group v-model="form.jump_type" style="margin-left:20px">
              <div style="display:flex">
                <div style="margin-right:30px;">
                  <el-radio label="1" >h5链接</el-radio>
                </div>
                <div style="margin-right:30px;">
                  <el-radio label="2">微信小程序</el-radio>
                </div>
                <div>
                  <el-radio label="4">图片</el-radio>
                </div>
              </div>
            </el-radio-group>
          </el-form-item>
		  
		  <el-form-item label="推送链接" prop="link" v-if="form.jump_type!=4">
              <el-input v-model="form.link" placeholder="请输入链接地址" style="width:500px;margin-left:20px"></el-input>
          </el-form-item>
          <el-form-item label="推送标题" prop="title" v-if="form.jump_type!=4">
              <el-input v-model="form.title" placeholder="请输入推送标题" style="width:500px;margin-left:20px"></el-input>
          </el-form-item>
          <el-form-item label="上传图片" prop="image">
                <input type="file" name="file" @change="fileSelected()" id="file" style="display:none;">
                <el-image style="width: 200px; height: 200px" :src="form.image" fit="cover" v-if="form.image" @click="handleUpload"></el-image>
                <div style="margin-left:20px" v-else>
                    <div class="upload-default-box" @click="handleUpload"></div>
                    <p style="font-size:14px;color:#999">支持png、jpg格式</p>
                </div>
          </el-form-item>
          <el-form-item label="描述" prop="des" v-show="form.jump_type!=4">
              <el-input type="textarea" maxlength="64" clearable placeholder="请输入描述内容" :rows="5" v-model="form.des" style="margin-left:20px;width:500px"></el-input>
          </el-form-item>
          <el-form-item label="默认标签" prop="labels">
              <div class="label-box" style="margin-left:20px">
                  <span v-for="item in showLabels" :key="item.name" class="label-item">{{item.name}}</span>
                  <span style="font-size:14px;color:#0099FF;cursor: pointer;margin-left:30px" @click="show=true">+更改</span>
              </div>
          </el-form-item>

          <div style="text-align: center; margin-top: 40px; margin-bottom: 20px">
              <el-button type="primary" @click="handleSubmit" style="width: 145px">推送</el-button>
          </div>
      </el-form>

      <!-- 选择标签弹窗 -->
      <el-dialog width="620px" top="15vh" :visible.sync="show" :modal-append-to-body="false" @close="show=false">
        <div slot="title">
            <img width="20" src="../../assets/img/icons/label.png" alt="" style="position:relative;top:4px;margin-right:10px">
            <span>群发标签</span>
        </div>
        <div class="label-select-wrap">
            <span 
                class="label-item" 
                :class="item.selected?'label-active':null" 
                v-for="(item,index) in labelArr" 
                :key="item.name" 
                @click="handleClickLabel(index)"
            >{{item.name}}</span>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import { customInterence,groupSendInterface } from "@/api/api.js";
export default {
    name:"GroupSend",
    computed: {
      showLabels(){
          return this.labelArr.filter(item=> item.selected)
      }  
    },
    data () {
        return {
            show:false,
            form:{
				jump_type:"1",
                link:"",
                title:"",
                image:'',
                des:"",
            },
            formRule:{
                jump_type:[{required: true, message: "请选择跳转类型", trigger: "blur"}],
                link:[{required: true, message: "请输入链接地址", trigger: "blur"}],
                title:[{required: true, message: "请输入推送标题", trigger: "blur"}],
            },
            labelArr:[],
        }
    },
    created () {
      this.getLabels()  
    },
    methods: {
        async getLabels(){
            const res=await groupSendInterface.groupMessageLabel()
            if(res.Ret===200){
                this.labelArr=res.Data.map((item,index)=>{
                    let obj={
                        name:item,
                        selected:false
                    }
                    if(index===0){
                        obj.selected=true
                    }
                    return obj
                })
            }
        },

        handleClickLabel(index){
            this.labelArr[index].selected=!this.labelArr[index].selected
        },

        handleUpload(){
            $("#file").click();
        },

        fileSelected(){  //选择文件上传
		    if( document.getElementById('file').files[0] ){
		        let hostfile = document.getElementById('file').files[0];
		        let size = Math.floor(hostfile.size / 1024 / 1024);
		        if( size>200 ){
		            this.$message.error('上传文件大小不能大于200M！');
		            hostfile = {};
		            return false
		        }
		        if( hostfile.name.toLowerCase().includes('.png') || hostfile.name.toLowerCase().includes('.jpg') || hostfile.name.toLowerCase().includes('.jpeg') ){
		        	let form = new FormData();
		        	form.append('file',hostfile);  //hostfile.name
					
					customInterence.upload(form).then((res) => {
						if( res.Ret === 200 ){
							// that.$message.success( '上传成功' );
							this.form.image=res.Data.ResourceUrl
						}
						
					});
				}else{
					this.$message.error('上传文件格式不正确！');
		        }
		    } 
		},

        handleSubmit(){
            this.$refs.form.validate(async (valid)=>{
                if(valid){
                    if(!this.form.image){
                        this.$message.warning('请上传图片')
                        return
                    }
                    let arr=this.showLabels.map(item=>{
                        return item.name
                    })
                    if(arr.length===0){
                        this.$message.warning('请选择标签')
                        return
                    }
                    let params={
                        Description:this.form.jump_type=='4'?'':this.form.des,
                        ImgUrl:this.form.image,
                        Label:arr.join(','),
                        LinkUrl:this.form.jump_type=='4'?'':this.form.link,
                        Title:this.form.jump_type=='4'?'':this.form.title,
                        JumpType:Number(this.form.jump_type),
                    }
                    const res=await groupSendInterface.groupMessageAdd(params)
                    if(res.Ret===200){
                        this.$message.success('新增成功')
                        setTimeout(() => {
                            this.$router.go(0)
                        }, 1000);
                           
                    }
                }
            })
        }
    }

}
</script>

<style lang="scss" scoped>
.group-send-page{
    width: 100%;
    background: #FFFFFF;
    box-sizing: border-box;
    // box-shadow: 0 3px 6px rgba(0, 0, 0 ,0.05);
    border-radius: 4px;
    min-height: calc(100vh - 120px);
    padding: 30px;
    .el-form-item{
        margin-bottom: 40px;
    }
    
}
.upload-default-box{
    width: 103px;
    height: 103px;
    background: #E9E9E9;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    &::after{
        content: '';
        display: block;
        background-image: url('../../assets/img/icons/add_icon.png');
        background-size: cover;
        width: 50px;
        height: 50px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
}

.des-box{
    width: 815px;
    height: 257px;
    border: 1px solid #DCDFE6;
    display: block;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 4px;
}

.label-box{
    .label-item{
        display: inline-block;
        background-color: #E0EEFD;
        padding: 10px 20px;
        min-width: 80px;
        text-align: center;
        color: #2D8CF0;
        font-size: 14px;
        border-radius: 2px;
        line-height: 1;
        margin-right: 20px;
        margin-bottom: 20px;
    }
}

.label-select-wrap{
    // margin-bottom: 30px;
    padding: 10px 10px 30px 10px;
    .label-item{
        display: inline-block;
        background-color: #ECECEC;
        padding: 10px 20px;
        min-width: 80px;
        text-align: center;
        color: #333;
        font-size: 14px;
        border-radius: 2px;
        line-height: 1;
        margin-right: 20px;
        margin-bottom: 20px;
        cursor: pointer;
    }
    .label-active{
        background-color: #E0EEFD;
        color: #2D8CF0;
    }
}
</style>

