import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Map, OpenData, View, Image, Text, Button } from '@tarojs/components'
import Taro from '@tarojs/taro';
import { AtIcon, AtModal, AtModalHeader, AtModalContent, AtModalAction, AtTextarea, AtRadio, AtList } from "taro-ui";
import dayjs from 'dayjs';
import Skeleton from 'taro-skeleton'
import HistoricalClock from '../../components/historicalClock';
import ImagePicker from '../../components/common/imagePicker';
import { add, minus, asyncAdd } from '../../actions/counter'
import { getPublicReleaseList, publicReleaseClockIn, getPunchClockInfo, getReleasetDails } from '../../utils/servers/servers';
import './index.less'
import switchIocn from '../../image/switch.png';
import Location from '../../image/location.png';
import PunchRange from '../../image/punchRange.png';
import 'taro-ui/dist/style/components/noticebar.scss';
import 'taro-ui/dist/style/components/icon.scss';
import 'taro-ui/dist/style/components/list.scss';
import "taro-ui/dist/style/components/radio.scss";
import "taro-ui/dist/style/components/icon.scss";

import { getClockState, getNewOptions } from "../../utils/tools";

const QQMapWX = require('../../components/common/mapSDK/qqmap-wx-jssdk.min.js');

@connect(({ counter }) => ({
  counter
}), (dispatch) => ({
  add() {
    dispatch(add())
  },
  dec() {
    dispatch(minus())
  },
  asyncAdd() {
    dispatch(asyncAdd())
  }
}))

class PunchClocks extends Component {
  constructor(props) {
    super(props);
    this.state = {
      imgs: [],
      nowTime: '00:00:00',
      newArrder: {},
      addressLatitude: '',
      addressLongitude: '',
      defaultLat: '28.2424',
      defaultLng: '112.957',
      distance: '',
      dtails: {},
      data: {
        prdcList: []
      },
      loading: true,
      isAbnormalOpen: false,
      clockInRemarks: "",//打卡说明
    }
    this.onChange = this.onChange.bind(this);
    this.getSpacing = this.getSpacing.bind(this);
    this.getData = this.getData.bind(this);
    this.publicReleaseClockIn = this.publicReleaseClockIn.bind(this);
    this.abnormalClockIn = this.abnormalClockIn.bind(this);
    this.refresh = this.refresh.bind(this);
    this.getDtails = this.getDtails.bind(this);
    this.selectArrder = this.selectArrder.bind(this);
    this.selectOn = this.selectOn.bind(this);
  }

  nowTime = null;

  wxConfig = null;

  mapCtx = Taro.createMapContext('map');

  qqmapsdk = new QQMapWX({
    key: 'AWBBZ-GRAC2-JFYUO-CLA7I-JAHXK-YFFGT'
  });

  componentDidMount() {
    this.getDtails();
  }

  selectOn() {
    const { dtails, selectUid } = this.state
    if (!selectUid) {
      Taro.showToast({ title: '请选择您要打卡的企业', icon: 'none' });
      return
    }
    let list = dtails.prdList
    for (var i = 0; i < list.length; i++) {
      if (list[i].uid == selectUid) {
        console.log(list[i])
        this.setState({
          data: list[i],
          addressLatitude: parseFloat(list[i].latitude || this.state.defaultLat),
          addressLongitude: parseFloat(list[i].longitude || this.state.defaultLng),
          isTips: false,
          selectUid: "",
        })
      }
    }
  }

  selectArrder() {
    const { dtails, data } = this.state
    this.props.getId(dtails.id, data.uid)
    this.props.getHome()
    const key = "AWBBZ-GRAC2-JFYUO-CLA7I-JAHXK-YFFGT"; //使用在腾讯位置服务申请的key
    const referer = "科德打卡定位"; //调用插件的app的名称
    const category = "公司企业,房产小区";
    Taro.navigateTo({
      url:
        "plugin://chooseLocation/index?key=" +
        key +
        "&referer=" +
        referer +
        "&category=" +
        category,
    });
  }

  getDtails() {
    this.getData(() => {
      Taro.startLocationUpdate({
        success: () => {
          Taro.onLocationChange((v) => {
            this.getSpacing(v.latitude, v.longitude)
          })
        },
        fail: (err) => {
          Taro.getSetting({
            success: (res) => {
              if (!res.authSetting['scope.userLocation']) {
                Taro.authorize({
                  scope: 'scope.userLocation',
                  success: () => {

                  },
                  fail: () => {
                    this.setState({
                      isOpened: true
                    })
                  }
                })
              }
            }
          })
          this.setState({
            loading: false
          })
        }
      })
    });
  }

