import React from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import { Dialog, CellGroup, Field, Button } from '@antmjs/vantui';
import { warn } from '@/utils/message';

export default (props) => {

  const { show, onClose, onSubmit } = props;
  const id = React.useMemo(() => {
    return `dialog-${Math.random().toString(36).substring(2, 10)}`
  }, []);

  const [formData, setFormData] = React.useState({});

  const setField = (name, value) => {
    setFormData({
      ...formData,
      [name]: value,
    })
  }

  const onConfirm = () => {
    console.log(formData.newPassword)
    try {
      warn(formData.newPassword != formData.newPassword2, '两次新密码不一致');
      warn(!formData.originPassword, '请输入原始密码');
      warn(!formData.newPassword, '请输入新密码');
    } catch (er) {
      return ;
    }

    onClose();
    onSubmit(formData);
  }
  
  return (
    <Dialog
      showConfirmButton={false}
      showCancelButton={false}
      id={id}
      show={show}
      onClose={onClose}
    >
      <View style={{ padding: 'var(--main-space)', textAlign: 'center' }}>修改密码</View>
      <CellGroup style={{ padding: 'var(--main-space)' }}>
        <Field
          required
          label="原始密码"
          type="password"
          placeholder="请输入原始密码"
          value={formData.originPassword}
          onChange={(e) => setField('originPassword', e.detail)}
        />
        <Field
          required
          label="新密码"
          type="password"
          placeholder="请输入新密码"
          value={formData.newPassword}
          onChange={(e) => setField('newPassword', e.detail)}
        />
        <Field
          required
          label="确认密码"
          type="password"
          placeholder="请再次输入新密码"
          value={formData.newPassword2}
          onChange={(e) => setField('newPassword2', e.detail)}
        />
      </CellGroup>
      <View style={{ display: 'flex', justifyContent: "space-around", alignItems: 'center' }}>
        <View style={{ flex: 'none' }}>
          <Button plain onClick={onClose}>取消</Button>
        </View>
        <View style={{ flex: 'none' }}>
          <Button plain type="primary" onClick={onConfirm}>确定</Button>
        </View>
      </View>
    </Dialog>
  )
}
