import {
  Checkbox,
  CheckboxProps,
  Col,
  ConfigProvider,
  Flex,
  GetProp,
  Row,
} from 'antd';
import React, { useState } from 'react';
import styles from './index.less';
const plainOptions = ['Apple', 'Pear', 'Orange'];
const FilterTree: React.FC = () => {
  const [selected, setSelected] = useState([]);
  const [checkedList, setCheckedList] = useState<string[]>([]);
  const onChange: GetProp<typeof Checkbox.Group, 'onChange'> = (
    checkedValues,
  ) => {
    console.log('checked = ', checkedValues);
  };
  const checkAll = plainOptions.length === checkedList.length;

  const indeterminate =
    checkedList.length > 0 && checkedList.length < plainOptions.length;

  const onCheckAllChange: CheckboxProps['onChange'] = (e) => {
    setCheckedList(e.target.checked ? plainOptions : []);
  };
  return (
    <div className={styles.container}>
      <div className={styles.title}>图层图例</div>
      <ConfigProvider
        theme={{
          components: {
            Checkbox: {
              controlInteractiveSize: 20,
              colorBgContainer: 'rgb(50, 111, 167)',
              colorPrimary: '#1686FF',
              colorPrimaryHover: '#1686FF',
            },
          },
        }}
      >
        <Checkbox.Group style={{ width: '100%' }} onChange={onChange}>
          <Row>
            <Col span={24} className={styles.rowItem}>
              <Checkbox value={'4'}>
                <div>
                  <div className={styles.checkTitle}>安全风险</div>

                  <Flex align="center" gap={8} className={styles.subChildren}>
                    <img
                      src={require('@/assets/images/keyArea/risk1.png')}
                      alt=""
                    ></img>
                    重大风险
                  </Flex>
                  <Flex align="center" gap={8} className={styles.subChildren}>
                    <img
                      src={require('@/assets/images/keyArea/risk2.png')}
                      alt=""
                    ></img>
                    较大风险
                  </Flex>
                  <Flex align="center" gap={8} className={styles.subChildren}>
                    <img
                      src={require('@/assets/images/keyArea/risk3.png')}
                      alt=""
                    ></img>
                    一般风险
                  </Flex>
                </div>
              </Checkbox>
            </Col>
            <Col span={24} className={styles.rowItem}>
              <Checkbox value={'5'}>
                <div>
                  <div className={styles.checkTitle}>城市问题</div>

                  <Flex align="center" gap={8} className={styles.subChildren}>
                    <img
                      src={require('@/assets/images/keyArea/q3.png')}
                      alt=""
                    ></img>
                    疑难问题
                  </Flex>
                  <Flex align="center" gap={8} className={styles.subChildren}>
                    <img
                      src={require('@/assets/images/keyArea/q4.png')}
                      alt=""
                    ></img>
                    待处置
                  </Flex>
                </div>
              </Checkbox>
            </Col>

            <Col span={24} className={styles.rowItem}>
              <Checkbox
                indeterminate={indeterminate}
                onChange={onCheckAllChange}
                checked={checkAll}
              >
                <div className={styles.checkTitle}>感知源</div>
              </Checkbox>
            </Col>
            <Col span={24} className={styles.rowItem}>
              <Checkbox value={'1'}>
                <Flex align="center" gap={8}>
                  <img
                    src={require('@/assets/images/keyArea/phone.png')}
                    alt=""
                  ></img>
                  <div className={styles.checkTitle2}>固定视频</div>
                </Flex>
              </Checkbox>
            </Col>
            <Col span={24} className={styles.rowItem}>
              <Checkbox value={'2'}>
                <Flex align="center" gap={8}>
                  <img
                    src={require('@/assets/images/keyArea/car.png')}
                    alt=""
                  ></img>
                  <div className={styles.checkTitle2}>移动车载</div>
                </Flex>
              </Checkbox>
            </Col>
            <Col span={24} className={styles.rowItem}>
              <Checkbox value={'3'}>
                <Flex align="center" gap={8}>
                  <img
                    src={require('@/assets/images/keyArea/people.png')}
                    alt=""
                  />
                  <div className={styles.checkTitle2}>监督员</div>
                </Flex>
              </Checkbox>
            </Col>
          </Row>
        </Checkbox.Group>
      </ConfigProvider>
    </div>
  );
};

export default FilterTree;
