<template>
    <div>
        <el-card>
            <el-row>
                <el-col>
                    <span>短信模板:</span>
                    <el-select v-model="SMS" placeholder="请选择模板" clearable @clear="handleClear" @change="handleChange">
                        <el-option
                        v-for="item in SMSdata"
                        :key="item.F_Id"
                        :label="item.F_ModelName"
                        :value="item">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col>
                    <span>批次名称:</span>
                    <el-input
                    type="text"
                    class="name"
                    placeholder="请输入批次名称"
                    v-model="name">
                    </el-input>
                </el-col>
                <el-col >
                    <span style="color:red">*</span>
                    <span>接收号码:</span>
                    <el-input
                    type="textarea"
                    :rows="2"
                    size="small"
                    placeholder="请输入接收号码"
                    v-model="receivingNumber">
                    </el-input>
                </el-col>
                <el-col >
                    <span style="color:red">*</span>
                    <span>模板内容:</span>
                    <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入模板内容"
                    v-model="SMScontent">
                    </el-input>
                </el-col>
                <el-col >
                    <span>发送方式</span>
                    <el-radio-group v-model="info" @change="infoChange">
                        <el-radio :label="3">立即发送</el-radio>
                        <el-radio :label="6">定时发送</el-radio>
                    </el-radio-group>
                </el-col>
                <el-col v-show="flag">
                    <span>定时发送时间</span>
                    <el-date-picker
                    v-model="deliveryTime"
                    type="datetime"
                    placeholder="选择日期时间">
                    </el-date-picker>
                </el-col>
                <el-col>
                    <el-button @click="addSMS">新增短信</el-button>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>
<script>
import { getSMSTemplateList,addSMSInfo } from '@/api/noteManagement/noteList'
export default {
    data() {
        return {
            info:3,
            flag:false,
            deliveryTime:'',//定时发送时间
            receivingNumber:'',//接收的号码
            name:'',//批次名称
            SMScontent:'',//短信内容
            SMS:'',//短信模板
            SMSId:0,//短信模板id
            type:3,//发送类型
            SMSdata:[],//短信模板数据
        }
    },created() {
        this.getList()
    },
    methods: {
        infoChange(value){
            if(value==6){
                this.flag=true
            }else{
                this.flag=false
                this.deliveryTime=''
            }
        },
        getList(){
            const params={
                pageindex: 1,
                pagesize: 100
            }
            getSMSTemplateList(params).then(response=>{
                if(response.state=='success'){
                    this.SMSdata=response.data.Rows
                }
            }).catch(resolve=>{
                console.log(resolve)
            })
        },
        //清空选项操作
        handleClear(){
            this.SMSId=0;
            this.SMScontent=''
        },
        //选择操作
        handleChange(val){
            if(val){
                this.SMSId=val.F_Id;
                this.SMS=val.F_ModelName;
                this.SMScontent=val.F_Content;
            }
        },
        addSMS(){
            if(this.deliveryTime){
                if(this.SMSId==0){
                    this.type=4
                }else{
                    this.type=2
                }
            }else{
                if(this.flag){
                    this.$message.info('请选择时间')
                    return
                }
                if(this.SMSId==0){
                    this.type=3
                }else{
                    this.type=1
                }
            }
            if(!this.SMScontent){
                this.$message.error('请输入模板内容')
                return
            }
            if(!this.receivingNumber){
                this.$message.error('请输入接收号码')
                return
            }
            const params={
                F_Content:this.SMScontent,
                F_Name:this.name,
                F_TemplateId:this.SMSId,
                F_Tel:this.receivingNumber,
                F_PlanSendTime:this.deliveryTime,
                F_Type:this.type,
            }
            addSMSInfo(params).then(response=>{
                if(response.state=='success'){
                    this.$message.success('新增成功')
                    this.SMScontent='';
                    this.SMS='';
                    this.receivingNumber='';
                    this.name='';
                    this.SMSId=0;
                    this.deliveryTime='';
                    this.type=3;
                }
            }).catch(resolve=>{

            })
        }
    },
}
</script>
<style lang="scss" scoped>
.el-card{
    padding-left: 50px;
    .el-col{
        padding: 10px 0;
        span{
            font-size: 14px;
            vertical-align:top;
            color: #606266;
            font-weight: 700;
        }
        .name{
            width: 200px;
        }
    }
}
.el-textarea{
    width: 50%;
}
</style>