<!-- 数据中心车场选择器（上拉加载） -->
<!--包含V1、V2、H6车场-->
<!-- change方法输出对象 { parkId, parkName } -->
<!--
<ParkPageSelect v-model="searchParams.parkId" search-mode />
<ParkPageSelect v-model="formData.parkName" @change="Object.assign(formData, $event)" />
-->
<template>
  <el-select
    v-selectScroll="loadMore"
    v-bind="$attrs"
    :value="value"
    remote
    filterable
    clearable
    placeholder="请输入车场名称"
    class="bgimg_none"
    :loading="pageLoading"
    :remote-method="search"
    @input="$emit('input', $event)"
    @change="handleChange"
    @focus="search()"
  >
    <el-option v-if="searchMode" value="" label="全部" />
    <el-option v-for="(opt, j) in list" :key="opt.parkId" :label="opt.parkName" :value="opt.parkId" />
  </el-select>
</template>
<script>
import { getDataCenterParkList } from '@/apiV2/parkingManagement'
import { debounce } from 'lodash'
export default {
  name: 'DataCenterParkPageSelect',
  props: {
    value: {
      type: String,
      default: ''
    },
    searchMode: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      queryText: '',
      parkId: '',
      list: [],
      pageLoading: false,
      pageObj: { // 列表(页码)
        size: 10,
        current: 1,
        pages: 1,
        total: 0
      }
    }
  },
  async mounted() {
    this.search()
  },
  methods: {
    search: debounce(function(name) { // 搜索项目
      this.pageLoading = true
      this.pageObj.current = 1
      this.queryText = name
      this.getPlatformByPage().finally(() => {
        this.pageLoading = false
      })
    }, 100, true),
    loadMore(isBottom) { // 上拉加载
      if (!isBottom) return
      if (this.pageObj.current + 1 > this.pageObj.pages) return
      this.pageObj.current++
      this.getPlatformByPage()
    },
    async getPlatformByPage() { // 获取项目列表
      const { current, size } = this.pageObj
      return getDataCenterParkList(Object.assign({ parkName: this.queryText }, { current, size })).then(res => {
        if (res.success) {
          this.pageObj.pages = res.data.pages
          this.pageObj.total = res.data.total
          this.list = this.pageObj.current === 1 ? res.data.records : [...this.list, ...res.data.records]
        }
      })
    },
    handleChange(e) { // 选中项目
      const park = this.list.find(item => item.parkId == e) || { parkId: null, parkName: null }
      this.$emit('change', { ...park })
    }
  }
}
</script>
<style lang="scss"></style>
