import React, { useEffect, useRef} from "react";
import { Modal, Form, message, Select } from "antd";
import * as API from '../api';
import useInitial from '@/hooks/useInitail';
import usePagination from '@/hooks/usePagination';

const FormItem = Form.Item;

interface Props {
  visiable: boolean;
  setVisiable: (value: boolean) => any;
  setLoading: (value: boolean) => any;
  current: any;
}

function CreateModal(props: Props) {
  const { visiable, setVisiable, setLoading, current } = props;
  const [form] = Form.useForm();
  const { data: store } = useInitial(API.fetchShops, [], '');
  const { list: job, setParams } = usePagination(API.fetchPostList, {pageSize: 1000});
  const { data: list } = useInitial(API.fetchOutsideType, [], {additional: 1, setting: true});
  const page = useRef(10);

  useEffect(() => {
    if (current && current !== undefined) {
      form.setFieldsValue({
        // shop: { value: current.shopId, label: current.shopName },
        // job: { value: current.postId, label: current.postName },
        shop: current.shops.map((e:any) => { return { value: e.shopId, label: e.shopName }; }),
        job: current.posts.map((e:any) => { return { value: e.postId, label: e.postName }; }),
        work: current.items.map((e:any) => { return { value: e.outsideTypeId, label: e.outsideTypeName}; })
      });
    } else {
      form.resetFields();
    }
  }, [visiable]);

  function submit(item: any) {
    const params = {
      id: current ? current.id : undefined,
      shopIds: item.shop.map((e:any) => e.value),
      //shopName: item.shop.label,
      postIds: item.job.map((e:any) => e.value),
      //postName: item.job.label,
      outsideTypeIds: item.work.map((item:any) => item.value),
    };
    API.saveApi(params)
      .then((res) => {
        message.success("保存成功");
        setVisiable(false);
        setLoading(true);
      })
      .catch((err) => {
        //console.log(err)
        message.error(err.message);
      });
  }

  // const onLoad = (e: any) => {
  //   const { target } = e;
  //   // target.scrollTop + target.offsetHeight === target.scrollHeight  判断是否滑动到底部
  //   if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
  //     // 在这里调用接口
  //     page.current += 10;
  //     setParams({ pageSize: page.current }, true);
  //   }
  // };

  const onShopSearch = (val: any) => {
    console.log("shop", val);
  };

  const onJobSearch = (val: any) => {
    console.log("job", val);
  };

  const onWorkSearch = (val: any) => {
    console.log("work", val);
  };

  return (
    <Modal
      title="新增任务权限"
      visible={visiable}
      onOk={form.submit}
      onCancel={() => setVisiable(false)}
      maskClosable={false}
      // getContainer={false}
    >
      <Form
        form={form}
        onFinish={submit}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 15 }}
      >
        <FormItem name="shop" label="门店" rules={[{ required: true }]}>
          <Select
            labelInValue
            placeholder="请选择门店"
            mode="multiple"
            onSearch={onShopSearch}
            showSearch
            filterOption={(input: any, option: any) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
          >
            {store.map((item: any) => (
              <Select.Option value={item.id} key={item.id}>
                {item.name}
              </Select.Option>
            ))}
          </Select>
        </FormItem>
        <FormItem name="job" label="岗位" rules={[{ required: true }]}>
          <Select
            labelInValue
            placeholder="请选择岗位"
            //  onPopupScroll={(e) => onLoad(e)}
            mode="multiple"
            onSearch={onJobSearch}
            showSearch
            filterOption={(input: any, option: any) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
          >
            {job.map((item: any) => (
              <Select.Option value={item.id} key={item.id}>
                {item.postName}
              </Select.Option>
            ))}
          </Select>
        </FormItem>
        <FormItem
          name="work"
          label="可申请任务类型"
          rules={[{ required: true }]}
        >
          <Select
            labelInValue
            mode="multiple"
            placeholder="请选择任务类型"
            onSearch={onWorkSearch}
            showSearch
            filterOption={(input: any, option: any) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
          >
            {list.map((item: any) => (
              <Select.Option value={item.type} key={item.type}>
                {item.typeName}
              </Select.Option>
            ))}
          </Select>
        </FormItem>
      </Form>
    </Modal>
  );
}

export default CreateModal;