<template>
  <div>
    <CardContainer>
      <div>
        <el-button v-if="isShowDuty" type="primary" style="display: block;margin: auto auto 20px;" @click="startDuty">开始值班</el-button>
        <button class="sign-btn" @click="clockIn">
          <span>{{ isOutSign ? ' 外勤' : '' }}打卡</span>
        </button>
        <div class="sign-info">
          <div class="sign-statue">
            <div>打卡状态 <el-tag size="small" effect="dark" type="primary">{{ isGetLocation ? isOutSign ? '外勤打卡' : '可打卡' : '不可打卡' }}</el-tag></div>
            <div>当前位置： <span v-if="isGetLocation">
            <el-tag size="small" type="primary" effect="dark">{{pos.address}}</el-tag>
            （{{pos.lng}},{{pos.lat}}）</span></div>
            <div>当前距离：{{ nowDistance }}千米</div>
            <div>最大打卡范围：{{ maxDistance }}千米</div>
          </div>

          <div class="sign-log" v-if="todayAttendance.length > 0">
            <el-timeline>
              <el-timeline-item
                v-for="(item) in todayAttendance"
                :key="item.id"
                :type="item.sign_at_image ? 'warning' : 'primary'"
                :timestamp="item.sign_at">
                {{ item.sign_at_address }}{{ item.sign_at_image ? '(外勤)' : '' }}
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </div>

      <MonthStatics ref="MonthStatics" @today-attendance="e => todayAttendance = e"></MonthStatics>
    </CardContainer>

    <vxe-modal
      v-model="isShow"
      show-footer
      :z-index="zIndex"
      title="外勤打卡"
      show-confirm-button
      :width="560"
      :height="440"
      esc-closable
      :fullscreen="$store.getters.device === 'mobile'"
    >
      <div style="line-height: 3;color: #333;font-weight: 600;">打卡照片</div>
      <van-uploader capture="camera" :max-size="20 * 1024 * 1024" preview-size="140px" :max-count="1" v-model="fileList" @delete="imageId = ''"/>
      <p>照片大小不能超过20Mb</p>

      <div style="line-height: 3;color: #333;font-weight: 600;">描述</div>
      <el-input v-model="remark" type="textarea" :autosize="{ minRows: 2 }"></el-input>

      <template #footer>
        <el-button type="primary" :loading="loading" @click="outClockIn"
        >确认打卡</el-button
        >
      </template>
    </vxe-modal>
  </div>
</template>

<script>
import { index, save } from '@/api/onDutySchedules'
import { sign, preDistance } from '@/api/attendance'
import { throttle } from '@/utils'
import { getToken } from '@/utils/auth'
import MonthStatics from './components/MonthStatics'
import axios from "axios";
import * as uni from "@/assets/uni.webview.1.5.6";
import { PopupManager } from "element-ui/lib/utils/popup";

