<template>
  <HeadSearch :info="search" @search="handleSearch" @reset="handleSearch" />
  <DataTable
    ref="tableRef"
    :columns="columns"
    :row-key="(row) => row.id"
    :request="loadDataTable"
    :checked-row-keys="selectRowKeys"
    @fetch-success="getTableData"
    @update:checked-row-keys="handleRowsCheck"
  >
    <template #tableTitle>
      <n-button style="margin-right:20px" @click="handleIgnoreBatch">忽略</n-button>
      <n-button type="primary" @click="handleConfirmBatch">
        确认
      </n-button>

    </template>
    <template #toolbar>
      <n-button @click="handleReported">
        {{ isReported ? '修改并生成报告': '提交并生成报告' }}
      </n-button>
    </template>
  </DataTable>

  <ConfirmModal v-if="confirmModal" v-model:visible="confirmModal" :data="pageData" :select-row="rowData" @update-data="handleReload" />

  <!-- 图片位置 -->
  <position-drawer v-model:visible="positionDrawer" :data="rowData" />

</template>

<script>
import table from './tools/table.js'
import search from './tools/search.js'
import HeadSearch from '@/components/Search/index.vue'
import DataTable from '@/components/DataTable/index.vue'
import ConfirmModal from './components/ConfirmModal.vue'
import PositionDrawer from './components/PositionDrawer.vue'
import { getQuestionList, generateReport, questionAnalyze } from '@/api/task/index.js'
import { unref, reactive, toRefs, provide, onUnmounted } from 'vue'
export default {
  name: 'QuestionPage',
  components: { HeadSearch, DataTable, ConfirmModal, PositionDrawer },
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  setup(props, { emit }) {
    const data = reactive({
      search,
      ...toRefs(table),
      pageData: [],
      isReported: props.data?.reportStatus !== 0 || false
    })

    /**
     * @description: 加载表格数据
     * @param {*} res
     * @return {*}
     */
    const loadDataTable = async(res) => {
      const _params = {
        ...unref(data.searchParams),
        missionId: props.data.id,
        ...res
      }
      if (_params.type === 'all') _params.type = null
      if (_params.status === 'all') _params.status = null
      return await getQuestionList(_params)
    }

    /**
     * @description:
     * @return {*}
     */
    function getTableData(list) {
      data.pageData = list.items
    }

    /**
     * @description: 选中行的rowkey
     * @param {*} rowKeys
     * @return {*}
     */
    function handleRowsCheck(rowKeys) {
      data.selectRowKeys = rowKeys
    }

    /**
     * @description: 批量忽略
     * @return {*}
     */
    function handleIgnoreBatch() {
      if (data.selectRowKeys.length === 0) {
        $message.error('请至少选择一条数据')
        return
      }
      data.handleRowIgnore(data.selectRowKeys)
    }

    /**
     * @description: 批量确认
     * @return {*}
     */
    function handleConfirmBatch() {
      if (data.selectRowKeys.length === 0) {
        $message.error('请至少选择一条数据')
        return
      }
      data.handleRowConfirm(data.selectRowKeys)
    }

    /* 调用确认忽略方法 */
    function batchHandleRow(handleType, id, type) {
      if (handleType === 'confirm') {
        data.handleRowConfirm([id], type)
      } else if (handleType === 'ignore') {
        data.handleRowIgnore([id], type)
      }
    }

    /* 注册忽略确认方法 */
    provide('handleRow', batchHandleRow)

    /**
     * @description: 生成报告
     * @return {*}
     */
    async function handleReported() {
      const res = await questionAnalyze(props.data.id)
      if (res.code === 0) {
        const { confirm, notreviewed } = res.data
        $dialog.confirm(
          {
            type: 'success',
            title: '提示',
            showIcon: false,
            content: `已核实${confirm}条，未核实${notreviewed}条，是否提交并生成报告？`,
            confirm: () => {
              generateReport(props.data.id)
                .then(res => {
                  if (res.code === 0) {
                    data.isReported = true
                  }
                })
            }
          }
        )
      }
    }

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

    function handleReload() {
      data.handleSearch(data.searchParams, false)
    }
    return {
      ...toRefs(data),
      loadDataTable,
      getTableData,
      handleRowsCheck,
      handleIgnoreBatch,
      handleConfirmBatch,
      handleReported,
      handleReload

    }
  }
}

</script>
<style scoped lang='scss'>
</style>