  componentWillMount() {
    let obj = Taro.getStorageSync('userInfor');
    if (!obj) {
      // 判断是否登录
      return
    }
    this.wxConfig = Taro.getStorageSync('wxConfig');
    //获得当前位置
    Taro.getLocation({
      type: 'gcj02',
      isHighAccuracy: true,
      success: (res) => {
        const latitude = res.latitude
        const longitude = res.longitude
        this.setState({
          newArrder: {
            latitude,
            longitude
          },
        })
      }
    })

    this.nowTime = setInterval(() => {
      this.setState({
        nowTime: dayjs().format('HH:mm:ss')
      })
    }, 1000)

    Taro.eventCenter.on('punchClockComponentDidShow', () => {
      if (Object.keys(this.state.dtails).length === 0) {
        this.getDtails();
      }
    })

    Taro.eventCenter.on('GoPunchIn', (arg) => {
      getReleasetDails({
        id: arg.id,
      }).then((v) => {
        if (v.error.length === 0) {
          if (v.data) {
            if (!v.data.prdList) {
              return
            }
            let data = v.data.prdList[0]
            this.setState({
              dtails: v.data,
              data,
              addressLatitude: parseFloat(data.latitude || this.state.defaultLat),
              addressLongitude: parseFloat(data.longitude || this.state.defaultLng),
            }, () => {
              Taro.showToast({ title: '切换成功' });
              Taro.startLocationUpdate({
                success: () => {
                  Taro.onLocationChange((v) => {
                    this.getSpacing(v.latitude, v.longitude)
                  })
                },
                fail: () => {
                  this.setState({
                    loading: false
                  })
                }
              })
            })
          } else {
          }
        } else {
          Taro.showToast({ title: v.error[0].message, icon: "none" });
        }
      }).catch((err) => {
        Taro.showToast({ title: "系统错误,请稍后再试", icon: "none" });
      });
    })
  }

  componentDidHide() {
    Taro.offLocationChange();
    this.nowTime && this.nowTime.clearTimeout();
  }

  // 正常打卡
  publicReleaseClockIn(uid) {
    const { dtails } = this.state
    if (dtails.status !== 2) {
      Taro.hideLoading()
      Taro.showToast({ title: '公出审核中,不可打卡', icon: 'none' });
      return;
    }
    if (dtails.type === 3 && dtails.publicAssistAdvice === 0) {
      Taro.hideLoading()
      Taro.showToast({ title: '未填写协单意见,不可打卡', icon: 'none' });
      return;
    }
    if (dtails.status === 3) {
      Taro.hideLoading()
      Taro.showToast({ title: '申请已撤销,无法打卡', icon: 'none' });
      return;
    }
    if (Object.keys(dtails).length === 0) {
      Taro.hideLoading()
      Taro.showToast({ title: '暂无公出申请,无法打卡', icon: 'none' });
      return;
    }
    if (![5, 6].includes(dtails.type) && isNaN(parseInt(this.state.distance))) {
      Taro.hideLoading()
      Taro.showToast({ title: '定位错误,请联系管理员', icon: 'none' })
      return;
    }
    console.log([5, 6].includes(dtails.type))

    if ([5, 6].includes(dtails.type)) {
      let nowTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
      let startTime = dayjs(dtails.releaseStarts).format('YYYY-MM-DD 00:00:00')
      let endTime = dayjs(dtails.releaseEnds).format('YYYY-MM-DD 23:59:59')
      console.log(dayjs(nowTime).isAfter(dayjs(startTime)), dayjs(nowTime).isBefore(dayjs(endTime)))
      if (!(dayjs(nowTime).isAfter(dayjs(startTime)) && dayjs(nowTime).isBefore(dayjs(endTime)))) {
        Taro.hideLoading()
        Taro.showToast({ title: '当前时间不在打卡时间范围内,无法打卡', icon: 'none' })
        return
      }
    } else {
      if ((dayjs().isBefore(dtails.releaseStarts) || dayjs().isAfter(dtails.releaseEnds))) {
        Taro.hideLoading()
        Taro.showToast({ title: '当前时间不在打卡时间范围内,无法打卡', icon: 'none' })
        return
      }
    }



    // 非公出协单不受位置影响
    if ([5, 6].indexOf(dtails.type) === -1 && !(this.state.distance <= this.wxConfig.clockInRange && this.state.distance >= 0)) {
      Taro.hideLoading()
      Taro.showToast({ title: '当前位置未处于可打卡范围,无法打卡', icon: 'none' })
      return;
    }
    // if (dtails.type == 0 && (dtails.publicType == 1 || dtails.publicType == 3)) {
    //   Taro.hideLoading()
    //   Taro.showToast({ title: '公出他人企业！需通过审核，才可打卡！', icon: 'none' });
    //   return
    // }
    // if (dtails.type == 1 && (dtails.techStartProcess == 1 || dtails.techStartProcess == 3)) {
    //   Taro.hideLoading()
    //   Taro.showToast({ title: '已超过合同规定时限，需审核通过，才可打卡！', icon: 'none' });
    //   return
    // }
    if (this.state.imgs.length === 0) {
      Taro.hideLoading()
      Taro.showToast({ title: '请上传打卡照片', icon: 'none' })
      return;
    }

    publicReleaseClockIn({
      id: dtails.id,
      photoUrl: this.state.imgs.join(','),
      clockIn: 1,
      uid: this.state.data.uid,
    }).then(v => {
      Taro.hideLoading()
      if (v.error.length === 0) {
        Taro.showToast({
          title: dtails.type == 1
            ? ((dtails.techStartProcess == 1 || dtails.techStartProcess == 3)
              ? '打卡成功！此次公出未通过营销审核！'
              : '打卡成功！')
            : '打卡成功！',
          icon: 'none'
        });
        this.imagePicker.clear();
        this.state.data.prdcList[0].status = 1;
        this.setState({
          data: this.state.data,
          imgs: []
        })
      } else {
        Taro.showToast({ title: v.error[0].message, icon: 'none' })
      }
    }).catch(() => {
      Taro.hideLoading()
      Taro.showToast({
        title: '系统错误,请稍后再试',
        icon: 'none'
      })
    })
  }

