import { Button, Col, Divider, Form, Radio, Row, Select } from 'antd';
import { useState, useEffect } from 'react'
import ZoneSelector from '../../../../common/ZoneSelector';
import CdzyApi from '../../../../../utils/apis/CdzyApi';

const toAlb = (text) => {
    return text?.replace('一', '1')
        ?.replace('二', '2')
        ?.replace('三', '3')
        ?.replace('四', '4')
        ?.replace('五', '5')
        ?.replace('六', '6')
        ?.replace('七', '7')
        ?.replace('八', '8')
        ?.replace('九', '9')
}

export default function CdzyFilter(props) {

    const [cdxDatas, setCdxDatas] = useState([]);
    const [cydjDatas, setCydjDatas] = useState([]);
    const [form] = Form.useForm();

    useEffect(() => {
        CdzyApi.minTypeAreaProportion().then(resp => {
            setCdxDatas(resp.data);
        })
    }, [])
    useEffect(() => {
        CdzyApi.areaProportion().then(resp => {
            setCydjDatas(resp.data);
        })
    }, [])

    useEffect(() => {
        form.setFieldsValue({
            area_code: "-1",
            grass_type: "-1",
            grass_min_type: "-1",
            grassland_level: "-1"
        })
    }, [form])

    return <Form form={form} layout={"vertical"}>
        <Form.Item label="行政地域" name="area_code">
            <ZoneSelector />
        </Form.Item>
        <Divider style={{
            borderColor: "#075C88"
        }} />
        <Form.Item label="草地类" name="grass_type">
            <Radio.Group>
                <Radio value={"-1"}>全部</Radio>
                <Radio value={"高寒草甸类"}>高寒草甸类</Radio>
                <Radio value={"低地草甸类"}>低地草甸类</Radio>
                <Radio value={"山地草甸类"}>山地草甸类</Radio>
            </Radio.Group>
        </Form.Item>
        <Divider style={{
            borderColor: "#075C88"
        }} />
        <Row>
            <Col span={11}>
                <Form.Item label="草原型" name="grass_min_type">
                    <Select options={[{
                        label: '全部',
                        value: "-1"
                    }, ...cdxDatas?.map(item => {
                        return {
                            label: item.grassMinType,
                            value: item.grassMinType
                        }
                    })]} />
                </Form.Item>
            </Col>
            <Col span={2}></Col>
            <Col span={11}>
                <Form.Item label="草原等级" name="grassland_level">
                    <Select options={[{
                        label: '全部',
                        value: "-1"
                    }, ...cydjDatas?.map(item => {
                        return {
                            label: item.name,
                            value: toAlb(item.name)
                        }
                    })]} />
                </Form.Item>
            </Col>
        </Row>
        <Form.Item style={{
            textAlign: "right",
            marginBottom: 0
        }}>
            <Button style={{
                // background:"#0288F8"
            }} size='large' onClick={e => {
                const values = form.getFieldsValue();
                const filterStr = Object.keys(values).map(key => {
                    if (values[key] !== '-1') {
                        if (key === 'area_code') {
                            return `${key} like '${values[key]}%'`
                        }
                        return `${key} = '${values[key]}'`;
                    }
                    return null;
                }).filter(v => v).join(' and ')
                props?.onOk?.(filterStr)
            }}>确定</Button>
        </Form.Item>
    </Form>;
}