<template>
  <div class="detail-container">
    <div class="common-back-box" @click="handleBack">
      <i class="common-back" />
      返回上一级
    </div>
    <div>
      <transition name="fade">
        <el-form ref="queryFormRef" :model="queryParams">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="接口名称：" prop="name">
                <el-input v-model="queryParams.name" placeholder="请输入接口名称" clearable @keyup.enter="handleQuery" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="服务状态：" prop="interfaceStatus">
                <el-select v-model="queryParams.interfaceStatus" clearable>
                  <el-option v-for="item in interface_status" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" @click="handleQuery">搜索</el-button>
              <el-button @click="resetQuery">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </transition>
      <!-- 表格组件 -->
      <el-table ref="tableRef" v-loading="loading" :data="dataList">
        <el-table-column label="id" align="center" prop="id" />
        <el-table-column label="接口名称" align="center" prop="name" />
        <el-table-column label="调用量" align="center" prop="count" />
        <el-table-column label="调用成功数" align="center" prop="successAmount" />
        <el-table-column label="接口状态" align="center" prop="status">
          <template #default="scope">
            <div :class="scope.row.status === '0' ? 'common-btn-text-danger' : 'common-btn-text-primary'" style="cursor: auto">
              {{ scope.row.status === '0' ? '异常' : '正常' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="来源" align="center" prop="source" />
      </el-table>

      <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.page_size" :total="total" @pagination="getList" />
    </div>
  </div>
</template>

<script setup>
const props = reactive({
  id: String
});
const { proxy } = getCurrentInstance();
const { interface_status } = toRefs(proxy?.useDict('interface_status'));
const emits = defineEmits(['back']);
const queryFormRef = ref();
// 搜索条件
const queryParams = reactive({
  name: '',
  interfaceStatus: '',
  page: '',
  page_size: ''
});
// 表格数据
const dataList = ref([]);
// 加载中
const loading = ref(false);
// 总数
const total = ref(0);
// 获取数据
const getList = () => {
  loading.value = true;
  setTimeout(() => {
    dataList.value = [
      { id: 213, name: '接口名称', count: 50, successAmount: 49, status: '0', source: 'xxx平台' },
      { id: 123, name: 'xxx1接口名称', count: 50, successAmount: 50, status: '1', source: 'xxx平台' }
    ];
    loading.value = false;
  }, 500);
};
// 点击查询
const handleQuery = () => {
  queryParams.page = 1;
  getList();
};

// 重置查询条件
const resetQuery = () => {
  if (queryFormRef.value) {
    queryFormRef.value.resetFields(); // 重置表单并清除校验状态
  }
  getList();
};

const handleBack = () => {
  emits('back');
};
getList();
</script>

<style lang="scss" scoped></style>
