<script setup name="getCerating">
import { useRouter } from 'vue-router'
import { ref, reactive, toRefs } from 'vue'
import request from '@/utils/request'

const router = useRouter()

const tableData = ref([])

const total = ref(0)

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 20,
    unifiedSocialCreditCode: '',
    grade: null,
    total: null,
    enterpriseName: ''
  }
})
const { queryParams } = toRefs(data)

function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

function resetQuery() {
  queryParams.value.unifiedSocialCreditCode = ''
  queryParams.value.enterpriseName = ''
  handleQuery()
}

function getCreditScoreList(data) {
  return request({
    url: `/crmHighTechZoneEnterprises/getCreditScoreList`,
    method: 'get',
    params: data
  })
}

function getList() {
  getCreditScoreList(queryParams.value).then((res) => {
    tableData.value = res.data.result
    total.value = res.data.totalSize
  })
}

getList()
</script>

<template>
  <div class="companyDetailContainer">
    <div class="w-1200px m-auto pt-20px pb-20px">
      <div class="app-container">
        <el-row :gutter="20">
          <!--用户数据-->
          <el-col style="display:flex" :span="20" :xs="24">
            <el-form :model="queryParams" ref="queryRef" :inline="true">
              <el-form-item label="企业信用代码" prop="unifiedSocialCreditCode">
                <el-tooltip
                  class="box-item"
                  effect="light"
                  content="这里输入企业信用代码以方便搜索"
                  placement="bottom"
                >
                  <el-input v-model="queryParams.unifiedSocialCreditCode" placeholder="请输入企业信用代码" clearable
                            style="width: 240px" />
                </el-tooltip>
              </el-form-item>
              <el-tooltip
                class="box-item"
                effect="light"
                content="这里输入企业名称以方便搜索"
                placement="bottom"
              >
                <el-form-item label="企业名称" prop="enterpriseName">
                  <el-input v-model="queryParams.enterpriseName" placeholder="请输入企业名称" clearable
                            style="width: 240px" />
                </el-form-item>
              </el-tooltip>
              <el-form-item>
                <el-tooltip
                  class="box-item"
                  effect="light"
                  content="输入关键字就可以搜索企业"
                  placement="bottom"
                >
                  <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                </el-tooltip>
                <el-tooltip
                  class="box-item"
                  effect="light"
                  content="这里可以重置搜索的关键字"
                  placement="bottom"
                >
                  <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-tooltip>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-tooltip
          class="box-item"
          effect="light"
          content="点击企业信用代码一栏可以查看得分详情"
          placement="left-start"
        >
          <el-table stripe :data="tableData" style="width: 100%" height="710">
            <el-table-column prop="enterpriseName" label="企业名称" width="400" />
            <el-table-column label="企业信用代码">
              <template #default="scope">
                <el-link
                  @click="router.push(
                    {
                      path: '/companyScoreDetail',
                      query: {
                        unifiedSocialCreditCode: scope.row.unifiedSocialCreditCode,
                        enterpriseName: scope.row.enterpriseName,
                        grade: scope.row.grade,
                        total: scope.row.total
                      }
                    }
                    )"
                  type="primary"
                >{{ scope.row.unifiedSocialCreditCode }}
                </el-link>
              </template>
            </el-table-column>
            <el-table-column label="总分" align="center" prop="total" width="300">
              <template #default="scope">
                {{ scope.row.total.toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column prop="grade" label="等级" />
          </el-table>
        </el-tooltip>
        <div class="mt-10px">
          <el-pagination v-show="total > 0" :total="total" v-model:current-page="queryParams.pageNum"
                         v-model:page-size="queryParams.pageSize" @change="getList" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.companyDetailContainer {
  background-color: #ecf0f9;
}
</style>