<template>
  <VaForm ref="myForm">
    <div class="label">
      <VaInput name="firstName" label="考勤点名称" v-model="form.addrName" />
    </div>
    <div class='label'>
      <amap ref='amap' @drawEnd='drawEnd'></amap>
    </div>
    <div class="label">
      <VaInput name="firstName" readonly label="考勤点经度" v-model="form.addrLng" />
    </div>
    <div class="label">
      <VaInput name="firstName" readonly label="考勤点纬度" v-model="form.addrLat" />
    </div>
    <div class="label">
      <VaInput name="firstName" readonly label="考勤范围" v-model="form.addrRange" />
    </div>
  </VaForm>
</template>

<script>
  import amap from '../../../../components/amap.vue'
  let defaultForm = {
    addrLng: '',
    addrLat: '',
    addrRange: '',
    addrName: '',
  }
  export default {
    name: 'pointForm',
    components:{
      amap
    },
    methods: {
      setData(data) {
        Object.keys(this.form).forEach((x) => {
          this.form[x] = data[x]
        })
        if(data.addrLng && data.addrLat && data.addrRange){
          this.$refs.amap.setCircle({
            center:[data.addrLng,data.addrLat],
            radius:data.addrRange
          })
        }

      },
      drawEnd(data){
        this.form.addrLng = data.center[0]
        this.form.addrLat = data.center[1]
        this.form.addrRange = data.radius
      },
    },
    data() {
      return {
        form: {
          ...defaultForm,
        },
      }
    },
  }
</script>

<style scoped>
  .label {
    margin-top: 20px;
  }

</style>
