<!-- 列出模板弹窗对话框 -->
<script name="ListTemplateDialog" lang="ts" setup>
import { ElMessageBox } from 'element-plus'
import type { ICustomerExamineTemplate, ITemplateListQuery } from './customer-examine'
import type { TableColumn } from '@/components/NormalTable/table_interface'
import { getTemplateList } from '@/api/resource/examine'

const emit = defineEmits(['recordSelected'])

const showDialog = ref(false)

// 查询条件
const searchQuery = ref<ITemplateListQuery>({
  templateName: '',
  offset: 1,
  limit: 10,
})

// 表头
const columns = ref<TableColumn[]>([
  { text: '实验室', value: 'labCodeName', align: 'center', width: '150' },
  { text: '部门', value: 'groupCodeName', align: 'center', width: '150' },
  { text: '模板名称', value: 'templateName', align: 'center' },
  { text: '创建人', value: 'createUserName', align: 'center', width: '150' },
  { text: '创建时间', value: 'createTime', align: 'center', width: '180' },
])
const list = ref<Array<ICustomerExamineTemplate>>([]) // 表格数据
const total = ref(0) // 数据条数

// 数据查询
const fetchData = (isNowPage = false) => {
  if (!isNowPage) {
    // 是否显示当前页，否则跳转第一页
    searchQuery.value.offset = 1
  }

  getTemplateList(searchQuery.value).then((response) => {
    if (response.code === 200) {
      list.value = response.data.rows

      total.value = parseInt(response.data.total)
    }
  })
}

const searchList = () => {
  fetchData(true)
}

const changePage = (val: { size?: number; page?: number }) => {
  if (val && val.size) {
    searchQuery.value.limit = val.size
  }
  if (val && val.page) {
    searchQuery.value.offset = val.page
  }
  fetchData(true)
}

const showOrHideDialog = (show: boolean) => {
  if (show === true) {
    searchList()
  }
  else {
    searchQuery.value = {
      templateName: '',
      limit: 10,
      offset: 1,
    }

    list.value = []
  }

  showDialog.value = show
}

// 选中
const selectSingleRecord = (row: ICustomerExamineTemplate) => {
  emit('recordSelected', row)
  showDialog.value = false
}

defineExpose({
  showOrHideDialog,
})
</script>

<template>
  <el-dialog v-model="showDialog" title="引用模板" :append-to-body="true" :close-on-click-modal="false" top="10vh" width="60%">
    <search-area :need-clear="false" @search="searchList">
      <search-item>
        <el-input v-model="searchQuery.templateName" placeholder="模板名称" clearable />
      </search-item>
    </search-area>

    <!-- 表格数据展示 -->
    <table-container :title-show="false">
      <!-- 表格区域 -->
      <normal-table
        :data="list" :total="total" :columns="columns"
        :query="{ limit: searchQuery.limit, offset: searchQuery.offset }"
        @change="changePage"
      >
        <template #preColumns>
          <el-table-column label="序号" width="55" align="center">
            <template #default="scope">
              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
            </template>
          </el-table-column>
        </template>
        <template #columns>
          <el-table-column fixed="right" label="操作" align="center" width="100">
            <template #default="{ row }">
              <el-button size="small" type="primary" @click="selectSingleRecord(row)">
                选定
              </el-button>
            </template>
          </el-table-column>
        </template>
      </normal-table>
    </table-container>
  </el-dialog>
</template>