export default {
  components: {
    MonthStatics
  },
  data() {
    return {
      isInUni: false,
      // start 外勤打卡
      loading: false,
      action: process.env.VUE_APP_UPLOAD_API,
      fileList: [],
      isShow: false,
      zIndex: PopupManager.nextZIndex(),
      imageId: '',
      remark: '',
      // end
      isGetLocation: false,
      isOutSign: false,
      pos: {
        lng: '',
        lat: '',
        address: ''
      },
      maxDistance: '',
      nowDistance: '',
      todayAttendance: [],

      // 值班
      isShowDuty: false,
      dutyDetail: {},
    }
  },
  computed: {
  },
  watch: {
    isShow(newVal) {
      if(newVal) {
        this.zIndex = PopupManager.nextZIndex()
      }
    }
  },
  methods: {
    uploadFile(file) {
      const _this = this
      let data = new FormData()
      data.append('file', file)

      return axios.post(this.action, data, {
        'Content-type' : 'multipart/form-data',
        headers: {
          Authorization: `Bearer ${getToken()}`
        }
      }).then(res => {
        if(res.status === 200) {
          if(res.data.code) {
            Promise.reject(res.data.msg)
            return
          }
          this.imageId = res.data.data.id
        }
      })
    },
    outClockIn: throttle(async function() {
      try {
        this.loading = true
        if(!(this.fileList[0]?.file || this.remark)) {
          this.$message.warning('外勤打卡请拍照或者填写描述！')
          throw Error('外勤打卡请拍照或者填写描述！')
        }
        if (this.fileList[0]?.file) {
          await this.uploadFile(this.fileList[0].file)
        }

        const res = await sign({
          location: `${this.pos.lng},${this.pos.lat}`,
          address: this.pos.address,
          image_id: this.imageId,
          remark: this.remark
        })
        this.$message.success('打卡成功')
        this.loading = false
        this.isShow = false
        this.fileList = []
        await this.$refs['MonthStatics'].getData()
      } catch (err) {
        console.error(err)
        this.loading = false
      }
    }, 1000, true),
    clockIn: throttle(async function() {
      try {
        if (!this.isInUni) {
          await this.getLocation()
        } else {
          uni.postMessage({
            data: {
              action: 'getLocation'
            }
          });
          return
        }
        if(!this.isGetLocation) return
        if(this.isOutSign) {
          this.isShow = true
          return
        }
        const res = await sign({
          location: `${this.pos.lng},${this.pos.lat}`,
          address: this.pos.address
        })
        this.$message.success('打卡成功')
        await this.$refs['MonthStatics'].getData()
        console.log(res)
      } catch (err) {
        console.error(err)
      }
    }, 1000, true),

    isAuthPermission() {
      if(!navigator.geolocation) {
        this.isGetLocation = false
        this.$msgbox.alert("您的浏览器不支持获取定位", "提示")
      } else {
        this.getLocation()
      }
    },

    async getMyDuty () {
      try {
        const res = await index({
          page: 1,
          page_size: 999,
          'filter[0][key]': 'user_id',
          'filter[0][op]': 'eq',
          'filter[0][value]': this.$store.state.user.adminId,
          'filter[1][key]': 'date',
          'filter[1][op]': 'like',
          'filter[1][value]': this.$moment().format('YYYY-MM-DD'),
          'filter[2][key]': 'status',
          'filter[2][op]': 'eq',
          'filter[2][value]': '0',
        })
        if (res?.data[0]) {
          this.dutyDetail = res.data[0]
          this.isShowDuty = true
        }
      } catch(err) {
        console.error(err)
      }
    },
    async startDuty () {
      try {
        this.dutyDetail.status = 1
        await save(this.dutyDetail)
        this.getMyDuty()
        this.$refs['MonthStatics'].getData()
      } catch (err) {
        console.error(err)
      }
    },

    async pos2Address(lat, lng) {
      try {
        const res = await this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1/',{
          location: lat + "," + lng,
          key: "D5EBZ-C3BWP-HZIDG-VO6BE-P2MN5-ESFZO",
          output: "jsonp"
        })
        if(!res.status) {
          this.pos.address = res.result.address
        }
      } catch (err) {
        console.error(err)
      }
    },
    async getAppLocation(latitude, longitude, first = false) {
      try {
        this.pos.lng = longitude
        this.pos.lat = latitude
        this.isGetLocation = true
        if(this.pos.lat && this.pos.lng && this.isGetLocation) {
          await this.pos2Address(this.pos.lat, this.pos.lng)
          const res = await preDistance({
            location: `${this.pos.lng},${this.pos.lat}`
          })
          this.isOutSign = res.distance > Number(res.max_distance)
          this.maxDistance = res.max_distance
          this.nowDistance = res.distance

          if (first) return
          if(!this.isGetLocation) return
          if(this.isOutSign) {
            this.isShow = true
            return
          }
          const res1 = await sign({
            location: `${this.pos.lng},${this.pos.lat}`,
            address: this.pos.address
          })
          this.$message.success('打卡成功')
          await this.$refs['MonthStatics'].getData()
          console.log(res1)
        }
      } catch (err) {

      }
    },
    getLocation() {
      return new Promise((resolve, reject) => {
        if (/uni-app/.test(navigator.userAgent)) {
          this.isInUni = true
          uni.postMessage({
            data: {
              action: 'getLocation'
            }
          });
        } else {
          navigator.geolocation.getCurrentPosition((pos) => {
            this.isGetLocation = true
            console.log('经度', pos.coords.latitude);
            console.log('纬度', pos.coords.longitude);
            this.pos.lng = pos.coords.longitude
            this.pos.lat = pos.coords.latitude
            if(this.pos.lat && this.pos.lng && this.isGetLocation) {
              this.pos2Address(this.pos.lat, this.pos.lng)
              preDistance({
                location: `${this.pos.lng},${this.pos.lat}`
              }).then(res => {
                this.isOutSign = res.distance	> Number(res.max_distance)
                this.maxDistance = res.max_distance
                this.nowDistance = res.distance
                resolve()
              }).catch(err => reject(err))
            }
          }, (error) => {
            console.log(error)
            reject(error)
            if (error.code) {
              switch (error.code) {
                case error.PERMISSION_DENIED:
                  this.$msgbox.confirm("需授权定位后进行打卡", "提示",{
                    confirmButtonText: '重试'
                  }).then(_ => {
                    this.getLocation()
                  })
                  this.isGetLocation = false
                  break;
                case error.POSITION_UNAVAILABLE:
                  this.$msgbox.confirm("无法获取当前位置，请重试", "提示",{
                    confirmButtonText: '重试'
                  }).then(_ => {
                    this.getLocation()
                  })
                  this.isGetLocation = false
                  break;
                case error.TIMEOUT:
                  this.$msgbox.confirm("获取位置超时，请重试", "提示",{
                    confirmButtonText: '重试'
                  }).then(_ => {
                    this.getLocation()
                  })
                  this.isGetLocation = false
                  break;
                case error.UNKNOWN_ERROR:
                  this.$msgbox.confirm("获取位置错误，请重试", "提示",{
                    confirmButtonText: '重试'
                  }).then(_ => {
                    this.getLocation()
                  })
                  this.isGetLocation = false
                  break;
                default:
                  this.$msgbox.confirm("获取位置错误，请重试", "提示",{
                    confirmButtonText: '重试'
                  }).then(_ => {
                    this.getLocation()
                  })
                  this.isGetLocation = false
                  break;
              }
            }
          });
        }
      })
    },
  },
  mounted() {
    this.getMyDuty()
    this.isAuthPermission()
  },
  created() {
    window.getAppLocation = this.getAppLocation
  }
}
</script>

<style scoped lang="scss">
.sign-btn {
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 100%;
  border: none;
  display: block;
  background: var(--theme-color);
  position: relative;
  transition: all .2s;
  margin: auto;

  & > span {
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    color: #fff;

    position: relative;
  }
  &:active {
    filter: brightness(0.88);
  }
  &::before {
    content: "";
    background: var(--theme-color);
    opacity: 0.45;
    border-radius: 100%;
    animation: scale 5s infinite linear;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
.sign-info {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  padding: 0 10%;

  .sign-statue {
    line-height: 2;
    text-align: center;
    flex-basis: 50%;
  }
  .sign-log {
    flex-basis: 50%;
  }
}
@keyframes scale {
  0%,100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.1, 1.1);
  }
}
@media (max-width: 992px) {
  .sign-info {
    display: block;
  }
  .sign-log {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
}
</style>
