<script setup>
import { ref, onMounted } from 'vue';
import request from "@/utils/request.js";
import { ElMessage, ElTable, ElTableColumn, ElPagination } from "element-plus";
import { useRouter } from "vue-router";

const tableData = ref([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);
const uniCode = ref('');
const enterpriseName = ref('');
const router = useRouter();

const getList = async () => {
  try {
    const res = await request('basicData/xcrEBaseinfo/getCreditScoreListDetails', {
      params: {
        pageNum: currentPage.value,
        pageSize: pageSize.value,
        uniCode: uniCode.value,
        enterpriseName: enterpriseName.value
      }
    });

    if (res.code !== 200) {
      ElMessage.error(res.msg);
      return;
    }

    tableData.value = res.data.result;
    total.value = res.data.totalSize;
  } catch (error) {
    ElMessage.error('获取数据失败');
    console.error(error);
  }
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  getList();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  getList();
};

const checkDetail = (row) => {
  router.push({
    path: '/qyxypj/zxxddf',
    query: {
      row: JSON.stringify(row)
    }
  });
};

const resetForm = () => {
  uniCode.value = '';
  enterpriseName.value = '';
  currentPage.value = 1;
  getList();
};

onMounted(() => {
  getList();
});
</script>

<template>
  <div class="p-4">
    <el-form :inline="true" @submit.prevent="getList" class="mb-4">
      <el-row gutter="20">
        <el-col :span="6">
          <el-form-item label="统一社会信用代码" class="w-full">
            <el-input v-model="uniCode" placeholder="统一社会信用代码" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业名称" class="w-full">
            <el-input v-model="enterpriseName" placeholder="企业名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="getList">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="default" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table :data="tableData" border stripe hover class="w-full">
      <el-table-column prop="enterpriseName" label="企业名称">
        <template #default="scope">
          <el-link class="text-blue" @click="checkDetail(scope.row)">{{ scope.row.enterpriseName }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="uniCode" label="统一社会信用代码" />
      <el-table-column prop="grade" label="等级" width="150" />
      <el-table-column prop="total" label="总分" width="150">
        <template #default="scope">
          {{ scope.row.total.toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column prop="administrativePenaltyScore" label="行政处罚分数" width="150">
        <template #default="scope">
          {{ scope.row.administrativePenaltyScore.toFixed(1) }}
        </template>
      </el-table-column>
      <el-table-column prop="enterpriseCompetitivenessScore" label="企业竞争力分数" >
        <template #default="scope">
          {{ scope.row.enterpriseCompetitivenessScore.toFixed(1) }}
        </template>
      </el-table-column>
      <el-table-column prop="referenceCreditRatingScore" label="参考信用评级分数">
        <template #default="scope">
          {{ scope.row.referenceCreditRatingScore.toFixed(1) }}
        </template>
      </el-table-column>
    </el-table>

    <div class="flex justify-center mt-4">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
