<template>
  <div class="app-container">
    <a-form
      :model="queryParams"
      layout="inline"
      class="search-form"
      v-show="showSearch"
    >
      <a-form-item label="名称" name="name">
        <a-input
          v-model:value="queryParams.name"
          placeholder="请输入表达式名称"
          allow-clear
          @press-enter="handleQuery"
        />
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="handleQuery">
            <template #icon><SearchOutlined /></template>
            搜索
          </a-button>
          <a-button @click="resetQuery">
            <template #icon><RedoOutlined /></template>
            重置
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>

    <a-table
      :loading="loading"
      :dataSource="expressionList"
      :rowKey="record => record.id"
      :pagination="false"
      @rowClick="handleSingleExpSelect"
    >
      <a-table-column key="selection" width="55" align="center">
        <template #bodyCell="{ record }">
          <a-radio 
            v-model:checked="radioSelected" 
            :value="record.id"
            @change="() => handleSingleExpSelect(record)"
          ></a-radio>
        </template>
      </a-table-column>
      <a-table-column title="名称" data-index="name" key="name" align="center" />
      <a-table-column title="表达式内容" data-index="expression" key="expression" align="center" />
      <a-table-column title="表达式类型" data-index="dataType" key="dataType" align="center">
        <template #bodyCell="{ record }">
          <dict-tag :options="dictData.exp_data_type" :value="record.dataType"/>
        </template>
      </a-table-column>
    </a-table>

    <div class="pagination-container">
      <a-pagination
        v-show="total > 0"
        v-model:current="queryParams.pageNum"
        v-model:pageSize="queryParams.pageSize"
        :total="total"
        :pageSizeOptions="['5', '10']"
        show-less-items
        show-size-changer
        @change="getList"
        @showSizeChange="getList"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { SearchOutlined, RedoOutlined } from '@ant-design/icons-vue'
import { listExpression } from "../../api/expression"
import { StrUtil } from "../../common/StrUtil"

// 定义接口
interface ExpressionItem {
  id: number | string
  name: string
  expression: string
  dataType: string
  status?: string
}

interface QueryParams {
  pageNum: number
  pageSize: number
  name?: string
  expression?: string
  status?: string
}

// 定义props
interface Props {
  selectValues?: number | string | null
}

const props = withDefaults(defineProps<Props>(), {
  selectValues: null
})

// 定义emits
const emit = defineEmits<{
  (e: 'handleSingleExpSelect', selection: ExpressionItem): void
}>()

// 响应式数据
const loading = ref(true)
const showSearch = ref(true)
const total = ref(0)
const expressionList = ref<ExpressionItem[]>([])
const radioSelected = ref<number | string | null>(null)

// 查询参数
const queryParams = reactive<QueryParams>({
  pageNum: 1,
  pageSize: 10,
  name: undefined,
  expression: undefined,
  status: undefined
})

// 字典数据（假设从外部传入或使用provide/inject）
const dictData = {
  exp_data_type: [
    { value: 'string', label: '字符串' },
    { value: 'number', label: '数字' },
    { value: 'boolean', label: '布尔值' }
    // 根据实际字典数据添加
  ]
}

// 监听selectValues变化
watch(() => props.selectValues, (newVal) => {
  if (StrUtil.isNotBlank(newVal)) {
    radioSelected.value = newVal
  }
}, { immediate: true })

// 生命周期
onMounted(() => {
  getList()
})

// 方法
/** 查询流程达式列表 */
const getList = async () => {
  try {
    loading.value = true
    const response = await listExpression(queryParams)
    expressionList.value = response.rows
    total.value = response.total
  } catch (error) {
    console.error('获取表达式列表失败:', error)
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNum = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  Object.assign(queryParams, {
    pageNum: 1,
    pageSize: 10,
    name: undefined,
    expression: undefined,
    status: undefined
  })
  handleQuery()
}

// 单选框选中数据
const handleSingleExpSelect = (record: ExpressionItem) => {
  radioSelected.value = record.id
  emit('handleSingleExpSelect', record)
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.search-form {
  margin-bottom: 20px;
}

.search-form :deep(.ant-form-item) {
  margin-bottom: 16px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

:deep(.ant-table-row) {
  cursor: pointer;
}

:deep(.ant-table-row:hover) {
  background-color: #f5f5f5;
}
</style>