import React, { Component } from 'react'
import { Form, Spin, TreeSelect } from 'antd'
import { AntIcon } from 'components'
import { cloneDeep } from 'lodash'
import { api } from 'common/api'

export default class data extends Component {
    state = {
        // 加载状态
        loading: true,

        options: {
            orgData: [],
            areaData: [],
            orgCheckedKeys: [],
        },
    }

    // 表单实例
    form = React.createRef()

    // 初始化数据
    id = ''

    /**
     * mount后回调
     */
    componentDidMount() {
        this.props.created && this.props.created(this)
    }
    async fillData(params) {
        this.id = params.id
        //#region 从后端转换成前段所需格式
        const orgData = await this.loadOrgData()
        const areaData = await this.loadAreaData()
        const orgCheckedKeys = await this.loadMemberOwn(this.id)
        this.setState({
            options: {
                orgData,
                areaData,
                orgCheckedKeys,
            },
        })
        this.form.current.setFieldsValue({
            id: this.id,
            grantOrgIdList: orgCheckedKeys,
            grantAreaCodeList: [],
        })

        this.setState({
            loading: false,
        })
    }
    /**
     * 获取数据
     * 可以对postData进行数据结构调整
     * [异步,必要]
     * @returns
     */
    async getData() {
        const form = this.form.current

        const valid = await form.validateFields()
        if (valid) {
            const postData = form.getFieldsValue()
            if (this.id) {
                postData.id = this.id
            }
            //#region 从前段转换后端所需格式
            //#endregion
            return postData
        }
    }

    //#region 自定义方法
    async loadOrgData() {
        const { data } = await api.getOrgTree()
        return data
    }

    async loadAreaData() {
        const { data } = await api.getAreaTree()
        return data
    }
    async loadMemberOwn(id) {
        const { data } = await api.sysUserOwnData({ id })
        return data
    }
    render() {
        return (
            <Form ref={this.form} className="yo-form">
                <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
                    <div className="yo-form-group">
                        <Form.Item label="选择机构" name="grantOrgIdList">
                            <TreeSelect
                                showCheckedStrategy="SHOW_PARENT"
                                treeData={this.state.options.orgData}
                                placeholder="请选择机构"
                                treeCheckable
                            />
                        </Form.Item>
                        <Form.Item label="选择区域" name="grantAreaCodeList">
                            <TreeSelect
                                showCheckedStrategy="SHOW_PARENT"
                                treeData={this.state.options.areaData}
                                placeholder="请选择所属区域"
                                treeCheckable
                            />
                        </Form.Item>
                    </div>
                </Spin>
            </Form>
        )
    }
}