/*
* 主轮播图设置，宽度满屏，高度457，主要用于页面分类处
* */
import { connect } from 'dva/index';
import React, { Component, Fragment } from 'react';
import { Form, Carousel } from 'antd';
import {
  sldComLanguage,
} from '@/utils/utils';
import { tpl_adv_01_modal_tip } from '@/utils/util_data';
import global from '@/global.less';
import styles from '../pcdecorate.less';
import diy from '../diy_page.less';
import SldDiyMoreImgPcModal from '@/components/SldDiyMoreImgPcModal/SldDiyMoreImgPcModal';
import SldDiyTitleLinkModal from '@/components/SldDiyTitleLinkModal/SldDiyTitleLinkModal';
import SldDiyMoreTitleLinkModal from '@/components/SldDiyMoreTitleLinkModal/SldDiyTitleLinkModal';

let sthis = '';
let getFieldDecorator_new = '';
@connect(({ product, project }) => ({
  product,
  project,
}))
@Form.create()
export default class MainBannerPc extends Component {
  constructor(props) {
    super(props);
    sthis = this;
    const {
      form: { getFieldDecorator },
    } = props;
    getFieldDecorator_new = getFieldDecorator;
    this.state = {
      tpl_info: props.tpl_info,
      cur_index: '',//当前操作数据的index
      curData: {},
      data: {},
      cur_part: '',//当前操作的部分，比如left，center，right
      cur_data: {},//当前操作的数据
      cur_data1: {},//当前操作的数据
      tpl_adv_01_modal_tip: [],//modal框提示
      submiting: false,//按钮loading
      modalVisible: false,//是否展示modal
      modalSldDiyTitleLinkVisible: false,//标题链接modal是否显示
      modalSldDiyMoreTitleLinkVisible: false,
      banner_data: {
        type: 'main_banner_pc',
        info: {
          carousel_info: {
            width: 1920,
            height: 520,//高度为0的话表示不限制
            admin_show_width: 320,
            admin_show_height: 76,
            data: [{
              imgUrl: '',
              imgPath: '',
              title: '',
              link_type: '',
              link_value: '',
              info: {},
            }, {
              imgUrl: '',
              imgPath: '',
              title: '',
              link_type: '',
              link_value: '',
              info: {},
            }, {
              imgUrl: '',
              imgPath: '',
              title: '',
              link_type: '',
              link_value: '',
              info: {},
            }, {
              imgUrl: '',
              imgPath: '',
              title: '',
              link_type: '',
              link_value: '',
              info: {},
            }, {
              imgUrl: '',
              imgPath: '',
              title: '',
              link_type: '',
              link_value: '',
              info: {},
            }, {
              imgUrl: '',
              imgPath: '',
              title: '',
              link_type: '',
              link_value: '',
              info: {},
            }],
          },
          left: {
            title: {
              label: `标题`,
              name: 'title',
              initialValue: `标题`,
              required: true,
            },
            link_type: '',
            link_value: '',
            info: {},
          },
          right: [{
            title: {
              label: `子标题1`,
              name: 'title1',
              initialValue: `子标题1`,
              required: false,
            },
            link_type: '',
            link_value: '',
            info: {},
          }, {
            title: {
              label: `子标题2`,
              name: 'title2',
              initialValue: `子标题2`,
              required: false,
            },
            link_type: '',
            link_value: '',
            info: {},
          }, {
            title: {
              label: `子标题3`,
              name: 'title3',
              initialValue: `子标题3`,
              required: false,
            },
            link_type: '',
            link_value: '',
            info: {},
          }],
        },
      },//装修的数据
      modal_tip: [],
      modalTitle: '',//弹框的标题
      title: '',
      cat_nav: [],
    };
  }


  componentDidMount() {
    // let { data, tpl_info } = this.state;
    // if (tpl_info.data.length == 0) {
    //   tpl_info.data = data.data;
    // }
    // this.setState({ data: tpl_info });
    this.get_cat();
  }

