import React from 'react';
import ExtendsComponent from '../../../components/ExtendsComponent';
import AntForm from '../../../components/AntForm';
import { booleanEnumFactory } from '../../enums/common_enums';
import { SORT_TYPE_ENUM, BRAND_TYPE_ENUM } from '../../enums/brand_enums';
import { message, Card, Row, Col } from 'antd';
import _ from 'lodash';
import req_url from '../../config/req_url';
import { get, post } from '../../../utils/request';
import './styles.less';

const BOOLEAN_ENUM = booleanEnumFactory();

class BrandEdit extends ExtendsComponent {
  constructor(props) {
    super(props);
    this.id = (!props.match || props.match.params.id === '-1') ? undefined : props.match.params.id;
    this.editBtns = [
      this.id
        ? {
            btnText: '取消',
            handleClick: () => {
              this.initFormFields();
            },
          }
        : {
            btnText: '返回',
            handleClick: () => {
              router.goBack();
            },
          },
      {
        type: 'primary',
        method: 'submit',
        btnText: '提交',
      },
    ];
    this.detailBtns = [
      {
        btnText: '返回',
        handleClick: () => {
          router.goBack();
        },
      },
      {
        btnText: '编辑',
        type: 'primary',
        handleClick: () => {
          // console.log('编辑');
          this.setState({
            disabled: false,
            operateBtns: this.editBtns,
          });
        },
      },
    ];
    this.state = {
      disabled: this.id ? true : false,
      spu_depository: 0,
      sku_depository: 0,
      sku_onsale: 0,
      spu_onsale: 0,
      supplier_info: [],
      fieldsGroup: this.defaultFieldsGroup(),
      operateBtns: this.id ? this.detailBtns : this.editBtns,
    };
  }

  componentDidMount() {
    this.initFormFields();
  }

  defaultFieldsGroup = () => {
    return [
      {
        title: '品牌信息',
        fieldsArr: [
          {
            type: 'radio',
            label: '品牌类型',
            name: 'type',
            currentVal: BRAND_TYPE_ENUM.SELF_BRAND,
            decoratorOpts: {
              rules: [{ required: true, validator: this.brandTypeValidator }],
            },
            itemConfig: {
              options: BRAND_TYPE_ENUM.OPTIONS.filter(item => item.value !== BRAND_TYPE_ENUM.ALL),
            },
          },
          {
            label: '品牌名称',
            name: 'name',
            decoratorOpts: {
              rules: [{ required: true, message: '品牌名称必填' }],
            },
          },
          {
            type: 'radio',
            label: '是否淘品牌',
            name: 'is_tb',
            decoratorOpts: {
              rules: [{ required: true }],
            },
            currentVal: BOOLEAN_ENUM.TRUE,
            itemConfig: {
              options: BOOLEAN_ENUM.OPTIONS.filter(item => item.value !== BOOLEAN_ENUM.ALL),
            },
          },
          {
            type: 'radio',
            label: '是否合作',
            name: 'is_cooperation',
            decoratorOpts: {
              rules: [{ required: true }],
            },
            currentVal: BOOLEAN_ENUM.FALSE,
            itemConfig: {
              options: BOOLEAN_ENUM.OPTIONS.filter(item => item.value !== BOOLEAN_ENUM.ALL),
              disabled: true,
            },
          },
          {
            type: 'radio',
            label: '是否生效',
            name: 'is_effect',
            decoratorOpts: {
              rules: [{ required: true }],
            },
            currentVal: BOOLEAN_ENUM.TRUE,
            itemConfig: {
              options: BOOLEAN_ENUM.OPTIONS.filter(item => item.value !== BOOLEAN_ENUM.ALL),
              itemExtra: (
                <div className={"tips"}>品牌生效表示商品上架可以关联该品牌，否则不能关联</div>
              ),
            },
          },
          {
            type: 'single-img',
            label: '品牌LOGO',
            name: 'logo',
            decoratorOpts: {
              rules: [{ required: true, message: '请上传品牌LOGO' }],
            },
            currentVal: '',
          },
          {
            type: 'single-img',
            label: '品牌专区大图',
            name: 'image',
            decoratorOpts: {
              rules: [{ required: true, message: '请上传品牌专区大图' }],
            },
            currentVal: '',
          },
          {
            type: 'textarea',
            label: '品牌故事',
            span: 12,
            name: 'desc',
            decoratorOpts: {
              rules: [{ required: true, message: '请输入品牌故事' }],
            },
            currentVal: '',
          },
        ],
      },
      {
        title: '商品显示',
        fieldsArr: [
          {
            type: 'radio',
            label: '商品显示顺序',
            name: 'sort',
            decoratorOpts: {
              rules: [{ required: true }],
            },
            currentVal: SORT_TYPE_ENUM.TIME_SORT,
            itemConfig: {
              options: SORT_TYPE_ENUM.OPTIONS.filter(item => item.value !== SORT_TYPE_ENUM.ALL),
              itemExtra: <div className={"tips"}>(商品在 APP 端品牌主页下的显示顺序)</div>,
            },
          },
        ],
      },
    ];
  };

