import { View } from '@tarojs/components';
import Taro, { useLoad } from '@tarojs/taro';

import { Button, Form, NavBar } from 'antd-mobile';
import Alipay from './components/Alipay';
import Wxpay from './components/Wxpay';
import BankPay from './components/BankPay';

import styles from './index.module.less';
import { useEffect } from 'react';
import { getShopInfoAction, updateShopInfoAction } from '../../request/actions';

export default function Payforget() {
  const [form] = Form.useForm();

  useEffect(() => {
    getShopInfoAction().then(res => {
      console.log('res: ', res);
      form.setFieldsValue(res);
    });
  }, []);

  const handleBack = () => {
    Taro.navigateTo({
      url: '/pages/mine/index'
    });
  };

  const handleVery = async () => {
    try {
      const values = await form.validateFields();
      console.log('values: ', values);
      await updateShopInfoAction(values);
      Taro.navigateTo({ url: '/pages/index/index' });
    }
    catch (err) {
      console.log('err: ', err);
    }
  };

  return (
    <View className={styles.container}>
      <NavBar onBack={handleBack} style={{ padding: 0 }}>
        支付方式
      </NavBar>
      <View className={styles.wrapper}>
        <Form form={form} className={styles.form} layout='vertical'>
          <Form.Item name='shopLogo' hidden />
          <Form.Item name='licenseImage' hidden />
          <Form.Item name='shopName' hidden />
          <Form.Item name='contacts' hidden />
          <Form.Item name='telephone' hidden />
          <Alipay />
          <Wxpay />
          <BankPay />
          <Button
            className={styles.btn}
            color='primary'
            shape='rounded'
            onClick={handleVery}
          >
            提交审核
          </Button>
        </Form>
      </View>
    </View>
  )
}