<template>
    <div>
        <el-card class="default-main mb10">
            <template #header>
                <div class="card-header">
                    <span>模拟短信发送</span>
                </div>
            </template>
            <div :style="height">
                <div>
                    <div class="title">接收手机号</div>
                    <el-input
                        class="mt10 mb20"
                        v-model="phone"
                        placeholder="请输入手机号"
                        maxlength="11"
                        style="width: 200px; margin-left: 30px"
                    ></el-input>
                </div>
                <div>
                    <div class="title">发送内容</div>
                    <el-input
                        class="mt10 mb10 ml30"
                        style="width: 95%"
                        v-model.trim="textarea"
                        :rows="5"
                        type="textarea"
                        placeholder="请输入短信内容"
                    />
                </div>

                <el-divider />
                <div style="text-align: center" class="mt10">
                    <el-button type="primary" icon="el-icon-Sort" @click="send">发送</el-button>
                    <el-button icon="el-icon-Close" @click="clear">清空</el-button>
                </div>
            </div>
        </el-card>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { mainHeight } from '@/utils/layout'
import { ElMessage } from 'element-plus'
defineOptions({
    name: 'smsConfiguration'
})
const phone = ref('')
const textarea = ref('')
const send = () => {
    const phoneRegex = /^1[3-9]\d{9}$/ // 简单的手机号正则，只验证格式
    if (!phoneRegex.test(phone.value)) {
        ElMessage({
            message: '请输入正确的手机号',
            type: 'warning'
        })
        return
        // 显示错误信息m
    }
    if (textarea.value === '') {
        ElMessage({
            message: '短信内容不能为空',
            type: 'warning'
        })
        return
    }
    ElMessage({
        message: '模拟短信发送成功',
        type: 'success'
    })
}
const clear = () => {
    phone.value = ''
    textarea.value = ''
    ElMessage({
        message: '清空成功',
        type: 'success'
    })
}
const height = mainHeight(105)
</script>
<style lang="scss" scoped>
.title {
    background-color: #f2f2f2;
    height: 30px;
    line-height: 30px;
    font-weight: 600;
    padding-left: 10px;
    margin-bottom: 10px;
    border-left: 10px solid var(--el-color-primary);
}
:deep(.el-card__body) {
    padding: 10px !important;
}
:deep(.el-select) {
    min-width: 80px !important;
}
.checkbox {
    display: flex;
    justify-content: space-between;
}
</style>
