/*
* 信息汇聚模块，3列布局，每列布局可以设置标题，3个主标题，每个主标题还可以设置多个子标题
* */
import { connect } from 'dva/index';
import React, { Component, Fragment } from 'react';
import { Form,Input,Button } from 'antd';
import {
  sldComLanguage,
} from '@/utils/utils';
import styles from '../pcdecorate.less';
import SldDiyTitleLinkModal from '@/components/SldDiyTitleLinkModal/SldDiyTitleLinkModal';
import SldDiyMoreTitleLinkModal from '@/components/SldDiyMoreTitleLinkModal/SldDiyTitleLinkModal';
import global from '@/global.less';
import SldDiySingleImgModal from '@/components/SldDiySingleImgModal/SldDiySingleImgModal';
const { TextArea } = Input;
let sthis = '';
let getFieldDecorator_new = '';
@connect(({ product }) => ({
  product,
}))
@Form.create()
export default class Adv_29 extends Component {
  constructor(props) {
    super(props);
    sthis = this;
    const {
      form: { getFieldDecorator },
    } = props;
    getFieldDecorator_new = getFieldDecorator;
    this.state = {
      cur_data: {},
      l_tab_index: 0,//左侧选中的tab
      r_tab_index: 0,//右侧选中的tab
      modalTitle: '',//弹框的标题
      modal_tip: [],//弹框的提示语
      submiting: false,//按钮loading
      modalVisible: false,//是否展示modal
      modalTitleVisible: false,//是否展示标题modal
      modalSldDiyMoreTitleLinkVisible: false,//标题链接选择器——多选
      modalSldDiyTitleLinkVisible: false,//标题链接选择器——单选
      tpl_info: props.tpl_info,
      data: {
        type: 'adv_29',
        title_info: {
          title: {
            label: `标题`,
            name: 'title',
            initialValue: `${sldComLanguage('标题')}`,
            required: true,
          },
          sub_title: {
            label: `描述`,
            name: 'sub_title',
            initialValue: `${sldComLanguage('描述')}`,
            required: false,
          },
          link_type: '',
          link_value: '',
          info: {},
        },//上方两个标题
        left: {
          type: 'img_cat',
          width: '1440',
          height: '654',
          data: {
            imgUrl: '',
            imgPath: '',
            title: '',
            link_type: '',
            link_value: '',
            info: {},
          },
        },//背景图
        center: [{
          title: {
            label: `子标题1`,
            name: 'title1',
            initialValue: `子标题1`,
            required: true,
          },
          link_type: '',
          link_value: '',
          info: {},
        }, {
          title: {
            label: `子标题2`,
            name: 'title2',
            initialValue: `子标题2`,
            required: true,
          },
          link_type: '',
          link_value: '',
          info: {},
        }, {
          title: {
            label: `子标题3`,
            name: 'title3',
            initialValue: `子标题3`,
            required: true,
          },
          link_type: '',
          link_value: '',
          info: {},
        }],//中间子标题
        btn: {
          title: {
            label: `按钮`,
            name: 'btn',
            initialValue: `按钮`,
            required: true,
          },
          link_type: '',
          link_value: '',
          info: {},
        },//按钮
      },
    };
  }

  // 修正数据
  correction = (tplData) => {
    tplData.left.width = '1440';
    tplData.left.height = '654';

    return tplData;
  }

  componentDidMount() {
    let { tpl_info } = this.state;
    this.setState({
      data: this.correction(tpl_info),
    });
  }

  componentWillReceiveProps(nextProps, nextContext) {
    let { data } = this.state;
    if (JSON.stringify(nextProps.tpl_info) != JSON.stringify(data)) {
      // console.log('nextProps.tpl_info:{}', nextProps.tpl_info);
      data = nextProps.tpl_info;
      this.setState({ data: this.correction(data) });
    }
  }

  componentWillUnmount() {

  }

  sldHandleCancle = () => {
    this.setState({
      modalVisible: false,
      modalSingleImgVisible: false,
      modalSpuShow: false,
      modalSldDiyTitleLinkVisible: false,
      modalComCatSelectorShow: false,
      modalSldDiyMoreTitleLinkVisible: false,
    });
  };