  componentWillReceiveProps(nextProps, nextContext) {
    let { data, tpl_info, title_info, banner_data } = this.state;
    console.log('componentWillReceiveProps ----- title_info:{}', title_info);
    if (JSON.stringify(nextProps.tpl_info) != JSON.stringify(data)) {
      console.log('componentWillReceiveProps ----- data111:{}', data);
      data = nextProps.tpl_info;
      console.log('nextProps.tpl_info:{}', data);
      console.log('data.hasOwnProperty("info"):{}', data.hasOwnProperty('info'));
      if (data.hasOwnProperty('info')) {
        banner_data = data;
      } else {
        if (data.length == 0) {
          banner_data.info.carousel_info.data = tpl_info.data;
        } else {
          if (data.data?.length) {
            banner_data.info.carousel_info.data = data.data;
          }
        }
      }

      console.log('componentWillReceiveProps ------ data333:{}', banner_data);
      this.setState({ banner_data });
    }
  }

  componentWillUnmount() {

  }

  //获取一级分类，用于左侧分类导航展示数据
  get_cat = () => {
    const { dispatch } = this.props;
    let { cat_nav } = this.state;
    dispatch({
      type: 'project/get_cate_2_tree_list',
      payload: { pId: 0, grade: 1 },
      callback: (res) => {
        if (res.state == 200) {
          cat_nav = res.data;
          this.setState({ cat_nav });
        }
      },
    });
  };

  editTpl = (tip) => {
    let { banner_data, title } = this.state;
    title = `${sldComLanguage('编辑')}${sldComLanguage('轮播图')}`;
    banner_data.info.carousel_info.admin_show_width = 320;
    banner_data.info.carousel_info.admin_show_height = 76;
    this.setState({
      cur_data: banner_data.info.carousel_info,
      modalVisible: true,
      modal_tip: tip,
      title,
    });
  };

  editTpl2 = (part, modalTitle = '', modalTip = []) => {
    let { banner_data, curData, modalVisible, modalSldDiyTitleLinkVisible, modalSldDiyMoreTitleLinkVisible } = this.state;
    console.log('part:{}', part);
    console.log('modalTitle:{}', modalTitle);
    console.log('banner_data:{}', JSON.stringify(banner_data));

    if (part == 'right') {
      //右侧子标题编辑
      curData = banner_data.info.right;
      modalSldDiyMoreTitleLinkVisible = true;
    } else if (part == 'left') {
      //右侧标题编辑
      curData = banner_data.info.left;
      modalSldDiyTitleLinkVisible = true;
    }

    // else {
    //   //顶部标题设置
    //   curData = banner_data.info.title_info;
    //   modalSldDiyTitleLinkVisible = true;
    // }


    console.log('curData:{}', curData);
    this.setState({
      cur_part: part,
      curData,
      modalVisible,
      modalTitle: modalTitle,
      modal_tip: modalTip,
      modalSldDiyTitleLinkVisible,
      modalSldDiyMoreTitleLinkVisible,
    });
  };

  sldHandleConfirm = (val) => {
    console.log('sldHandleConfirm ----- val:{}', val);
    let { cur_part, banner_data } = this.state;
    if (cur_part == 'top_title_link') {
      //顶部标题数据
      for (let i in val) {
        if (i == 'title') {
          banner_data.info.title_info.title.initialValue = val.title;
        } else if (i == 'sub_title') {
          banner_data.info.title_info.sub_title.initialValue = val.sub_title;
        } else if (i == 'link_type') {
          banner_data.info.title_info.link_type = val.link_type;
          banner_data.info.title_info.link_value = val.link_value;
          banner_data.info.title_info.info = val.info != undefined ? val.info : {};
        }
      }
    } else if (cur_part == 'left') {
      banner_data.info.left.title.initialValue = val.title;
      banner_data.info.left.link_type = val.link_type;
      banner_data.info.left.link_value = val.link_value;
      banner_data.info.left.info = val.info;
    } else if (cur_part == 'right') {
      banner_data.info.right = val;
    } else {
      banner_data.info.carousel_info.data = val;
    }
    console.log('sldHandleConfirm ---------banner_data:{}', banner_data);
    this.setState({
      banner_data,
      modalVisible: false,
      modalSldDiyTitleLinkVisible: false,
      modalSldDiyMoreTitleLinkVisible: false,
    }, () => {
      this.props.save_tpl_data(banner_data, this.refs.wrap_html.innerHTML);//保存数据
      // this.props.save_tpl_data(banner_data);//保存数据
    });
  };


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

