<template>
  <div class="container">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
            v-model="form.name"
            name="姓名"
            label="姓名"
            placeholder="姓名"
            required
            :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
            v-model="form.duties"
            name="职务"
            label="职务"
            placeholder="职务"
            required
            :rules="[{ required: true, message: '请填写职务' }]"
        />
        <van-field
            v-model="form.unit"
            name="单位"
            label="单位"
            placeholder="单位"
            required
            :rules="[{ required: true, message: '请填写单位' }]"
        />
        <van-field
            v-model="form.phone"
            name="联系方式"
            label="联系方式"
            placeholder="联系方式"
            required
            :rules="[
                { required: true, message: '请填写联系方式' },
                { validator: validatePhone, message: '请输入正确的联系方式' }
            ]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          {{ type === '1' ? '确定签到' : '确定签退' }}
        </van-button>
        <van-button round block type="default" style="margin-top: 20px" @click="handleCancel">
          {{ type === '1' ? '取消签到' : '取消签退' }}
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script lang="ts" setup name="signPage">
import {onMounted, ref} from "vue";
import {validatePhone} from "@/utils/validate";
import {showSuccessToast} from "vant";

// 1 签到 2 签退
const type = ref('1');
const form = ref({
  name: '',
  duties: '',
  unit: '',
  phone: ''
})

// 提交
const onSubmit = () => {
  const submitMethod = type.value === '1' ? '1' : '2';
  showSuccessToast(type.value === '1' ? '签到成功' : '签退成功');
}
// 取消
const handleCancel = () => {
  const cancelMethod = type.value === '1' ? '1' : '2';
  showSuccessToast(type.value === '1' ? '取消签到成功' : '取消签退成功');
}
onMounted(() => {
  type.value = '1';
  if (type.value === '2') {
    form.value = {
      name: '张胜',
      duties: 'xxx',
      unit: 'xxx',
      phone: '18782728732'
    }
  }
})
</script>

<style lang="scss" scoped>
.container {
  //padding-top: 25px;
}
</style>