  initFormFields = () => {
    this.setState(
      {
        fieldsGroup: [],
        disabled: this.id ? true : false,
        operateBtns: this.id ? this.detailBtns : this.editBtns,
      },
      () => {
        this.setState(
          {
            fieldsGroup: this.defaultFieldsGroup(),
          },
          () => {
            if (this.id) {
              get(req_url.brand.edit.brand_info, {
                id: this.id,
              }).then(resp => {
                if (resp.code === 200) {
                  const { data: brandInfo = {} } = resp;
                  // console.log('brandInfo', brandInfo);
                  let fields = {};
                  ({
                    brand_id: fields.brand_id,
                    c_time: fields.c_time,
                    name: fields.name,
                    logo: fields.logo,
                    image: fields.image,
                    desc: fields.desc,
                    sort: fields.sort,
                    is_tb: fields.is_tb,
                    is_effect: fields.is_effect,
                    is_cooperation: fields.is_cooperation,
                    type: fields.type,
                  } = brandInfo);
                  // console.log('fields', fields);
                  let stateDataArr = [];
                  for (let k in fields) {
                    const { fieldsArr } = this.state.fieldsGroup[0];
                    let idx = _.findIndex(fieldsArr, { name: k });
                    if (idx !== -1) {
                      stateDataArr.push({
                        key: 'fieldsGroup',
                        path: `[0].fieldsArr[${idx}].currentVal`,
                        value: fields[k],
                      });
                    }
                  }

                  // console.log('stateDataArr', stateDataArr);
                  this.updateStateData([
                    ...stateDataArr,
                    { key: 'type', value: brandInfo.type },
                    { key: 'spu_depository', value: brandInfo.spu_depository },
                    { key: 'sku_depository', value: brandInfo.sku_depository },
                    { key: 'sku_onsale', value: brandInfo.sku_onsale },
                    { key: 'spu_onsale', value: brandInfo.spu_onsale },
                    { key: 'supplier_info', value: brandInfo.supplier_info },
                  ]);
                }
              },)
            } else {
              let fields = {
                name: '',
                logo: '',
                image: '',
                desc: '',
                sort: 1,
                is_tb: BOOLEAN_ENUM.TRUE,
                is_cooperation: BOOLEAN_ENUM.FALSE,
                type: BRAND_TYPE_ENUM.SELF_BRAND,
              };
              let stateDataArr = [];
              for (let k in fields) {
                const { fieldsArr } = this.state.fieldsGroup[0];
                let idx = _.findIndex(fieldsArr, { name: k });
                if (idx !== -1) {
                  stateDataArr.push({
                    key: 'fieldsGroup',
                    path: `[0].fieldsArr[${idx}].currentVal`,
                    value: fields[k],
                  });
                }
              }
              this.updateStateData(stateDataArr);
            }
          },
        );
      },
    );
  };

