<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="drainageName">
          <el-row type="flex" :gutter="10" style="margin-right:0">
            <el-col>
              <el-input v-model="formData.drainageName" placeholder="设施名称" disabled />
            </el-col>
            <el-button
              :type="enable.device ? 'warning' : 'primary'"
              @click="enable.device = !enable.device"
              :disabled="enable.coordinate"
              style="margin-left:5px"
            >
              图上选点
            </el-button>
          </el-row>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="设施编码" prop="drainageId">{{ formData.drainageId }}</el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="设施类型" prop="drainageType">{{ formData.drainageType }}</el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="道路名称" prop="drainageRoadName">{{ formData.drainageRoadName }}</el-form-item>
      </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 IConnect {
  /** 排水设施ID */
  drainageId: undefined
  /** 排水设施名称 */
  drainageName: undefined
  /** 排水设施所在道路名称 */
  drainageRoadName: undefined
  /** 排水类型 */
  drainageType: undefined
}

@Component({ name: 'ConnectForm', components: { BaseDialog } })
export default class ConnectForm extends Vue {
  @ModelSync('value', 'change', { type: Object }) readonly formData!: IConnect
  @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 = {
    drainageId: '请选择关联设施'
  }
  rules = {
    // drainageId: [{ required: true, message: this.message.drainageId, trigger: 'blur' }]
  }

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