<template>
        <Form class="testForm" :model="smsModel" ref="form" :rules="rules" :label-width="120">
            <FormItem label="接收手机号" prop="phoneNumber" v-validate:phoneNumber.required.phone="rules">
                 <Input v-model="smsModel.phoneNumber" placeholder="请输入接收手机号"></Input>
            </Select>
            </FormItem>
            <FormItem label="短信内容" prop="smsContent" v-validate:smsContent.required="rules">
                <Input type="textarea" v-model="smsModel.smsContent" placeholder="请输入短信内容"></Input>
            </Select>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit">确认</Button>
                <Button @click="handleReset" style="margin-left: 8px">取消</Button>
            </FormItem>
        </Form>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";


@Component
export default class SmsTest extends Vue {
   private smsModel:any={
       phoneNumber:"",
       smsContent:""
   }
    rules : any={};
    @Prop() private id : any;

    // get rules(){  
    //     const validatePhone = (rule, value, callback) => {
    //         if (!value) {
    //             return callback(new Error('手机号不能为空'));
    //         } else if (!/^1[34578]\d{9}$/.test(value)) {
    //             callback('手机号格式不正确');
    //         } else {
    //             callback();
    //         }   
    //     };
    //     const rules={
    //          phoneNumber:[{ required: true,validator:validatePhone,trigger:'blur'}],
    //          smsContent:[{ required: true, message: '请输入短信内容', trigger: 'change' }]
            
    //     }
    //     return rules
    // }
    sendSms(){
       this.getApiData('post',this.$msPrefix.sms+'/api/v1/sms/test/'+this.id,this.smsModel,res=>{
            this.$tools.message('success',"发送成功!")
            this.close();
        })
    }
    handleSubmit () {
        (this.$refs["form"] as any).validate((valid) => {
            if (valid) {
               this.sendSms();
            } else {
               this.$tools.message('info',"请完善必填项!")
            }
        })
    }
    @Emit('close-modal') close(){}
    handleReset () {
        (this.$refs["form"] as any).resetFields();
        this.close();
    }
   
}
</script>