  brandTypeValidator = (rule, value, callback) => {
    this.setState({
      type: value,
    });
    callback();
  };

  render() {
    const {
      fieldsGroup,
      operateBtns,
      disabled = false,
      type = BRAND_TYPE_ENUM.SELF_BRAND,
      spu_depository = 0,
      sku_depository = 0,
      sku_onsale = 0,
      spu_onsale = 0,
      supplier_info = [],
    } = this.state;

    const CARD_ROW_LAYOUT = {
      labelCol: {
        offset: 1,
        span: 3,
      },
      wrapperCol: {
        span: 7,
      },
    };

    return (
      <div>
        <div className={"brand-edit"}>
          <AntForm
            footer={
              type === BRAND_TYPE_ENUM.SELF_BRAND ? (
                ''
              ) : (
                <div className={"footer-info"}>
                  <Card
                    title="在库商品信息"
                    type="inner"
                    extra={
                      <div className={"tips"}>
                        (spu/sku 数量将根据商品实际在库数量同步更新)
                      </div>
                    }
                  >
                    <Row>
                      <Col {...CARD_ROW_LAYOUT.labelCol}>spu 数量：</Col>
                      <Col {...CARD_ROW_LAYOUT.wrapperCol}>{spu_depository}</Col>
                      <Col {...CARD_ROW_LAYOUT.labelCol}>sku 数量：</Col>
                      <Col {...CARD_ROW_LAYOUT.wrapperCol}>{sku_depository}</Col>
                    </Row>
                  </Card>
                  <Card
                    title="在架商品信息"
                    type="inner"
                    extra={
                      <div className={"tips"}>
                        (spu/sku 数量将根据商品实际在架数量同步更新)
                      </div>
                    }
                  >
                    <Row>
                      <Col {...CARD_ROW_LAYOUT.labelCol}>spu 数量：</Col>
                      <Col {...CARD_ROW_LAYOUT.wrapperCol}>{spu_onsale}</Col>
                      <Col {...CARD_ROW_LAYOUT.labelCol}>sku 数量：</Col>
                      <Col {...CARD_ROW_LAYOUT.wrapperCol}>{sku_onsale}</Col>
                    </Row>
                  </Card>
                  <Card title="供应商信息" type="inner">
                    {supplier_info.map((supplier_item, index) => (
                      <div key={index}>
                        <Row>
                          <Col {...CARD_ROW_LAYOUT.labelCol}>供应商名称：</Col>
                          <Col {...CARD_ROW_LAYOUT.wrapperCol}>{supplier_item.supplier_name}</Col>
                          <Col {...CARD_ROW_LAYOUT.labelCol}>对接人：</Col>
                          <Col {...CARD_ROW_LAYOUT.wrapperCol}>{supplier_item.docking_name}</Col>
                        </Row>
                        <Row>
                          <Col {...CARD_ROW_LAYOUT.labelCol}>对接人电话：</Col>
                          <Col {...CARD_ROW_LAYOUT.wrapperCol}>{supplier_item.docking_phone}</Col>
                        </Row>
                      </div>
                    ))}
                  </Card>
                </div>
              )
            }
            loading={this.props.loading}
            disabled={disabled}
            showCard={true}
            operateBtns={operateBtns}
            fieldsGroup={fieldsGroup}
            handleSubmit={values => {
              // console.log('values', values);
              if (this.id) {
                values.id = this.id;
              }
              values.mode = this.id ? 'edit' : 'add';
              let url = this.id ? req_url.brand.edit.edit_brand : req_url.brand.edit.add_brand;
              post(url, {
                ...values,
              }).then(resp => {
                if (resp.code === 200) {
                  message.success('操作成功');
                  // router.goBack();
                }
              })
            }}
            handleCancel={() => {}}
          />
        </div>
      </div>
    );
  }
}

export default BrandEdit;