<template>
  <el-form class="form" ref="form" v-bind="{ labelWidth, size: 'small' }" :model="formData" :rules="rules">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="监测站点编号" prop="siteCode">
          <el-input v-model="formData.siteCode" placeholder="系统生成" disabled />
        </el-form-item>
        <el-form-item label="监测站点名称" prop="siteName">
          <el-input v-model="formData.siteName" :placeholder="message.siteName" />
        </el-form-item>
        <el-form-item label="断面编码" prop="sectionId">
          <el-input v-model="formData.sectionId" :placeholder="message.sectionId" />
        </el-form-item>
        <el-form-item label="监测站点地址" prop="siteAddress">
          <el-input v-model="formData.siteAddress" :placeholder="message.siteAddress" />
        </el-form-item>
        <el-form-item label="监测站点坐标" :show-messag="false" style="margin-bottom: 0">
          <el-row type="flex" justify="space-between" :gutter="10">
            <el-col>
              <el-form-item prop="latitude">
                <el-input-number
                  v-model="formData.latitude"
                  :placeholder="message.latitude"
                  v-bind="getDefalutNumberProp()"
                  :precision="7"
                  :controls="false"
                />
              </el-form-item>
            </el-col>
            <el-col style="flex: 0 0 1em; text-align: center"> ~ </el-col>
            <el-col>
              <el-form-item prop="longitude">
                <el-input-number
                  v-model="formData.longitude"
                  :placeholder="message.longitude"
                  v-bind="getDefalutNumberProp()"
                  :precision="7"
                  :controls="false"
                />
              </el-form-item>
            </el-col>
            <el-col style="flex: 0 0 5em; text-align: center">
              <el-button
                :type="enable.coordinate ? 'warning' : 'primary'"
                @click="enable.coordinate = !enable.coordinate"
                :disabled="enable.device"
                size="small"
              >
                图上选点
              </el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        this is a map
      </el-col>
    </el-row>
  </el-form>
</template>

<script lang="ts">
import { Vue, Component, ModelSync, Prop } from 'vue-property-decorator'
import BaseDialog from '@/components/BaseDialog/index.vue'
import { ElForm } from 'element-ui/types/form'
import { getDefalutNumberProp } from '@/utils/constant'

export interface IBasis {
  /** 站点编号 */
  siteCode: string
  /** 站点名称 */
  siteName: string
  /** 断面Id */
  sectionId: string
  /** 站点地址 */
  siteAddress: string
  /** 纬度 */
  latitude: string
  /** 经度 */
  longitude: string
}

@Component({ name: 'BasisForm', components: { BaseDialog } })
export default class BasisForm extends Vue {
  @ModelSync('value', 'change', { type: Object }) readonly formData!: IBasis
  @Prop({ type: String, default: '8em' }) labelWidth!: string
  @Prop({ type: Object, default: () => ({ coordinate: false, device: false }) }) enable!: {
    coordinate: boolean
    device: boolean
  }
  getDefalutNumberProp = getDefalutNumberProp
  $refs!: { form: ElForm }
  message = {
    siteName: '请输入监测站点名称',
    sectionId: '请输入断面编码',
    siteAddress: '请输入监测站点地址',
    latitude: '请输入纬度',
    longitude: '请输入经度'
  }
  rules = {
    siteName: [{ required: true, message: this.message.siteName, trigger: 'blur' }],
    sectionId: [{ required: true, message: this.message.sectionId, trigger: 'blur' }],
    siteAddress: [{ required: true, message: this.message.siteAddress, trigger: 'blur' }],
    latitude: [{ required: true, message: this.message.latitude, trigger: 'blur' }],
    longitude: [{ required: true, message: this.message.longitude, trigger: 'blur' }]
  }

  async validate() {
    return new Promise<IBasis>((resolve, reject) => {
      this.$refs.form.validate((valid) => {
        valid ? resolve(this.formData) : reject()
      })
    })
  }
}
</script>
