import React, { useState,useEffect } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { 
  Paper, 
  Table, 
  TableBody, 
  TableCell, 
  TableContainer, 
  TableHead, 
  TableRow,
  TextField,
  Button,
  Box,
  IconButton,
  ButtonGroup,
  Grid
} from '@material-ui/core';
import SearchIcon from '@material-ui/icons/Search';
import RefreshIcon from '@material-ui/icons/Refresh';
import { DatePicker } from 'antd';
import moment from 'moment';
import { useDispatch, useSelector } from 'react-redux';
import ModalView from './view'
const { RangePicker } = DatePicker;

const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
    backgroundColor: 'transparent',
    color: '#fff'
  },
  toolbar: {
    padding: theme.spacing(2),
    display: 'flex',
    gap: theme.spacing(2),
    alignItems: 'center',
    borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
  },
  searchRow: {
    display: 'flex',
    gap: theme.spacing(2),
    alignItems: 'center',
    flexWrap: 'wrap'
  },
  searchField: {
    '& .MuiInputBase-root': {
      color: '#fff',
      backgroundColor: 'rgba(255, 255, 255, 0.05)',
      borderRadius: 4,
      width: 200
    },
    '& .MuiInputLabel-root': {
      color: '#fff'
    },
    '& .MuiOutlinedInput-notchedOutline': {
      borderColor: 'rgba(255, 255, 255, 0.1)'
    }
  },
  datePicker: {
    '& .MuiInputBase-root': {
      color: '#fff',
      backgroundColor: 'rgba(255, 255, 255, 0.05)',
      width: 200
    },
    '& .MuiIconButton-root': {
      color: '#fff'
    },
    '& .MuiOutlinedInput-notchedOutline': {
      borderColor: 'rgba(255, 255, 255, 0.1)'
    }
  },
  buttonGroup: {
    '& .MuiButton-root': {
      color: '#fff',
      borderColor: 'rgba(255, 255, 255, 0.3)',
      '&.active': {
        backgroundColor: '#2196f3',
        borderColor: '#2196f3'
      }
    }
  },
  table: {
    '& .MuiTableCell-head': {
      backgroundColor: 'rgba(255, 255, 255, 0.05)',
      color: '#fff',
      fontWeight: 'bold',
      borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
    },
    '& .MuiTableCell-body': {
      color: '#fff',
      borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
    }
  },
  status: {
    padding: '4px 8px',
    borderRadius: 4,
    backgroundColor: 'rgba(33, 150, 243, 0.1)',
    color: '#2196f3'
  },
  actionButton: {
    color: '#2196f3',
    '&:hover': {
      backgroundColor: 'rgba(33, 150, 243, 0.1)'
    }
  }
}));

