import React,{Component} from "react";
import { View,Image,Button } from '@tarojs/components'
import Taro, { getCurrentInstance } from "@tarojs/taro";
import {AtButton, AtCalendar, AtIcon, AtTextarea} from 'taro-ui'
import {examinePublicRelease,getReleasetDails,getListPublicReleaseLog} from '../../utils/servers/servers';
import {resourceAddress} from '../../utils/config';
import { AtModal, AtTimeline, AtModalContent, AtModalAction } from "taro-ui";
import Modify from './modify';
import './index.less';

import 'taro-ui/dist/style/components/icon.scss';
import 'taro-ui/dist/style/components/textarea.scss'
import 'taro-ui/dist/style/components/modal.scss';
import 'taro-ui/dist/style/components/timeline.scss';
import 'taro-ui/dist/style/components/icon.scss';
import 'taro-ui/dist/style/components/calendar.scss';

import Rejected from '../../image/rejected.png';
import Passed from '../../image/passed.png';
import Reviewed from '../../image/reviewed.png';
import ImagePicker from "../../components/common/imagePicker";

import switchIocn from '../../image/switch.png';

class EgressDetails extends Component{

  $instance = getCurrentInstance()

  constructor(props) {
    super(props);
    this.state={
      dtails:{},
      opinion:'',
      publicReleaseLog:[],
      isDetailedOpened:false,
      isOpened:false,
      isModifyOpened:false,
      modifyType:0,
      selectArrderLocation:{}
    }
    this.examinePublicRelease= this.examinePublicRelease.bind(this);
    this.getReleasetDails= this.getReleasetDails.bind(this);
    this.getListPublicReleaseLog= this.getListPublicReleaseLog.bind(this);
  }

  componentDidMount() {
    this.getReleasetDails();
  }

  componentDidShow() {
    //获取地区选定数据
    const chooseLocation = requirePlugin('chooseLocation');
    const location = chooseLocation.getLocation();
    if(location){
      this.setState({
        selectArrderLocation: location
      })
    }
  }

  getReleasetDails(){
    getReleasetDails({
      id:this.$instance.router.params.id
    }).then(v=>{
      if(v.error.length === 0){
        let list = [];
        for(let i of v.data.annexUrl.split(',')){
          if(i){
            list.push({'url':resourceAddress + i})
          }
        }
        v.data.annexUrl = list;
        this.setState({
          dtails:v.data,
          selectArrderLocation:{
            longitude:parseFloat(v.data.longitude),
            latitude:parseFloat(v.data.latitude),
            name:v.data.userName
          }
        })
      }else{
        Taro.showToast({title:v.error[0].message,icon:'none'})
      }
    }).catch(err=>{
      Taro.showToast({title:'系统错误,请稍后再试',icon:'none'});
      console.log(err)
    })
  }

  examinePublicRelease(status){
    if(!this.state.opinion){
      Taro.showToast({title:'请填写审批意见',icon:'none'})
      return;
    }
    examinePublicRelease({
      status,
      remarks:this.state.opinion,
      id:this.state.dtails.id
    }).then(v=>{
      if(v.error.length === 0){
        Taro.showToast({title:status===0?'驳回成功':'通过成功',icon:'none'});
        this.state.dtails.status=status;
        this.setState({
          dtails:this.state.dtails
        })
      }else{
        Taro.showToast({title:v.error[0].message,icon:'none'})
      }
    }).catch(()=>{
      Taro.showToast({title:'系统错误,请稍后再试',icon:'none'})
    })
  }

  getListPublicReleaseLog(){
    getListPublicReleaseLog({
      id:this.$instance.router.params.id
    }).then(v=>{
      if(v.error.length === 0){
        let arr = [];
        for (let i of v.data){
          arr.push({
            title:
              i.status === 0 ? '驳回' :
                i.status === 1 ? '审核中' :
                  i.status === 2 ? '通过' : '',
            content: ['审核员:'+i.aname,i.remarks ? '审核意见:'+i.remarks : null],
            color: i.status === 0 ? '#f31212' :
                    i.status === 1 ? '#1d4fea' :
                      i.status === 2 ? '#34de38' : ''
          })
        }
        this.setState({
          publicReleaseLog:arr,
          isOpened:true
        })
      }else{
        Taro.showToast({title:v.error[0].message,icon:'none'})
      }
    }).catch(err=>{
      Taro.showToast({title:'系统错误.请稍后重试',icon:'none'})
      console.log(err)
    })
  }

