import React, { Component } from "react";
import { AtModal, AtModalAction, AtModalContent, AtIcon } from "taro-ui";
import { Button, Image, View } from "@tarojs/components";
import Taro from "@tarojs/taro";

import './index.less';

// import { getListPublicReleaseLog } from '../../utils/servers/servers';

import "taro-ui/dist/style/components/icon.scss";
import { getClockState } from "../../utils/tools";
import ImagePicker from "../common/imagePicker";
import { resourceAddress } from "../../utils/config";

class HistoricalClock extends Component {
  constructor(props) {
    super(props);
    this.state = {
      publicReleaseLog: []
    }
    // this.getListPublicReleaseLog = this.getListPublicReleaseLog.bind(this);
  }

  componentDidMount() {
    // this.getListPublicReleaseLog();
  }

  // getListPublicReleaseLog() {
  //   Taro.showLoading({
  //     title: '加载中...'
  //   })
  //   getListPublicReleaseLog({
  //     id: this.props.id
  //   }).then(v => {
  //     Taro.hideLoading();
  //     if (v.error.length === 0) {
  //       for (let d of v.data) {
  //         let list = [];
  //         for (let i of (d.photoUrl || '').split(',')) {
  //           if (i) {
  //             list.push({ 'url': resourceAddress + i })
  //           }
  //         }
  //         d.photoUrl = list;
  //       }
  //       this.setState({
  //         publicReleaseLog: v.data,
  //       })
  //     } else {
  //       Taro.showToast({ title: v.error[0].message, icon: 'none' })
  //     }
  //   }).catch(err => {
  //     Taro.hideLoading();
  //     Taro.showToast({ title: '系统错误.请稍后重试', icon: 'none' })
  //     //console.log(err)
  //   })
  // }

  render() {
    return (
      <AtModal
        width="90%"
        isOpened={this.props.isOpened}
        onClose={this.props.onClose}
        onCancel={this.props.onClose}>
        <AtModalContent>
          <View className='historicalClock'>
            {
              this.state.publicReleaseLog.map((v, k) => (
                <View key={k} className='item'>
                  <View className='head'>
                    <View className='spot' />
                    <View className='clockTime' style={{
                      color: getClockState(v.status, true).color
                    }}>
                      {getClockState(v.status, true).title}
                    </View>
                  </View>
                  <View className='clockContent'>
                    <View className='verticalLine' style={{
                      visibility: this.state.publicReleaseLog[k + 1] ? 'visible' : 'hidden'
                    }} />
                    <View className='rightContent' style={{
                      paddingBottom: this.state.publicReleaseLog[k + 1] ? '30px' : 0
                    }}>
                      <View className='contentItem'>
                        <AtIcon className='atIcon' value='user' size='15' color='#999999' />
                        操作人:{v.aname}
                      </View>
                      <View className='contentItem'>
                        <AtIcon className='atIcon' value='clock' size='15' color='#999999' />
                        操作时间:{v.createTimes}
                      </View>
                      {v.remarks ? <View className='contentItem'>
                        <AtIcon className='atIcon' value='message' size='15' color='#999999' />
                        备注:{v.remarks}
                      </View> : null}
                      {v.photoUrl.length !== 0 ? <View className='contentItem'>
                        <AtIcon className='atIcon' value='file-generic' size='15' color='#999999' />
                        附件:
                        <ImagePicker
                          files={v.photoUrl || []}
                          showAddBtn={false} />
                      </View> : null}
                    </View>
                  </View>
                </View>
              ))
            }
          </View>
        </AtModalContent>
        <AtModalAction>
          <Button onClick={this.props.onClose}>确定</Button>
        </AtModalAction>
      </AtModal>
    )
  }
}

export default HistoricalClock;
