<template>
  <div>
    <el-dialog v-model="dialogVisible" :close-on-click-modal="false" draggable width="800px" height="500px">
      <el-card :body-style="cardBodyStyle">
        <el-autocomplete
            style="padding-right: 20px"
            v-model="query.storeNm"
            :fetch-suggestions="querySearchSignReqNm"
            placeholder="请输入库房名称"
            clearable
            @select="handleBlur"
        ></el-autocomplete>


        <el-autocomplete
            v-model="query.areaCd"
            style="padding-right: 20px"
            :fetch-suggestions="querySearChareaCd"
            placeholder="请输入区号"
            clearable
            @select="handleBlurQh"
        ></el-autocomplete>

        <el-autocomplete
            v-model="query.stackCd"
            style="padding-right: 20px"
            :fetch-suggestions="querySearStackCd"
            placeholder="请输入垛位号"
            clearable
            @select="handleBlurDWH"
        ></el-autocomplete>
        <el-button plain @click="handleSelect()">选择</el-button>
      </el-card>
    </el-dialog>
  </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 = () => {
  query.value.storeNm = props.storeNm
  query.value.areaCd = props.areaCd
  query.value.stackCd = props.stackCd
  dialogVisible.value = true
}
const close = () => {
  dialogVisible.value = false
}

const props = defineProps({
  // tableData: { // form查询数据
  //   type: Array,
  //   default: () => []
  // },
  url: { // form查询数据
    type: String,
    default: 'bas/Partner/query'
  },
  storeNm: { // form查询数据
    type: String,
    default: ''
  },
  areaCd: { // form查询数据
    type: String,
    default: ''
  },
  stackCd: { // form查询数据
    type: String,
    default: ''
  },

})
const query = ref({
  id1: '',
  id2: '',
  id3: '',
  storeNm: '',
  storeNm_id: '',
  areaCd: '',
  areaCd_id: '',
  stackCd: '',
  stackCd_id: '',
})


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

  emit('receiveFromChild', query.value)
  close()
}
const currentPage = ref(1)
const pageSize = ref(10)
const pageSizes = ref([10, 20, 30, 40])
const tableData = ref([])
const totalRows = ref()

const querySearchSignReqNm = (queryString, cb) => {
  var ss = []
  var url = 'sto/Config/queryAllKF'
  var obj = {
    activeStatus: '0',
    storeNm: query.value.storeNm
  }
  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.storeNm, id: item.id})
      })
      cb(ss);
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
      cb(ss);
    }
  })
};
const handleBlur = (item) => {
  query.value.id1 = item.id
  query.value.storeNm_id = item.id
};

const querySearChareaCd = (queryString, cb) => {
  var ss = []
  var url = 'sto/Config/queryAllQH'
  var obj = {
    fId: query.value.id1,
  }
  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 querySearStackCd = (queryString, cb) => {
  var ss = []
  var url = 'sto/Config/queryAllDWH'
  var obj = {
    fId: query.value.id2,
  }
  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.stackCd , id: item.id})
      })
      cb(ss);
    } else {
      ElMessage.error('操作失败！' + response.data.msg)
      cb(ss);
    }
  })
};

const handleBlurQh = (item) => {
  console.log("区号选择···",item)
  query.value.id2 = item.id
  query.value.areaCd_id = item.id
};
const handleBlurDWH = (item) => {

  console.log("区号选择···",item)
  query.value.id3 = item.id
  query.value.stackCd_id = item.id
};

const search = () => {
}
const handleSizeChange = (val) => {
  pageSize.value = val
}
const handleCurrentChange = (val) => {
  currentPage.value = val
}

onMounted(() => {
  // initTableData()

})
watch(dialogVisible, (newValue, oldValue) => {
  if (newValue) {

  } else {

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

<style>
</style>