  //编辑板块 part：标示哪一部分，比如left，center  modalTitle：弹框的标题  modalTip：弹框的整体提示
  editTpl = (part, modalTitle = '', modalTip = []) => {
    let {
      data,
      modalVisible,
      modalSpuShow,
      cur_sele_goods,
      cur_sele_goods_ids,
      cur_sele_cats,
      cur_sele_cats_ids,
      modalSingleImgVisible,
      cur_data,
      addData,
      modalSldDiyTitleLinkVisible,
      modalComCatSelectorShow,
      modalSldDiyMoreTitleLinkVisible,
    } = this.state;
    // console.log('curdata----{}', cur_data);
    if (part == 'left_img') {
      //图片
      cur_data = data.left;
      modalSingleImgVisible = true;
    } else if (part == 'top_title_link') {
      //顶部标题设置
      cur_data = data.title_info;
      modalSldDiyTitleLinkVisible = true;
    } else if (part == 'center') {
      cur_data = data.center;
      modalSldDiyMoreTitleLinkVisible = true;
    } else if (part == 'btn') {
      cur_data = data.btn;
      modalSldDiyTitleLinkVisible = true;
    }

    this.setState({
      cur_part: part,
      cur_data,
      modalVisible,
      modalSpuShow,
      cur_sele_goods,
      cur_sele_goods_ids,
      cur_sele_cats,
      cur_sele_cats_ids,
      modalSingleImgVisible,
      modalTitle: modalTitle,
      modal_tip: modalTip,
      addData,
      modalSldDiyTitleLinkVisible,
      modalComCatSelectorShow,
      modalSldDiyMoreTitleLinkVisible
    });
  };


  sldHandleConfirm = (val) => {
    // console.log('confirm{}', val);
    let { cur_part, data, cur_index } = this.state;
    if (cur_part == 'left_img') {
      data.left.data = val;
    } else if (cur_part == 'top_title_link') {
      //顶部标题数据
      for (let i in val) {
        if (i == 'title') {
          data.title_info.title.initialValue = val.title;
        } else if (i == 'sub_title') {
          data.title_info.sub_title.initialValue = val.sub_title;
        } else if (i == 'link_type') {
          data.title_info.link_type = val.link_type;
          data.title_info.link_value = val.link_value;
          data.title_info.info = val.info != undefined ? val.info : {};
        }
      }
    } else if (cur_part == 'btn') {
      data.btn.title.initialValue = val.btn;
      data.btn.link_type = val.link_type;
      data.btn.link_value = val.link_value;
      data.btn.info = val.info != undefined ? val.info : {};
      // data.btn = data;
    } else if (cur_part == 'center') {
      data.center = val;
    }

    // console.log("sldHandleConfirm ----- data:{}",data)

    this.setState({
      data,
      modalVisible: false,
      modalSldDiyTitleLinkVisible: false,
      modalSldDiyMoreTitleLinkVisible: false
    }, () => {
      this.props.save_tpl_data(data, this.refs.wrap_html.innerHTML);//保存数据
    });
  };

