<template>
<!-- 区号 选择器-->
  <div style="display: flex;align-items: center;justify-content: center;width: 100%">
<!--    <el-autocomplete-->
<!--        v-model="query.areaCd"-->
<!--        style="width: 100%;"-->
<!--        :fetch-suggestions="querySearChareaCd"-->
<!--        placeholder="请输入区号"-->
<!--        clearable-->
<!--        @change="handleBlurQhChange"-->
<!--        @select="handleBlurQh"-->
<!--    ></el-autocomplete>-->

    <el-select
        ref="selectRef"
        v-model="query.areaCd"
        filterable
        remote
        reserve-keyword
        @change="handleBlurQh"
        placeholder="请选择区号"
        :remote-method="remoteMethod"
        :loading="loading"
        clearable
    >
      <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.areaCd"
          :value="item.id"
      />
    </el-select>


    <el-button v-if="buttonShow" plain @click="handleSelect()">选择</el-button>
  </div>
</template>

<script setup>

import {
  ref,
  onMounted,
  watch,
  getCurrentInstance
} from 'vue'

const {
  proxy
} = getCurrentInstance()

import tools from '@/tools'

const cardBodyStyle = ref(tools.style.card)

const dialogVisible = ref(false)
const open = () => {
  dialogVisible.value = true
}
const close = () => {
  dialogVisible.value = false
}

const props = defineProps({
  buttonShow: {
    type: Boolean,
    default: false
  },
  kfId: {
    type: String,
    default: ''
  },
  areaCd: {
    type: String,
    default: ''
  },
  areaCd_id: {
    type: String,
    default: ''
  },
  querySearch: {
    type: Object,
    default: {
      kfId: '',
      areaCd: '',
      areaCd_id: '',
    }
  }
})
const query = ref({})
query.value = props.querySearch


const emit = defineEmits(['receiveFromChild'])
const handleSelect = (row) => {

  emit('receiveFromChild', query.value)
  close()
}


const querySearChareaCd = (queryString, cb) => {
  var ss = []
  var url = 'sto/Config/queryAllQH'
  var obj = {
    fId: query.value.kfId,
    areaCd: query.value.areaCd,
  }
  var param = {
    params: JSON.stringify(obj),
  }
  proxy.$axios.get(url, param).then(response => {
    if (response.data.code == '0') {
      response.data.data.records.forEach((item) => {
        ss.push({value: item.areaCd, id: item.id})
      })
      cb(ss);
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
      cb(ss);
    }
  })
};
const selectRef = ref(null)
const handleBlurQh = (item) => {
  console.log("区号选择···", item)
  query.value.id = item.id
  query.value.areaCd_id = item.id

  var op = options.value.find(option => option.id === item);
  var re = {
    id: '',
    areaCd: '',
  }
  if (op){
    re = {
      id: op.id,
      areaCd: op.areaCd,
    }
  }


  emit('receiveFromChild', re)
};
const handleBlurQhChange = (item) => {
  emit('receiveFromChild', item)
};
const options = ref([])
const loading = ref(false)
const remoteMethod = (val) => {
  console.log("tableData" , tableData.value)
  loading.value = true
  setTimeout(() => {
    loading.value = false
    options.value = tableData.value.filter((item) => {
      if (!item){
        return item
      }
      return item.stackCd.includes(val)

    })
  }, 200)
}


const tableData = ref([])
const getTableData = (queryString, cb) => {
  loading.value = true
  var url = 'sto/Config/queryAllQH'
  var obj = {
    fId: query.value.kfId,
    areaCd: query.value.areaCd,
  }
  var param = {
    params: JSON.stringify(obj),
  }

  proxy.$axios.get(url, param).then(response => {
    loading.value = false
    if (response.data.code == '0') {
      tableData.value = response.data.data.records

    } else {
      ElMessage.error('操作失败！' + response.data.msg)

    }
  })

};

const clear = () => {
  // query.value = {
  //   kfId: props.kfId,
  //   areaCd: '',
  //   areaCd_id: ''
  // }
}

onMounted(() => {
  getTableData()
})

watch(props, (newValue, oldValue) => {
  query.value = {
    kfId: props.kfId,
    areaCd: props.areaCd,
    areaCd_id: props.areaCd_id
  }
  getTableData()
} , {deep: true})

defineExpose({
  open,
  close
})
</script>

<style>
</style>