  render() {
    const { data, submiting, modalVisible, modal_tip, title, cur_data, curData, modalSldDiyTitleLinkVisible, modalSldDiyMoreTitleLinkVisible, modalTitle, titleInfo, banner_data, cat_nav } = this.state;
    // console.log("render ---- data:{}",data)
    console.log('render ---- banner_data:{}', banner_data);
    console.log('banner_data.info.right:{}', banner_data.info.right);
    console.log('render ---- cat_nav:{}', cat_nav);

    return (
      <Fragment>

        <div ref={'wrap_html'}>

          <div className={`${styles.w_sld_react_1210} ${styles.adv_30}`}>
            <div className={`${styles.adv_30_wrap}`}>
              <div className={`${styles.home_slider}`}>
                {/* <div className={`${styles.s1}`}>
                  <div className={`${styles.category_sort}`}>
                    <ul className={`${styles.menu_wrap}`}>
                      {cat_nav.map((item, index) => (
                        <li className={`${styles.menu_item}`}>
                          <a key={index} className={`${styles.first_cat}`} onClick={(e) => e.preventDefault()}>
                            {item.categoryName}
                          </a>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div> */}

                <div className={`${styles.s2}`}>
                  <div className={`${styles.scroller}`}>
                    {banner_data.info.carousel_info.data.length > 0 &&
                    <Carousel>
                      {banner_data.info.carousel_info.data.map((item, index) => (
                        <div key={index} className={`${styles.adv_01_wrap} ${styles.main_banner_item_wrap}`}
                             style={{ width: 1210 }}>
                          <img className={styles.adv_01_img} src={item.imgUrl}/>
                          <div className={styles.sld_mask}>
                            {/*添加轮播图*/}
                            <span className={`${styles.btn_common} ${styles.add}`}
                                  onClick={() => this.editTpl(tpl_adv_01_modal_tip())}>{sldComLanguage('编辑')}
                        </span>
                          </div>
                        </div>
                      ))}
                    </Carousel>
                    }

                    {banner_data.info.carousel_info.data.length == 0
                    && <div ref={'wrap_html'}>
                      <div className={diy.main_banner}>
                        <div className={styles.sld_mask}>
                          {/*添加轮播图*/}
                          <span className={`${styles.btn_common} ${styles.add}`}
                                onClick={() => this.editTpl(tpl_adv_01_modal_tip())}
                          >{sldComLanguage('编辑')}</span></div>
                      </div>
                    </div>
                    }
                  </div>
                </div>

                {/* <div className={`${styles.s3}`}>
                  <div className={`${styles.cr_user_card}`} style={{ marginTop: '0' }}>
                    <div className={styles.sld_mask}
                         onClick={() => this.editTpl2('left', `右侧标题设置`, [`${sldComLanguage('标题不能为空，最多输入20个字')}`])}>
                      <span>{sldComLanguage('编辑')}</span>
                    </div>
                    <p className={styles.title}>
                      <span>{banner_data.info.left.title.initialValue}</span>
                    </p>
                  </div>

                  <p className={`${styles.link}`}><a onClick={(e) => e.preventDefault()}><span>Sign in</span></a></p>

                  <p className={`${styles.link}`}><a onClick={(e) => e.preventDefault()}><span>Join Free</span></a></p>

                  <p className={`${styles.link}`}><a onClick={(e) => e.preventDefault()}><span>For Supplier</span></a>
                  </p>

                  <div className={`${styles.cr_user_card}`} style={{ marginTop: '15px' }}>
                    <div className={styles.sld_mask}
                         onClick={() => this.editTpl2('right', `右侧子标题设置`, [`${sldComLanguage('子标题不能为空，最多输入60个字')}`])}>
                      <span>{sldComLanguage('编辑')}</span>
                    </div>

                    {banner_data.info.right.map((item3, index3) => {
                      return <p className={`${styles.desc}`}>
                        <span key={'item3' + index3}
                              className={`${styles.item_right_con}`}>{item3.title.initialValue}</span>
                      </p>;
                    })
                    }
                  </div>
                </div> */}


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


        <SldDiyMoreImgPcModal
          width={1000}
          title={title}
          sldSeleSingleRow={true}
          submiting={submiting}
          modalVisible={modalVisible}
          sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
          sldHandleCancle={this.sldHandleCancle}
          content={cur_data}
          modal_tip={modal_tip}
          client={'pc'}
        />

        <SldDiyTitleLinkModal
          width={1000}
          title={modalTitle}
          sldSeleSingleRow={true}
          submiting={submiting}
          modalVisible={modalSldDiyTitleLinkVisible}
          sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
          sldHandleCancle={this.sldHandleCancle}
          content={curData}
          modal_tip={modal_tip}
        />

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