const TaskList = () => {
  const classes = useStyles();
  const [startDate, setStartDate] = useState(null);
    const dispatch = useDispatch();
  const [endDate, setEndDate] = useState(null);
  const [activeType, setActiveType] = useState('daily');
  const [visible, setVisible] = useState(false)
  const handleTypeChange = (type) => {
    setActiveType(type);
  };

  const columns = [
    { id: 'sequence', label: '序号', width: 70 },
    { id: 'city', label: '市' },
    { id: 'district', label: '区县' },
    { id: 'location', label: '街道乡镇' },
    { id: 'taskType', label: '任务标题' },
    { id: 'taskContent', label: '任务内容' },
    { id: 'status', label: '任务状态' },
    { id: 'person', label: '巡查人' },
    { id: 'startTime', label: '开始时间' },
    { id: 'endTime', label: '结束时间' },
    { id: 'problems', label: '问题数量', width: 100 },
    { id: 'processed', label: '待处理', width: 100 },
    { id: 'actions', label: '操作', width: 150 }
  ];

  const mockData = [
    {
      sequence: 1,
      city: '黄冈市',
      district: '麻城市',
      location: '',
      taskType: '06-02明山水库日常巡查',
      taskContent: '20250602每日巡检',
      status: '未完成',
      person: '姜兴军',
      startTime: '2025-06-02 00:00:00',
      endTime: '2025-06-08 23:59:59',
      problems: 0,
      processed: 0,
      createTime: '2025-06-02 02:00:00',
      creator: ''
    },
     {
      sequence: 2,
      city: '黄冈市',
      district: '麻城市',
      location: '',
      taskType: '06-02浮桥河水库汛前巡查',
      taskContent: '20250602每日巡检',
      status: '未完成',
      person: '熊杰',
      startTime: '2025-06-02 00:00:00',
      endTime: '2025-06-08 23:59:59',
      problems: 0,
      processed: 0,
      createTime: '2025-06-02 02:00:00',
      creator: ''
    },
      {
      sequence: 3,
      city: '黄冈市',
      district: '麻城市',
      location: '',
      taskType: '06-02永丰水库特别检查',
      taskContent: '20250602每日巡检',
      status: '未完成',
      person: '白斌',
      startTime: '2025-06-02 00:00:00',
      endTime: '2025-06-08 23:59:59',
      problems: 0,
      processed: 0,
      createTime: '2025-06-02 02:00:00',
      creator: ''
    },
    {
      sequence: 4,
      city: '黄冈市',
      district: '麻城市',
      location: '',
      taskType: '06-02永红水库日常巡查',
      taskContent: '20250602每日巡检',
      status: '未完成',
      person: '于静',
      startTime: '2025-06-02 00:00:00',
      endTime: '2025-06-08 23:59:59',
      problems: 0,
      processed: 0,
      createTime: '2025-06-02 02:00:00',
      creator: ''
    },{
      sequence: 5,
      city: '黄冈市',
      district: '麻城市',
      location: '',
      taskType: '06-02四新水库日常巡查',
      taskContent: '20250602每日巡检',
      status: '未完成',
      person: '何义红',
      startTime: '2025-06-02 00:00:00',
      endTime: '2025-06-08 23:59:59',
      problems: 0,
      processed: 0,
      createTime: '2025-06-02 02:00:00',
      creator: ''
    },
  ];
  const flyTo = () => {
    // dispatch?.runtime.setInfoDlg({ layerId: 'ChaoshiDetailLayer', properties: {} })
    setVisible(true)
  }
  const [params, setParams] = useState({ tm: [] })
  
    const searchTm = (e) => {
      setParams({
        ...params,
        stm: e[0].format("YYYY-MM-DD HH:mm"),
        etm: e[1].format("YYYY-MM-DD HH:mm"),
        tm: e,
      })
    };
      useEffect(() => {
        let options = "";
        options = {
          etm: moment().add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm"),
          stm: moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm"),
          tm: [
            moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }),
            moment().add(1, 'hour').set({ minute: 0, second: 0 }),
          ],
        }
    
        setParams(options)
    
      }, [])

  return (
    <Paper className={classes.root}>
       <Box className={classes.toolbar}>
        <Box className={classes.searchRow}>
          <ButtonGroup className={classes.buttonGroup}>
            <Button 
              className={activeType === 'daily' ? 'active' : ''}
              onClick={() => handleTypeChange('daily')}
            >
              日常巡查(3)
            </Button>
            <Button 
              className={activeType === 'flood' ? 'active' : ''}
              onClick={() => handleTypeChange('flood')}
            >
              汛期巡查(1)
            </Button>
            <Button 
              className={activeType === 'special' ? 'active' : ''}
              onClick={() => handleTypeChange('special')}
            >
              特别巡查(1)
            </Button>
            <Button 
              className={activeType === 'all' ? 'active' : ''}
              onClick={() => handleTypeChange('all')}
            >
              全部(5024)
            </Button>
          </ButtonGroup>
        </Box>
        <Box className={classes.searchRow}>
          <TextField
            className={classes.searchField}
            variant="outlined"
            size="small"
            placeholder="请输入水库名称"
          />
          <TextField
            className={classes.searchField}
            variant="outlined"
            size="small"
            placeholder="请输入任务标题"
          />
          <div style={{ display: 'flex', alignItems: 'center',width:'40%' }}>
          <div style={{ color: "#fff" }}>时段选择：</div>
          <div className='tm' style={{ position: "relative", zIndex: 999999, color: "#fff", width: "70%", margin: '10px' }}>
            <RangePicker
              // width="100%"
              className='time-picker'
              style={{
                flex: 1,
                background: "transparent",
                border: "none",
                color: "#fff",
              }}
              onChange={searchTm}
              allowClear
              format="YYYY-MM-DD HH:mm"
              showTime={{
                format: 'HH:mm',
              }}
              value={params.tm}
              getPopupContainer={trigger => trigger.parentElement}
            />
          </div>
        </div>
          <Button
            variant="contained"
            color="primary"
            startIcon={<SearchIcon />}
          >
            查询
          </Button>
          <Button
            variant="outlined"
            style={{ color: '#fff', borderColor: 'rgba(255, 255, 255, 0.3)' }}
            startIcon={<RefreshIcon />}
          >
            重置
          </Button>
        </Box>
      </Box>
      <TableContainer>
        <Table className={classes.table} size="small">
          <TableHead>
            <TableRow>
              {columns.map((column) => (
                <TableCell
                  key={column.id}
                  style={{ width: column.width }}
                >
                  {column.label}
                </TableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {mockData.map((row, index) => (
              <TableRow key={index}>
                <TableCell>{row.sequence}</TableCell>
                <TableCell>{row.city}</TableCell>
                <TableCell>{row.district}</TableCell>
                <TableCell>{row.location}</TableCell>
                <TableCell>{row.taskType}</TableCell>
                <TableCell>{row.taskContent}</TableCell>
                <TableCell>
                  <span className={classes.status}>{row.status}</span>
                </TableCell>
                <TableCell>{row.person}</TableCell>
                <TableCell>{row.startTime}</TableCell>
                <TableCell>{row.endTime}</TableCell>
                <TableCell>{row.problems}</TableCell>
                <TableCell>{row.processed}</TableCell>
                <TableCell>
                  <IconButton className={classes.actionButton} size="small" onClick={flyTo}>
                    查看
                  </IconButton>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
      <ModalView
        open={visible}
        onClose={() => setVisible(false)}
      ></ModalView>
    </Paper>
  );
};

export default TaskList;