  // 异常打卡
  abnormalClockIn() {
    if (!this.state.clockInRemarks) {
      Taro.showToast({ title: '请填写异常打卡原因！', icon: 'none' })
      return;
    }
    Taro.showLoading({ title: '正在提交...' });
    publicReleaseClockIn({
      id: this.state.dtails.id,
      photoUrl: this.state.imgs.join(','),
      clockInRemarks: this.state.clockInRemarks,
      clockIn: 2,
    }).then(v => {
      Taro.hideLoading()
      if (v.error.length === 0) {
        Taro.showToast({ title: '打卡成功', icon: 'none' });
        this.imagePicker.clear();
        this.state.data.prdcList[0].status = 2;
        this.setState({
          data: this.state.data,
          imgs: [],
          clockInRemarks: "",
          isAbnormalOpen: false,
        })
      } else {
        Taro.showToast({ title: v.error[0].message, icon: 'none' })
      }
    }).catch(() => {
      Taro.hideLoading()
      Taro.showToast({
        title: '系统错误,请稍后再试',
        icon: 'none'
      })
    })
  }

  getData(fn) {
    this.setState({
      loading: true
    })
    getPunchClockInfo().then(v => {
      if (v.error.length === 0) {
        this.setState({
          loading: false
        })
        if (v.data) {
          let data = v.data.prdList[0]
          this.setState({
            dtails: v.data,
            data,
            addressLatitude: data.latitude || this.state.defaultLat,
            addressLongitude: data.longitude || this.state.defaultLng,
          }, () => {
            fn();
          })
        } else {
          this.setState({
            dtails: {},
            data: {},
          })
        }
      } else {
        this.setState({
          loading: false
        })
        Taro.showToast({
          title: v.error[0].message,
          icon: 'none'
        })
      }
    })
  }

  getSpacing(latitude, longitude) {
    let _this = this;
    this.qqmapsdk.calculateDistance({
      mode: 'straight',
      from: {
        latitude: this.state.addressLatitude,
        longitude: this.state.addressLongitude,
      },
      to: [
        {
          latitude,
          longitude,
        }
      ],
      success: function (res) {//成功后的回调
        _this.setState({
          distance: res.result.elements[0].distance,
          loading: false
        })
      },
      fail: function (error) {
        _this.setState({
          loading: false
        })
        console.error(error);
      },
      complete: function (res) {

      }
    });
  }

  onChange(value, type) {
    let arr = this.state.imgs.concat([]);
    if (type === 'add') {
      arr.push(value)
    } else if (type === 'remove') {
      arr.splice(value, 1)
    }
    this.setState({
      imgs: arr,
    })
  }

