import Taro from "@tarojs/taro";
import classnames from "classnames";
import { Block, View, Image, Text, Input } from "@tarojs/components";
import { Popup, Progress, Slider } from "@antmjs/vantui";
import React, { useState } from 'react';
import "./index.less";

interface Props {
  // Electricity: any;
  // matrixElectricity: any;
  // facialMaskConnectStatus: any;
  onEmitMinus:Function
  onEmitAdd:Function
  GearData:any
}

function Index({
  GearData,
  onEmitMinus,
  onEmitAdd
}:Props) {
  // 挡位调节
//   const gearLevel = {
//     currentGear: null,
//     //现在工作的档位
//     currentGearMode: "forehead",
//     //现在工作模式
//     forehead: 5,
//     leftCheek: 5,
//     rightCheek: 5,
//   };

// // //  挡位调节
// const hangeGearAdjustment =(value) =>{
//   console.log(value,'查看');
  
// }
// const gearLevelViews =() =>{
//   return (
//     <> <View>
//     <View className='gear_adjust'>
//       <View className='title'>档位调节</View>
//       <View className='gear_box'>
//         <View className='gear flex aitems'>
//           <View className='pos'>额头</View>
//           <Slider
//             style={{
//               flex: "1",
//             }}
//             value={gearLevel.forehead}
//             min={1}
//             max={10}
//             inactiveColor='#F8F8F8'
//             activeColor={
//               gearLevel.currentGearMode == "forehead"
//                 ? "#EECDA1"
//                 : "#CCCCCC"
//             }
//             disabled={gearLevel.currentGearMode !== "forehead"}
//             barHeight={6}
//             // useButtonSlot
//             data-key='forehead'
//             // onDrag={this.onDrag}
//             onChange={hangeGearAdjustment}
//             renderButton={
//               <Block>
//                 <View
//                   className={
//                     "custom-button " +
//                     (gearLevel.currentGearMode !== "forehead" &&
//                       "current-button")
//                   }
//                 >
//                   <View className='circle'></View>
//                   <View className='level'>
//                     {gearLevel.forehead + "档"}
//                   </View>
//                 </View>
//               </Block>
//             }
//           ></Slider>
//         </View>
//         <View className='gear flex aitems'>
//           <View className='pos'>左脸颊</View>
//           <Slider
//             style={{
//               flex: "1",
//             }}
//             value={gearLevel.leftCheek}
//             min={1}
//             max={10}
//             inactiveColor='#F8F8F8'
//             activeColor={
//               gearLevel.currentGearMode == "leftCheek"
//                 ? "#EECDA1"
//                 : "#CCCCCC"
//             }
//             disabled={gearLevel.currentGearMode !== "leftCheek"}
//             barHeight={6}
//             // useButtonSlot
//             data-key='leftCheek'
//             // onDrag={this.onDrag}
//             // onChange={this.onChange}
//             onChange={hangeGearAdjustment}
//             renderButton={
//               <Block>
//                 <View
//                   className={
//                     "custom-button " +
//                     (gearLevel.currentGearMode !== "leftCheek" &&
//                       "current-button")
//                   }
//                 >
//                   <View className='circle'></View>
//                   <View className='level'>
//                     {gearLevel.leftCheek + "档"}
//                   </View>
//                 </View>
//               </Block>
//             }
//           ></Slider>
//         </View>
//         <View className='gear flex aitems'>
//           <View className='pos'>右脸颊</View>
//           <Slider
//             style={{
//               flex: "1",
//             }}
//             value={gearLevel.rightCheek}
//             min={1}
//             max={10}
//             inactiveColor='#F8F8F8'
//             activeColor={
//               gearLevel.currentGearMode == "rightCheek"
//                 ? "#EECDA1"
//                 : "#CCCCCC"
//             }
//             disabled={gearLevel.currentGearMode !== "rightCheek"}
//             barHeight={6}
//             // useButtonSlot
//             data-key='rightCheek'
//             // onDrag={this.onDrag}
//             // onChange={this.onChange}
//             renderButton={
//               <Block>
//                 <View
//                   className={
//                     "custom-button flex jcenter aitems " +
//                     (gearLevel.currentGearMode !== "rightCheek" &&
//                       "current-button")
//                   }
//                 >
//                   <View className='circle'></View>
//                   <View className='level'>
//                     {gearLevel.rightCheek + "档"}
//                   </View>
//                 </View>
//               </Block>
//             }
//           ></Slider>
//         </View>



//         {/* <View className='level_box flex aitems'>
//           {(10).map((item, index) => {
//             return (
//               <View key={item}
//                 className='level_num'
//                 style={{
//                   marginRight: '1.225rem',
//                 }}
//               >
//                 {item + 1}
//               </View>
//             )
//           })}
//         </View> */}
//       </View>
//     </View>
//   </View></>
//   );
// }


// 使用 map() 方法创建动态循环
const gearViews = GearData.map((gear, index) => (
  <View key={index} className='gear flex aitems'>
    <View className='pos'>{gear.name}</View>
    <View className='gear_button flex aitems'>
      <View className={gear.forehead === 1 ? 'button_minus button_minus_zero' : 'button_minus'}>
        <Image
          className='image'
          src={require('@/img/fr200/minus.png')}
          onClick={() => onEmitMinus(gear,index)}
        ></Image>
      </View>
      <View className='button_value'>
        <View className='number'>{gear.forehead}</View>档
      </View>
      <View className={gear.forehead === gear.Total ? 'button_plus button_minus_zero' : 'button_plus'}>
        <Image
          className='image'
          src={require('@/img/fr200/add.png')}
          onClick={() => onEmitAdd(gear,index)}
        ></Image>
      </View>
    </View>
  </View>
));
 
  return (
      <Block>
       {/* {gearLevelViews} */}

        <View className='gear_adjustment'>
          <View className='gear_box'>
            {gearViews}
           
          
          </View>
        </View>
      </Block>
  );
}

export default Index;
