import React,{Component} from "react";
import { View,Image,Button } from '@tarojs/components'
import Taro, { getCurrentInstance } from "@tarojs/taro";
import {AtButton, AtCalendar, AtIcon, AtTextarea,AtModal, AtTimeline, AtModalContent, AtModalAction} from 'taro-ui'
import Skeleton from 'taro-skeleton'

import InquiryModal from '../../components/common/inquiryModal';

import Modify from './modify';
import {examinePublicRelease,getReleasetDails,getListPublicReleaseLog} from '../../utils/servers/servers';
import {resourceAddress} from '../../utils/config';
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 Wx from '../../image/wx.png';
import ImagePicker from "../../components/common/imagePicker";
import switchIocn from '../../image/switch.png';
import MessageNoticebar from "../../components/common/messageNoticebar";

class EgressDetails extends Component{

  $instance = getCurrentInstance()

  constructor(props) {
    super(props);
    this.state={
      dtails:{},
      opinion:'',
      publicReleaseLog:[],
      isDetailedOpened:false,
      isOpened:false,
      isModifyOpened:false,
      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){
        if(v.data){
          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{
          setTimeout(()=>{
            Taro.switchTab({
              url: '/pages/punchClock/index',
            })
          },1800)
          Taro.showToast({
            title:'您没有权限查看此公出详情',
            icon:'none',
            duration:1800,
          })
        }
      }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
        })
        Taro.eventCenter.trigger('listOperation',{
          type:this.state.dtails.permission,
          index:this.$instance.router.params.index,
          status:status===0?0:2
        })

      }else{
        Taro.showToast({title:v.error[0].message,icon:'none'})
      }
    }).catch(()=>{
      Taro.showToast({title:'系统错误,请稍后再试',icon:'none'})
    })
  }

  getListPublicReleaseLog(){
    Taro.showLoading({
      title:'加载中...'
    })
    getListPublicReleaseLog({
      id:this.$instance.router.params.id
    }).then(v=>{
      Taro.hideLoading();
      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,'操作时间:'+i.createTimes],
            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.hideLoading();
      Taro.showToast({title:'系统错误.请稍后重试',icon:'none'})
      console.log(err)
    })
  }

  onShareAppMessage(){
    return {
      title: this.state.dtails.aname+ '将要去' + this.state.dtails.userName,
      path: 'pages/egressDetails/index?id='+this.$instance.router.params.id
    }
  }

  render() {
    const {dtails} = this.state;
    return (
      <View className='egressDetails'>
        <MessageNoticebar/>
        <View className='titleContent' style={{
          padding:Object.keys(dtails).length === 0? '0 30px' : '20px 30px'
        }}>
          {Object.keys(dtails).length === 0?
            <Skeleton title row={3} animateName='elastic' avatarShape='square' loading/>:
            <View>
              <View className='title'>{dtails.aname}提交的公出申请</View>
              <View className='address'>
                申请时间: {dtails.createTimes}
              </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>
        {Object.keys(dtails).length === 0?
          <View style={{margin: '20px'}}>
            <Skeleton title row={3} avatarShape='square' loading/>
          </View>:
          <View className='valueContent'>
            <View className='item'>
              <View className='title'>
                公出地点:
                {dtails.permission === 0 && dtails.status === 0 ?
                  <View className='edit' onClick={()=>{
                    this.setState({
                      isModifyOpened:true,
                    })
                  }}>
                    <AtIcon value='edit' size='18' color='#3864ef'/>
                  </View> : null}
              </View>
              <View className='value'>{dtails.userName}</View>
              <View className='timeContent'>
                <View className='time'>
                  <View className='num'>公出{dtails.duration}小时</View>
                  <View className='journal' onClick={(e)=>{
                    e.stopPropagation();
                    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 onClose={()=>{
              this.setState({
                isDetailedOpened:false
              })
            }} 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'>
                公出企业
                {/*{dtails.permission === 0 && dtails.status === 0 ? <Image src={switchIocn} className='switchItem' onClick={()=>{*/}
                {/*  this.setState({*/}
                {/*    isModifyOpened:true,*/}
                {/*    modifyType:1,*/}
                {/*  })*/}
                {/*}}/> : null}*/}
              </View>
              <View className='value'>
                {dtails.nickname}
              </View>
            </View>
            <View className='item'>
              <View className='title'>公出原因</View>
              <View className='value'>
                {dtails.remarks}
              </View>
            </View>
            {dtails.annexUrl && dtails.annexUrl.length > 0 ? <View className='item'>
              <View className='title'>附件</View>
              <View className='value'>
                <ImagePicker
                  files={dtails.annexUrl}
                  showAddBtn={false} />
              </View>
            </View> : null}
            {
              dtails.permission === 1 && dtails.status === 1 ?
                <View className='item'>
                  <View className='title'>填写审批意见</View>
                  <AtTextarea
                    value={this.state.opinion}
                    onChange={(value)=>{
                      this.setState({
                        opinion:value
                      })
                    }}
                    maxLength={20}
                    placeholder='请填写审批意见'
                  />
                </View> : null
            }
            {
              dtails.permission === 1 && dtails.status === 1 ?
                <View className='operation'>
                  <AtButton type='secondary' circle loading={this.state.loading} onClick={()=>{
                    this.setState({
                      isInquiryOpened:true,
                      inquiryTitle:'提醒',
                      inquiryContent:'您确定要驳回此申请吗?',
                      inquiryFn:()=>{
                        this.examinePublicRelease(0);
                      }
                    })
                  }}>
                    驳回
                  </AtButton>
                  <AtButton type='primary' loading={this.state.loading} circle onClick={()=>{
                    this.setState({
                      isInquiryOpened:true,
                      inquiryTitle:'提醒',
                      inquiryContent:'您确定要同意此申请吗?',
                      inquiryFn:()=>{
                        this.examinePublicRelease(2);
                      }
                    })
                  }}>
                    同意
                  </AtButton>
                </View> : null
            }
        </View>}
        {Object.keys(dtails).length === 0?
          <View style={{margin: '20px'}}>
            <Skeleton title row={3} avatarShape='square' loading/>
          </View>:
          <View className='valueContent history' onClick={(e)=>{
            e.stopPropagation();
            this.getListPublicReleaseLog();
          }}>
            查看TA的历史记录
          <AtIcon value='chevron-right' size='20' color='#767272'/>
        </View>}
        {Object.keys(dtails).length === 0?
          <View style={{margin: '20px'}}>
            <Skeleton title row={3} avatarShape='square' loading/>
          </View>:
          <View className='valueContent history'>
            <View className='shareContent'>
              <Button open-type='share' className='share'>
                <Image src={Wx} className='shareIcon'/>
              </Button>
              <View className='shareTitle'>微信分享</View>
            </View>
          </View>}
        <AtModal onClose={()=>{
          this.setState({
            isOpened:false
          })
        }} isOpened={this.state.isOpened}>
          <AtModalContent>
            <AtTimeline
              pending
              items={this.state.publicReleaseLog}
            />
          </AtModalContent>
          <AtModalAction>
            <Button onClick={()=>{
              this.setState({
                isOpened:false
              })
            }}>确定</Button>
          </AtModalAction>
        </AtModal>
        {this.state.isModifyOpened ? <Modify
          permission={dtails.permission}
          index={this.$instance.router.params.index}
          dtails={dtails}
          locationInfor={this.state.selectArrderLocation}
          id={this.$instance.router.params.id}
          isOpened={this.state.isModifyOpened}
          onModalClose={()=>{
            this.setState({
              isModifyOpened:false,
            })
          }}
          onClose={()=>{
          this.setState({
            isModifyOpened:false,
            dtails:{}
          },()=>{
            this.getReleasetDails();
          })
        }}/> : null}
        <InquiryModal
          isOpened={this.state.isInquiryOpened}
          title={this.state.inquiryTitle}
          content={this.state.inquiryContent}
          onClose={()=>{
            this.setState({
              isInquiryOpened:false,
              inquiryTitle:'',
              inquiryContent:'',
            })
          }}
          onDetermine={()=>{
            this.state.inquiryFn();
            this.setState({
              isInquiryOpened:false,
              inquiryTitle:'',
              inquiryContent:'',
              inquiryFn:()=>{}
            })
          }}
        />
      </View>
    )
  }
}

export default EgressDetails;
