<template>
  <el-form class="form" ref="form" v-bind="{ labelWidth: '9em', size: 'small' }" :model="formData" inline>
    <el-form-item label="监测站点名称" prop="siteId">
      <el-select v-model="formData.siteId" filterable placeholder="请选择监测站点名称" clearable>
        <el-option
          v-for="item in points"
          :key="item.id"
          :label="item.siteName"
          :value="item.id"
          :disabled="formData.upperSiteId === item.id"
        >
          {{ `${item.siteName}${item.sectionId ? ' | ' + item.sectionId : ''}` }}
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="上游监测站点名称" prop="upperSiteId">
      <el-select v-model="formData.upperSiteId" filterable placeholder="请选择上游监测站点名称" clearable>
        <el-option
          v-for="item in points"
          :key="item.id"
          :label="item.siteName"
          :value="item.id"
          :disabled="formData.siteId === item.id"
        >
          {{ `${item.siteName}${item.sectionId ? ' | ' + item.sectionId : ''}` }}
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button
        type="primary"
        size="small"
        :loading="loading.query"
        :disabled="loading.query"
        @click="$emit('query', { ...formData })"
        icon="el-icon-search"
      >
        查询
      </el-button>
      <el-button
        type="primary"
        size="small"
        :loading="loading.add"
        :disabled="loading.add"
        @click="$emit('add')"
        icon="el-icon-plus"
      >
        新增
      </el-button>
      <el-button
        type="danger"
        size="small"
        :loading="loading.del"
        :disabled="loading.del || !selected.length"
        @click="$emit('del', ids)"
        icon="el-icon-delete"
      >
        删除
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import { IDevice, INeighbor, IPoint } from '../api/common'

export interface ILoading {
  query: boolean
  add: boolean
  del: boolean
}

@Component({ name: 'QueryForm' })
export default class QueryForm extends Vue {
  @Prop({ type: Object, default: () => ({}) }) loading!: ILoading
  @Prop({ type: Array, default: () => [] }) selected!: IDevice[]
  @Prop({ type: Array, default: () => [] }) points!: IPoint[]

  formData: Partial<INeighbor> = {}

  get ids() {
    return this.selected.map((item) => item.id).join()
  }
}
</script>
