import React from 'react';
import { Form, Row, Col, Input, Button, Icon } from 'antd';
import './index.less';
import Page from '@src/containers/Page';
import Block from '@src/components/Block';
import { flattenObject, formatFormError } from '@src/services/Tools';
import { asyncSMessage } from '@src/services/AsyncTools';
import { System } from '../../../stores/system';

export default class extends Page {
  initData() {
    System.getCoursePromote().then(result => {
      const { form } = this.props;
      (result.video_list || []).forEach((row, index) => {
        form.getFieldDecorator(`video_list[${index}].number`);
        form.getFieldDecorator(`video_list[${index}].percent`);
      });
      (result.vs_list || []).forEach((row, index) => {
        form.getFieldDecorator(`vs_list[${index}].number`);
        form.getFieldDecorator(`vs_list[${index}].percent`);
      });
      (result.ask_time || []).forEach((row, index) => {
        form.getFieldDecorator(`ask_time[${index}].money`);
        form.getFieldDecorator(`ask_time[${index}].hour`);
      });
      form.setFieldsValue(flattenObject(result));
      this.setState({ load: true, data: result });
    });
  }

  addLength(field, info) {
    let { data } = this.state;
    data = data || {};
    data[field] = data[field] || [];
    data[field].push(info);
    this.setState({ data });
  }

  deleteLength(field, start, length) {
    let { data } = this.state;
    data = data || {};
    data[field] = data[field] || [];
    data[field].splice(start, length);
    this.setState({ data });
  }

  changeMapValue(field, index, key, value) {
    const { data } = this.state;
    data[field] = data[field] || {};
    data[field][index] = data[field][index] || {};
    data[field][index][key] = value;
    this.setState({ data });
  }

  changeValue(field, key, value) {
    const { data } = this.state;
    data[field] = data[field] || {};
    data[field][key] = value;
    this.setState({ data });
  }

  submit() {
    const { form } = this.props;
    form.validateFields((err) => {
      if (!err) {
        const data = form.getFieldsValue();
        data.video_list = (data.video_list || []).map(row => {
          return { number: Number(row.number), percent: Number(row.percent) };
        });
        data.vs_list = (data.vs_list || []).map(row => {
          return { number: Number(row.number), percent: Number(row.percent) };
        });
        data.ask_time = (data.ask_time || []).map(row => {
          return { money: Number(row.money), hour: Number(row.hour) };
        });
        System.setCoursePromote(data)
          .then(() => {
            this.setState(data);
            asyncSMessage('保存成功');
          }).catch((e) => {
            form.setFields(formatFormError(data, e.result));
          });
      }
    });
  }

  renderVideo() {
    const { getFieldDecorator } = this.props.form;
    const { data } = this.state;
    const videos = data.video_list || [];
    return <Block>
      <h1>视频课折扣</h1>
      <Form>
        <Form.Item label='按购买课程数量计算' />
        {videos.map((row, index) => {
          return <Row>
            <Col span={2}>
              <Form.Item>
                {getFieldDecorator(`video_list[${index}].number`, {
                  rules: [
                    { required: true, message: '输入数量' },
                  ],
                })(
                  <Input placeholder={'输入数量'} onChange={(value) => {
                    this.changeMapValue('video_list', index, 'number', value);
                  }} />,
                )}
              </Form.Item>
            </Col>
            <Col span={1}>
              门
            </Col>
            <Col span={2}>
              <Form.Item>
                {getFieldDecorator(`video_list[${index}].percent`, {
                  rules: [
                    { required: true, message: '输入百分比' },
                  ],
                })(
                  <Input placeholder={'输入百分比'} onChange={(value) => {
                    this.changeMapValue('video_list', index, 'percent', value);
                  }} />,
                )}
              </Form.Item>
            </Col>
            <Col span={1}>
              %
            </Col>
            <Col span={1} onClick={() => {
              this.deleteLength('video_list', index, 1);
            }}>
              <Button><Icon type="minus" /></Button>
            </Col>
          </Row>;
        })}
        <Button onClick={() => {
          this.addLength('video_list', { number: 0, precent: 0 });
        }}><Icon type={'plus'} /></Button>
        <Form.Item labelCol={{ span: 3 }} wrapperCol={{ span: 16 }} label='促销文案'>
          {getFieldDecorator('video.text', {
            rules: [
              { required: true, message: '输入促销文案' },
            ],
          })(
            <Input placeholder='2门9折，3门88折，4门85折（套餐不享受此优惠）' onChange={(value) => {
              this.changeValue('video', 'text', value);
            }} />,
          )}
        </Form.Item>
      </Form>
    </Block>;
  }

