import { Button, Col, Progress, Row, Tag, Space, Form, Input, Select, DatePicker, } from "antd";
import Title from '../homepage/compontent/title'
import styles from './History.less'
import svg1 from '../../assets/img/asset-main1.svg'
import { SearchOutlined } from "@ant-design/icons";
import TableWithPagination from "@/components/assetmangement/table";
import {useEffect} from 'react'
import * as echarts from 'echarts';
const { Option } = Select;

const { RangePicker } = DatePicker;

const History = () => {
  const [form] = Form.useForm();
  // 表格列配置
  const ruleColumns = [
    { title: '工单ID', dataIndex: 'workOrderId', key: 'workOrderId' },
    { title: '工单类型', dataIndex: 'type', key: 'type' },
    { title: '申请人', dataIndex: 'applicant', key: 'applicant' },
    { title: '申请时间', dataIndex: 'applyTime', key: 'applyTime' },
    { title: '处理人', dataIndex: 'handler', key: 'handler' },
    { title: '完成时间', dataIndex: 'completeTime', key: 'completeTime' },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      render: (status) => {
        let color = '';
        switch (status) {
          case '已完成':
            color = '#52c41a';
            break;
          case '已驳回':
            color = '#f5222d';
            break;
          default:
            color = '#8c8c8c';
        }
        return <span style={{color:color}}>{status}</span>;
      }
    },
    { title: '处理结果', dataIndex: 'result', key: 'result' },
    { title: '进度', dataIndex: 'progress', key: 'progress' },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      render: (text, record) => {
        const actions = [];
        actions.push(<a key="view" style={{ color: '#2C9E9D' }}>查看详情</a>);
        if (record.status === '已完成') {
          actions.push(<a key="evaluate" style={{ color: '#2C9E9D' }}>评价</a>);
          actions.push(<a key="export" style={{ color: '#2C9E9D' }}>导出</a>);
        } else if (record.status === '已驳回') {
          actions.push(<a key="reapply" style={{ color: '#2C9E9D' }}>重新申请</a>);
        }
        return <Space>{actions}</Space>;
      }
    },
  ];

  // 表格数据
  const reminderRuleData = [
    { key: '1', workOrderId: 'WO-010', type: '设备维修', applicant: '李舒萍', applyTime: '2025-10-30', handler: '郑晋阳', completeTime: '2025-11-05', status: '已完成', result: '成功', progress: '100%' },
    { key: '2', workOrderId: 'WO-011', type: '软件升级', applicant: '吴洁丽', applyTime: '2025-10-29', handler: '冯毅燕', completeTime: '2025-11-04', status: '已完成', result: '成功', progress: '100%' },
    { key: '3', workOrderId: 'WO-012', type: '故障报修', applicant: '李姝萍', applyTime: '2025-10-28', handler: '周粟来', completeTime: '2025-11-04', status: '已完成', result: '成功', progress: '100%' },
    { key: '4', workOrderId: 'WO-013', type: '巡检任务', applicant: '何克金', applyTime: '2025-10-27', handler: '吴异翰', completeTime: '2025-11-04', status: '已完成', result: '成功', progress: '100%' },
    { key: '5', workOrderId: 'WO-014', type: '设备维修', applicant: '李勇', applyTime: '2025-10-26', handler: '孙正容', completeTime: '2025-11-02', status: '已驳回', result: '失败', progress: '0%' },
    { key: '6', workOrderId: 'WO-015', type: '软件升级', applicant: '周校民', applyTime: '2025-10-25', handler: '周国亮', completeTime: '2025-10-31', status: '已完成', result: '成功', progress: '100%' },
    { key: '7', workOrderId: 'WO-016', type: '故障报修', applicant: '何艳丽', applyTime: '2025-10-24', handler: '周赢', completeTime: '2025-10-30', status: '已完成', result: '成功', progress: '100%' },
  ]
  const conicColors = {
    '0%': '#006665',
    '50%': '#45FFEC',
    '55%': '#006665',
    '90%': '#45FFEC',
  };
  useEffect(() => {
    const chartDom = document.getElementById('ringChart');
    const myChart = echarts.init(chartDom);
    const option = {
      grid: {
        top: '20%',
        left: '20%',
        right: '20%',
        bottom: '20%',
      },
      tooltip: { trigger: 'item' },
      legend: {
        orient: 'vertical',
        bottom: 0,
        left: 'center',
        itemGap: 12,
        textStyle: { fontSize: 12 },
        formatter:(name)=>{
          const dataItem = option.series[0].data.find(item => item.name === name);
          return `${name}（${dataItem?.value || 0} %）`;
        }
      },
      series: [
        {
          name: '工单状态',
          type: 'pie',
          radius: ['45%', '70%'],
          center: ['50%', '30%'],
          avoidLabelOverlap: false,
          label: { show: false },
          labelLine: { show: false },
          data: [
            { value: 45, name: '设备维修', itemStyle: { color: '#006665' } },
            { value: 25, name: '软件升级', itemStyle: { color: '#FFE666' } },
            { value: 20, name: '故障报修', itemStyle: { color: '#FF8966' } },
            { value: 10, name: '巡检任务', itemStyle: { color: '#66C9FF' } }
          ]
        }
      ]
    };
    myChart.setOption(option);
    window.addEventListener('resize', () => myChart.resize());
  }, []);
  return (
    <div style={{ backgroundColor: '#f0f7f7', overflowX: 'hidden' }}>
      <Row gutter={20} style={{ height: '100%' }}>
        <Col span={4}>
          <div style={{ padding: '20px', backgroundColor: '#fff', height: '100%' }}>
            <Title title={'维保任务总览'}></Title>
            <div style={{
              display: 'flex',
              flexDirection: 'column',
              marginTop: '20px',
            }}>
              <div className={styles['item']}>
                <Row wrap={false}>
                  <Col span={12}>
                    <div className={styles['item-num']}>120</div>
                    <div className={styles['item-title']}>已办工单总数</div>
                  </Col>
                  <Col span={12} style={{ textAlign: 'right' }}>
                    <Progress type={'circle'} percent={95} size={[76, 76]} format={percent => <><div style={{ fontSize: '12px', color: '#006665' }}>完成率</div><div style={{ fontSize: '16px', fontWeight: '600', color: '#006665', marginTop: '5px' }}>{percent}%</div></>}
                      strokeColor={conicColors} />
                  </Col>
                </Row>
              </div>
              <div className={styles['item']}>
                <div id="ringChart" style={{ height: 240 }}></div>

              </div>
            </div>
          </div>
        </Col>

        <Col span={20}>
          <div style={{ padding: '20px', backgroundColor: '#fff', height: '100%' }}>
            <Row style={{ marginBottom: '20px', backgroundColor: '#fff' }}>
              <Row style={{ width: '100%', marginBottom: '20px' }}>
                <Col span={12}>
                  <Title title="查询条件" />
                </Col>
                <Col span={12} style={{ textAlign: 'right' }}>
                  <Space>
                    <Button icon={<SearchOutlined />} htmlType="submit" className={styles['search-button']}>查询</Button>
                    <Button className={styles['reset-button']}>重置</Button>
                  </Space>
                </Col>
              </Row>
              <Form layout="inline" form={form} style={{ width: '100%', borderBottom: '1px solid #eeeeee', paddingBottom: '20px' }}>
                <Row justify="space-between" style={{ width: '100%' }}>
                  <Form.Item name="applicant" label="申请人">
                    <Input placeholder="请输入申请人" />
                  </Form.Item>
                  <Form.Item name="type" label="工单类型">
                    <Select placeholder="请选择工单类型">
                      <Option value="设备维修">设备维修</Option>
                      <Option value="设备安装">设备安装</Option>
                      <Option value="设备巡检">设备巡检</Option>
                      <Option value="设备更换">设备更换</Option>
                    </Select>
                  </Form.Item>
                  <Form.Item name="status" label="优先级">
                    <Select placeholder="请选择状态">
                      <Option value="待处理">待处理</Option>
                      <Option value="处理中">处理中</Option>
                      <Option value="已完成">已完成</Option>
                      <Option value="已取消">已取消</Option>
                    </Select>
                  </Form.Item>
                  <Form.Item name="applyTime" label="申请时间">
                    <RangePicker style={{ width: 240 }} />
                  </Form.Item>
                </Row>
              </Form>
            </Row>
            <Row style={{ width: '100%', marginTop: '20px', marginBottom: '50px' }}>
              <Title title="待办工单" />
              <Row style={{ width: '100%', marginTop: '20px' }}>

                <Button className={styles['search-button']} style={{marginRight:'30px'}}>导出已办</Button>
                <Button className={styles['reset-button']}>高级分析</Button>
              </Row>
              <Row style={{ width: '100%', marginTop: '20px' }}>
                <TableWithPagination columns={ruleColumns} dataSource={reminderRuleData} rowSelection={true}></TableWithPagination>
              </Row>
            </Row>
          </div>
        </Col>
      </Row>
    </div>
  )
}
export default History;
