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

const { SHOW_PARENT } = TreeSelect

const initialValues = {}

export default class data extends Component {
    state = {
        // 加载状态
        loading: true,
        dataScopeType: [],
        orgTreeData: [],
        arerTreeData: [],
        orgCheckedKeys: [],

        isDefine: false,
    }

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

    // 初始化数据
    record = {}

    /**
     * mount后回调
     */
    componentDidMount() {
        this.props.created && this.props.created(this)
    }

    /**
     * 填充数据
     * 可以在设置this.record之后对其作出数据结构调整
     * [异步,必要]
     * @param {*} params
     */
    async fillData(params) {
        this.record = cloneDeep(params.record)
        //#region 从后端转换成前段所需格式
        const { dataScopeType } = await getDictData('data_scope_type')
        const orgTreeData = await this.onLoadOrgTreeData()
        const arerTreeData = await this.onLoadAreaTreeData()
        const orgCheckedKeys = await this.onLoadRoleOwn(this.record.id)
        this.setState({
            dataScopeType,
            orgTreeData,
            arerTreeData,
            orgCheckedKeys,
        })
        //#endregion
        this.form.current.setFieldsValue({
            dataScopeType: this.record.dataScopeType.toString(),
        })

        this.onChange(this.record.dataScopeType)

        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.record) {
                postData.id = this.record.id
            }
            //#region 从前段转换后端所需格式
            //#endregion
            return postData
        }
    }

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

    async onLoadAreaTreeData() {
        const { data } = await api.getAreaTree()
        return data
    }

    async onLoadRoleOwn(id) {
        const { data } = await api.sysRoleOwnData({ id })
        return data
    }

    onChange(value) {
        if (value == 5) {
            this.setState({
                isDefine: true,
            })
        } else {
            this.setState({
                isDefine: false,
            })
        }
    }
    //#endregion

    render() {
        return (
            <Form initialValues={initialValues} ref={this.form} className="yo-form">
                <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
                    <div className="yo-form-group">
                        <Form.Item label="授权范围" name="dataScopeType">
                            <Select
                                placeholder="请选择授权范围"
                                onChange={value => this.onChange(value)}
                            >
                                {this.state.dataScopeType.map(item => {
                                    return (
                                        <Select.Option key={item.code} value={item.code}>
                                            {item.value}
                                        </Select.Option>
                                    )
                                })}
                            </Select>
                        </Form.Item>
                        {this.state.isDefine && (
                            <>
                                <Form.Item label="选择机构" name="grantOrgIdList">
                                    <TreeSelect
                                        showCheckedStrategy={SHOW_PARENT}
                                        treeData={this.state.orgTreeData}
                                        placeholder="请选择机构"
                                        treeCheckable
                                    />
                                </Form.Item>
                                <Form.Item
                                    label="选择区域"
                                    name="grantAreaCodeList"
                                    help="缺少获取已保存的列表,react版本节点名无法设置"
                                >
                                    <TreeSelect
                                        showCheckedStrategy={SHOW_PARENT}
                                        treeData={this.state.arerTreeData}
                                        placeholder="请选择所属区域"
                                        treeCheckable
                                    />
                                </Form.Item>
                            </>
                        )}
                    </div>
                </Spin>
            </Form>
        )
    }
}