  refresh() {
    this.getData(() => {
      Taro.startLocationUpdate({
        success: () => {
          Taro.onLocationChange((v) => {
            this.getSpacing(v.latitude, v.longitude)
          })
        }
      })
    });
  }

  getClockBgColor() {
    const { dtails, distance, data } = this.state
    const newClockIn = !!data.prdcList && data.prdcList.length > 0 ? data.prdcList[0] : {};
    if ([5, 6].indexOf(dtails.type) > -1) {
      let nowTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
      let startTime = dayjs(dtails.releaseStarts).format('YYYY-MM-DD 00:00:00')
      let endTime = dayjs(dtails.releaseEnds).format('YYYY-MM-DD 23:59:59')
      if (dayjs(nowTime).isAfter(dayjs(startTime)) && dayjs(nowTime).isBefore(dayjs(endTime)) ) {
        return [1, 2].includes(newClockIn.status) ? '#3f82e8' : '#72cb78'
      } else {
        return '#828e83'
      }
    } else {
      return (!isNaN(parseInt(distance)))
      && distance <= this.wxConfig.clockInRange
      && distance >= 0
      && !(dayjs().isBefore(dtails.releaseStarts) || dayjs().isAfter(dtails.releaseEnds))
      && dtails.status === 2
      ? dtails.type === 3
        ? dtails.publicAssistAdvice > 0
          ? ((newClockIn.status === 1 || newClockIn.status === 2) ? '#3f82e8' : '#72cb78')
          : '#828e83'
        : ((newClockIn.status === 1 || newClockIn.status === 2) ? '#3f82e8' : '#72cb78')
      : '#828e83'
    }
  }

