import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Button, Select, DatePicker, Divider, Switch, Alert, Tag } from 'antd';
const { TextArea } = Input;
import {
  GetTypeName
} from '../service';
import { values } from 'lodash';
import { useForm } from 'rc-field-form';

const CreateTypeForm = (props) => {
  const [allRuleList, setallRuleList] = useState([]);
  const [allSelectList, setallSelectList] = useState([]);
  const weekDataList = [
    {
      name: 'Monday',
      value: 1,
      label: '周一'
    },
    {
      name: 'Tuesday',
      value: 2,
      label: '周二'
    },
    {
      name: 'Wednesday',
      value: 3,
      label: '周三'
    },
    {
      name: 'Thursday',
      value: 4,
      label: '周四'
    },
    {
      name: 'Friday',
      value: 5,
      label: '周五'
    },
    {
      name: 'Saturday',
      value: 6,
      label: '周六'
    },
    {
      name: 'Sunday',
      value: 0,
      label: '周日'
    },
  ];

  const allTypesList = [
    {
      name: 'none',
      value: -1,
      label: '不积分'
    },
    {
      name: 'common',
      value: 0,
      label: '积分优先方案'
    },
    {
      name: 'price',
      value: 1,
      label: '按金额积分'
    },
    {
      name: 'big',
      value: 2,
      label: '按大类积分'
    },
    {
      name: 'small',
      value: 3,
      label: '按小类积分'
    },
    {
      name: 'count',
      value: 4,
      label: '按消费次数积分'
    },
    {
      name: 'persons',
      value: 5,
      label: '按消费人数积分'
    },
    {
      name: 'number',
      value: 6,
      label: '按出品数量积分'
    }
  ];
  if (props.Data != undefined && props.Data.allChild && allRuleList.length == 0) {
    setallRuleList(props.Data.allChild);
  }
  if (allSelectList.length == 0) {
    if (props.values.priority > 0) {
      setallSelectList((props.Data.allChild || []).find(x => x.ruleType == props.values.priority).child);
    }
    if (props.values.priority == 0) {
      var arr = [];
      (props.Data.allChild || []).map((item, index) => {
        (item.child || []).map((it, ind) => {
          arr.push(it);
        });
      });
      setallSelectList(arr);
    }
  }


  function GetTypeName(type) {
    var typeName = "未定义规则";
    switch (type) {
      case 1:
        typeName = "消费金额";
        break;
      case 2:
        typeName = "按大类";
        break;
      case 3:
        typeName = "按小类";
        break;
      case 4:
        typeName = "消费次数";
        break;
      case 5:
        typeName = "消费人数";
        break;
      case 6:
        typeName = "出品数量";
        break;
      default:
        break;
    }
    return typeName;
  }

  const [form] = Form.useForm();

  return (
    <Modal
      width={'80%'}
      visible={props.createModalVisible}
      bodyStyle={{ padding: '32px 40px 48px' }}
      footer={null}
      onCancel={() => {
        props.onCancel();
        setallRuleList([]);
      }}
      destroyOnClose
    >
      <Form
        layout="Vertical"
        labelCol={{ span: 6 }}
        initialValues={props.values}
        onFinish={props.onFinish}
        onCancel={props.onCancel}
        form={form}
      >
        <div style={{ float: 'left' }}>
          <Form.Item name="id" hidden={true}>
            <Input />
          </Form.Item>

          <Form.Item label='规则名称' name={'name'} >
            <Input></Input>
          </Form.Item>

          <Form.Item label={'特价商品参与积分'} name="isSpecial" valuePropName="checked">
            <Switch checkedChildren="开启" unCheckedChildren="关闭" />
          </Form.Item>

          <Form.Item label='积分优先方案设置' name={'priority'} initialValue={props.values.priority || []} title='默认按小类，大类，次数，人数，消费金额，取唯一一种'>
            <Select style={{ width: '250px' }} onChange={(_, record) => {
              debugger;
              if (_ <= 0) {
                if (_ == 0) {
                  var allrule = [];
                  (allRuleList || []).map((irule, index) => {
                    (irule.child || []).map((ichild, iindex) => {
                      allrule.push(ichild);
                    })
                  });
                  setallSelectList(allrule);
                } else {
                  setallSelectList([]);
                }

              } else {
                setallSelectList((allRuleList || []).find(x => x.typeId == _).child);
              }
            }} >
              {
                (allTypesList || []).map((item, index) => {
                  return (
                    <Select.Option index={index} value={item.value} key={item.name}>
                      {item.label}
                    </Select.Option>
                  );
                })
              }
            </Select>
          </Form.Item>
          <Alert message="积分优先方案: 默认按小类，大类，次数，人数，消费金额，取唯一一种" type="success" />
        </div>
        <div style={{ float: 'right', width: '58%' }}>
          <Form.Item label='活动起止时间' initialValues={''} name={'effectiveDate'}>
            <DatePicker.RangePicker showTime style={{ width: '70%' }} />
          </Form.Item>

          <Form.Item label={'积分兑换储值'} name="isOpenIntegToPrice" valuePropName="checked">
            <Switch checkedChildren="开启" unCheckedChildren="关闭" />
          </Form.Item>

          <Form.Item label='积分兑换储值比例'>
            <Form.Item style={{ display: 'inline-block' }} name='integToPriceRatioHead'>
              <Input className="site-input-right" style={{ width: 150, textAlign: 'center' }} placeholder="积分" addonAfter='兑换' />
            </Form.Item>
            <Form.Item style={{ display: 'inline-block' }} name='integToPriceRatioValue'>
              <Input
                className="site-input-right"
                style={{
                  width: 100,
                  textAlign: 'center',
                }}
                placeholder="储值"
              />
            </Form.Item>
          </Form.Item>

          <Form.Item label={'积分兑换商品'} name="isOpenIntegToCommodity" valuePropName="checked">
            <Switch checkedChildren="开启" unCheckedChildren="关闭" />
          </Form.Item>

          <Form.Item label='积分方案使用类型设置' name={'ruletypelist'} initialValue={props.values.ruletypelist || []} >
            <Select mode="multiple" style={{ width: '90%' }} allowClear >
              {
                (allSelectList || []).map((item, index) => {
                  return (
                    <Select.Option index={index} value={item.id} key={item.id}>
                      {GetTypeName(item.ruleType)}-{item.ruleRemark}
                    </Select.Option>
                  );
                })
              }
            </Select>
          </Form.Item>
          <Alert message="选择方案类型后,将会使用已选择的方案类型进行积分计算" type="success" /><br></br>
        </div>
        <Divider />

        <Form.Item name='ruleRemark' label='规则说明'>
          <TextArea ></TextArea>
        </Form.Item>

        <Divider />

        <Form.Item label='会员生日当天积分倍数'>
          <Form.Item name='birthdayMultiple' style={{ display: 'inline-block' }} >
            <Input addonAfter='倍' style={{ width: 100 }}></Input>
          </Form.Item>&nbsp;&nbsp;&nbsp;
          <Form.Item style={{ display: 'inline-block' }} name="birthdayMultipleOn" valuePropName="checked">
            <Switch checkedChildren="开启" unCheckedChildren="关闭" />
          </Form.Item>
        </Form.Item>

        <Form.Item label='会员生日当月积分倍数'>
          <Form.Item name='birthmonthMultiple' style={{ display: 'inline-block' }} >
            <Input addonAfter='倍' style={{ width: 100 }}></Input>
          </Form.Item>
          &nbsp;&nbsp;&nbsp;
          <Form.Item style={{ display: 'inline-block' }} name="birthmonthMultipleOn" valuePropName="checked">
            <Switch checkedChildren="开启" unCheckedChildren="关闭" />
          </Form.Item>
        </Form.Item>

        <Form.Item label='每月固定日'>
          <Form.Item name='monthDay' style={{ display: 'inline-block' }} >
            <Input
              className="site-input-right"
              name='monthDay'
              style={{
                width: 160
              }}
              addonBefore='每月'
              addonAfter='日'
            />
          </Form.Item>
          <Form.Item style={{ display: 'inline-block' }} name='multipleMonthDay'>
            <Input addonAfter='倍' style={{ width: 100 }}></Input>
          </Form.Item>
          &nbsp;&nbsp;&nbsp;
          <Form.Item style={{ display: 'inline-block' }} name="multipleMonthDayOn" valuePropName="checked">
            <Switch checkedChildren="开启" unCheckedChildren="关闭" />
          </Form.Item>
        </Form.Item>

        <Form.Item label='每周固定日'>
          <Form.Item name='weekList' style={{ display: 'inline-block' }} initialValue={props.values.weekList || []}>
            <Select
              mode="multiple"
              style={{ width: '300px' }}
            >
              {
                weekDataList.map((item, index) => {
                  return (
                    <Select.Option index={index} value={item.value} key={item.name}>
                      {item.label}
                    </Select.Option>
                  );
                })
              }
            </Select>
          </Form.Item>
          <Form.Item name='weekMultiple' style={{ display: 'inline-block' }}>
            <Input
              className="site-input-right"

              style={{
                width: 100
              }}
              addonAfter='倍'
              placeholder="积分倍数"
            />
          </Form.Item>
          &nbsp;&nbsp;&nbsp;
          <Form.Item style={{ display: 'inline-block' }} name="weekMultipleOn" valuePropName="checked">
            <Switch checkedChildren="开启" unCheckedChildren="关闭" />
          </Form.Item>
        </Form.Item>

        <Form.Item label='固定时间段积分倍数'>
          <Form.Item name='multipleDate' style={{ display: 'inline-block' }}>
            <DatePicker.RangePicker showTime />
          </Form.Item>
          <Form.Item name='dateMultiple' style={{ display: 'inline-block' }}>
            <Input
              className="site-input-right"
              style={{
                width: 100,
              }}
              addonAfter='倍'
              placeholder="积分倍数"
            />
          </Form.Item>
          &nbsp;&nbsp;&nbsp;
          <Form.Item style={{ display: 'inline-block' }} name="dateMultipleOn" valuePropName="checked">
            <Switch checkedChildren="开启" unCheckedChildren="关闭" />
          </Form.Item>
        </Form.Item>
        <Form.Item label='固定日期积分倍数'>
          <Form.Item name='fixedDay' style={{ display: 'inline-block' }}>
            <DatePicker showTime />
          </Form.Item>
          <Form.Item name='multipleFixedDay' style={{ display: 'inline-block' }}>
            <Input addonAfter='倍' style={{
              width: 100
            }}></Input>
          </Form.Item>
          &nbsp;&nbsp;&nbsp;
          <Form.Item style={{ display: 'inline-block' }} name="multiplefixedDayOn" valuePropName="checked">
            <Switch checkedChildren="开启" unCheckedChildren="关闭" />
          </Form.Item>
        </Form.Item>
        <Divider />
        <Button type="primary" htmlType="submit" >
          保存
        </Button>
      </Form>
    </Modal>
  );
};

export default CreateTypeForm;
