import React, { useEffect, useState } from 'react';
import { InputNumber } from 'antd';
import Big from 'big.js';
import styled from 'styled-components';
import { InterDataType } from '@/api/interface';
import { AppMallGoodsDetails } from '@/api/interface/mall';
import ProductSwiperView from '@/components/product-swiper';

// 商品详情类型
type DetailType = InterDataType<AppMallGoodsDetails>;

const ProductHeadView: React.FC<{ detail: DetailType }> = ({ detail }) => {
  // 商品的购买数量
  const [productNum, setProductNum] = useState<number>(1);
  // 获取最低价格
  const getLowerPrice = (item: DetailType) => {
    const price =
      Math.min(...(item.priceStock?.map((i) => i.salePrice) || [0])) || 0;
    const money = Big(price).mul(Big(productNum)).toNumber().toLocaleString();
    return money.endsWith('.00') ? money : `${money}.00`;
  };
  useEffect(() => {
    console.log('detail --->', detail);
  }, []);
  return (
    <ProductHeadWrap>
      <div className="product-swiper">
        <ProductSwiperView list={detail?.resourcesList} />
      </div>
      <div className="product-content">
        <div className="content-title">{detail?.tradeName}</div>
        <div className="content-desc">{detail?.description}</div>
        <div className="content-price flex-start">
          <div className="price-label">价格</div>
          <div className="price-money">
            {detail?.priceShow ? (
              <>
                <span className="label">￥</span>
                <span className="num">{getLowerPrice(detail)}</span>
              </>
            ) : (
              <span className="label">咨询报价</span>
            )}
          </div>
        </div>
        <div className="content-item flex-start">
          <div className="item-label">送至</div>
          <div className="item-content">
            共{detail?.priceStock?.length || 0}种可选
          </div>
        </div>
        <div className="content-item flex-start">
          <div className="item-label">规格</div>
          <div className="item-content">
            共{detail?.priceStock?.length || 0}种可选
          </div>
        </div>
        <div className="content-item flex-start">
          <div className="item-label">数量</div>
          <div className="item-content">
            <InputNumber
              min={1}
              max={9999}
              precision={0}
              value={productNum}
              onChange={(e) => setProductNum(e || 1)}
            />
          </div>
        </div>
        <div className="content-action flex-start select-none">
          <div className="action-item">加入购物车</div>
          <div className="action-item">提交意向</div>
          <div className="action-item">确认购买</div>
        </div>
      </div>
    </ProductHeadWrap>
  );
};

export default ProductHeadView;

// 样式
const ProductHeadWrap = styled.div`
  position: relative;
  width: calc((100% - 0.83rem) / 10 * 7.5);
  height: 28rem;
  background: #ffffff;
  border: 0.04rem solid #e3e3e3;
  box-sizing: border-box;
  margin-right: 0.83rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1rem;
  .product-swiper {
    position: relative;
    width: 22rem;
    height: 100%;
    box-sizing: border-box;
  }
  .product-content {
    position: relative;
    width: calc(100% - 22rem);
    box-sizing: border-box;
    padding-left: 1rem;
    //background: lightblue;
    .content-title {
      width: 100%;
      font-size: 24px;
      font-weight: 500;
      color: #212121;
      margin-bottom: 0.71rem;
      // 双行省略
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
    }
    .content-desc {
      font-weight: 400;
      color: #666666;
      margin-bottom: 0.71rem;
    }
    .content-price {
      position: relative;
      width: 100%;
      background: #f3f3f3;
      box-sizing: border-box;
      padding: 0.8rem;
      margin-bottom: 1rem;
      .price-label {
        width: 2rem;
        color: #999999;
        text-align: justify;
        text-align-last: justify;
        margin-right: 1rem;
      }
      .price-money {
        font-size: 24px;
        line-height: 1;
        color: #ff6700;
        .label {
          font-size: 18px;
        }
      }
    }
    .content-item {
      margin-bottom: 1rem;
      padding: 0 0.8rem;
      .item-label {
        width: 2rem;
        color: #999999;
        text-align: justify;
        text-align-last: justify;
        margin-right: 1rem;
      }
    }
    .content-action {
      position: relative;
      width: 100%;
      margin-top: 2rem;
      .action-item {
        width: 8.63rem;
        height: 2.33rem;
        background: #fff0e5;
        border: 0.04rem solid #ff552d;
        text-align: center;
        line-height: 2.33rem;
        font-size: 13px;
        font-weight: 400;
        color: #ff552d;
        cursor: pointer;
        &:hover,
        &:active {
          filter: brightness(0.95);
        }
      }
      .action-item:not(:last-child) {
        margin-right: 0.8rem;
      }
      .action-item:last-child {
        background: #ff552d;
        color: #fff;
      }
    }
  }
`;
