import { Component } from "react";
import { View, Image, Text, Input } from "@tarojs/components";
import Taro from "@tarojs/taro";
import "./index.less";
import iconOne from "../../../images/calculator/iconOne.png";
import iconTwo from "../../../images/calculator/iconTwo.png";
import iconThree from "../../../images/calculator/iconThree.png";
import {
  getCalculatorData,
  getCalculatorSearch,
} from "../../../service/activity";
export default class Index extends Component {
  state = {
    wishList: [],
    wish: "", // 心愿
    price: "", // 价格
  };
  componentDidMount() {
    this.getCalculator(); // 计算捡漏
  }
  // 计算捡漏
  getCalculator = async () => {
    const res = await getCalculatorData();
    this.setState({
      wishList: res,
    });
  };
  // 搜索捡漏
  getCalculatorSearch = async () => {
    if (!this.state.wish.trim()) {
      Taro.showToast({
        title: "请输入您想要捡漏的物品或服务",
        icon: "none",
      });
      return;
    }
    if (!this.state.price.trim()) {
      Taro.showToast({
        title: "请输入您预期的价格",
        icon: "none",
      });
      return;
    }
    Taro.showLoading({
      title: "正在计算...",
    });
    try {
      const res = await getCalculatorSearch({
        keyword: this.state.wish,
        money: this.state.price,
      });
      Taro.navigateTo({
        url: `/pages/calculatorSub/calculatorResult/index?isSearch=${
          res.is_search
        }&&list=${encodeURIComponent(JSON.stringify(res.goods_list))}`,
      });
    } finally {
      Taro.hideLoading();
    }
  };
  // 心愿输入框改变
  handleWishChange = (e) => {
    this.setState({
      wish: e.detail.value,
    });
  };
  // 价格输入框改变
  handlePriceChange = (e) => {
    if (e.detail.value < 1 && e.detail.value.trim() !== "") {
      e.detail.value = 1;
    }
    this.setState({
      price: e.detail.value,
    });
  };
  render() {
    return (
      <View className="index">
        <Image
          className="top-img"
          src="https://yushi.tos-cn-beijing.volces.com/calculator/wishTopImg.png"
        />
        {/* 底部 */}
        <View className="bottom-box">
          <Image
            mode="heightFix"
            className="bg-img"
            src="https://yushi.tos-cn-beijing.volces.com/calculator/bottomImg.png"
          />
          {/* 输入内容区域 */}
          <View className="input-box">
            <View className="input-box-title">
              <Image className="title-icon" src={iconOne} />
              <Text className="title-text">您想要的物品或服务</Text>
            </View>
            <View className="input-box-content">
              <View className="input-box-content-box">
                <Input
                  value={this.state.wish}
                  onInput={this.handleWishChange}
                  className="input-box-content-input"
                  placeholder="请详细描述需求"
                />
              </View>
              <View className="input-box-content-text">
                例: 输入机票不如输入从深圳到北京的机票
              </View>
            </View>
          </View>
          <View className="input-box">
            <View className="input-box-title">
              <Image className="title-icon" src={iconTwo} />
              <Text className="title-text">您预期的价格</Text>
            </View>
            <View className="input-box-content">
              <View className="input-box-content-box">
                <Input
                  value={this.state.price}
                  onInput={this.handlePriceChange}
                  type="number"
                  min="1"
                  className="input-box-content-input"
                  placeholder="价格最低不能少于1元"
                />
              </View>
              <View className="input-box-content-text">
                注意：我们是认真的！
              </View>
            </View>
          </View>
          <View onClick={this.getCalculatorSearch} className="button-box">
            <Image
              className="button-icon"
              src="https://yushi.tos-cn-beijing.volces.com/calculator/buttonTwo.png"
            />
            <View className="button-text-box">
              <Text className="button-text">捡漏计算</Text>
            </View>
          </View>
          {/* 底部捡漏列表 */}
          <View className="bottom-list-box">
            <View className="bottom-list-box-title">
              <Image className="title-icon" src={iconThree} />
              <Text className="title-text">TA们捡了哪些漏</Text>
            </View>
            <View className="bottom-list-box-content">
              {this.state.wishList.length > 0 &&
                this.state.wishList.map((item, index) => (
                  <View key={index} className="bottom-list-box-content-item">
                    TA想要“{item.jianlou_title}”，捡漏{item.reserve_price}元
                  </View>
                ))}
            </View>
          </View>
        </View>
      </View>
    );
  }
}