import Taro from "@tarojs/taro";
import classnames from "classnames";
import { Block, View, ScrollView, Image } from "@tarojs/components";
import { useState, useEffect } from "react";
import "./index.less";

interface Props {
  isShowNurse: boolean;
  ActiveModeItem: any;
  ModeStepIndex: number;
}
function Index({ isShowNurse, ActiveModeItem, ModeStepIndex }: Props) {
  const ModeColor = {
    "590nm": "#CF231D",
    "630nm": "#CF231D",
    "830nm": "#9C1D17",
  };
  return (
    <Block>
      {isShowNurse && ActiveModeItem?.combineData.length > 0 && (
        <View className="modelInfo-box">
          <View className="modelInfo-line is-effect">
            <View className="modelInfo-title">模式功效</View>
            <View className="modelInfo-effect">
              {ActiveModeItem.combineData[ModeStepIndex].effectContent}
            </View>
          </View>
          <View className="modelInfo-line">
            <View className="modelInfo-title">当前输出技术</View>
            <View className="modelInfo-light-box">
              <View
                className="modelInfo-light-item"
                key={ActiveModeItem.combineData[ModeStepIndex].id}
              >
                <View
                  className="modelInfo-light-color"
                  style={{
                    backgroundColor:
                      ModeColor[
                        ActiveModeItem.combineData[ModeStepIndex].technologyInfo
                      ],
                  }}
                ></View>
                <View className="modelInfo-light-colorname">
                  {ActiveModeItem.combineData[ModeStepIndex].technologyInfo}
                </View>
              </View>
              {/* {ActiveModeItem.combineData.map((item) => {
                  return (
                    <View className="modelInfo-light-item" key={item.id}>
                      <View
                        className="modelInfo-light-color"
                        style={{
                          backgroundColor: ModeColor[item.technologyInfo],
                        }}
                      ></View>
                      <View className="modelInfo-light-colorname">
                        {item.effectContent}({item.technologyInfo})
                      </View>
                    </View>
                  );
                })} */}
            </View>
          </View>
        </View>
      )}
    </Block>
  );
}

export default Index;