<route lang="json5" type="page">
{
  style: { navigationBarTitleText: '脖环事件录入' },
}
</route>

<template>
  <view class="container px-2">
    <wd-form ref="form" :model="model">
      <wd-cell-group border custom-class="group" title="脖环绑定">
        <wd-cell
          title="脖环"
          title-width="100px"
          prop="value1"
          center
          :rules="[{ required: true, message: '请填写密码' }]"
        >
          <view style="text-align: left">
            <wd-radio-group v-model="model.value1" inline shape="dot" prop="value2">
              <wd-radio value="1">绑定</wd-radio>
              <wd-radio value="2">解绑</wd-radio>
            </wd-radio-group>
          </view>
        </wd-cell>

        <wd-input
          label="牛号"
          label-width="100px"
          prop="value2"
          clearable
          v-model="model.value2"
          placeholder="请输入牛号"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <wd-input
          label="脖环号"
          label-width="100px"
          prop="value1"
          clearable
          v-model="model.value1"
          placeholder="请输入脖环号"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />

        <wd-datetime-picker
          type="date"
          v-model="model.date"
          label="日期"
          :rules="[{ required: true, message: '请选择日期' }]"
        />
      </wd-cell-group>
      <view class="footer mx-4 mt-6">
        <wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
      </view>
    </wd-form>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'

defineOptions({
  name: 'neckRing',
})

// const { success: showSuccess } = useToast()

const model = reactive<{
  value1: string
  value2: string
  date: number
}>({
  value1: '',
  value2: '',
  date: Date.now(),
})

const form = ref()

function handleSubmit1() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        // showSuccess({
        //   msg: '校验通过',
        // })
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
</script>

<style lang="scss" scoped>
.container {
  background: #fff;
}
</style>
