import clsx from 'clsx';
import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { hdyjUnclose } from '../../../../models/_/hdyj';
import { OverallPromise } from '../../../../models/_/real';
import { ShqxYjhisLatest } from '../../../../models/_/shqxjs';
import { RealShWarnListPromise } from '../../../../models/_/shwarn';
import { yjLevelColor } from '../../../../utils/renutils';
import useRefresh from '../../../../utils/useRefresh';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
import ARzSk from './ARzSk';
import Hdyj from './Hdyj';
import Shqx from './Shqx';
import ShYj from './ShYj';
import { styled } from '@material-ui/styles';

import { RadioGroup, Radio, Switch, FormControlLabel, InputLabel, Select, MenuItem, FormControl } from '@material-ui/core/index';
import { backgroundColor } from 'echarts/lib/theme/dark';
import { Description } from '@material-ui/icons';
import DescriptionItem from '../../components/DescrptionItem';
export default function Warn({ style }) {
  const dispatch = useDispatch();
  const res = useSelector(s => s.runtime.yyObj)
  const [value, setValue] = React.useState(res.yy ?? '');
  const [yyValue, setYyValue] = React.useState(false);
  const StyledFormControlLabel = styled(FormControlLabel)({
    display: 'flex',
    // justifyContent: 'space-around',
    width: '100%',
    margin: '4px 0',
    padding: '4px 0',
    '.MuiFormControlLabel-label': {
      width: "100%",
      color: '#fff',
      order: -1  // 让文字在前面
    },
    '.MuiRadio-root': {
      color: '#fff',
      padding: '4px'
    }

  });

  const CustomSwitch = styled(Switch)({
    '& .MuiSwitch-switchBase': {
      color: '#fff',
      '&.Mui-checked': {
        color: '#1890ff',
        '& + .MuiSwitch-track': {
          backgroundColor: '#1890ff',
          opacity: 0.5,
        },
      },
    },
    '& .MuiSwitch-track': {
      backgroundColor: 'rgba(255, 255, 255, 0.3)',
    },
  });

  const StyledFormControlLabel1 = styled(FormControlLabel)({
    '& .MuiFormControlLabel-label': {
      color: '#fff'
    }
  });
  const [dimension, setDimension] = useState('fqh');
  const [checked, setChecked] = React.useState(false);
  const fayy = () => {
    setYyValue(true)
    if (value) {
      dispatch.runtime.setYyfa({ yy: value })
    }
  }

  // useEffect(() => {
  //   setValue(res.yy)
  // }, [res])
  const switchChange = (e) => {
    const val = e.target.checked
    setChecked(val)
    if (val) {
      dispatch.runtime.setCameraTarget({
        center: [114.81944, 31.12068],
        zoom: 13,
        pitch: 60,
      });
    } else {
      dispatch.runtime.setHome();

    }
  }
  const schemes = [
    { id: '2025001', name: '2025001预案' },
    { id: '2025002', name: '2025002预案' },
    { id: '2025003', name: '2025003预案' },
  ];
  const [selectedSchemes, setSelectedSchemes] = useState([]);

  const handleCompare = (schemeId) => {
    if (selectedSchemes.includes(schemeId)) {
      setSelectedSchemes(selectedSchemes.filter(id => id !== schemeId));
    } else if (selectedSchemes.length < 2) {
      setSelectedSchemes([...selectedSchemes, schemeId]);
    }
    // dispatch.runtime.setYyfa({})
  };
  
  useEffect(() => {
   dispatch.runtime.setDuibifx(selectedSchemes)
  }, [selectedSchemes])
  
  const productFa = () => {
    dispatch?.runtime.setInfoDlg({ layerId: 'YuananLayer', properties: {} })
    dispatch.runtime.setYyfa({})
    
  }
  const changeYY = (e) => {
    setValue(e.target.value)

    dispatch.runtime.setYyfa({})
  }
  return (
    <PanelBox
      style={{ ...style, position: 'relative' }}
      title="水库预演"
      color="green"
      tabs={
        <div style={{ display: 'flex', justifyContent: 'flex-end', columnGap: 10 }}>
          <span style={{ cursor: 'pointer', color: '#0066e4', padding: '4px 6px', border: '1px solid #175898' }} onClick={productFa}>自动生成方案</span>
          <span style={{ cursor: 'pointer', color: '#0066e4', padding: '4px 6px', border: '1px solid #175898' }} onClick={fayy}>加载方案</span>
        </div>
      }
    >
      <div >
        <FormControl fullWidth>
          <RadioGroup
            value={value}
            onChange={changeYY}

          >
            {
              schemes.map(item => (
                <StyledFormControlLabel
                  value={item.id}
                  control={<Radio />}
                  label={<div
                    style={{ display: 'flex', justifyContent: 'space-between', width: 370 }}>
                    <span >{item.name}</span>
                    <a style={{ fontSize: 14 }}
                      onClick={() => handleCompare(item.id)}>{selectedSchemes.includes(item.id) ? '取消对比' : '加入对比'}</a></div>}
                  style={{ color: "#fff" }} />
              ))
            }
          </RadioGroup>
        </FormControl>
        {res.yy &&
          <div style={{ color: "#fff", position: 'absolute', top: 90, left: '-380px' }}>
            <img src={`${process.env.PUBLIC_URL}/assets/yjzl.jpg`} alt="" style={{ width: 370 }} />
            {/* <div style={{ background: '#020c2b',padding:'5px 10px',opacity:1 }}>
            <div style={{color:'#c5d02c',fontSize:20}}>最大淹没范围</div>
            <div style={{display:'flex',columnGap:10}}>
              <span>淹没耕地:1824.8(公顷)</span>
              <span>淹没面积:48.9(平方公里)</span>
            </div>
             <span>淹没人口:3.211(万人)</span>
          </div> */}
            {/* <div>
             <img src={`${process.env.PUBLIC_URL}/assets/sl.jpg`} alt="" style={{ width: 421}} />
          </div> */}
          </div>}
      </div>
    </PanelBox>
  )
}