import React, { PureComponent } from "react";
import { connect } from "dva";
import { Icon, Checkbox, Select, Input, Button, message } from "antd";
import styles from "./index.less";
import spImgUrl from "./img/sp1.jpg";
import spImgBigUrl from "./img/spBig1.jpg";
import spImgxqms01Url from "./img/spms1.jpg";
import AmountFun from "@/components/AmountFun/index.js";

class CommodityDetails extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      imgSrc: "", // 大图片地址
      buyNum: 0, // 购买数量
      isHover: 0,
      isNavLi: 0
    };
  }
  componentWillMount() {
    const { dispatch, location } = this.props;
    let code;
    if (location[`query`]) {
      code = location.query.code;
    } else {
      code = localStorage.getItem("goodsSku");
    }
    // 获取商品详情描述
    dispatch({
      type: "commodityDetails/getGoodsDetail",
      payload: {
        goodsCode: code
      }
    });
    // 获取商品详情详细信息
    dispatch({
      type: "commodityDetails/getGoodsInfo",
      payload: {
        goodsCode: code
      }
    });
    // 获取商品价格
    dispatch({
      type: "commodityDetails/getGoodsPrice",
      payload: {
        goodsCode: code
      }
    });
    // 获取商品规格
    dispatch({
      type: "commodityDetails/getGoodsSpecs",
      payload: {
        goodsCode: code
      }
    });
    // 获取商品库存
    dispatch({
      type: "commodityDetails/getGoodsStock",
      payload: {
        goodsCode: code
      }
    });
  }
  componentWillReceiveProps(nextProps) {
    if ("goodsInfo" in nextProps && nextProps.goodsInfo) {
      const goodsInfo = nextProps.goodsInfo;
      this.setState({
        imgSrc: goodsInfo.picList[0]
      });
    }
  }
  // 获取购买数量
  buyNumChange(num) {
    this.setState({
      buyNum: num
    });
  }
  // 改变大图显示
  hoverHandle(imgSrc, index) {
    this.setState({
      imgSrc: imgSrc,
      isHover: index
    });
  }
  // 点击切换详情信息
  clickActive(data) {
    this.setState({
      isNavLi: data
    });
  }
  // 规格选择
  activeHandle(key, index) {
    const { dispatch, goodsSpecs } = this.props;
    goodsSpecs[key][`specValueList`][index][`isActive`] = 1;
    goodsSpecs[key][`specValueList`].forEach((item, currentIndex) => {
      if (currentIndex != index) {
        item[`isActive`] = 0;
      }
    });
    dispatch({
      type: "commodityDetails/goodsSpecs",
      goodsSpecs: goodsSpecs
    });
  }
  // 加入购物车
  addCartHandle(e) {
    e.preventDefault();
    const { dispatch, goodsInfo } = this.props;
    const { buyNum } = this.state;
    if (!buyNum) {
      message.warning("添加数量不能为0!");
      return;
    }
    const postData = {
      buyNum: buyNum,
      goodsSku: goodsInfo.code
    };
    dispatch({
      type: "homeLayout/addCart",
      payload: postData
    });
  }
  render() {
    const {
      goodsDesc,
      goodsInfo,
      goodsPrice,
      goodsSpecs,
      goodsStock
    } = this.props;
    const activeStyle = {
      borderColor: "#E14C46",
      outline: "1px solid #E14C46"
    };
    const styleObj = {
      borderColor: "#E14C46"
    };
    const styleDetailsNavBoxLiActive = {
      borderBottom: '3px solid #E14C46',
      color: '#E14C46'
    };
    const boxShow = {
      display: 'block'
    };
    // 小图片
    const smallImgs = () => {
      if (!goodsInfo) return null;
      const { picList } = goodsInfo;
      const html = picList.map((item, index) => (
        <li
          className={styles.commodityDetailImgList}
          key={item}
          onMouseOver={this.hoverHandle.bind(this, item, index)}
          onFocus={this.hoverHandle.bind(this, item, index)}
          style={this.state.isHover == index ? styleObj : null}
        >
          <img src={item} alt={{}} className={styles.img} />
        </li>
      ));
      return html;
    };
    // 导航标题
    const titleName = () => {
      if (!goodsInfo) return null;
      const { cateList } = goodsInfo;
      const html = cateList.map(item => (
        <span className={styles.nameChild} key={item.name}>
          <Icon type="right" className={styles.nameIcon} />
          {item.name}
        </span>
      ));
      return html;
    };
    // 规格
    const specsHtml = () => {
      if (!goodsSpecs) return null;
      const html = goodsSpecs.map((item, key) => (
        <li className={styles.titleTextList} key={item.specName}>
          <span className={styles.title}>{item.specName}</span>
          <em className={styles.symbolEm}>：</em>
          <div className={styles.texturBox}>
            {item.specValueList.map((itemChild, index) => (
              <span
                className={styles.textur}
                key={itemChild.svName}
                style={itemChild.isActive ? activeStyle : null}
                onClick={this.activeHandle.bind(this, key, index)}
              >
                {itemChild.svName}
              </span>
            ))}
          </div>
        </li>
      ));
      return html;
    };
    return (
      <div className={styles.commodityDetailsPage}>
        <div className={styles.classHead}>
          <span className={styles.nameIndex}>商品详情页</span>
          {titleName()}
        </div>
        <div className={styles.clearfix}>
          <div className={styles.commodityDetailsBox}>
            <div className={styles.commodityDetailsBoxLeft}>
              <div className={styles.commodityDetailImgsBox}>
                <ul className={styles.commodityDetailImgUl}>{smallImgs()}</ul>
                <div className={styles.commodityDetailImgBig}>
                  <img
                    src={this.state.imgSrc}
                    alt={{}}
                    className={styles.img}
                    style={{ width: 540, height: 540 }}
                  />
                </div>
              </div>
              <div className={styles.attentionBox}>
                <div className={styles.attentionBtn}>
                  <Icon type="heart" className={styles.heartIcon} />
                  关注
                </div>
              </div>
            </div>
            <div className={styles.commodityDetailsBoxRight}>
              <ul className={styles.commodityDetailsMessageUl}>
                <li className={styles.commodityNameList}>
                  <h3 className={styles.commodityNameBox}>
                    {goodsInfo ? goodsInfo.name : ""}
                  </h3>
                  <p className={styles.commodityCodeBox}>
                    <span>商品编码：</span>
                    <span>{goodsInfo ? goodsInfo.code : ""}</span>
                  </p>
                </li>
                <li className={styles.priceList}>
                  <span>￥{goodsPrice ? goodsPrice.salePrice : ""}</span>
                  <del>￥{goodsPrice ? goodsPrice.marketPrice : ""}</del>
                </li>
                {specsHtml()}
                <li className={styles.titleTextList}>
                  <span className={styles.title}>数量</span>
                  <em className={styles.symbolEm}>：</em>
                  <div className={styles.amountBox}>
                    <AmountFun
                      num={this.state.buyNum}
                      onChange={this.buyNumChange.bind(this)}
                    />
                  </div>
                  <span className={styles.title}>库存</span>
                  <em className={styles.symbolEm}>：</em>
                  <div className={styles.stockBox}>
                    <span className={styles.contBs}>{goodsStock}</span>
                    <span className={styles.unitBs}>
                      {goodsInfo ? goodsInfo.baseUnitName : ""}
                    </span>
                  </div>
                </li>
                <li className={styles.titleTextList}>
                  <span className={styles.title}>主数量</span>
                  <em className={styles.symbolEm}>：</em>
                  <div className={styles.textBox}>
                    <span className={styles.contBs}>
                      {goodsInfo ? this.state.buyNum / goodsInfo.rate : 0}
                    </span>
                    <span className={styles.unitBs}>
                      {goodsInfo ? goodsInfo.mainUnitName : ""}
                    </span>
                  </div>
                </li>
                <li className={styles.titleTextList}>
                  <span className={styles.title}>订货金额</span>
                  <em className={styles.symbolEm}>：</em>
                  <div className={styles.textBox}>
                    <span className={styles.priceBs}>￥555</span>
                  </div>
                </li>
                <li className={styles.titleTextList}>
                  <Button
                    className={styles.shoppingCatBtn}
                    onClick={this.addCartHandle.bind(this)}
                  >
                    加入购物车
                  </Button>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div className={styles.clearfix}>
          <div className={styles.detailsNavBox} id="detailsNavBoxId">
            <ul>
              <li
                // onFocus={this.hoverHandle.bind(this, item, index)}
                onClick={this.clickActive.bind(this, 0)}
                style={this.state.isNavLi == 0 ? styleDetailsNavBoxLiActive : null}
              >
                <span className={styles.navBtn}>商品描述</span>
              </li>
              <li
                onClick={this.clickActive.bind(this, 1)}
                style={this.state.isNavLi == 1 ? styleDetailsNavBoxLiActive : null}
              >
                <span className={styles.navBtn}>子件清单</span>
              </li>
            </ul>
          </div>
          <div className={styles.detailsContentBox}>
            <div
              className={styles.contentBox}
              onClick={this.clickActive.bind(this, 0)}
              style={this.state.isNavLi == 0 ? boxShow : null}
            >
              商品描述
              {/* <img src={spImgxqms01Url} alt={{}} className={styles.detailImg} /> */}
              {goodsDesc}
            </div>
            <div
              className={styles.contentBox}
              onClick={this.clickActive.bind(this, 1)}
              style={this.state.isNavLi == 1 ? boxShow : null}
            >
              子件清单
            </div>
          </div>
        </div>
      </div>
    );
  }
}
// export default commodityDetails;

export default connect(state => ({
  goodsDesc: state.commodityDetails.goodsDesc,
  goodsInfo: state.commodityDetails.goodsInfo,
  goodsPrice: state.commodityDetails.goodsPrice,
  goodsSpecs: state.commodityDetails.goodsSpecs,
  goodsStock: state.commodityDetails.goodsStock
}))(CommodityDetails);
