import React, { PureComponent } from "react";
import { connect } from "dva";
import { Icon, Checkbox, Select, Input, Pagination } from "antd";
import styles from "./index.less";
import GoodsList from "@/components/GoodsList/index.js";
import GoodsTable from "@/components/GoodsTable/index.js";
import GoodsLevel from "@/components/goodsPurchaseLevel/index.js";
import { getCustomer } from '@/utils/request';
import CustIcon, { STATUS as IconStatus } from "@/components/CustIcon";

class GoodsPurchase extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            isShow: true,           // 橱窗列表切换
            cateCode: "",           // 商品分类
            priceSort: "",          // 价格升降
            isNew: "0",             // 是否新品
            isPromot: "0",          // 是否促销
            keywords: "",           // 是否新品
            prodLineCode: "",       // 产品线
            sellerCode: "",         // 供应商
            isInStock: "0",         // 是否库存
            isOpenPanel: false,     // 菜单展开
            refsHight: null,        // 菜单高度
            isTabList: true,        // 列表切换方式的样式标识
            tabLoading: false,      // 加载
            defaultIndex: 'all'     // 默认选中的页签
        };
    }
    componentWillMount() {
        const { dispatch, location } = this.props;
        // 获取商品分类
        dispatch({
            type: "goodsPurchase/getGoodsSubSpecsData",
            payload: null
        });
        // 获取全部供应商
        dispatch({
            type: "public/getsuppliers",
            payload: {
                search_EQ_isEnable: 1
            }
        });
        // 获取全部供应商
        dispatch({
        type: "public/getproductLine",
            payload: {
                search_EQ_isEnable: 1
            }
        });
        if (location[`query`]) {
            this.setState({
                cateCode: location.query.catcode,
                defaultIndex: location.query.defaultIndex || 'all'
            });
            this.search(0, 10, location.query.keywords, location.query.catcode);
        } else {
            // 获取商品列表
            this.search(0, 10);
        }
    }
    // 页码
    onShowSizeChange(current, pageSize) {
      this.search(current - 1, pageSize);
    }
    // 搜索按钮
    commonSearch(val) {
        this.setState({
          keywords: val
        });
        this.search(0, 10, val);
    }
    // 菜单点击
    goodsLevelClick(catecode, index) {
        this.setState({
            cateCode: catecode || "",
            defaultIndex: index,
            keywords: ""
        }, () => {
          this.search(0, 10, "", catecode);
        });
    }
    // 分页搜索
    search(page = 0, pageSize = 10, val = '', catecode = '') {
        const { dispatch } = this.props;
        const {
            cateCode,
            priceSort,
            isNew,
            isPromot,
            keywords,
            prodLineCode,
            sellerCode,
            isInStock
        } = this.state;
        const searchConditions = {
            page: page ? page : 0,
            size: pageSize ? pageSize : 10,
            search_goodsCategoryIds: catecode ? catecode : cateCode,           // 商品分类
            // search_priceSort: priceSort,              // 价格升降
            // search_isPromot: isPromot,                // 是否促销
            search_keywords: val ? val : keywords,       // 关键字
            search_EQ_productLine: prodLineCode,         // 产品线
            search_supplierId: sellerCode,               // 供应商
            // search_isInStock: isInStock               // 是否仅显示库存
        };
        // 是否新品推荐
        if (isNew == "1") {
          searchConditions[`search_EQ_isNew`] = isNew;
        }
        this.setState({
            tabLoading: true
        });
        dispatch({
            type: "goodsPurchase/getGoodsData",
            payload: searchConditions
        }).finally(() => {
            this.setState({
                tabLoading: false
            });
        });
        dispatch({
            type: "cartList/getCartListData"
        });
        dispatch({
          type: "public/getCheckStore",
          payload: {
            customer: getCustomer().id
          }
        });
    }
    // 分页跳转
    paginationChange(page, pageSize) {
        this.search(page - 1, pageSize);
    }
    tableHandle() {
        this.setState({
            isShow: false,
            isTabList: false
        });
    }
    barsHandle() {
        this.setState({
            isShow: true,
            isTabList: true
        });
    }
    // 改变分类
    levelHandle(code) {
        const { dispatch } = this.props;
        dispatch({
            type: "goodsPurchase/getGoodsSubSpecsData",
            payload: {
                cateCode: code
            }
        });
    }
    goodsLevelDialogSelect() {
        this.setState({
            isOpenPanel: !this.state.isOpenPanel
        });
    }
    // 是否新品
    isNewChange(e) {
        this.state.isNew = e.target.checked ? 1 : 0;
    }
    // 是否促销
    isPromotChange(e) {
        this.state.isPromot = e.target.checked ? 1 : 0;
    }
    // 是否显示有库存
    isInStockChange(e) {
        this.state.isInStock = e.target.checked ? 1 : 0;
    }
    // 产品线
    prodLineCode(val) {
        this.state.prodLineCode = val;
    }
    // 供应商
    sellerCode(val) {
        this.state.sellerCode = val;
    }
    render() {
        const { isShow, isOpenPanel } = this.state;
        const { goodsSubSpecsData, goodsData, pagination, cartListData, suppliers, productLine, checkStore } = this.props;
        if (cartListData && goodsData) {
            for (const cartGroup of cartListData) {
                if (cartGroup && cartGroup.cartlist) {
                    const cartList = cartGroup.cartlist;
                    for (const cart of cartList) {
                        for (const goods of goodsData) {
                            if (cart.goodsId === goods.id) {
                                goods.inCart = true;
                            }
                        }
                    }
                }
            }
        }
        // 是否加入购物车
        if (checkStore && checkStore.length > 0 && goodsData) {
          checkStore.forEach(store => {
            if (store.storelist && store.storelist.length > 0) {
              store.storelist.forEach(item => {
                goodsData.forEach(goods => {
                  if (item.goodsId === goods.id) {
                    goods.storeId = item.id;
                    goods.inFav = true;
                  }
                });
              });
            }
          });
        }
        // 供应商列表
        const suppliersList = suppliers ||  [];
        if (suppliersList.length > 0 && suppliersList[0].name != "全部供应商") {
            suppliersList.unshift({
                code: '',
                id: '',
                name: '全部供应商'
            });
        }
        // 获取产品线
        const productLineList = productLine && productLine.content.length > 0 ? productLine.content : [];
        if (productLineList.length > 0 && productLineList[0].name != "全部产品线") {
            productLineList.unshift({
                code: '',
                id: '',
                name: '全部产品线'
            });
        }
        const style = { height: "30px", overflow: "hidden" };
        const goodsSubSpecsHtml = () => {
        let html = [];
        if (!goodsSubSpecsData) return null;
        html = goodsSubSpecsData.map((item, key) => (
            <span
              className={styles.goodsBtn}
              key={item.code}
              onClick={this.levelHandle.bind(this, item.specCode)}
            >
            {item.name}
            </span>
        ));
        return html;
        };
        return (
            <div className={styles.goodsPurchaseBox}>
                <div className={styles.classConBox}>
                {/* <div className={styles.classHead}>
                    <span className={styles.nameIndex}>首页</span>
                    <span className={styles.nameChild}>
                    <Icon type="right" className={styles.nameIcon} />所有分类页
                    </span>
                </div> */}
                {/* 全部商品分类 */}
                <div className={styles.allGoodsClass} ref={(ref) => { this.state.refsHight = ref; }}>
                    <GoodsLevel refsHight={this.state.refsHight} defaultIndex={this.state.defaultIndex} bindLevelClick={this.goodsLevelClick.bind(this)} />
                </div>
                {/* 全部商品分类--结束 */}
                {/* 商品筛选 */}
                <div className={styles.goodsFilter}>
                    {/* <span className={styles.priceSort}>
                    价格<Icon type="arrow-down" className={styles.priceIcon} />
            </span> */}
                    <div className={styles.checkboxSort}>
                    <Checkbox className={styles.checkbox} onChange={this.isNewChange.bind(this)}>新品</Checkbox>
                    {/* <Checkbox className={styles.checkbox} onChange={this.isPromotChange.bind(this)}>促销</Checkbox>
            <Checkbox className={styles.checkbox} onChange={this.isInStockChange.bind(this)}>仅显示有库存</Checkbox> */}
                    </div>
                    <div className={styles.selectFilter}>
                        <Select
                          defaultValue="全部产品线"
                          style={{ width: 160, height: 28 }}
                          onChange={this.prodLineCode.bind(this)}
                        >
                            {productLineList.map(data => {
                                return (
                                    <Select.Option value={data.id} key={data.code}>{data.name}</Select.Option>
                                );
                            })}
                        </Select>
                        <Select
                          defaultValue="全部供应商"
                          style={{ width: 160, height: 28, marginLeft: 10 }}
                          onChange={this.sellerCode.bind(this)}
                        >
                            {suppliersList.map(data => {
                                return (
                                    <Select.Option value={data.id} key={data.code}>{data.name}</Select.Option>
                                );
                            })}
                        </Select>
                    </div>
                    <div className={styles.searchBox}>
                        <Input.Search
                          placeholder="输入产品编码/名称/规格"
                          enterButton="搜索"
                          onSearch={this.commonSearch.bind(this)}
                          style={{ width: 280 }}
                        />
                    </div>
                    <div className={styles.tabBox}>
                    <CustIcon type="icon-icon-card" style={{ color: this.state.isTabList ? '#999' : '#e14c46' }} onClick={this.tableHandle.bind(this)} />
                    <CustIcon type="icon-icon-list" style={{ color: this.state.isTabList ? '#e14c46' : '#999' }} onClick={this.barsHandle.bind(this)} />
                    </div>
                </div>
                {/* 商品筛选--结束 */}
                {/* 商品列表 */}
                <GoodsList goodsData={goodsData} isShow={isShow} {...this.props} tabLoading={this.state.tabLoading} />
                <GoodsTable goodsData={goodsData} isShow={!isShow} {...this.props} />
                {/* 商品列表--结束 */}
                </div>
                <div className={styles.pageBox}>
                    <Pagination
                      size="small"
                      total={pagination ? pagination.total : 0}
                      showSizeChanger
                      showQuickJumper
                      showTotal={this.showTotalFun}
                      onShowSizeChange={this.onShowSizeChange.bind(this)}
                      onChange={this.paginationChange.bind(this)}
                    />
                </div>
            </div>
        );
    }
}
// export default GoodsPurchase;

export default connect(state => ({
  goodsSubSpecsData: state.goodsPurchase.goodsSubSpecsData,
  goodsData: state.goodsPurchase.goodsData,
  pagination: state.goodsPurchase.pagination,
  cartListData: state.cartList.cartListData,
  checkStore: state.public.checkStore,
  suppliers: state.public.suppliers,
  productLine: state.public.productLine
}))(GoodsPurchase);
