import { useModel } from 'umi';
import React, { useRef, useEffect, useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import {
  Row,
  Col,
  Tree,
  message,
  Card,
  Space,
  Button,
  Drawer,
  Checkbox,
  Spin,
  Tag, Input
} from 'antd';
const { Search } = Input;

import { GetGoodsTasteList, Edit } from './service';
const GoodsTaste = () => {


  const [tastes, SetTastes] = useState([]);
  const [inputVisible, SetInputVisible] = useState([false]);
  const [inputValue, SetInputValue] = useState("");

  //初始化数据
  useEffect(() => {
    const initData = async (value) => {
      await GetGoodsTasteList().then((re) => {

        if (re.data) {
          SetTastes(re.data);
        }
      });
    };
    initData();
  }, [])



  const editTaste = async () => {

    await Edit(tastes);
    await getGoodsTasteList();
  }

  const getGoodsTasteList = async () => {
    await GetGoodsTasteList().then((re) => {

      if (re.data) {
        SetTastes(re.data);
      }
    });
  }

  const handleInputChange = e => {
    SetInputValue(e.target.value);
  };

  const handleInputConfirm = (index) => {

    var dataList = [...tastes];
    var listTag = dataList[index].tasteClassList || [];
    if (inputValue && (!listTag || listTag?.indexOf(inputValue) === -1)) {
      listTag.push(inputValue);
    }

    dataList[index].tasteClassList = listTag;
    SetTastes(dataList);

    var list = [...inputVisible];
    list[index] = false;
    SetInputVisible(list)
    SetInputValue("");
    editTaste();
  };


  const handleClose = (removedTag, index) => {

    var dataList = [...tastes];
    var listTag = dataList[index].tasteClassList;
    listTag = listTag.filter(tag => tag !== removedTag);
    dataList[index].tasteClassList = listTag;
    SetTastes(dataList);
    editTaste();
  };

  return (
    <PageContainer>
      <>
        <Card title="菜品口味" extra={
          <div>
            <Search enterButton="添加" onSearch={(item) => {
              var list = tastes;
              if (!list.find(x => x.tasteClassName == item) && item) {
                SetTastes([...list, { tasteClassName: item, tasteClassList: [] }]);
              }
            }} />
          </div>

        }>
          {tastes?.map((item, index) => {
            return (<Card key={index} title={item.tasteClassName} extra={<a onClick={() => {
              var dataList = [...tastes];
              dataList = dataList.filter(tag => tag.tasteClassName !== item.tasteClassName);
              SetTastes(dataList);
              Edit(dataList);
              getGoodsTasteList();
            }}>删除</a>} style={{ width: 300, height: 300, float: 'left' }}>

              {item.tasteClassList?.map((tag) => {
                const tagElem = (
                  <Tag className="edit-tag"
                    key={tag}
                    style={{ marginTop: '3px' }}
                    closable={true}
                    onClose={() => handleClose(tag, index)} >
                    <span > {tag} </span>
                  </Tag>
                );
                return (tagElem);
              })}

              {inputVisible[index] ? (
                <Input
                  style={{ marginTop: '3px' }}
                  type="text"
                  size="small"
                  className="tag-input"
                  value={inputValue}
                  onChange={handleInputChange}
                  onBlur={handleInputConfirm.bind(this, index)}
                  onPressEnter={handleInputConfirm.bind(this, index)}
                />
              ) : (
                <Tag className="site-tag-plus" onClick={() => {
                  var list = [...inputVisible];
                  list[index] = true;
                  SetInputVisible(list)
                }}>
                  <PlusOutlined /> 添加
                </Tag>
              )}
            </Card>);

          })}
        </Card>

      </>
    </PageContainer>
  );
};

export default GoodsTaste;
