<template>
  <div class="d-flex">
    <companyIndustry positionIndexPage @inputChange="val => inputChange(ids.industryIds, val)"></companyIndustry>
    <positionType positionIndexPage @inputChange="val => inputChange(ids.positionId, val)"></positionType>
    <JobType positionIndexPage @inputChange="val => inputChange(ids.jobType, val)"></JobType>
    <expType positionIndexPage @inputChange="val => inputChange(ids.expType, val)"></expType>
    <payScope positionIndexPage @inputChange="val => inputChange(ids.payType, val)"></payScope>
    <educationType positionIndexPage :isSingle="false" @inputChange="val => inputChange(ids.scale, val)"></educationType>
    <scale positionIndexPage @inputChange="val => inputChange(ids.eduType, val)"></scale>
    <financingStatus positionIndexPage @inputChange="val => inputChange(ids.financingStatus, val)"></financingStatus>
  </div>
</template>
<script setup>
import companyIndustry from './conditionFilter/companyIndustry.vue'
import positionType from './conditionFilter/positionType.vue'
import JobType from './conditionFilter/JobType.vue'
import expType from './conditionFilter/expType.vue'
import payScope from './conditionFilter/payScope.vue'
import educationType from './conditionFilter/educationType.vue'
import scale from './conditionFilter/scale.vue'
import financingStatus from './conditionFilter/financingStatus.vue'
import { ref } from 'vue'
defineOptions({name: 'retrieval-components-conditionFilter'})
const emits = defineEmits(['change'])
const ids = ref({
  industryIds: 'industryIds',
  positionId: 'positionId',
  jobType: 'jobType',
  expType: 'expType',
  payType: 'payType',
  eduType: 'eduType',
  scale: 'scale',
  financingStatus: 'financingStatus',
})

const inputChange = (key, arr) => {
  const str = arr.length ? arr.join('_') : ''
  emits('change', key, str)
}

// const clearFun = () => {
//   Object.keys(ids).forEach(key => emits('change', key, ''))
// }

defineExpose({
  ids
})
</script>