import Taro from "@tarojs/taro";
import classnames from "classnames";
import { Component, PropsWithChildren, useEffect, useState } from "react";

import { Block, View, Text, Image, Input, Button, ScrollView, Picker } from "@tarojs/components";

import { Tab, Tabs } from "@antmjs/vantui";

/** 自定义组件 **/
import Navbar from "../../components/navbar/navbar";
import PopupAlert from "../../components/popup/popup-alert";
/** 自定义组件 **/

import "./recording.less";

export default class Recording extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      name: "护理历程",
      current: 0,
      array: [1, 2, 3, 4, 5],
    };
  }

  async onLoad() { }
  componentDidMount() { }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  async initData() { }

  onChangeYear() { }

  onTab = async (event) => {
    const { current } = event.currentTarget.dataset;
    console.log("current", current);
    this.setState({ current });
  };

  render() {
    let { current, array, name } = this.state;
    return (
      <Block>
        <Navbar isBack titleSlot='护理记录'></Navbar>
        <View className='tabs'>
          <View
            className={classnames("tab", {
              tab_active: current === 0,
            })}
            data-current={0}
            onClick={this.onTab}
          >
            护理历程
          </View>
          <View
            className={classnames("tab", {
              tab_active: current === 1,
            })}
            data-current={1}
            onClick={this.onTab}
          >
            打卡统计
          </View>
        </View>
        {current === 0 && <ScrollView className='products_list' scroll-x='true' >
          <View className="{{!curIndex ? 'all products_item_active' : 'all'}}" data-id='{{0}}' >全部
          </View>
          <View className="{{curIndex === item.id ? 'products_item products_item_active' : 'products_item'}}"
            data-id='{{item.id}}'
          >
            <Image className='products_cover'
              src={require("../../img/test/1706692819894.jpg")} mode='aspectFit'
            ></Image>
            <View className='products_title'>画质抗老射频仪</View>
          </View>
        </ScrollView>}

        {current === 0 &&
          array.length ===
          0 && (
            <View>
              <View className='nodata'>
                <Image
                  className='nodata_img'
                  src={require("../../img/nodata.png")}
                ></Image>
                <View className='nodata_text'>暂无数据</View>
              </View>
            </View>
          )}
        {current === 0 && (
          <View>
            {/* <View className='instrument_item' >
              <View className='instrument_top flex sb aitems'>
                <View className='time_box flex aitems'>
                  <View className='time'>2024.1.23</View>
                  <View className={classnames("tag", {
                    tag_active: current === 1,
                  })}
                  > 在线</View>
                </View>
                <View  className='report_btn flex'>
                  <View>回看报告</View>
                  <Image className='arrow_icon' src={require("../../img/index/right.png")} mode='aspectFill'></Image>
                </View>
              </View>
              <View className='instrument_middle flex'>
                <Image className='instrument_cover' src={require("../../img/test/1706667011027.jpg")}></Image>
                <View className='instrument_content'>
                  <View className='instrument_title'>小子弹智能射频仪</View>
                  <View className='instrument_desc_box flex fc sb'>
                    <View className='instrument_desc'>模式：基础场景版</View>
                    <View className='instrument_desc'>护理时间：15分00秒</View>
                  </View>
                </View>
              </View>
            </View> */}



            {array.map((item: any, index: any) => (
              <View className='recording-box' key={index}>
                <View className='box-top'>
                  <View className='top-left'>
                    <View className='date'>2024.1.31</View>
                    <View className='tip'>在线</View>
                  </View>
                  <View className='top-right'>
                    回看报告
                    <Image className='arrow_icon' src={require("../../img/index/right.png")} mode='aspectFill'></Image>
                  </View>
                </View>
                <View className='box-bottom'>
                  <Image
                    className='recording_img'
                    src={require("../../img/test/1706667011027.jpg")}
                  ></Image>
                  <View className='bottom-right'>
                    <View className='title'>小紫单智能射频仪</View>
                    <View className='subtitle-box'>
                      <View className='subtitle'>模式：基础场景版</View>
                      <View className='subtitle'>护理时间：15分00秒</View>
                    </View>
                  </View>
                </View>
              </View>
            ))}
          </View>
        )}
        {current === 1 && (
          <View >
            {/* <View className='nodata'>
              <Image
                className='nodata_img'
                src={require("../../img/nodata.png")}
              ></Image>
              <View className='nodata_text'>暂无数据</View>
            </View> */}
            <View style='height: 30rpx; background: #F8F8F8'></View>
            <View className='clock_in_statistics m-x-30 flex sb'>
              <View className='flex sb ab'>
                <View className='clock_in_statistics_title'>年度打卡统计</View>
                <Picker mode='date' fields='year' onChange={this.onChangeYear} value='2024' end='{{today}}'>
                  <View className='clock_in_statistics_date flex aitems'>
                    <View>2024年</View>
                    <Image className='more_icon' src={require('../../img/arrow-down.png')} mode='widthFix'></Image>
                  </View>
                </Picker>
              </View>
              <View className='chart flex sb'>
                <View className='flex fc aitems' >
                  <View className='buoy' >5天</View>
                  <View className='column' style='height: calc(186/31*{{item.total}}rpx)'></View>
                  <View className='month'>1</View>
                </View>
              </View>
            </View>
            <View style='padding-bottom: env(safe-area-inset-bottom)' >
              <View className='month_box m-x-30'>
                <View className='month_statistics'>
                  <View className='flex aitems sb'>
                    <View className='time'>2024年1月</View>
                    <View data-item='{{item}}' data-index='{{index}}' className='more_box flex aitems' >
                      <View className='more_text'> 展开更多</View>
                      <Image style='transform: rotate({{ item.isMore ? 180 : 0 }}deg)' className='more_icon'
                        src={require("../../img/arrow-down.png")} mode='widthFix'
                      ></Image>
                    </View>
                  </View>
                  <View style='height: 59rpx'></View>
                  <View className='statistic'>
                    <View className='statistic_item'>
                      <View className='statistic_num'>10</View>
                      <View className='statistic_desc'>本月打卡天数</View>
                    </View>
                    <View className='statistic_item'>
                      <View className='statistic_num'>80%</View>
                      <View className='statistic_desc'>超越花至用户</View>
                    </View>
                    <View className='border'></View>
                  </View>
                  <View style='height: 57rpx'></View>
                  <View className='month_item'>
                    <View className='month_item_date'>2024.5.23</View>
                    <View className='month_image_box flex sb'>
                      <Image className='month_item_cover' src={require("../../img/test/1706667011027.jpg")} ></Image>
                    </View>
                    <View className='month_item_date'>小紫弹智能射频仪、花至抗老射频仪PRO </View>
                    <View className='month_item_note'>护理心得：真棒真棒真棒真棒真棒真棒真棒真棒真棒真棒</View>
                  </View>
                </View>
              </View>
            </View>
          </View>
        )}
      </Block>
    );
  }
}
