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

interface Props {
  // link: string;
  // children?: any;
  ModeList: any;
}

let scrollIntoView = "0";

function Index({ ModeList }: any) {
  let VisorList = ModeList.filter((item) => item.modeType === 1); // 面罩模式
  let CabinList = ModeList.filter((item) => item.modeType === 2); // 舱体模式
  let YimeishList = ModeList.filter((item) => item.modeType === 3); // 医美术后
  return (
    <Block>
      <ScrollView
        className="mode-list-box"
        scroll-x="true"
        scrollIntoView={scrollIntoView}
      >
        {VisorList.length > 0 && (
          <View className="mode-list">
            <View className="mode-item-title">面罩模式</View>
            {VisorList.map((item: any, index: any) => {
              return (
                <View key={index} className="mode-item mode-item-active">
                  <View className="mode-info">
                    <View className="mode-info-title">{item.modeName}</View>
                    <View className="mode-info-time">{item.modeDesc}</View>
                    <View className="mode-info-select is-select">
                      <View className="mode-info-select-point"></View>
                    </View>
                  </View>
                  <View className="mode-pic">
                    <Image src={item.banner} mode="aspectFill" />
                  </View>
                </View>
              );
            })}
          </View>
        )}
      </ScrollView>
      <ScrollView
        className="mode-list-box"
        scrollX={true}
        scrollIntoView={scrollIntoView}
      >
        {CabinList.length > 0 && (
          <View className="mode-list">
            <View className="mode-item-title">舱体模式</View>
            {CabinList.map((item: any, index: any) => {
              return (
                <View key={index} className="mode-item  mode-item-active">
                  <View className="mode-info">
                    <View className="mode-info-title">{item.title}</View>
                    <View className="mode-info-time">{item.time}</View>
                    <View className="mode-info-select is-select">
                      <View className="mode-info-select-point"></View>
                    </View>
                  </View>
                  <View className="mode-pic">
                    <Image src={item.banner} mode="aspectFill" />
                  </View>
                </View>
              );
            })}
          </View>
        )}
      </ScrollView>
      <ScrollView
        className="mode-list-box"
        scrollX={true}
        scrollIntoView={scrollIntoView}
      >
        {YimeishList.length > 0 && (
          <View className="mode-list">
            <View className="mode-item-title">医美术后</View>
            {YimeishList.map((item: any, index: any) => {
              return (
                <View key={index} className="mode-item  mode-item-active">
                  <View className="mode-info">
                    <View className="mode-info-title">{item.title}</View>
                    <View className="mode-info-time">{item.time}</View>
                    <View className="mode-info-select is-select">
                      <View className="mode-info-select-point"></View>
                    </View>
                  </View>
                  <View className="mode-pic">
                    <Image src={item.banner} mode="aspectFill" />
                  </View>
                </View>
              );
            })}
          </View>
        )}
      </ScrollView>
    </Block>
  );
}

export default Index;