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";

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

  render() {
    let roles = Taro.getStorageSync('roles');
    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) => {
                Taro.navigateTo({
                  url: `/pages/projectDetail/index?id=${v.id}`,
                });
              }}
            >
              <View className="infor">
                <View className="title">
                  <View className="aname">
                    {v.name}
                  </View>
                </View>
                <View className="userName">
                  <View className="uNtext">
                    负责人：{v.adminName}
                  </View>
                </View>
                <View className="userName">
                  <View className="uNtext">
                    研发人员：{v.staffName}
                  </View>
                </View>
                <View className="userName">
                  <View className="uNtext">
                    研发时间：{v.startTime + " 至 " + v.endTime}
                  </View>
                </View>
                <View className="userName">
                  <View className="uNtext">
                    累积工时：{v.duration}
                  </View>
                </View>
                {
                  !roles.includes("ceo") &&
                  <View className="releaseStarts">
                    <View
                      className="punchClock"
                      onClick={(e) => {
                        e.stopPropagation();
                        Taro.eventCenter.trigger("GoPunchIn", v);
                        Taro.switchTab({
                          url: "/pages/punchClock/index",
                        });
                      }}
                    >
                      去打卡
                    </View>
                  </View>
                }
              </View>
            </View>
          ))}
          <ListBottomStart
            state={this.props.listState}
            reload={() => {
              this.props.onRefresh;
            }}
          />
        </View>
      </View>
    );
  }
}

export default MyList;
