<script setup>
import { ref, onMounted, watch } from 'vue'
import request from "@/utils/request.js"
import { ElMessage } from "element-plus"

const tableData = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(15)

const formData = ref({
  uniCode: '',
  enterpriseName: '',
  condition: ['AAA', 'AA', 'A', 'B', 'C', 'D']
})

const getList = async () => {
  try {
    const res = await request('/basicData/xcrEBaseinfo/getCreditScoreList', {
      params: {
        pageNum: currentPage.value,
        pageSize: pageSize.value,
        ...formData.value,
        condition: formData.value.condition.join(',')
      }
    })
    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 handleSearch = () => {
  currentPage.value = 1 // 重置到第一页
  getList()
}

const handleReset = () => {
  formData.value = {
    uniCode: '',
    enterpriseName: '',
    condition: ['AAA', 'AA', 'A', 'B', 'C', 'D']
  }
  currentPage.value = 1
  getList()
}

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

<template>
  <div class="company-info-table p-4">
    <el-form :inline="true" :model="formData" class="mb-4">
      <el-form-item label="统一社会信用代码">
        <el-input v-model="formData.uniCode" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="企业名称">
        <el-input v-model="formData.enterpriseName" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="评分等级" class="w-250px">
        <el-select
            v-model="formData.condition"
            multiple
            collapse-tags
            collapse-tags-tooltip
            placeholder="请选择"
        >
          <el-option
              v-for="item in ['AAA', 'AA', 'A', 'B', 'C', 'D']"
              :key="item"
              :label="item"
              :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%" class="mb-4">
      <el-table-column prop="enterpriseName" label="企业名称" />
      <el-table-column prop="uniCode" label="统一社会信用代码">
        <template #default="scope">
          <el-link class="text-blue">
            {{ scope.row.uniCode}}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column prop="grade" label="等级" />
      <el-table-column prop="total" label="总分">
        <template #default="scope">
          {{ scope.row.total.toFixed(2) }}
        </template>
      </el-table-column>
    </el-table>

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