  renderVs() {
    const { getFieldDecorator } = this.props.form;
    const { data } = this.state;
    const vss = data.vs || [];
    return <Block>
      <h1>1v1课折扣</h1>
      <Form>
        <Form.Item label='按购买课程数量计算' />
        {vss.map((row, index) => {
          return <Row>
            <Col span={2}>
              <Form.Item>
                {getFieldDecorator(`vs_list[${index}].number`, {
                  rules: [
                    { required: true, message: '输入数量' },
                  ],
                })(
                  <Input placeholder={'输入数量'} onChange={(value) => {
                    this.changeMapValue('vs_list', index, 'number', value);
                  }} />,
                )}
              </Form.Item>
            </Col>
            <Col span={1}>
              课
          </Col>
            <Col span={2}>
              <Form.Item>
                {getFieldDecorator(`vs_list[${index}].percent`, {
                  rules: [
                    { required: true, message: '输入百分比' },
                  ],
                })(
                  <Input placeholder={'输入百分比'} onChange={(value) => {
                    this.changeMapValue('vs_list', index, 'percent', value);
                  }} />,
                )}
              </Form.Item>
            </Col>
            <Col span={1}>
              %
          </Col>
            <Col span={1} onClick={() => {
              this.deleteLength('vs_list', index, 1);
            }}>
              <Button><Icon type="minus" /></Button>
            </Col>
          </Row>;
        })}
        <Button onClick={() => {
          this.addLength('vs_list', { number: 0, precent: 0 });
        }}><Icon type={'plus'} /></Button>
        <Form.Item labelCol={{ span: 3 }} wrapperCol={{ span: 16 }} label='促销文案'>
          {getFieldDecorator('vs.text', {
            rules: [
              { required: true, message: '输入促销文案' },
            ],
          })(
            <Input placeholder='满30课时95折' onChange={(value) => {
              this.changeValue('vs', 'text', value);
            }} />,
          )}
        </Form.Item>
      </Form>
    </Block>;
  }

  renderAskTime() {
    const { getFieldDecorator } = this.props.form;
    const { data } = this.state;
    const ask_time = data.ask_time || [];
    return <Block>
      <h1>课程赠品</h1>
      <Form>
        <Form.Item label='满额送回复时长服务' />
        {ask_time.map((row, index) => {
          return <Row>
            <Col span={6}>
              <Form.Item labelCol={{ span: 10 }} wrapperCol={{ span: 14 }} label='实付金额'>
                {getFieldDecorator(`ask_time[${index}].money`, {
                  rules: [
                    { required: true, message: '输入金额' },
                  ],
                })(
                  <Input placeholder={'输入金额'} onChange={(value) => {
                    this.changeMapValue('ask_time', index, 'money', value);
                  }} />,
                )}
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item labelCol={{ span: 10 }} wrapperCol={{ span: 14 }} label='赠送'>
                {getFieldDecorator(`ask_time[${index}].hour`, {
                  rules: [
                    { required: true, message: '输入小时' },
                  ],
                })(
                  <Input placeholder={'输入小时'} onChange={(value) => {
                    this.changeMapValue('ask_time', index, 'hour', value);
                  }} />,
                )}
              </Form.Item>
            </Col>
            <Col span={1} onClick={() => {
              this.deleteLength('ask_time', index, 1);
            }}>
              <Button><Icon type="minus" /></Button>
            </Col>
          </Row>;
        })}
        <Button onClick={() => {
          this.addLength('ask_time', { money: 0, hour: 0 });
        }}><Icon type={'plus'} /></Button>
      </Form>
    </Block>;
  }

  renderView() {
    const { tab } = this.state;
    return <div>
      {this.renderVideo()}
      {this.renderVs()}
      {this.renderAskTime()}
      <Row type="flex" justify="center">
        <Col>
          <Button type="primary" onClick={() => {
            this.submit(tab);
          }}>保存</Button>
        </Col>
      </Row>
    </div>;
  }
}