import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Button, Select, InputNumber, DatePicker } from 'antd';
import api from './service';

const RecordForm = (props) => {
  const [form] = Form.useForm();
  const [options, setOptions] = useState();

  const [applyGoodType, setApplyGoodType] = useState();
  const [applyGood, setApplyGood] = useState();

  //初始化数据
  useEffect(() => {

    const initGetStores = async () => {
      var data = await api.GetStores();
      var list = [];
      data.data.forEach((item)=>{

        list.push(
          <Select.Option key={item.id} value={item.id}>
            {item.name}
          </Select.Option>,
        );
      }
      )
      setOptions(list);
    };

    const initGoodType = async () => {
      var data = await api.GetGoodsType();
      var list = [];
      for (let k in data.data) {
        list.push(
          <Select.Option key={k.toString()} value={k.toString()}>
            {data.data[k.toString()]}
          </Select.Option>,
        );
      }
      setApplyGoodType(list);
    };
    const initApplyGoodType = async (val) => {
      var data = await api.GetGoodsById(-1);
      var list = [];
      for (let k in data.data) {
        list.push(
          <Select.Option key={k.toString()} value={k.toString()}>
            {data.data[k.toString()]}
          </Select.Option>,
        );
      }
      setApplyGood(list);
    };
    initGoodType();
    initApplyGoodType();
    initGetStores();
  }, []);

  const getApplyGoodType = async (val) => {
    var data = await api.GetGoodsById(val == undefined ? -1 : val);
    var list = [];
    for (let k in data.data) {
      list.push(
        <Select.Option key={k.toString()} value={k.toString()}>
          {data.data[k.toString()]}
        </Select.Option>,
      );
    }
    setApplyGood(list);
    form.setFieldsValue({ goodsRelation: [] });
  };

  const hander = async (value) => {
    var res = (await api.GetSelectedConfig(value)).data;
    var arr = [];
    for (let k in res) {
      arr.push({
        k: k.toString(),
        v: res[k.toString()],
      });
    }
    var data = arr.map((item) => (
      <Select.Option key={item.k} value={item.k}>
        {item.v}
      </Select.Option>
    ));
    setOptions(data);
    form.setFieldsValue({ Relation: [] });
  };

  return (
    <Modal
      footer={null}
      title="新增记录"
      width={660}
      visible={props.createModalVisible}
      onCancel={() => {
        props.onCancel();
      }}
      destroyOnClose
    >
      <Form
        labelCol={{ sm: { span: 4 } }}
        form={form}
        layout="Horizontal"
        preserve={false}
        initialValues={props.values}
        onFinish={props.onFinish}
      >
        <Form.Item name="Coupon_Id" hidden={true}>
          <Input />
        </Form.Item>
        <Form.Item name="SendNum" label="发放数量" rules={[{ required: true }]}>
          <InputNumber placeholder="发放数量" min={0} style={{ width: '510px' }} />
        </Form.Item>

        <Form.Item name="RangeType" label="适用范围类型" hidden={true} defaultValue={1}>
          <Select placeholder="发放范围" onSelect={hander} defaultValue={1}>
            <Select.Option value="1">店铺</Select.Option>
            {/* <Select.Option value="2">供应商</Select.Option> */}
            <Select.Option value="3">区域</Select.Option>
          </Select>
        </Form.Item>

        <Form.Item name="Relation" label="适用范围" rules={[{ required: true }]} defaultValue="1">
          <Select placeholder="适用范围" filterOption={false} mode="multiple">
            {options}
          </Select>
        </Form.Item>
        <Form.Item name="applyGoodType" label="适用商品类型">
          <Select
            placeholder="适用商品类型"
            onClear={getApplyGoodType}
            allowClear={true}
            onSelect={getApplyGoodType}
          >
            {applyGoodType}
          </Select>
        </Form.Item>
        <Form.Item name="goodsRelation" label="适用商品范围">
          <Select placeholder="适用商品范围" filterOption={false} mode="multiple">
            {applyGood}
          </Select>
        </Form.Item>
        <Form.Item name="Status" label="状态" rules={[{ required: true }]} defaultValue="1">
          <Select placeholder="请选择状态">
            <Select.Option value="1">启用</Select.Option>
            <Select.Option value="0">禁用</Select.Option>
          </Select>
        </Form.Item>

        <Form.Item name="Remark" label="备注">
          <Input placeholder="备注" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" style={{ marginLeft: '520px' }}>
            保存
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default RecordForm;
