import React, { Component } from "react";
import Taro from "@tarojs/taro";
import { View, Image, Button } from "@tarojs/components";
import Skeleton from "taro-skeleton";
import { getClockState } from "../../utils/tools";
import ListBottomStart from "../../components/common/listBottomStart";
import "./index.less";
import sels from "../../image/sels.png";
import sel from "../../image/sel.png";

class MyList extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { type, sublist = [] } = this.props
    return (
      <View className="indexPage">
        <View className="list">
          {
            this.props.list.length === 0 && this.props.listState === "LOADING" &&
            this.props.typelist?.map((v) => (
              <Skeleton key={v} title row={3} avatarShape="square" loading />
            ))
          }
          {this.props.list.length > 0 && this.props.list?.map((v, k) => (
            <View
              key={k}
              className="item"
              onClick={(e) => {
                e.stopPropagation();
                Taro.navigateTo({
                  url: `/pages/detail/index?id=${v.id}&type=${type}`,
                });
              }}
            >
              {
                type == 1 &&
                <View className='left'
                  onClick={e => {
                    e.stopPropagation();
                    v.processStatus == 1
                      ? this.props.onChecked(v)
                      : Taro.showToast({ title: '该打卡信息已审核！', icon: 'none' })
                  }}>
                  <Image className='check' src={sublist.includes(v.id) ? sels : sel} />
                </View>
              }
              <View className="infor">
                <View className="title">
                  <View className="aname">
                    {v.projectName}
                  </View>
                </View>
                <View className="userName">
                  <View className="uNtext">
                    负责人：{v.adminName}
                  </View>
                </View>
                <View className="userName">
                  <View className="uNtext">
                    打卡人员：{v.name}
                  </View>
                </View>
                <View className="userName">
                  <View className="uNtext">
                    创建时间：{v.createTime}
                  </View>
                </View>
                <View className="userName">
                  <View className="uNtext">
                    打卡工时：{v.duration}
                  </View>
                </View>
                {
                  v.processStatus == 1 &&
                  (
                    type == 0 ?
                      <View style={{ textAlign: "right", color: "blue", fontSize: 12 }}>已打卡，待审核</View> :
                      <View className="releaseStarts">
                        <View className="punchClock">
                          去审核
                        </View>
                      </View>
                  )
                }
                {v.processStatus == 2 && <View style={{ textAlign: "right", color: "green", fontSize: 12 }}>{type == 0 ? "已打卡，已审核" : "已审核"}</View>}
                {v.processStatus == 3 && <View style={{ textAlign: "right", color: "red", fontSize: 12 }}>{type == 0 ? "已打卡，已驳回" : "已驳回"}</View>}
              </View>
            </View>
          ))}
          <ListBottomStart
            state={this.props.listState}
            reload={() => {
              this.props.onRefresh;
            }}
          />
        </View>
      </View>
    );
  }
}

export default MyList;
