<template>
  <div>
    <n-card>
      <div class="question__container">
        <HeadSearch :info="search" @search="handleSearch" @reset="handleSearch" />
        <div class="question__position">
          <PositionMsg :data="questionList" :show-legend="false" />
        </div>
      </div>
    </n-card>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, onUnmounted } from 'vue'
import search from './tools/search.js'
import HeadSearch from '@/components/Search/index.vue'
import PositionMsg from '@/components/PositionMsg/index.vue'
import { getDistributed } from '@/api/task/index.js'
export default {
  name: 'QuestionDistribution',
  components: { PositionMsg, HeadSearch },
  setup() {
    const data = reactive({
      search,
      questionList: []
    })

    async function handleSearch(searchs) {
      let params = { ...searchs }
      if (searchs?.time?.length) {
        params = {
          ...searchs,
          startTime: searchs.time[0],
          endTime: searchs.time[1]
        }
      }
      delete params.time
      const res = await getDistributed(params)
      if (res.code === 0) {
        data.questionList = res.data
      }
    }

    onMounted(() => {
      handleSearch()
    })

    onUnmounted(() => {
      data.searchParams = null
    })

    return {
      ...toRefs(data),
      handleSearch
    }
  }
}

</script>
<style scoped lang='scss'>
.n-card{
  height: calc(100vh - 80px);
  .question__container {
    height: 100%;
    display: flex;
    flex-direction: column;
    .question__position{
      flex: 1;
    }
  }
}

</style>
