<template>
    <div>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-form-item label="客户数量" >
                    {{form.customerIds.length}}人
                </el-form-item>
                <el-form-item label="模板库" >
                    <el-select @change="smsChange" v-model="form.tempId" placeholder="请选择" clearable size="small">
                        <el-option
                                v-for="item in smsTemps"
                                :key="item.tempId"
                                :label="item.title"
                                :value="item.tempId"
                            />
                    </el-select>
                </el-form-item>
                <el-form-item label="短信数量" >
                    {{smsCount}}
                </el-form-item>
                <el-form-item label="内容" prop="content">
                    <el-input :rows="5" v-model="form.content" type="textarea" placeholder="请输入内容" />
                </el-form-item>
            </el-form>
            <div  class="footer">
                <el-button type="primary" @click="submitForm">发送</el-button>
            </div>
    </div>
</template>
  
<script>
    import { getSmsTempList } from "@/api/company/companySmsTemp";
    import { sendCustomerBatchMsg,getCompanySmsCount } from "@/api/company/companySms";
    
    export default {
        name: "visit",
        data() {
            return {
                smsTemps:[],
                smsCount:0,
                form: {
                    tempId:null,
                    customerIds:[],
                    content:null,
                 
                },
                // 表单校验
                rules: {
                    content: [
                        { required: true, message: "内容不能为空", trigger: "change" }
                    ],
                }
            };
        },
        created() {
            getSmsTempList().then(response => {
                this.smsTemps = response.data;
            });
            this.getCompanySmsCount()
            
        },
        methods: {
            getCompanySmsCount(){
                getCompanySmsCount().then(response => {
                    if(response.data!=null){
                        this.smsCount = response.data.remainSmsCount;
                    }
                });
            },
            smsChange(e){
                var v=this.smsTemps.find(value=>value.tempId==e);
                console.log(v)
                this.form.content=v.content
                this.form.tempCode=v.tempCode
            },
            reset(customerIds) {
                this.form.customerIds=customerIds;
                this.getCompanySmsCount()
                
            },
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        this.myloading = this.$loading({
                            lock: true,
                            text: '处理中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        sendCustomerBatchMsg(this.form).then(response => {
                            this.myloading.close()
                            if (response.code === 200) {
                                this.msgSuccess(response.msg);
                                this.$emit('close');
                            }
                            else{
                                this.msgError(response.msg);
                            }
                        });
                    }
                });
            },
        }
    };
</script>
<style lang="scss" scoped>
.contents{
    height: 100%;
    background-color: #fff;
    padding: 20px;
        
}
.footer{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
</style>



 