<template>
  <!-- 发送短信弹窗 -->
  <div class="publicContainer">
    <el-form :model="formData" label-width="100px" :rules="formRules">
      <el-form-item label="负责人:" prop="name">
        <el-input clearable v-model="formData.name" placeholder="请输入负责人"></el-input>
      </el-form-item>
      <el-form-item label="负责人电话:" prop="phone">
        <el-input clearable v-model="formData.phone" max-length="11" placeholder="请输入负责人电话"></el-input>
      </el-form-item>
      <el-form-item label="短信预览:" prop="content">
        <el-input type="textarea" disabled :rows="4" v-model="formData.content" placeholder=""></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" icon="Phone">发送短信</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();

const props = defineProps({
  realData: {
    type: Object,
  },
  pipeDetail: {
    type: Object,
  },
});

const formData = ref({
  name: '李文峰',
  phone: '13837899917',
  content: '',
});
const formRules = ref({
  name: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入负责人电话', trigger: 'blur' }],
});

onMounted(() => {
  // 短信内容
  setTimeout(() => {
    formData.value.content =
      '【开封海绵办】在' +
      props.realData.stName +
      ',时间：' +
      props.realData.tt +
      ',监测到水深为' +
      props.realData.z +
      '米，管网直径为' +
      (props.pipeDetail.pipelineDiameterTemp || '--') +
      '米，发生了满管溢流风险，请及时前往查看并做好处理措施。';
  }, 500);
});
</script>

<style lang="scss" scoped></style>