  render() {
    const { dtails, data } = this.state;
    const newClockIn = !!data.prdcList && data.prdcList.length > 0 ? data.prdcList[0] : {};
    return (
      <View className='punchClock'>
        <View className='header'>
          <Skeleton
            title
            avatar
            row={2}
            animateName='elastic'
            avatarShape='square'
            loading={this.state.loading}
          >
            <View className='headerContent'>
              <View className='userAvatarUrl'>
                <OpenData type='userAvatarUrl' />
              </View>
              <View className='infor'>
                <View className='name'>
                  {
                    Object.keys(dtails).length <= 0 ?
                      Taro.getStorageSync('userInfor').name :
                      dtails.aname
                  }
                </View>
                <View className='types'
                  style={{ color: ["#1D4FEA", "#1E90FF", "#FF5500", "red", "", "#1D4FEA"][dtails.type] }}
                >
                  {["业务公出", "技术公出", "行政公出", "技术协单", "", "非公出协单", "非公出协单"][dtails.type]}
                </View>
              </View>
              {
                Object.keys(this.state.dtails).length <= 0 ?
                  <View onClick={this.refresh} className='state' style={{
                    alignSelf: 'center',
                    textAlign: 'center',
                    color: '#b6b5b5',
                    fontSize: '11px'
                  }}>
                    <AtIcon value='reload' size='20' />
                    <View>刷新</View>
                  </View> :
                  <View className='state' style={{
                    color: getClockState(dtails.status).color
                  }}>
                    <View style={{ textAlign: 'right' }}>
                      {
                        getClockState(dtails.status).title
                      }
                    </View>
                    <View className='switchContent' onClick={() => {
                      Taro.switchTab({
                        url: '/pages/mybusiness/index',
                      })
                    }}>
                      <View className='switchTitle'>切换打卡</View>
                      <Image src={switchIocn} className='switchItem' />
                    </View>
                  </View>
              }
            </View>
          </Skeleton>
        </View>
        {
          Object.keys(this.state.dtails).length <= 0 ?
            <View className='content'>
              <View className='punchClockContent'
                onClick={this.publicReleaseClockIn}
                style={{
                  boxShadow: '1px 1px 15px 1px #acb8ad',
                  background: '#828e83',
                  marginTop: '85px',
                }}>
                <View className='punchClockTitle'>公出打卡</View>
                <View className='punchClockTime'>{this.state.nowTime}</View>
              </View>
              <View className='noData'>
                <View className='tipsNoData'>
                  暂无公出申请
                </View>
                <View className='goOut' onClick={() => {
                  Taro.switchTab({
                    url: '/pages/applyDepart/index',
                  })
                }}>
                  点击前往申请公出
                </View>
              </View>
            </View> :
            <View>
              <View className='content'>
                <View className="enterprise">
                  <View className='entit'>公出企业</View>
                  <View className='userlist'>
                    <Text className='username'>
                      {data.userName}
                      {(newClockIn.status === 1 || newClockIn.status === 2) && <Text style={{ color: "#72cb78" }}>(已打卡)</Text>}
                    </Text>
                    {
                      this.state.dtails.prdList?.length > 1 &&
                      <View className='switch' onClick={() => { this.setState({ isTips: true }) }}>
                        <View className='stxt'>切换企业</View>
                        <Image src={switchIocn} className='sicon' />
                      </View>
                    }
                  </View>
                </View>
                <View className='timeContent'>
                  <View className='timeItem'>
                    <View className='timeTitle'>公出开始时间</View>
                    <View className='timeValue'>{dtails.releaseStarts}</View>
                  </View>
                  <View className='timeItem'>
                    <View className='timeTitle'>公出结束时间</View>
                    <View className='timeValue'>{dtails.releaseEnds}</View>
                  </View>
                </View>
                <View className='photographContent'>
                  <View className='photographTitle'>打卡拍照<Text className='tips'>〔可以上传多张〕</Text></View>
                  <AtIcon onClick={() => {
                    Taro.chooseImage({
                      count: 1,
                      sizeType: ['compressed'],
                      sourceType: ['camera'],
                      success: (res) => {
                        // tempFilePath可以作为img标签的src属性显示图片
                        const tempFilePaths = res.tempFilePaths
                        this.imagePicker.onImgChange([{ url: tempFilePaths[0] }], 'add', 0, 'camera')
                      }
                    })
                  }} value='camera' size='25' color='#4395ff' />
                </View>
                <View style={{ alignSelf: 'flex-start', width: '100%' }}>
                  <ImagePicker ref={ref => this.imagePicker = ref} url='/api/admin/release/upload' showAddBtn={false} onChange={this.onChange} />
                </View>
                {/* 异常打卡 */}
                {
                  // dtails.type == 3 &&
                  false &&
                  <View
                    className="photographUnusual"
                    style={{ background: newClockIn.status === 1 ? "#f69c9f" : "red" }}
                    onClick={() => {
                      if (this.state.imgs.length === 0) {
                        Taro.hideLoading()
                        Taro.showToast({ title: '请上传打卡照片', icon: 'none' })
                        return;
                      }
                      this.setState({
                        isAbnormalOpen: true
                      })
                    }}
                  >{(newClockIn.status === 1 || newClockIn.status === 2) ? "更新打卡" : "异常打卡"}</View>
                }
                <View className='punchClockContent'
                  onClick={() => {
                    let _this = this;
                    Taro.showLoading({ title: '加载中...' })
                    Taro.getSetting({
                      success: (res) => {
                        if (!res.authSetting['scope.userLocation']) {
                          Taro.authorize({
                            scope: 'scope.userLocation',
                            success: () => {
                              _this.publicReleaseClockIn();
                            },
                            fail: () => {
                              Taro.hideLoading()
                              this.setState({
                                isOpened: true
                              })
                            }
                          })
                        } else {
                          _this.publicReleaseClockIn();
                        }
                      }
                    })
                  }}
                  style={{
                    boxShadow: '1px 1px 15px 1px '+this.getClockBgColor(),
                    background: this.getClockBgColor()
                      
                  }}>
                  <View className='punchClockTitle'>
                    {
                      (newClockIn.status === 1 || newClockIn.status === 2) ?
                        '更新打卡' : '公出打卡'
                    }
                  </View>
                  <View className='punchClockTime'>{this.state.nowTime}</View>
                  <View
                    onClick={e => {
                      e.stopPropagation()
                      this.refresh()
                    }}
                    className='refresh'
                    style={{
                      alignSelf: 'center',
                      textAlign: 'center',
                      color: '#b6b5b5',
                      fontSize: '11px'
                    }}>
                    <AtIcon value='reload' size='20' />
                    <View>刷新</View>
                  </View>
                </View>
                {
                  !(this.state.distance <= this.wxConfig.clockInRange && this.state.distance >= 0) && ![5, 6].includes(dtails.type) &&
                  <View className='switchposition'>您不在打卡范围：
                    <Text className='stxt' onClick={this.selectArrder}>切换位置</Text>
                  </View>
                }
                {/* {
                  !(this.state.distance <= this.wxConfig.clockInRange && this.state.distance >= 0) ?
                    <View className='switchposition'>您不在打卡范围：
                      <Text className='stxt' onClick={this.selectArrder}>切换位置</Text>
                    </View> : (dtails.type == 0 && (dtails.publicType == 1 || dtails.publicType == 3)) ?
                      <View className='switchposition'>公出他人企业！需通过审核，才可打卡！</View>
                      : (dtails.type == 1 && (dtails.techStartProcess == 1 || dtails.techStartProcess == 3)) ?
                        <View className='switchposition'>已超过合同规定时限，需审核通过，才可打卡！</View>
                        : null
                } */}
                <View className='map'>
                  <View className='locationContent'>
                    <View className='location' onClick={() => {
                      this.mapCtx.moveToLocation();
                    }}>
                      <Image src={Location} className='locationIcon' />
                    </View>
                    <View className='punchRange'
                      onClick={() => {
                        this.mapCtx.moveToLocation({
                          latitude: this.state.addressLatitude,
                          longitude: this.state.addressLongitude,
                        });
                      }}>
                      <Image src={PunchRange} className='punchRangeIcon' />
                    </View>
                  </View>
                  <Map
                    id='map'
                    {...this.state.newArrder}
                    circles={[
                      {
                        latitude: this.state.addressLatitude,
                        longitude: this.state.addressLongitude,
                        color: '#c92ddc82',
                        fillColor: '#c92ddc82',
                        radius: this.wxConfig.clockInRange,
                        strokeWidth: 1
                      }
                    ]}
                    showLocation
                  />
                </View>
                <View className='tips'>紫色区域为可打卡区域</View>
              </View>
              <View className='content' onClick={() => {
                this.setState({
                  historicalIsOpened: true
                })
              }}>
                <View className='history'>
                  <View>查看公出申请日志</View>
                  <AtIcon value='chevron-right' size='20' color='#767272' />
                </View>
              </View>
            </View>
        }
        <AtModal
          isOpened={this.state.isOpened}
          title='提醒'
          cancelText='取消'
          confirmText='确认'
          onClose={() => {
            this.setState({
              isOpened: false,
            })
          }}
          onCancel={() => {
            this.setState({
              isOpened: false,
            })
          }}
          onConfirm={() => {
            this.setState({
              isOpened: false,
            }, () => {
              Taro.openSetting({
                success: (value) => {
                  if (value.authSetting['scope.userLocation']) {
                    Taro.getLocation({
                      type: 'gcj02',
                      isHighAccuracy: true,
                      success: (res) => {
                        const latitude = res.latitude
                        const longitude = res.longitude
                        this.setState({
                          newArrder: {
                            latitude,
                            longitude
                          },
                        })
                      }
                    })
                    this.getDtails();
                  }
                }
              })
            })
          }}
          content='您拒绝了定位权限,请先前往设置打开定位权限'
        />
        {/* 异常打卡原因 */}
        {
          this.state.isAbnormalOpen &&
          <AtModal isOpened={this.state.isAbnormalOpen}>
            <AtModalContent>
              <AtTextarea
                value={this.state.clockInRemarks}
                onChange={e => { this.setState({ clockInRemarks: e }) }}
                maxLength={200}
                placeholder='请填写异常打卡原因~'
              />
            </AtModalContent>
            <AtModalAction>
              <Button type='secondary' onClick={() => { this.setState({ isAbnormalOpen: false }) }}>取消</Button>
              <Button type='primary' onClick={this.abnormalClockIn}>提交</Button>
            </AtModalAction>
          </AtModal>
        }
        {
          this.state.historicalIsOpened &&
          <HistoricalClock
            id={dtails.id}
            isOpened={this.state.historicalIsOpened}
            onClose={() => {
              this.setState({
                historicalIsOpened: false
              })
            }}
          />
        }
        {
          this.state.isTips &&
          <AtModal isOpened={this.state.isTips}>
            <AtModalHeader>请选择</AtModalHeader>
            <AtModalContent>
              <AtRadio
                options={getNewOptions(dtails.prdList)}
                value={this.state.selectUid}
                onClick={e => { this.setState({ selectUid: e }) }}
              />
            </AtModalContent>
            <AtModalAction>
              <Button type='secondary' onClick={() => { this.setState({ isTips: false }) }}>取消</Button>
              <Button type='primary' onClick={this.selectOn}>确定</Button>
            </AtModalAction>
          </AtModal>
        }
      </View>
    )
  }
}

export default PunchClocks
