import React, { useEffect, useState } from 'react';
import {Form, Button, InputNumber, Modal, message, Input } from 'antd';
import PmsSelect from '@/pages/pms/comonents/PmsSelect';
import { ListVO, saveApi, roleListApi } from '../api';
import { getPageListApi, Item as item } from "@/pages/pms/partPlan/PlanSupplier/api";
import {getShopApi} from '@/pages/pms/storage/partShop/api';
import usePagination from '@/hooks/usePagination';
import useInitail from '@/hooks/useInitail';

const Item = Form.Item;

interface Props{
  visible?:boolean,
  onCancel: Function,
  item?:ListVO
}

export default function Index(props:Props) {
  const { list: suppliers } = usePagination<item>(getPageListApi, { supplierType: 40, pageSize: 500 });
  const { data: shops } = useInitail<PmsStoragePartShop.Option[], {}>(getShopApi, [], {});
  const { list } = usePagination<Role.Info>(roleListApi, { pageSize: 500, sysId: 229 });
  const [loading, setLoading] = useState(false);
  const { visible, onCancel, item } = props;
  const [form] = Form.useForm();

  useEffect(() => {
    if (visible && item?.id) {
      form.setFieldsValue({
        supplierId: item.supplierId,
        shopId: item.shopId,
        minAmount: item.minAmount,
        roleCode: item.roleCode,
        account: item.account
      });
    }
    if (!visible) {
      form.resetFields();
    }
  }, [visible]);

  const onSave = () => {
    form.validateFields().then(files => {
      const params = {
        id: item?.id,
        supplierId: files.supplierId, 
        supplierName: suppliers.find(i => i.supplierId == files.supplierId)?.supplierName,
        shopId: files.shopId,
        minAmount: files.minAmount,
        roleCode: files.roleCode,
        roleName: list.find(i => i.roleCode == files.roleCode)?.roleName,
        account: files.account
      };
      setLoading(true);
      saveApi(params).then(res => {
        message.success("保存成功");
        setLoading(false);
        onCancel();
      }).catch(e => {
        message.error(e.message);
        setLoading(false);
      });
    });
  };
 
  return (
    <Modal 
      title={item?.id ? "编辑货拉拉账户配置" : "新增货拉拉账户配置"}
      visible={visible}
      maskClosable={false}
      onCancel={() => onCancel()}
      footer={[
        <Button loading={loading} onClick={() => onCancel()}>取消</Button>,
        <Button loading={loading} type="primary" htmlType="submit" onClick={() => onSave()}>保存</Button>
      ]}
    >
      <Form
        form={form}
        labelCol={{span: 5}}
        wrapperCol={{span: 12}}
      >
        <Item label="往来单位" name="supplierId" rules={[{required: true, message: "请选择往来单位"}]}>
          <PmsSelect
            placeholder="选择往来单位"
            options={suppliers.filter((item, index, self) => {
              return self.findIndex(el => el.supplierId == item.supplierId) === index;
            }).map((item) => ({ value: item.supplierId, label: item.supplierName }))} 
          />
        </Item>
        <Item label="签约门店" name="shopId" rules={[{ required: true, message: "请选择签约门店" }]}>
          <PmsSelect 
            placeholder="选择签约门店"
            options={shops.map((item: PmsStoragePartShop.Option) => ({ value: item.id, label: item.name }))}
          />
        </Item>
        <Item label="推待办余额" name="minAmount" rules={[{ required: true, message: "请填写金额" }]}>
          <InputNumber style={{width: '100%'}} addonAfter="元" />
        </Item>
        <Item label="推待办角色" name="roleCode" rules={[{ required: true, message: "请选择推办角色" }]}>
          <PmsSelect
            placeholder="选择待办角色"
            options={list.map(item => ({value: item.roleCode, label: item.roleName}))}
          />
        </Item>
        <Item label="发单账号" name="account" rules={[{ required: true, message: "请填写发单账号" }]}>
          <Input />
        </Item>
      </Form>
    </Modal>
  );
}