import React, { Component } from "react";
import { View, Button, } from "@tarojs/components";
import Taro from '@tarojs/taro';
import {
  AtModal,
  AtModalHeader,
  AtModalContent,
  AtModalAction,
  AtTextarea,
  AtIcon,
} from "taro-ui";
import { getUserSuperEvaluate, addUserSuperEvaluate } from '../../../utils/servers/servers'
import './index.less';

import "taro-ui/dist/style/components/modal.scss";
import 'taro-ui/dist/style/components/icon.scss';

class Superior extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "",
      opinion: [],
    }

  }

  componentWillMount() {
    this.getUserSuperEvaluate()
  }

  getUserSuperEvaluate() {
    const { id } = this.props
    getUserSuperEvaluate({
      uid: id,
      pageNo: 1,
      pageSize: 999,
    }).then((v) => {
      if (v.error.length === 0) {
        this.setState({
          opinion: v.data.list
        })
      } else {
        Taro.showToast({ title: v.error[0].message, icon: "none" });
      }
    }).catch(() => {

    })
  }

  onOK() {
    const { id } = this.props
    addUserSuperEvaluate({
      uid: id,
      content: this.state.text,
    }).then((v) => {
      if (v.error.length === 0) {
        Taro.showToast({ title: "操作成功" });
        this.props.onClose();
      } else {
        Taro.showToast({ title: v.error[0].message, icon: "none" });
      }
    }).catch(() => {

    })
  }

  render() {
    const { isOpinion, userNames, isFill } = this.props
    const { opinion } = this.state
    return (
      <>
        <AtModal
          isOpened={isOpinion}
        >
          <AtModalHeader>企业-上级指导</AtModalHeader>
          <AtModalContent>
            <View style={{ margin: "0 0 10px", color: "#6190E8" }}>{userNames}</View>
            {
              isFill &&
              <AtTextarea
                value={this.state.text}
                onChange={e => {
                  this.setState({ text: e })
                }}
                maxLength={200}
                placeholder='请填写对企业的评价'
              />
            }
            <View className='historicalClock'>
              {
                opinion.length > 0
                  ? opinion.map(item =>
                    <View key={item.id} className='item'>
                      <View className='head'>
                        <View className='spot' />
                        <View className='clockTime' style={{ color: "#6190E8" }}>
                          {item.adminName}
                        </View>
                      </View>
                      <View className='clockContent'>
                        <View className='verticalLine' style={{ borderColor: "transparent" }} />
                        <View className='rightContent'>
                          <View className='contentItem'>
                            <AtIcon className='atIcon' value='clock' size='15' color='#999999' />
                            操作时间:{item.createTime}
                          </View>
                          <View className='contentItem'>
                            <AtIcon className='atIcon' value='message' size='15' color='#999999' />
                            评价:{item.content || "暂无"}
                          </View>
                        </View>
                      </View>
                    </View>
                  )
                  : <View style={{ textAlign: "center" }}>暂无指导意见</View>
              }
            </View>
          </AtModalContent>
          {
            isFill
              ? <AtModalAction>
                <Button type='secondary' onClick={() => { this.props.onClose() }}>取消</Button>
                <Button type='primary' onClick={this.onOK.bind(this)}>确定</Button>
              </AtModalAction>
              : <AtModalAction>
                <Button type='secondary' onClick={() => { this.props.onClose() }}>确定</Button>
              </AtModalAction>
          }
        </AtModal>
      </>
    )
  }
}

export default Superior;
