<template>
  <page-layout class="bg-white">
    <q-form ref="formRef" @submit="submit">
      <q-input
        v-model="form.name"
        label="员工姓名"
        placeholder="请输入员工姓名"
        class="bg-white q-px-md"
        :rules="[Rules.required]"
      />
      <q-input
        v-model="form.phone"
        label="手机号"
        placeholder="请输入员工手机号"
        class="bg-white q-px-md"
        :rules="[Rules.required,Rules.phone]"
      />
      <q-input
        v-model="form.password"
        label="登录密码"
        :rules="[Rules.required,Rules.password]"
        type="password"
        class="bg-white q-px-md"
      />
      <q-input
        v-model="form.password_confirmation"
        label="确认密码"
        :rules="[Rules.required,Rules.sameAs(form.password,'两次密码不一致')]"
        type="password"
        class="bg-white q-px-md"
      />
      <div class="q-ma-md">
        <p class="text-grey q-mb-md">注：员工手机号将作为登录账号使用</p>
        <q-btn unelevated color="primary" class="fit" type="submit">创建</q-btn>
      </div>
    </q-form>
  </page-layout>
</template>
<script setup>
import { reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useSelfStore } from "stores/self";
import {Rules} from 'src/utils/tools'
import { api } from "boot/axios";
import { useQuasar } from "quasar";
const $q = useQuasar()
const route = useRoute();
const router = useRouter();
const store = useSelfStore();

const form = reactive({
  id: route.params.workerId,
  name: '',
  phone: '',
  password:'',
  password_confirmation:''
});
function submit() {
  $q.loading.show()
  api.addWorker(form).then(res => {
    $q.notify({type: 'positive',message: res.message || form.id?'创建成功':'修改成功'})
    // router.replace('/shop/worker/'+res.id)
    router.back()
  }).catch(e=>{
    $q.notify({type: 'negative',message: e.message})
  }).finally(()=>{
    $q.loading.hide()
  })
}
</script>
