<template>
  <div class="mt-3">
    <d-card class="mb-[16px] bg-white" shadow="never">
      <div class="text-[14px] w-full flex items-center justify-between">
        <div class="font-bold mb-[16px]">基础信息</div>
      </div>
      <d-form layout="vertical" class="ml-3 mr-3" :data="forms">
        <d-row :gutter="16">
          <d-col span="8">
            <d-form-item field="name" label="名称" required>
              <d-input v-model="forms.name" />
            </d-form-item>
          </d-col>
          <d-col span="8">
            <d-form-item field="email" label="邮件" required>
              <d-input v-model="forms.email" />
            </d-form-item>
          </d-col>
          <d-col span="8">
            <d-form-item field="phone" label="电话" required>
              <d-input v-model="forms.phone" />
            </d-form-item>
          </d-col>
        </d-row>
      </d-form>
    </d-card>
    <d-card class="mb-[16px] bg-white" shadow="never">
      <div class="text-[14px] w-full flex items-center justify-between">
        <div class="font-bold mb-[16px]">预警通知设置</div>
      </div>
      <d-form layout="vertical">
        <d-form-item field="radio" label="是否开启邮件通知">
          <d-radio-group direction="row" v-model="radio">
            <d-radio value="0">开启</d-radio>
            <d-radio value="1">关闭</d-radio>
          </d-radio-group>
        </d-form-item>
      </d-form>
    </d-card>
    <div class="flex">
      <d-button variant="solid" class="mr-[8px]">提交</d-button>
      <d-button color="secondary" class="mr-[8px]">保存草稿</d-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, shallowRef } from 'vue';
const radio = ref('1');

const forms = reactive({
  name: '',
  email: '',
  phone: ''
});
</script>

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