  render() {
    const {dtails} = this.state;
    return (
      <View className='egressDetails'>
        <View className='titleContent'>
          <View className='title'>{dtails.aname}提交的公出申请</View>
          <View className='address'>
            {/*<AtIcon value='map-pin' size='15' color='#767272'/>*/}
            公出企业: {dtails.nickname}
            {this.$instance.router.params.type === '0' && dtails.status === 0 ? <Image src={switchIocn} className='switchItem' onClick={()=>{
              this.setState({
                isModifyOpened:true,
                modifyType:1,
              })
            }}/> : null}
          </View>
          <View className='state' style={{
            color:dtails.status === 0 ? '#f31212' :
              dtails.status === 1 ? '#1d4fea' :
                dtails.status === 2 ? '#34de38' : ''
          }}>
            {
              dtails.status === 0 ? '驳回' :
                dtails.status === 1 ? '审核中' :
                  dtails.status === 2 ? '通过' : ''
            }
          </View>
          <Image src={
            dtails.status === 0 ? Rejected :
              dtails.status === 1 ? Reviewed :
                dtails.status === 2 ? Passed : ''} className='startIcon'/>
        </View>
        <View className='valueContent'>
          {/*<View className='item'>*/}
          {/*  <View className='title'>公出编号</View>*/}
          {/*  <View className='value'>20212584646465495462</View>*/}
          {/*</View>*/}
          {/*<View className='item'>*/}
          {/*  <View className='title'>企业类型</View>*/}
          {/*  <View className='value'>稀有企业</View>*/}
          {/*</View>*/}
          {/*<View className='item'>*/}
          {/*  <View className='title'>审核人</View>*/}
          {/*  <View className='value'>营销经理</View>*/}
          {/*</View>*/}
          <View className='item'>
            <View className='title'>
              公出地点:
              {this.$instance.router.params.type === '0' && dtails.status === 0 ? <AtIcon value='edit' size='18' color='#3864ef' onClick={()=>{
                this.setState({
                  isModifyOpened:true,
                  modifyType:2,
                })
              }}/> : null}
            </View>
            <View className='value'>{dtails.userName}</View>
            <View className='timeContent'>
              <View className='time'>
                <View className='num'>公出{dtails.duration}小时</View>
                <View className='journal' onClick={()=>{
                  this.setState({
                    isDetailedOpened:true
                  })
                }}>明细</View>
              </View>
              <View className='timeAxis'>
                <View className='startTime'>
                  <View className='circle'/>
                  {dtails.releaseStarts}
                </View>
                <View className='axis'/>
                <View className='endTime'>
                  <View className='circle'/>
                  {dtails.releaseEnds}
                </View>
              </View>
            </View>
          </View>
          <AtModal isOpened={this.state.isDetailedOpened}>
           <AtModalContent>
             {dtails.validDate ?  <AtCalendar
                  isSwiper={false}
                  validDates={JSON.parse(dtails.validDate)}
                /> : null
             }
            </AtModalContent>
            <AtModalAction>
              <Button onClick={()=>{
                this.setState({
                  isDetailedOpened:false
                })
              }}>确定</Button>
            </AtModalAction>
          </AtModal>
          <View className='item'>
            <View className='title'>
              申请时间
            </View>
            <View className='value'>{dtails.createTimes}</View>
          </View>
          <View className='item'>
            <View className='title'>公出原因</View>
            <View className='value'>
              {dtails.remarks}
            </View>
          </View>
          <View className='item'>
            <View className='title'>附件</View>
            <View className='value'>
              {dtails.annexUrl && dtails.annexUrl.length > 0 ? <ImagePicker
                files={dtails.annexUrl}
                showAddBtn={false} /> : null}
            </View>
          </View>
          {
            this.$instance.router.params.type === '1' ?
              <View className='item'>
                <View className='title'>填写审批意见</View>
                <AtTextarea
                  value={this.state.opinion}
                  onChange={(value)=>{
                    this.setState({
                      opinion:value
                    })
                  }}
                  maxLength={200}
                  placeholder='请填写审批意见'
                />
              </View> : null
          }
          {
            this.$instance.router.params.type === '1' ?
              <View className='operation'>
                <AtButton type='secondary' circle loading={this.state.loading} onClick={()=>{
                  this.examinePublicRelease(0);
                }}>
                  驳回
                </AtButton>
                <AtButton type='primary' loading={this.state.loading} circle onClick={()=>{
                  this.examinePublicRelease(2);
                }}>
                  同意
                </AtButton>
              </View> : null
          }
        </View>
        <View className='valueContent history' onClick={this.getListPublicReleaseLog}>
          查看TA的历史记录
          <AtIcon value='chevron-right' size='20' color='#767272'/>
        </View>
        <AtModal isOpened={this.state.isOpened}>
          <AtModalContent>
            <AtTimeline
              pending
              items={this.state.publicReleaseLog}
            />
          </AtModalContent>
          <AtModalAction>
            <Button onClick={()=>{
              this.setState({
                isOpened:false
              })
            }}>确定</Button>
          </AtModalAction>
        </AtModal>
        <Modify
          dtails={dtails}
          locationInfor={this.state.selectArrderLocation}
          id={this.$instance.router.params.id}
          isOpened={this.state.isModifyOpened}
          modifyType={this.state.modifyType}
          onClose={()=>{
          this.setState({
            isModifyOpened:false,
            dtails:{}
          },()=>{
            this.getReleasetDails();
          })
        }}/>
      </View>
    )
  }
}

export default EgressDetails;