  render() {
    const {
      data,
      submiting,
      modalVisible,
      cur_data,
      modalSingleImgVisible,
      modalTitle,
      modal_tip,
      modalSldDiyTitleLinkVisible,
      modalSldDiyMoreTitleLinkVisible,
    } = this.state;
    // console.log('render ------- data:{}', data);
    return (
      <Fragment>
        <div ref={'wrap_html'}>

          <div className={`${styles.w_sld_react_1210} ${styles.adv_29}`}>
            <div className={`${styles.sourcing_bg}`}>
              <div className={styles.sld_mask}
                   onClick={() => this.editTpl('left_img', `${sldComLanguage('图片设置')}`)}>
                <span>{sldComLanguage('编辑')}</span>
              </div>

              {data.left.data.imgUrl != '' ?
                <Fragment>
                  <img className={`${styles.theme_img_small}`} src={data.left.data.imgUrl} />
                </Fragment>
                :
                <Fragment>
                  <span>{sldComLanguage('此处添加【1440*654】图片')}</span>
                </Fragment>}
            </div>
            <div className={`${styles.sourcing_centent}`}>
              <div className={`${styles.sourcing_form}`}>
                <div className={`${styles.form_title}`}>Want to get quotations?</div>
                <div class="form" style={{width:'531px'}}>
                  <Form
                    name="basic"
                  >
                    <Form.Item
                      label=""
                      name=""
                      rules={[{ required: true, message: 'Please enter your username!' }]}
                    >
                      <Input placeholder="Please enter name" style={{width:'100%', height: '48px'}}/>
                    </Form.Item>

                    <Form.Item
                      label=""
                      name=""
                      rules={[{ required: true, message: 'Please enter your email!' }]}
                    >
                      <Input placeholder="Please enter email" style={{width:'100%', height: '48px'}}/>
                    </Form.Item>

                    <Form.Item
                      label=""
                      name=""
                      rules={[{ required: true, message: 'Please enter quantity!' }]}
                    >
                      <Input placeholder="Please enter quantity" style={{width:'100%', height: '48px'}}/>
                    </Form.Item>

                    <Form.Item label="" style={{margin_bottom:'8px'}}>
                      <TextArea rows={6} placeholder="Please enter Message" style={{width:'100%', height: '148px'}}/>
                    </Form.Item>

                      <Form.Item >
                      <Button type="primary" htmlType="submit" style={{ width: '200px', height: '42px', fontWeight: 'bold', fontSize: '14px',color: '#FFFFFF', marginTop: '20px' }}>
                        Post Your Request Now
                      </Button>
                    </Form.Item>
                  </Form>
                </div>
              </div>
            </div>
            <div className={`${styles.sourcing_text}`}>
              <div className={`${styles.pr}`}>
                <div className={styles.sld_mask}
                     onClick={() => this.editTpl('top_title_link', `${sldComLanguage('左侧标题设置')}`)}>
                  <span>{sldComLanguage('编辑')}</span>
                </div>
                <div className={`${styles.sourcing_title}`}>
                  {data.title_info.title.initialValue != '' ? data.title_info.title.initialValue : `${sldComLanguage('添加标题')}`}
                </div>
                <div className={`${styles.sourcing_desc}`}>
                  <p style={{marginBottom:'24px'}}>{data.title_info.sub_title.initialValue != '' ? data.title_info.sub_title.initialValue : `${sldComLanguage('添加子标题')}`}</p>
                </div>
              </div>

              <div className={`${styles.sourcing_desc}`} style={{ position: 'absolute', bottom: '80px' }}>
                <div className={`${styles.pr}`}>
                  <div className={styles.sld_mask}
                       onClick={() => this.editTpl('center', `左侧子标题设置`, [`${sldComLanguage('子标题不能为空，最多输入40个字')}`])}>
                    <span>{sldComLanguage('编辑')}</span>
                  </div>
                  {data.center.map((item3, index3) => {
                    return <p>
                          <span key={'item3' + index3}
                                className={`${styles.item_right_con}`}>{item3.title.initialValue}</span>
                    </p>;
                  })
                  }
                </div>
              </div>
              {/*<div class={`${styles.sourcing_more}`}>*/}
              {/*  <a href="https://sourcing.made-in-china.com/" target="_blank">*/}
              {/*    Learn More <i class="ob-icon icon-right">></i>*/}
              {/*  </a>*/}
              {/*</div>*/}
              <div className={`${styles.pr}`} style={{ position: 'absolute', bottom: '30px' }}>
                <div className={styles.sld_mask}
                     onClick={() => this.editTpl('btn', `${sldComLanguage('左侧按钮设置')}`)}>
                  <span>{sldComLanguage('编辑')}</span>
                </div>
                {/*<div className={`${styles.soure_now}`}>*/}
                {/*   <span className={`${styles.btn} ${styles.btn_main}`}>{data.title_info.btn.initialValue != '' ? data.title_info.btn.initialValue : `${sldComLanguage('添加按钮名称')}`}</span>*/}
                {/*</div>*/}
                <div class={`${styles.sourcing_more}`}>
                  <div>
                    {data.btn.title.initialValue != '' ? data.btn.title.initialValue : `${sldComLanguage('添加按钮名称')}`} <i
                    class="ob-icon icon-right">></i>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>

        <SldDiySingleImgModal
          width={1000}
          title={modalTitle}
          sldSeleSingleRow={true}
          submiting={submiting}
          modalVisible={modalSingleImgVisible}
          sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
          sldHandleCancle={this.sldHandleCancle}
          content={cur_data}
          modal_tip={modal_tip}
        />
        {/*标题+链接设置-single*/}
        <SldDiyTitleLinkModal
          width={1000}
          title={modalTitle}
          sldSeleSingleRow={true}
          submiting={submiting}
          modalVisible={modalSldDiyTitleLinkVisible}
          sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
          sldHandleCancle={this.sldHandleCancle}
          content={cur_data}
          modal_tip={modal_tip}

        />
        {/*标题+链接设置-single*/}
        {/*标题+链接设置-more*/}
        <SldDiyMoreTitleLinkModal
          width={1000}
          title={modalTitle}
          sldSeleSingleRow={true}
          submiting={submiting}
          modalVisible={modalSldDiyMoreTitleLinkVisible}
          sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
          sldHandleCancle={this.sldHandleCancle}
          content={cur_data}
          modal_tip={modal_tip}
          client={'pc'}
          type={'more'}
          extra={{ input_limit: 40 }}
        />
        {/*标题+链接设置-more*/}
      </Fragment>
    );
  }
}
