<script setup lang="tsx">
import { reactive, ref, unref } from 'vue'
import {
  getRepDataProblemListApi,
  saveRepDataProblemApi,
  delRepDataProblemListApi,
  delRepDataProblemApi,
  queryRepDataProblemApi,
} from '@/api/reporting/RepDataProblem/RepDataProblem'
import { TableData } from '@/api/reporting/RepDataProblem/RepDataProblem/types'
import { useTable } from '@/hooks/web/useTable'
import { useI18n } from '@/hooks/web/useI18n'
import { ElButton, ElLink, ElLoading, ElPopconfirm, ElMessage } from 'element-plus'
import { ContentWrap } from '@/components/ContentWrap'
import CodeRepItem from '@/views/dataset/CodeRepItem/CodeRepItem.vue';//指标定义界面
import CodeRepTarget from '@/views/dataset/CodeRepTarget/CodeRepTarget.vue';//指标属性界面
import Write from './components/Write.vue'
import { Dialog } from '@/components/Dialog'

import {useRoute} from 'vue-router';
const route = useRoute();

const pageQuery = ref(route || null); 
const indexsetCode = pageQuery.value?.query?.indexsetCode;
const { t } = useI18n()
/**
 * 指标定义
 */

const ids = ref<string[]>([])

const { tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const res = await getRepDataProblemListApi({
      pageIndex: unref(currentPage),
      pageSize: unref(pageSize),
      ...unref(indexDefineSearchParams)
    })
    return {
      list: res.body.list,
      total: res.body.total
    }
  },
  fetchDelApi: async () => {
    const res = await delRepDataProblemListApi(unref(ids));
    return !!res;
  },
})

const { currentPage } = tableState
const { getList } = tableMethods




const indexDefineSearchParams = ref({})



const dialogVisible = ref(false)
const dialogTitle = ref('')

const currentRow = ref()
const actionType = ref('')

const writeRef = ref<ComponentRef<typeof Write>>()

const saveLoading = ref(false)

/** 保存 **/
const save = async () => {
  const write = unref(writeRef)
  const formData = await write?.submit()
  if (formData) {
    saveLoading.value = true
    const res = await saveRepDataProblemApi(formData)
      .catch(() => {})
      .finally(() => {
        saveLoading.value = false
      })
    if (res) {
      dialogVisible.value = false
      currentPage.value = 1
      getList()
    }
  }
}


/** 单行删除 */
const delData = async (row: TableData) => {
  const res = await delRepDataProblemApi(row.pId)
  if (res) {
    const { code, errMsg } = res.head
    if (code === '0') {
      ElMessage.success('删除成功!')
      getList()
    } else {
      ElMessage.error(errMsg || '删除失败!')
    }
  }
}


const activeName = ref('indexDefination')


const handleClick=(tab: any, event: Event | undefined)=> {
  console.log(tab,event);
}
</script>

<template>
  <ContentWrap>
    <ElTabs v-model="activeName" type="" @tab-click="handleClick">
      <ElTabPane label="指标定义" name="indexDefination">
        <CodeRepItem :indexset-code="indexsetCode" />
      </ElTabPane>
      <ElTabPane label="指标属性" name="indexProperties">
        <CodeRepTarget :indexset-code="indexsetCode" />
      </ElTabPane>
    </ElTabs>
  </ContentWrap>
  <Dialog v-model="dialogVisible" :title="dialogTitle">
    <Write
      v-if="actionType !== 'detail'"
      ref="writeRef"
      :current-row="currentRow"
      :action-type="actionType"
    />
    <template #footer>
      <ElButton v-if="actionType == 'edit'" type="primary" :loading="saveLoading" @click="save">
        {{ t('dialogDemo.save') }}
      </ElButton>
      <ElButton v-if="actionType == 'ruleconfig'" type="primary" :loading="saveLoading" @click="addRuleConfig">
        {{ t('formDemo.add') }}
      </ElButton>
      <ElButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</ElButton>
    </template>
  </Dialog>
</template>