import React, { useRef, useState } from 'react';
import { connect } from 'react-redux';
import { Spin, Card, Modal, TreeSelect } from 'antd';
import ProForm, { ProFormText, ModalForm, ProFormSwitch, ProFormTreeSelect } from '@ant-design/pro-form';

const DepModal = (props) => {
  const { visible, onVisibleChange, onConfirm, depModalType, depData, data } = props;
  const formRef = useRef();
  const onFinish = (values) => {
    if (onConfirm) {
      if (depModalType === 'edit') {
        let value = {
          name: values.name,
          depId: data.id
        }
        onConfirm(value)
      } else {
        onConfirm(values);
      }

    }
  }

  return (
    <Spin spinning={false}>
      <ModalForm
        title={depModalType === 'edit' ? '编辑部门' : '新增部门'}
        visible={visible}
        onVisibleChange={onVisibleChange}
        onFinish={onFinish}
        formRef={formRef}
        destroyOnClose
        initialValues={data || null}
      >
        <ProFormText
          name={['name']}
          width="md"
          label="部门名称"
          required
          maxLength={10}
          placeholder="请输入部门名称"
          fieldProps={{
            autocomplete: 'new-password'
          }}
          rules={[
            { required: true, message: '请输入部门名称' }, { max: 20, message: '请输入10个字以内的名称' }
          ]}
        />
        <ProFormTreeSelect
          name={['dependence']}
          width="md"
          label="上级部门"
          autocomplete='off'
          placeholder="选择上级部门"
          fieldNames={{
            title: 'name',
            key: 'id',
            children: 'subordinate'
          }}
          request={async () => {
            return depData
          }}
        />
      </ModalForm>
    </Spin>
  )
}

function mapStateToProps(state) {
  const { depMessage } = state;
  console.log('depMessage:',depMessage);
  const pakData = (dep) => {
    return dep.map((d) => {
      return {
        title: d.name,
        value: d.id,
        // key: d.id,
        children: pakData(d.subordinate)
      }
    })
  }
  let depData = pakData(depMessage.data || [])
  console.log('depData:',depData);
  return {
    loading: depMessage.isRequesting,
    depData,
  };
}

export default connect(mapStateToProps)(DepModal);