import React, { Component } from "react";
import { AtModal, AtModalAction, AtModalContent, AtIcon } from "taro-ui";
import { Button, Image, View, Text } from "@tarojs/components";
import Taro from "@tarojs/taro";
import './index.less';
import { getAccountLog } from '../../../utils/servers/servers';
import "taro-ui/dist/style/components/icon.scss";

class AuditDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
    }
    this.selLog = this.selLog.bind(this);
  }

  componentDidMount() {
    this.selLog();
  }

  selLog() {
    Taro.showLoading({
      title: '加载中...'
    })
    getAccountLog({
      eaid: this.props.id
    }).then(v => {
      Taro.hideLoading();
      if (v.error.length === 0) {
        this.setState({
          list: v.data || []
        })
        this.isHere(v.data || [])
      } else {
        Taro.showToast({ title: v.error[0].message, icon: 'none' })
      }
    }).catch(err => {
      Taro.hideLoading();
      Taro.showToast({ title: '系统错误.请稍后重试', icon: 'none' })
    })
  }

  isHere(list = []) {
    for (var i = 0; i < list.length; i++) {
      if (!list[i].id) {
        this.setState({
          processStatus: list[i].processStatus
        })
        return
      }
    }
  }

  render() {
    const { list, processStatus } = this.state
    return (
      <AtModal
        width="90%"
        isOpened={this.props.isOpened}
        onClose={this.props.onClose}
        onCancel={this.props.onClose}>
        <AtModalContent>
          <View className='historicalClock'>
            {
              this.state.list?.map((v, n) => (
                <View key={v.key} className='item'>
                  <View className='head'>
                    <View className='spot'
                      style={{
                        borderColor: processStatus == v.processStatus
                          ? "#6190E8" : !v.remarks
                            ? "#999999" : "#6190E8",
                        color: processStatus == v.processStatus && !v.id
                          ? "#fff" : !v.remarks
                            ? "#999999" : "#6190E8",
                        background: processStatus == v.processStatus && !v.id && "#6190E8",
                      }}
                    >{!!v.remarks ? "✓" : n + 1}</View>
                    <View className='clockTime'
                      style={{ color: processStatus == v.processStatus && !v.id && "black", }}
                    >
                      {v.auditorName}
                      &nbsp; &nbsp;
                      {processStatus == v.processStatus && !v.id && <Text style={{ color: "#FFA500" }}>审核中...</Text>}
                    </View>
                  </View>
                  <View className='clockContent'>
                    <View className='verticalLine'
                      style={{
                        visibility: list.length != (n + 1)
                          ? "visible"
                          : "hidden"
                      }}
                    />
                    <View className='rightContent'>
                      {v.remarks &&
                        <View className='contentItem'>
                          <AtIcon className='atIcon' value='settings' size='15' color='#999999' />
                          操作：<Text style={{ color: ["#1D4FEA", "#34DE38", "#108EE9", "red", "#1D4FEA"][v.status] }}
                          >{["【发起】", "【通过】", "【完成】", "【驳回】", "【重新发起】"][v.status]}</Text>
                        </View>}
                      {v.remarks &&
                        <View className='contentItem'>
                          <AtIcon className='atIcon' value='clock' size='15' color='#999999' />
                          操作时间：{v.createTimeStr}
                        </View>}
                      {v.remarks &&
                        <View className='contentItem'>
                          <AtIcon className='atIcon' value='message' size='15' color='#999999' />
                          备注：{v.remarks}
                        </View>}
                    </View>
                  </View>
                </View>
              ))
            }
          </View>
        </AtModalContent>
        <AtModalAction>
          <Button onClick={this.props.onClose}>确定</Button>
        </AtModalAction>
      </AtModal>
    )
  }
}

export default AuditDetails;
