import risk1 from '@/assets/images/urbanSituation/risk1.svg';
import risk2 from '@/assets/images/urbanSituation/risk2.svg';
import risk3 from '@/assets/images/urbanSituation/risk3.svg';
import risk4 from '@/assets/images/urbanSituation/risk4.svg';
import { ConfigProvider, Tree } from 'antd';
import { memo } from 'react';
import styles from './index.less';
const LeftTab = ({
  leftTabKey,
  checkedKeys,
  setLeftTabKey,
  setCheckedKeys,
}: {
  leftTabKey: string;
  checkedKeys: any[];
  setLeftTabKey: (val: any) => void;
  setCheckedKeys: (val: any[]) => void;
}) => {
  return (
    <div className={styles.container}>
      <div className={styles.menuBg}></div>
      <div style={{ position: 'relative', zIndex: 1000 }}>
        <div className={styles.title}>图层图例</div>
        <div
          className={styles.leftTab}
          style={{ background: leftTabKey == '1' ? 'rgb(19, 146, 224)' : '' }}
          onClick={() => setLeftTabKey('1')}
        >
          CQI
        </div>

        <div className={styles.itemWarp}>
          <div className={styles.mark} style={{ backgroundColor: '#57EF58' }} />
          <div>良好态 &gt;95</div>
        </div>
        <div className={styles.itemWarp}>
          <div
            className={styles.mark}
            style={{ backgroundColor: 'rgb(68, 127, 240)' }}
          />
          <div>正常态 85-95</div>
        </div>
        <div className={styles.itemWarp}>
          <div className={styles.mark} style={{ backgroundColor: '#FFA81A' }} />
          <div>预警态 &lt;85</div>
        </div>
        <div className={styles.itemWarp}>
          <div className={styles.mark} style={{ backgroundColor: '#F24F4F' }} />
          <div>应急态</div>
        </div>
        <div
          className={styles.leftTab}
          style={{ background: leftTabKey == '2' ? 'rgb(19, 146, 224)' : '' }}
          onClick={() => setLeftTabKey('2')}
        >
          风险预警与问题分布
        </div>
        {leftTabKey == '2' && (
          <ConfigProvider
            theme={{
              token: {},
              components: {
                Tree: {
                  directoryNodeSelectedBg: '#133c6d',
                },
              },
            }}
          >
            <Tree
              checkable
              defaultExpandAll
              onCheck={(e: any) => {
                setCheckedKeys(e);
              }}
              checkedKeys={checkedKeys}
              treeData={[
                {
                  title: '安全风险',
                  key: '安全风险',
                  disabled: true,
                  children: [
                    {
                      title: (
                        <div className={styles.treeTitle}>
                          <img src={risk1} alt=""></img>红色风险
                        </div>
                      ),
                      key: '红色预警',
                      disabled: true,
                    },
                    {
                      title: (
                        <div className={styles.treeTitle}>
                          <img src={risk2} alt=""></img>橙色风险
                        </div>
                      ),
                      disabled: true,
                      key: '橙色预警',
                    },
                    {
                      title: (
                        <div className={styles.treeTitle}>
                          <img src={risk3} alt=""></img>黄色风险
                        </div>
                      ),
                      disabled: true,
                      key: '黄色预警',
                    },
                    {
                      title: (
                        <div className={styles.treeTitle}>
                          <img src={risk4} alt=""></img>一般风险
                        </div>
                      ),
                      disabled: true,
                      key: '一般预警',
                    },
                  ],
                },
                {
                  title: '城市问题',
                  key: '城市问题',
                  children: [
                    {
                      title: (
                        <div className={styles.treeTitle}>
                          <img
                            src={require('@/assets/images/wtIc.png')}
                            alt=""
                          ></img>
                          其他问题
                        </div>
                      ),
                      key: '其他问题',
                    },
                    {
                      title: (
                        <div className={styles.treeTitle}>
                          <img
                            alt=""
                            src={require('@/assets/images/tuchuIc.png')}
                          ></img>
                          突出问题
                        </div>
                      ),
                      key: '突出问题',
                    },
                  ],
                },
              ]}
            />
          </ConfigProvider>
        )}
      </div>
    </div>
  );
};

export default memo(LeftTab);
