import { Form, Tabs, Row, Col, Card,Radio,message } from 'antd';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import React, { useState, useRef, useEffect } from 'react';
import ProForm, { ProFormText, ModalForm } from '@ant-design/pro-form';
import Field from '@ant-design/pro-field';
import { GetPrinterTemplater, AddprinterTemplater, UpdatePrinterTemplater, DelPrinterTemplater } from './service';

const { TabPane } = Tabs;

const printerTemplateInfo = () => {
  const formRef = useRef();
  const [panes, setPanes] = useState([]);
  const [activeKey, SetActiveKey] = useState();
  const [isAdd, SetIsAdd] = useState(false);

  useEffect(() => {
    GetStoreTemplaterList();
  }, [])
  useEffect(() => {
  }, [activeKey])

  const GetStoreTemplaterList = () => {
    GetPrinterTemplater().then((r) => {
      setPanes(r.data);
      SetActiveKey(r.data[0]?.id);
    });
  }


  const GetForm = (value) => {
    return (<ProForm
      onFinish={async (values) => {
        var result = !isAdd ? await UpdatePrinterTemplater(values) : await AddprinterTemplater(values);
        if (result.data) {
          GetStoreTemplaterList();
          message.success('成功');
        } else {
          message.success('失败');
        }
      }}
      labelCol={{ span: 4 }}
      formRef={formRef}
      layout={'horizontal'}
      initialValues={{
        id: value.id,
        title: value.title,
        subtitle: value.subtitle,
        explain: value.explain,
        isShowPrintTime: value.isShowPrintTime,
        isShowNumber: value.isShowNumber,
        Footer: value.Footer,
        type:value.type
      }}
      autoFocusFirstInput>

      <ProForm.Item name="id" hidden={true} >
        <Field mode={'edit'} />
      </ProForm.Item>

      <ProForm.Item name="type" label="小票类型" rules={[{ required: true }]}>
        <Radio.Group >
          <Radio value={1}>收银(出餐)小票</Radio>
          <Radio value={2}>贴纸小票</Radio>
        </Radio.Group>
      </ProForm.Item>

      <ProForm.Item name="title" label="标题" placeholder="标题">
        <Field mode={'edit'} />
      </ProForm.Item>
      <ProForm.Item style={{ marginTop: '-10px' }} name="subtitle" label="副标题" placeholder="副标题">
        <Field mode={'edit'} />
      </ProForm.Item>
      <ProForm.Item style={{ marginTop: '-10px' }} name="explain" label="说明（欢迎语）" placeholder="说明（欢迎语）">
        <Field mode={'edit'} />
      </ProForm.Item>

      <ProForm.Item style={{ marginTop: '-10px' }} name="isShowPrintTime" label="是否显示时间" placeholder="">
        <Field mode={'edit'} valueType='switch' />
      </ProForm.Item>

      <ProForm.Item style={{ marginTop: '-10px' }} name="isShowNumber" label="是否显示订单号" placeholder="">
        <Field mode={'edit'} valueType='switch' />
      </ProForm.Item>
      <ProForm.Item style={{ marginTop: '-10px' }} name="Footer" label="页脚" placeholder="页脚"  >
        <Field mode={'edit'} />
      </ProForm.Item>
    </ProForm>);

  }

  const onChange = value => {
    SetActiveKey(value);
  };

  const onEdit = (targetKey, action) => {

    if (action == 'remove') {
      SetIsAdd(false);
      DelPrinterTemplater([targetKey]).then((result) => {
        GetStoreTemplaterList();
      });


    } else {
      SetIsAdd(true);
      add(targetKey);
    }

  };

  const add = (targetKey) => {
    const aKey = '模板' + panes.length;
    const newPanes = [...panes];
    newPanes.push({
      title: '模板' + newPanes.length,
      content: (<div> </div>),
      id: aKey
    });
    SetActiveKey(aKey);
    setPanes(newPanes);

  };




  return (
    <PageContainer>
      <Tabs
        type="editable-card"
        onChange={onChange}
        activeKey={activeKey}
        onEdit={onEdit}
      >
        {panes?.map(pane => (
          <TabPane tab={pane.title} key={pane.id} >
            <Row>
              <Col span={12} push={12}>
                <Card>
                  {GetForm(pane)}
                </Card>

              </Col>
              <Col span={12} pull={12}>
                <Card>
                  模板样式
                </Card>
              </Col>
            </Row>

          </TabPane>
        ))}
      </Tabs>
    </PageContainer>
  );
};

export default printerTemplateInfo;
