import React, { useState } from 'react';
import { Button, Select, Row, Col, Pagination } from 'antd';
import { history } from 'umi';
import { PlusOutlined } from '@ant-design/icons';
import templateImg from '@/assets/business_envmonitoring/Frame 427319422.svg';
import './TemplateLibrary.less';

const { Option } = Select;

const TemplateLibrary = () => {
  const [category, setCategory] = useState(undefined);
  const [templateName, setTemplateName] = useState(undefined);
  const [currentPage, setCurrentPage] = useState(6);

  // 模拟数据
  const mockData = Array(6).fill(null).map((_, index) => ({
    id: index + 1,
    title: '污染治理设施运行台账及维护记录',
    createTime: '2025-08-24 18:24:25',
    useCount: 3,
    thumbnail: '/img/template-preview.png',
  }));

  const handleCreate = () => {
    history.push('/topnavbar00/business/envInformationMonthly/template-create');
  };

  const handleSearch = () => {
    console.log('查找', { category, templateName });
  };

  const handleUse = (item) => {
    console.log('使用模板', item);
  };

  const handlePreview = (item) => {
    console.log('预览模板', item);
  };

  return (
    <div className="template-library">
      {/* A块：顶部操作栏 */}
      <div className="template-header">
        <Row justify="space-between" align="middle">
          <Col>
            <Button
              type="primary"
              icon={<PlusOutlined />}
              className="create-btn"
              onClick={handleCreate}
            >
              创建
            </Button>
          </Col>
          <Col>
            <div className="filter-group">
              <span className="filter-label">模板分类</span>
              <Select
                placeholder="请选择"
                style={{ width: 200 }}
                value={category}
                onChange={setCategory}
                allowClear
              >
                <Option value="1">分类1</Option>
                <Option value="2">分类2</Option>
                <Option value="3">分类3</Option>
              </Select>
              
              <span className="filter-label">模板名称</span>
              <Select
                placeholder="请选择"
                style={{ width: 200 }}
                value={templateName}
                onChange={setTemplateName}
                allowClear
              >
                <Option value="1">模板1</Option>
                <Option value="2">模板2</Option>
                <Option value="3">模板3</Option>
              </Select>
              
              <Button type="primary" className="search-btn" onClick={handleSearch}>
                查找
              </Button>
            </div>
          </Col>
        </Row>
      </div>

      {/* B块：卡片列表区域 */}
      <div className="template-content">
        <div className="card-container">
          {mockData.map((item) => (
            <div key={item.id} className="card-wrapper">
              <div className="template-card">
                <div className="card-header">
                  <h3 className="card-title">污染治理设施运行台及维护记录</h3>
                </div>
                <div className="card-body">
                  <div className="card-left">
                    <div className="info-item">
                      <span className="info-label">创建时间</span>
                      <span className="info-value">{item.createTime}</span>
                    </div>
                    <div className="info-item">
                      <span className="info-label">使用次数</span>
                      <span className="info-value">{item.useCount}</span>
                    </div>
                    <div className="card-actions">
                      <Button
                        type="primary"
                        className="use-btn"
                        onClick={() => handleUse(item)}
                      >
                        使用
                      </Button>
                      <Button
                        className="preview-btn"
                        onClick={() => handlePreview(item)}
                      >
                        预览
                      </Button>
                    </div>
                  </div>
                  <div className="card-right">
                    <img src={templateImg} alt="预览图" />
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* 分页 */}
        <div className="pagination-wrapper">
          <Pagination
            current={currentPage}
            total={50}
            pageSize={6}
            showSizeChanger={false}
            onChange={(page) => setCurrentPage(page)}
          />
        </div>
      </div>
    </div>
  );
};

export default TemplateLibrary;
