import React, { useState, useEffect } from 'react';
import { Form, Checkbox, Card, Button, notification, Modal, Input, Upload } from 'antd';
import { fetch, apis } from '../../../utils/request';
import ImageUpload from '../../../components/uploadImage/ImageUpload';

const getAdvanced = fetch(apis.member.advanced);
const authorizeAdvanced = fetch(apis.member.saveAdvanced);

const gridStyle = {
  width: '50%',
  textAlign: 'center',
};

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 2 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

const Advanced = (props) => {
  const { getFieldDecorator } = props.form;
  const [menus, setMenus] = useState([])
  const [checkOpts, setCheckOptions] = useState({checkedList: [], indeterminate: true, checkAll: false})

  const user = props.data || {}

  useEffect(() => {
    if (user && user.userId) {
      getAdvanced({ params: {orgId: user.orgId} }).then((data) => {
        let checkedList = []
        const modules = (data.list || []).map(item => {
          if (item.hasRights) {
            checkedList.push(item.advancedConfigId)
          }
  
          return {
            label: item.advancedConfigName,
            value: item.advancedConfigId,
          }
        })
        props.form.setFieldsValue(data.taWxPayConfig)
        setMenus(modules);
        setCheckOptions({
          checkedList,
          indeterminate: !!checkedList.length && checkedList.length < modules.length,
          checkAll: checkedList.length === modules.length
        })
      }).catch(x => x)
    }
  }, [user.userId])

  const handleChange = (checkedList) => {
    setCheckOptions({
      checkedList,
      indeterminate: !!checkedList.length && checkedList.length < menus.length,
      checkAll: checkedList.length === menus.length
    })
  }

  const checkAllChange = (e) => {
    setCheckOptions({
      checkedList: e.target.checked ? menus.map(x => x.value) : [],
      indeterminate: false,
      checkAll: e.target.checked,
    })
  }

  const CheckAll = (
    <Checkbox
      indeterminate={checkOpts.indeterminate}
      onChange={checkAllChange}
      checked={checkOpts.checkAll}
    > 全选 </Checkbox>
  )

  const handleSubmit = () => {
    const data = {
      orgId: user.orgId,
      menus: checkOpts.checkedList,
      wxPayData: props.form.getFieldsValue()
    }

    authorizeAdvanced({ data }).then(() => {
      notification.success({ message: '更新高级配置成功' })
    }).catch(x => x)
  }

  const handleCancel = () => {
    if (typeof props.onCancel === 'function') {
      props.onCancel()
    }
  }

  return (
    <div>
      <Card title="功能开放" extra={CheckAll} bordered={false}>
        <Checkbox.Group
          value={checkOpts.checkedList}
          onChange={handleChange}
        >
          {menus.map((menu, inx) => {
            return (
              <Card.Grid hoverable={false} style={gridStyle} key={inx}>
                <Checkbox value={menu.value}>{menu.label}</Checkbox>
              </Card.Grid>
            )
          })}
        </Checkbox.Group>
      </Card>
      <Card title="支付配置" bordered={false}>
        <Form {...formItemLayout} >
            <Form.Item label="商户号">
              {getFieldDecorator('mchId')(<Input />)}
            </Form.Item>
            <Form.Item label="appid">
              {getFieldDecorator('appid')(<Input />)}
            </Form.Item>
            <Form.Item label="API秘钥">
              {getFieldDecorator('mchKey')(<Input />)}
            </Form.Item>
            <Form.Item label="API证书">
              {getFieldDecorator('apiPath')(<ImageUpload />)}
            </Form.Item>
        </Form>
      </Card>
      <div style={{ padding: '36px 100px' }}>
        <Button type="primary" onClick={handleSubmit}>提交</Button>
        <Button style={{ marginLeft: '36px' }} onClick={handleCancel}>取消</Button>
      </div>
    </div>
  );
}
const WrappedAdvancedForm = Form.create({ name: 'Advanced' })(Advanced);
export default WrappedAdvancedForm;
