import React, { useRef, useState, useEffect } from "react";
import { PageContainer } from '@ant-design/pro-layout';
import { PlusOutlined } from '@ant-design/icons';
import ProTable from '@ant-design/pro-table';
import { Button, Form, Input, Select, Drawer, message, Col, Row } from 'antd';
import styles from "./index.less";
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
import axios from 'axios';
import cardAPI from "../service";
import GateSetUp from './components/gateSetUp';
import SetGateFood from './components/setGateFood';


/**
 * 档口管理
 * @returns
 */
const Gate = () => {
  const actionRef = useRef();
  const [modalForm] = Form.useForm();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [currentOption, setCurrentOption] = useState({ id: '' });
  const [GateSetUpIsVisible, GateSetUpVisible] = useState(false);
  const [SetGateFoodIsVisible, setGateFoodVisible] = useState(false);
  const [storeList, setStoreList] = useState([]);
  const [selectedStore, setSelectedStore] = useState('');
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  // editor 实例
  const [editor, setEditor] = useState(null);
  // 编辑器内容
  const [html, setHtml] = useState('');
  // 工具栏配置
  const toolbarConfig = {};
  // 编辑器配置
  const editorConfig = {
    placeholder: '请输入大屏横幅...',
    MENU_CONF: {
      fontSize: {
        fontSizeList: [
          '10px', '20px', '40px', '60px', '80px', '100px', '150px', '180px', '200px',
        ]
      },
      uploadImage: {
        async customUpload(file, insertFn) {
          // file 即选中的文件
          // 自己实现上传，并得到图片 url alt href
          //覆盖action 上传之前获取上传地址
          let index = file.name.lastIndexOf(".");
          let ext = file.name.substr(index + 1);
          let fileData = null;
          cardAPI.GetCosRequestURL({ directory: "kitchen", fileExtension: ext, method: "PUT" }).then((r) => {
            const action = r.allUrl;
            const reader = new FileReader();
            reader.readAsArrayBuffer(file);
            reader.onload = (e) => {
              fileData = e.target.result;
              axios.put(action, fileData).then(response => {
                if (response.status == 200 || response.statusText == 'OK') {
                  // 最后插入图片
                  insertFn(r.seeUrl, r.seeUrl, r.seeUrl);
                  message.success('上传成功！');
                }
              });
            };
          });

        }
      }
    }
  }

  // 及时销毁 editor ，重要！
  useEffect(() => {
    return () => {
      if (editor == null) return
      editor.destroy()
      setEditor(null)
    }
  }, [editor])

  /**
   * 点击编辑按钮
   * @param {*} record
   */
  const onEditTableRow = (record) => {
    setCurrentOption(record);
    setIsModalOpen(true);
    setHtml(record.remaek);
    modalForm.setFieldsValue(record);
  }
  /**
   * 设置界面显示
   * @param {*} record
   */
  const onGateSet = (record) => {
    setCurrentOption(record);
    GateSetUpVisible(true);
  }
  const setGateFood = (record) => {
    setCurrentOption(record);
    setGateFoodVisible(true);
  }

  /**
   * 点击新建
   */
  const onCreateTableRow = () => {
    setIsModalOpen(true);
    if (editor) {
      editor.setHtml('');
    }
    setHtml('');
    modalForm.resetFields();
  }


  /**
   * 提交表单
   */
  const onFinish = async (values) => {
    if (values.id) {
      values.remaek = html;
      const response = await cardAPI.UpdateGateInfo(values);
      if (response.statusCode === 200) {
        message.success('更新档口成功！');
        setIsModalOpen(false);
        actionRef.current.reload();
      } else {
        message.error(response.errors || '更新档口失败');
      }
    } else {
      values.remaek = html;
      const response = await cardAPI.AddGate(values);
      if (response.statusCode === 200) {
        message.success('新增档口成功！');
        setIsModalOpen(false);
        actionRef.current.reload();
      } else {
        message.error(response.errors || '新增档口失败');
      }
    }
  }

  const columns = [
    {
      title: '档口名称',
      dataIndex: 'name',
      ellipsis: true,
    },
    {
      title: '归属门店',
      dataIndex: 'storeId',
      render: (_, record) => {
        const find = storeList.find(item => item.id === record.storeId);
        if (find) {
          return <div>{find.store_Name}</div>
        }
      }
    },
    {
      title: '属性',
      dataIndex: 'mode',
      valueType: 'select',
      valueEnum: {
        1: {
          text: '固定',
          status: 'Success',
        },
        2: {
          text: '自由设定',
          status: 'Success',
        }
      },
    },
    {
      title: '金额',
      dataIndex: 'price',
    },
    {
      title: '状态',
      dataIndex: 'status',
      valueType: 'select',
      valueEnum: {
        0: {
          text: '正常',
          status: 'Success',
        },
        1: {
          text: '禁用',
          status: 'Error',
        },
        2: {
          text: '删除',
          status: 'Error',
        }
      },
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (text, record, _, action) => [
        <a onClick={() => onEditTableRow(record)}>更新</a>,
        <a onClick={() => setGateFood(record)}>设置菜品</a>,
        <a onClick={() => onGateSet(record)}>设置屏幕显示</a>
      ],
    },
  ];

  /**
   * 获取店铺列表
   */
  const onFetchStoreList = async () => {
    const response = await cardAPI.GetAllStore();
    if (response.isSuccess) {
      setStoreList(response.data);
      setSelectedStore(response.data[0].id);
      actionRef.current.reload();
    } else {
      message.error(response.msg || '获取店铺列表失败');
    }
  }

  useEffect(() => {
    onFetchStoreList();
  }, []);

  return (
    <PageContainer>
      <div className={styles.member_card_container}>
        <ProTable
          columns={columns}
          actionRef={actionRef}
          request={
            async () => {
              if (selectedStore) {
                const response = await cardAPI.GetGateListByStorePage(selectedStore, current, pageSize);
                if (response.statusCode === 200) {
                  return {
                    data: response.data.data,
                    success: true,
                    total: response.data.total
                  }
                }
              }
            }
          }
          cardBordered
          editable={{
            type: 'multiple',
          }}
          rowKey="id"
          search={false}
          options={{
            setting: {
              listsHeight: 400,
            },
          }}
          pagination={{
            pageSize: pageSize,
            onChange: (page) => setCurrent(page),
          }}
          dateFormatter="string"
          headerTitle="档口管理"
          toolBarRender={() => [
            <div className={styles.table_search_item}>
              <div>
                当前门店：
              </div>
              <Select style={{ width: 300 }} value={selectedStore} onChange={(value) => {
                setSelectedStore(value);
                actionRef.current.reload();
              }}>
                {
                  storeList.map(item => {
                    return <Option value={item.id} key={item.id}>{item.store_Name}</Option>
                  })
                }
              </Select>
            </div>,
            <Button key="button" icon={<PlusOutlined />} type="primary" onClick={onCreateTableRow}>
              新建
            </Button>
          ]}
        />
        <Drawer destroyOnClose width='100%' title={currentOption.id ? '编辑档口' : '添加档口'} visible={isModalOpen} onClose={() => setIsModalOpen(false)}>
          <Form
            name="basic"
            onFinish={onFinish}
            form={modalForm}
            labelCol={{ span: 4 }}
          >
            <Form.Item
              label="id"
              name="id"
              hidden={true}
            >
              <Input size="large" />
            </Form.Item>

            <Row>
              <Col xs={12} sm={12} md={12} lg={12} xl={12}>
                <Form.Item
                  label="档口名称"
                  name="name"
                  rules={[
                    {
                      required: true,
                      message: '请输入档口名称！',
                    },
                  ]}
                >
                  <Input size="large" />
                </Form.Item>
              </Col>
              <Col xs={12} sm={12} md={12} lg={12} xl={12}>
                <Form.Item
                  label="归属门店"
                  name="storeId"
                  rules={[
                    {
                      required: true,
                      message: '请输入归属门店！',
                    },
                  ]}
                >
                  <Select size="large">
                    {
                      storeList.map(store => {
                        return (
                          <Select.Option key={store.id} value={store.id}>{store.store_Name}</Select.Option>
                        )
                      })
                    }
                  </Select>
                </Form.Item>
              </Col>
              <Col xs={12} sm={12} md={12} lg={12} xl={12}>
                <Form.Item
                  label="属性"
                  name="mode"
                  rules={[
                    {
                      required: true,
                      message: '请输入选择属性！',
                    },
                  ]}
                >
                  <Select size="large">
                    <Select.Option value={1}>固定金额</Select.Option>
                    <Select.Option value={2}>自由设定</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col xs={12} sm={12} md={12} lg={12} xl={12}>

                <Form.Item
                  noStyle
                  shouldUpdate={(prevValues, currentValues) =>
                    prevValues.mode !== currentValues.mode
                  }  >
                  {({ getFieldValue }) =>
                    (getFieldValue('mode') == '1') ? (
                      <Form.Item
                        label="金额"
                        name="price"
                        rules={[
                          {
                            required: true,
                            message: '请输入金额！',
                          },
                        ]}
                      >
                        <Input size="large" />
                      </Form.Item>

                    ) : null
                  }
                </Form.Item>

              </Col>
              <Col xs={12} sm={12} md={12} lg={12} xl={12}>
                <Form.Item
                  label="状态"
                  name="status"

                >
                  <Select size="large" defaultValue={1}>
                    <Option value={0}>正常</Option>
                    <Option value={1}>禁用</Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
              <Toolbar
                editor={editor}
                defaultConfig={toolbarConfig}
                mode="default"
                style={{ borderBottom: '1px solid #ccc' }}
              />
              <Editor
                defaultConfig={editorConfig}
                value={html}
                onCreated={setEditor}
                onChange={editor => setHtml(editor.getHtml())}
                mode="default"
                style={{ height: '500px', overflowY: 'hidden' }}
              />
            </div>
            <Form.Item>
              <Button type="primary" htmlType="submit" style={{ marginTop: '10px' }}>
                确定
              </Button>
            </Form.Item>
          </Form>
        </Drawer>
        <GateSetUp
          shows={GateSetUpIsVisible}
          values={currentOption}
          actionRef={actionRef}
          onCancel={() => {
            GateSetUpVisible(false);
          }}
        />
        <SetGateFood
          shows={SetGateFoodIsVisible}
          values={currentOption}
          actionRef={actionRef}
          onCancel={() => {
            setGateFoodVisible(false);
          }}
        />

      </div>
    </PageContainer>
  )
}

export default Gate;
