<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '诊断录入',
  },
}
</route>

<template>
  <view class="container">
    <wd-form ref="form" :model="model" class="px-2">
      <wd-cell-group border custom-class="group" title="诊断信息">
        <wd-input
          label="牛号"
          label-width="100px"
          prop="value2"
          clearable
          v-model="model.value2"
          placeholder="请输入牛号"
          required
        />
        <wd-cell title="诊断" title-width="100px" prop="value1" right required>
          <view>
            <wd-radio-group v-model="model.type" shape="dot" inline @change="change">
              <wd-radio :value="1">治疗</wd-radio>
              <wd-radio :value="2">正常</wd-radio>
              <wd-radio :value="3">淘汰</wd-radio>
            </wd-radio-group>
          </view>
        </wd-cell>
        <wd-cell title="疾病" title-width="100px" prop="value1" right required>
          <text></text>
          <wd-icon name="arrow-right" size="18px" color="#BFBFBF" @click="handleRoute"></wd-icon>
        </wd-cell>

        <wd-cell title="是否治疗" title-width="100px" prop="value1" right required>
          <view>
            <wd-radio-group v-model="model.type" shape="button" inline @change="change">
              <wd-radio :value="1">是</wd-radio>
              <wd-radio :value="0">否</wd-radio>
            </wd-radio-group>
          </view>
        </wd-cell>
        <wd-cell title="治疗方案" title-width="100px" prop="value1" right required>
          <text></text>
          <wd-icon
            name="arrow-right"
            size="18px"
            color="#BFBFBF"
            @click="handleCaseRoute"
          ></wd-icon>
        </wd-cell>

        <wd-calendar
          label="日期"
          prop="date"
          label-width="100px"
          type="datetime"
          hide-second
          v-model="model.date"
          :min-date="minDate"
          :max-date="maxDate"
          :disabled-date="disableFutureDates"
        />

        <wd-textarea
          label="备注信息"
          label-width="100px"
          v-model="model.remark"
          :maxlength="200"
          clearable
          show-word-limit
          placeholder="请输入备注"
          auto-height
        />
      </wd-cell-group>
      <view class="footer mt-5 pb-20 center">
        <wd-button type="info" size="medium" class="mr-4" @click="goBack">取消</wd-button>
        <wd-button type="primary" size="medium" @click="handleSubmit">提交</wd-button>
      </view>
    </wd-form>
  </view>
</template>

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

defineOptions({
  name: 'neckRing',
})
// 品种选择
const columns = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'])

function handleConfirm({ value }) {
  value.value = value
}

// 日期选择器
const today = new Date()
const minDate = ref(new Date(2000, 0, 1)) // 可选择的最早日期
const maxDate = ref(today)

const disableFutureDates = (date: Date) => {
  return date > today
}

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

// 疾病页面
function handleRoute() {
  uni.navigateTo({ url: '/pages/disease/disease' })
}

// 方案页面
function handleCaseRoute() {
  uni.navigateTo({ url: '/pages/treatMent/treatMent' })
}
const form = ref()

function handleSubmit() {
  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>
