import { Component } from "react";
import { View, Text, Image, Picker } from "@tarojs/components";
import { AtDivider } from "taro-ui";
import "./index.less";
import selectIcon from "../../images/productManagement/selectIcon.png";
import vip from "../../images/earningsOrder/vip.png";
import Taro from "@tarojs/taro";

export default class Index extends Component {
  state = {
    current: 0,
    productOptions: ["全部", "咸鱼商品", "自建商品"], //商品下拉选项
    selectedProduct: "全部", //商品默认名称
    timeOptions: ["全部时间", "一个月前", "一周前"], //下单时间下拉选项
    selectTime: "下单时间", //下单时间
    tabList: [
      { title: "全部", num: 0 },
      { title: "已付款", num: 0 },
      { title: "已完成", num: 2 },
      { title: "已结算", num: 10 },
      { title: "无效", num: 0 },
    ],
  };

  handleTabClick = (index) => {
    this.setState({ current: index });
  };
  // 下单时间下拉选项
  timeSelectOption = (e) => {
    const selectTime = this.state.timeOptions[e.detail.value];
    this.setState({ selectTime });
  };
  // 商品下拉选项
  productSelectOption = (e) => {
    const selectedProduct = this.state.productOptions[e.detail.value];
    this.setState({ selectedProduct });
  };
  handleCopy = async (text) => {
    try {
      await Taro.setClipboardData({
        data: text,
      });
      Taro.showToast({
        title: "内容已复制",
        icon: "success",
        duration: 2000,
      });
    } catch (error) {
      Taro.showToast({
        title: "复制失败",
        icon: "error",
        duration: 2000,
      });
    }
  };

  render() {
    const { current, tabList } = this.state;
    return (
      <View className="index">
        {/* tab切换 */}
        <View className="tab-container">
          {tabList.map((tab, index) => (
            <View
              key={index}
              className={`tab-item ${current === index ? "active" : ""}`}
              onClick={() => this.handleTabClick(index)}
            >
              <Text>{tab.title}</Text>
              {tab.num > 0 && <Text className="tag">{tab.num}</Text>}
            </View>
          ))}
        </View>
        {/* 下拉筛选 */}
        <View className="filter-container">
          <Picker
            mode="selector"
            range={this.state.timeOptions}
            onChange={this.timeSelectOption}
          >
            <View className="filter-item">
              <Text>{this.state.selectTime}</Text>
              <Image src={selectIcon} className="select-icon" />
            </View>
          </Picker>
          <Picker
            mode="selector"
            range={this.state.productOptions}
            onChange={this.productSelectOption}
          >
            <View className="filter-item">
              <Text>{this.state.selectedProduct}</Text>
              <Image src={selectIcon} className="select-icon" />
            </View>
          </Picker>
        </View>
        {/* 订单列表 */}
        <View className="order-list">
          <View className="order-item">
            {/* 头部信息 */}
            <View className="order-header">
              <View className="user-info">
                <Image className="avatar" src="" />
                <Text className="username">张三</Text>
              </View>
              <Text className="pay-status">已付款</Text>
            </View>
            <AtDivider content="" />
            {/* 订单信息 */}
            <View className="order-info">
              <View className="order-details">
                <View className="detail-item">
                  <Text className="label">订单编号:</Text>
                  <Text className="value">2024031512345</Text>
                  <Text
                    className="copy-text"
                    onClick={() => this.handleCopy("2024031512345")}
                  >
                    复制
                  </Text>
                </View>
                <View className="detail-item">
                  <Text className="label">下单时间:</Text>
                  <Text className="value">2024-03-15 12:34:56</Text>
                </View>
                <View className="detail-item">
                  <Text className="label">订单类型:</Text>
                  <Text className="value">普通订单</Text>
                </View>
              </View>
              <View className="member-info">
                <Image className="member-icon" src={vip} />
                <Text className="member-text">闲鱼会员</Text>
              </View>
            </View>

            {/* 产品信息 */}
            <View className="product-info">
              <Image className="product-image" src="" />
              <View className="product-details">
                <Text className="product-name">
                  这是一个很长的产品名称这是一个很长的产品名称这是一个很长的产品名称
                </Text>
                <View className="promotion-info">
                  <View className="tag">推广收入</View>
                  <Text className="amount">¥99.99</Text>
                </View>
                <View className="payment-info">
                  <Text className="label">实付金额:</Text>
                  <Text className="amount">¥199.99</Text>
                </View>
              </View>
            </View>
          </View>
        </View>
      </View>
    );
  }
}
