<script setup lang="ts">
import AppList from '@/components/base/AppList.vue'

import { getSurveyFormList } from '../api'

interface SurveyKingListItem {
  id: string
  name: string
  has_map: boolean
}

const SurveyKingField = defineAsyncComponent(() => import('../components/SurveyKingField.vue'))

const route = useRoute()

// 连接ID
const connectId = route.query.id as string

const appList = ref<InstanceType<typeof AppList> | null>(null)
// 列表配置
const listOptions = computed(() => {
  return {
    remote: {
      httpRequest: getSurveyFormList,
      params: { id: connectId },
      callback(data: SurveyKingListItem) {
        return { list: data }
      }
    },
    columns: [
      { label: '表单ID', prop: 'id' },
      { label: '表单名称', prop: 'name' },
      {
        label: '是否做过字段映射',
        prop: 'has_map',
        computed({ row }: { row: SurveyKingListItem }) {
          return row.has_map ? '已映射' : ''
        }
      },
      { label: '操作', slots: 'table-x', width: 100 }
    ]
  }
})
// 刷新
function handleRefresh() {
  appList.value?.refetch()
}

const dialogVisible = ref(false)
const currentRow = ref<SurveyKingListItem>()
function handleClick(row: SurveyKingListItem) {
  currentRow.value = row
  dialogVisible.value = true
}
</script>

<template>
  <AppCard title="紫荆表单映射">
    <AppList v-bind="listOptions" ref="appList">
      <template #table-x="{ row }: { row: SurveyKingListItem }">
        <el-button type="primary" @click="handleClick(row)">查看</el-button>
      </template>
    </AppList>
  </AppCard>
  <SurveyKingField v-model="dialogVisible" :id="connectId" :formId="currentRow.id" @update="handleRefresh" v-if="dialogVisible && currentRow"></SurveyKingField>
</template>
