<script setup lang="tsx">
import { Form, FormSchema } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { PropType, watch, ref } from 'vue'
import { FormRules } from 'element-plus'
import { getUserDetail } from '@/api/user'
import { formatToDate } from '@/utils/dateUtil'
import { useValidator } from '@/hooks/web/useValidator'

const { required, phone } = useValidator()

const props = defineProps({
  currentRow: {
    type: Number,
    default: () => null
  },
  levelList: {
    type: Array as PropType<any>,
    default: () => []
  },
  groupList: {
    type: Array as PropType<any>,
    default: () => []
  },
  type: {
    type: String,
    default: ''
  }
})

const formSchema = ref<FormSchema[]>([
  {
    field: 'real_name',
    label: '真实姓名',
    component: 'Input',
    componentProps: {
      placeholder: '请输入姓名'
    }
  },
  {
    field: 'phone',
    label: '手机号',
    component: 'Input',
    componentProps: {
      type: 'number',
      placeholder: '请输入管理员账号'
    }
  },
  {
    field: 'birthday',
    label: '生日',
    component: 'DatePicker',
    componentProps: {
      placeholder: '请选择生日日期'
    }
  },
  {
    field: 'card_id',
    label: '身份证',
    component: 'Input',
    componentProps: {
      placeholder: '请输入身份证'
    }
  },
  {
    field: 'sex',
    label: '性别',
    value: 0,
    component: 'Select',
    componentProps: {
      placeholder: '请输入管理员账号',
      options: [
        {
          label: '保密',
          value: 0
        },
        {
          label: '男',
          value: 1
        },
        {
          label: '女',
          value: 2
        }
      ]
    }
  },
  {
    field: 'group_id',
    label: '用户分组',
    component: 'Select',
    componentProps: {
      placeholder: '会员分组',
      options: props.groupList
    }
  },
  {
    field: 'pwd',
    label: '密码',
    component: 'InputPassword',
    componentProps: {
      strength: true,
      placeholder: '请输入登录密码'
    }
  },
  {
    field: 'true_pwd',
    label: '确认密码',
    component: 'InputPassword',
    componentProps: {
      strength: true,
      placeholder: '请输入重复输入登录密码'
    }
  },
  {
    field: 'trade_pwd',
    label: '交易密码',
    component: 'Input',
    componentProps: {
      maxlength: 6,
      minlength: 6,
      type: 'password',
      placeholder: '请输入6位交易密码'
    }
  },
  {
    field: 'true_trade_pwd',
    label: '确认交易密码',
    component: 'Input',
    componentProps: {
      maxlength: 6,
      minlength: 6,
      type: 'password',
      placeholder: '请输入重复输入交易密码'
    }
  },

  {
    field: 'level',
    label: '会员等级',
    component: 'Select',
    componentProps: {
      placeholder: '会员等级修改',
      options: props.levelList
    }
  },

  {
    field: 'is_promoter',
    label: '推广员',
    component: 'Switch',
    value: false,
    componentProps: {
      inlinePrompt: true,
      activeText: '开启',
      inactiveText: '关闭'
    }
  },
  {
    field: 'spread_uid',
    label: '推荐人ID',
    component: 'Input',
    componentProps: {
      type: 'number',
      placeholder: '请输入推荐人ID'
    }
  },
  {
    field: 'status',
    label: '状态',
    component: 'Switch',
    value: true,
    componentProps: {
      inlinePrompt: true,
      activeText: '开启',
      inactiveText: '关闭'
    }
  },
  {
    field: 'mark',
    label: '备注',
    colProps: {
      span: 24
    },
    component: 'Input',
    componentProps: {
      type: 'textarea',
      rows: 4,
      placeholder: '请输入备注内容'
    }
  },
  {
    field: 'uid',
    label: '用户id',
    hidden: true,
    component: 'Input'
  }
])

const rules = ref<FormRules>({
  phone: [required('请填写手机号'), phone()],
  pwd: [{}],
  true_pwd: [
    {
      validator: (_, val, callback) => {
        // console.log(item)
        getFormData().then((formData) => {
          if (!val) return callback()
          if (formData.pwd !== val) {
            callback(new Error('两次密码不一致'))
          } else {
            callback()
          }
        })
      }
    }
  ],
  true_trade_pwd: [
    {
      validator: (_, val, callback) => {
        // console.log(item)
        getFormData().then((formData) => {
          if (!val) return callback()
          if (formData.trade_pwd && formData.trade_pwd !== val) {
            callback(new Error('两次密码不一致'))
          } else {
            callback()
          }
        })
      }
    }
  ]
})
watch(
  () => props.type,
  (val) => {
    if (!val) {
      rules.value.pwd = [required('请填写密码')]
    }
  },
  { immediate: true }
)
const { formRegister, formMethods } = useForm()
const { setValues, getFormData, getElFormExpose } = formMethods

const submit = async () => {
  const elForm = await getElFormExpose()
  const valid = await elForm?.validate().catch((err) => {
    console.log(err)
  })
  if (valid) {
    const formData = await getFormData()
    return formData
  }
}
const loading = ref(true)
watch(
  () => props.currentRow,
  async (value) => {
    if (!value) return (loading.value = false)
    const { data } = await getUserDetail(value)
    const currentRow = {
      uid: data.uid,
      real_name: data.real_name,
      phone: data.phone,
      pwd: '',
      true_pwd: '',
      trade_pwd: '',
      true_trade_pwd: '',
      sex: data.sex,
      spread_uid: data.spread_uid == 0 ? '' : data.spread_uid,
      is_promoter: data.is_promoter == 1 ? true : false,
      card_id: data.card_id,
      birthday: formatToDate(data.birthday * 1000),
      mark: data.mark,
      status: data.status == 1 ? true : false,
      level: data.level == 0 ? '' : data.level,
      group_id: data.group_id == 0 ? '' : data.group_id
    }
    loading.value = false
    setValues(currentRow)
  },
  {
    deep: true,
    immediate: true
  }
)

defineExpose({
  submit
})
</script>

<template>
  <Form v-loading="loading" :rules="rules" @register="formRegister" :schema="formSchema" />
</template>
