manage/src/pages/company/service/detail/components/TaskTemplate.jsx

import React, { useState, useEffect } from 'react';
import { Form, Card, Input, Select, message,Button } from 'antd';
import { supabaseService } from '@/hooks/supabaseService';
import {ArrowLeftOutlined}from '@ant-design/icons'
import TaskList from '@/components/TaskList';
const TYPE = 'task'
const TaskTemplate = ({ id, isView, onCancel,isEdit }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [formValues, setFormValues] = useState({
    sections: [{ items: [{}] }],
  });
  const [categories, setCategories] = useState([]);
  useEffect(() => {
    if (id) {
      fetchServiceTemplate();
    }
    fetchCategories();
  }, [id]);

  const fetchServiceTemplate = async () => {
    try {
      setLoading(true);
      const { data } = await supabaseService.select('resources', {
        filter: {
          id: { eq: id },
          type: { eq: 'serviceTemplate' },
          'attributes->>template_type': { eq: TYPE }
        }
      });
      
      if (data?.[0]) {
        const formData = {
          templateName: data[0].attributes.templateName,
          description: data[0].attributes.description,
          category: data[0].attributes.category?.map(v => v.id) || [],
          sections: data[0].attributes.sections || [{ items: [{}] }],
          currency: data[0].attributes.currency || "CNY",
        };
        form.setFieldsValue(formData);
        setFormValues(formData);
      }
    } catch (error) {
      console.error("获取服务模版失败:", error);
      message.error("获取服务模版失败");
    } finally {
      setLoading(false);
    }
  };

  const fetchCategories = async () => {
    try {
      const { data } = await supabaseService.select('resources', {
        filter: {
          type: { eq: 'categories' },
          'attributes->>template_type': { in: `(${TYPE},common)` }
        },
        order: {
          column: 'created_at',
          ascending: false
        }
      });
      
      const formattedCategories = (data || []).map(category => ({
        value: category.id,
        label: category.attributes.name
      }));
      
      setCategories(formattedCategories);
    } catch (error) {
      message.error('获取分类数据失败');
      console.error(error);
    }
  };

  const handleValuesChange = (changedValues, allValues) => {
    setFormValues(allValues);
  };

  const onFinish = async (values) => {
    try {
      setLoading(true);
      const categoryData = values.category.map(categoryId => {
        const category = categories.find(c => c.value === categoryId);
        return {
          id: categoryId,
          name: category.label
        };
      });
      const serviceData = {
        type: "serviceTemplate",
        attributes: {
          template_type: TYPE,
          templateName: values.templateName,
          description: values.description,
          sections: values.sections,
          category: categoryData,
        },
      };

      if (id) {
        await supabaseService.update('resources', 
          { id }, 
          serviceData
        );
      } else {
        // 新增
        await supabaseService.insert('resources', serviceData);
      }

      message.success("保存成功");
      onCancel();
    } catch (error) {
      console.error("保存失败:", error);
      message.error("保存失败");
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
        <Form
          form={form}
          onFinish={onFinish}
          onValuesChange={handleValuesChange}
          layout="vertical"
          variant="filled"
          disabled={isView}
        >
          <Card
            className="shadow-sm rounded-lg mb-6"
            type="inner"
            title={
              <span className="flex items-center space-x-2 text-gray-700">
                <span className="w-1 h-4 bg-blue-500 rounded-full" />
                <span>基本信息</span>
              </span>
            }
            bordered={false}
          >
            <div className="grid grid-cols-2 gap-6">
              <Form.Item
                label="模版名称"
                name="templateName"
                rules={[{ required: true, message: "请输入模版名称" }]}
              >
                <Input placeholder="请输入模版名称" />
              </Form.Item>
              <Form.Item
                label="模版分类"
                name="category"
                rules={[{ required: true, message: "请选择或输入分类" }]}
              >
                <Select
                  placeholder="请选择或输入分类"
                  showSearch
                  allowClear
                  mode="tags"
                  options={categories}
                  loading={loading}
                />
              </Form.Item>
              <Form.Item
                label="模版描述"
                name="description"
                className="col-span-2"
              >
                <Input.TextArea rows={4} placeholder="请输入模版描述" />
              </Form.Item>
            </div>
          </Card>

          <Card
            className="shadow-sm rounded-lg"
            type="inner"
            title={
              <span className="flex items-center space-x-2 text-gray-700">
                <span className="w-1 h-4 bg-blue-500 rounded-full" />
                <span>相关任务</span>
              </span>
            }
            bordered={false}
          >
            <TaskList
              type={TYPE}
              form={form}
              isView={isView}
              formValues={formValues}
              onValuesChange={handleValuesChange}
            />
          </Card>
         
        </Form>
        <div className="flex justify-end pt-4 space-x-4">
          <Button 
            icon={<ArrowLeftOutlined />}
            onClick={onCancel}
          >
            返回
          </Button>
          {!isView && (
            <Button
              type="primary"
              onClick={() => form.submit()}
              loading={loading}
            >
              保存
            </Button>
          )}
        </div>
    </>
  );
};

export default TaskTemplate;