const { inject, observer } = mobxReact;
const ProductItem = ecodeSDK.imp(ProductItem);
const ProductDialog = ecodeSDK.imp(ProductDialog);
const { toJS } = mobx;
// const { product } = ecodeSDK.imp(productDataSource);
const { WeaDialog } = ecCom;
const { createRef } = React;

@inject("projectStore")
@observer
class ProductIndex extends React.Component {
  constructor() {
    super();
    this.state = {
      dialogParams: {
        visible: false,
        productId: "",
      },
      dialogWidth: 1200,
      dialogHeight: 100,
    };
    this.productRef = createRef();
  }
  componentDidMount() {
    window.addEventListener("resize", this.resizeWidthHeight);
    this.resizeWidthHeight();
    this.init();
  }
  conponentWillUnmount() {
    window.removeEventListener("resize", this.resizeWidthHeight);
  }

  resizeWidthHeight = () => {
    requestAnimationFrame(() => {
      if (!this.productRef.current) {
        return;
      }
      const { offsetWidth, offsetHeight } = this.productRef.current;
      this.setState({
        dialogWidth: offsetWidth - 100,
        // offsetHeight / 2
        dialogHeight: 80,
      });
    });
  };

  init = () => {
    const {
      projectStore: { init },
    } = this.props;
    init();
  };

  handlePickProduct = async (productId) => {
    const {
      projectStore: { viewProject, init },
    } = this.props;
    const { api_status } = await viewProject(productId);
    if (api_status) init();
    this.setState({
      dialogParams: { ...this.state.dialogParams, visible: true, productId },
    });
  };

  render() {
    const { dialogParams, dialogHeight, dialogWidth } = this.state;
    const {
      projectStore: { product },
    } = this.props;
    return (
      <div className="product-demo-wapper" ref={this.productRef}>
        <div className="product-container">
          {_.map(toJS(product), (item, index) => {
            const { id, title, subTitle, products } = item;
            return (
              <div className="product-box" key={id}>
                {/* <h2 className="product-title">{title}</h2>
                <p className="product-subtitle">{subTitle}</p> */}
                <ProductItem
                  products={products}
                  onPickProduct={this.handlePickProduct}
                />
              </div>
            );
          })}
          {/* <a
            href="https://www.e-cology.com.cn/spa/document/index.jsp?id=7258131&router=1#/main/document/detail"
            target="_blank"
            className="product-link">
            <span>
              演示
              <br />
              脚本
            </span>
          </a> */}
        </div>
        {/* 弹框 */}
        {dialogParams.visible && (
          <WeaDialog
            onCancel={() => {
              this.resizeWidthHeight();
              this.setState({
                dialogParams: {
                  ...this.state.dialogParams,
                  visible: false,
                  productId: "",
                },
              });
            }}
            visible={dialogParams.visible}
            style={{ width: dialogWidth }}>
            <div
              className="product-dialog"
              style={{ height: dialogHeight + "vh" }}>
              <ProductDialog productId={dialogParams.productId} />
            </div>
          </WeaDialog>
        )}
      </div>
    );
  }
}

ecodeSDK.exp(ProductIndex);