<template>
  <div class="point-editor">
    <div class="wrapper">
      <h3>编辑点位数据</h3>
      <p>点位id: {{ initialPointData.id }}</p>
      <el-form
        class="form"
      >
        <el-form-item
          :label="'x'"
        >
          <el-input
            v-model="x"
            type="number"
            step="any"
          />
        </el-form-item>
        <el-form-item
          :label="`y`"
        >
          <el-input
            v-model="y"
            type="number"
            step="any"
          />
        </el-form-item>
        <el-form-item
          :label="`z`"
        >
          <el-input
            v-model="z"
            type="number"
            step="any"
          />
        </el-form-item>
        <el-form-item
          :label="`weight`"
        >
          <el-input
            v-model="weight"
            type="number"
            step="any"
          />
        </el-form-item>
        <el-form-item
          :label="`ids`"
        >
          <el-input
            v-model="ids"
          />
        </el-form-item>
        <div class="btn-group">
          <el-button
            @click="$emit('cancel')"
          >
            取消
          </el-button>
          <el-button
            type="primary"
            :disabled="!isDataValid"
            @click="onClickConfirm"
          >
            确定
          </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    initialPointData: {
      type: Object,
    },
  },
  data() {
    return {
      x: this.initialPointData.x,
      y: this.initialPointData.y,
      z: this.initialPointData.z,
      weight: this.initialPointData.weight,
      ids: this.initialPointData.ids.join(','),
    }
  },
  computed: {
    isDataValid() {
      if (this.x === '' || this.y === '' || this.z === '' || this.weight === '') {
        return false
      }
      const idsArray = this.ids.split(',')
      if (idsArray.length !== 8) {
        return false
      }
      for (const neighboorId of idsArray) {
        if (!Number.isSafeInteger(Number(neighboorId))) {
          return false
        }
      }
      return true
    }
  },
  mounted() {
  },
  methods: {
    onClickConfirm() {
      this.$emit('confirm', {
        id: this.initialPointData.id,
        x: Number(this.x),
        y: Number(this.y),
        z: Number(this.z),
        weight: Number(this.weight),
        ids: this.ids.split(',')
      })
    }
  }
}
</script>

<style scoped>
.point-editor{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
}
.point-editor .wrapper{
  width: 500px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 30px;
}

.point-editor .wrapper > .form > .btn-group {
  width: fit-content;
  margin-left: auto;
}
</style>