<template>
  <div class="longitude-input">
    <a-select v-model="lonSelect" style="width: 76px; margin-right: 20px">
      <a-select-option :value="1">东经</a-select-option>
      <a-select-option :value="-1">西经</a-select-option>
    </a-select>
    <a-input-number v-model="lonNumber" :min="0" :max="180" :precision="8" style="width: 152px" />
    <span style="margin: 0 8px">°</span>
    <span style="margin: 0 12px">或</span>
    <a-input-number v-model="lonDegree" :min="0" :max="180" :step="1" :precision="0" style="width: 60px" />
    <span style="margin: 0 8px">°</span>
    <a-input-number v-model="lonMinute" :min="0" :max="60" :step="1" :precision="0" style="width: 60px" />
    <span style="margin: 0 8px">′</span>
    <a-input-number v-model="lonSecond" :min="0" :max="60" :step="1" :precision="0" style="width: 60px" />
    <span style="margin: 0 8px">″</span>
  </div>
</template>

<script>
export default {
  props: {
    value: { type: Number, required: true },
  },
  data() {
    return {
      EWSelect: 1,
    }
  },
  computed: {
    lonSelect: {
      get() {
        return this.value ? this.value / this.lonNumber : this.EWSelect
      },
      set(v) {
        this.$emit('input', this.lonNumber * v)
        this.EWSelect = v
      },
    },
    lonNumber: {
      get() {
        return Math.abs(this.value) || 0
      },
      set(v) {
        this.$emit('input', Math.abs(v) * this.lonSelect)
      },
    },
    lonDegree: {
      get() {
        return Math.floor(this.lonNumber)
      },
      set(v) {
        this.$emit('input', Math.abs(v) * this.lonSelect + this.lonMinute / 60 + this.lonSecond / 3600)
      },
    },
    lonMinute: {
      get() {
        return Math.floor(this.lonNumber * 60) % 60
      },
      set(v) {
        this.$emit('input', this.lonDegree * this.lonSelect + Math.abs(v) / 60 + this.lonSecond / 3600)
      },
    },
    lonSecond: {
      get() {
        return Math.floor(this.lonNumber * 3600) % 60
      },
      set(v) {
        this.$emit('input', this.lonDegree * this.lonSelect + this.lonMinute / 60 + Math.abs(v) / 3600)
      },
    },
  },
  created() {
    if (this.lon < 0) {
      this.EWSelect = -1
    }
  },
}
</script>

<style lang="less" scoped>
.longitude-input {
  white-space: nowrap;
}
</style>
