<template>
  <div class="app-container">
    <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
    >
      <el-form-item label="接口名称" prop="apiEndpointName">
        <el-input
            v-model="queryParams.apiEndpointName"
            placeholder="请输入接口名称"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
        >搜索
        </el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
        v-loading="loading"
        :data="apiCallLogList"
        :max-height="620"
    >
      <!--<el-table-column type="selection" width="45" align="center"/>-->
      <!--<el-table-column label="序号" align="center" prop="id"/>-->
      <el-table-column label="接口名称" align="center" prop="apiEndpointName"/>
      <el-table-column label="请求方式" align="center" prop="method"/>
      <el-table-column label="请求接口" align="center" prop="path"/>
      <el-table-column label="请求参数" align="center" prop="requestParams" width="200">
        <template #default="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.requestParams" placement="top">
            <div class="ellipsis-text">{{ scope.row.requestParams }}</div>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="返回结果" align="center" prop="responseParams" width="200">
        <template #default="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.responseParams" placement="top">
            <div class="ellipsis-text">{{ scope.row.responseParams }}</div>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="请求时间" align="center" prop="createTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
<!--      <el-table-column-->
<!--          label="操作"-->
<!--          align="center"-->
<!--          fixed="right"-->
<!--          class-name="small-padding fixed-width">-->
<!--        <template #default="scope">-->
<!--          <el-button-->
<!--              link-->
<!--              type="primary"-->
<!--              @click="handleDetails(scope.row)"-->
<!--          >-->
<!--            详情-->
<!--          </el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>

    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

    <!-- 添加或修改管理-需求单管理对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <div>
        <div class="info-block">
          <div class="info-item flex-align-center flex-space-between">
            <div class="label">商品名称</div>
            <div class="value">{{ form.spuName }}</div>
          </div>
          <div class="info-item flex-align-center flex-space-between">
            <div class="label">订单编号</div>
            <div class="value">{{ form.no }}</div>
          </div>
          <div class="info-item flex-align-center flex-space-between">
            <div class="label">费用</div>
            <div class="value">{{ form.payPrice ? (form.payPrice / 100) : '-' }}</div>
          </div>

          <div class="info-item  flex-align-center flex-space-between">
            <div class="label">商品类别</div>
            <div class="value">{{ form.categoryName }}</div>
          </div>

        </div>

        <div class="info-block">
          <div class="info-item flex-align-center flex-space-between" v-for="(i,index) in form.properties"
               :key="i.index">
            <div class="label">{{ i.propertyName }}</div>
            <div class="value">{{ i.valueName }}</div>
          </div>
        </div>

        <div class="info-item  flex-align-center flex-space-between">
          <div class="label">订单状态</div>
          <div class="value">{{ form.statusName }}</div>
        </div>
        <div class="info-item  flex-align-center flex-space-between">
          <div class="label">下单时间</div>
          <div class="value">{{ parseTime(form.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">关闭</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup name="ApiCallLog">
import {
  getApiCallLog ,getApiCallLogDetail
} from '@/api/apicalllog.js'
import {parseTime} from "../../utils/ruoyi.js";

const {proxy} = getCurrentInstance()

const apiCallLogList = ref([])
const open = ref(false)
const sOpen = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const total = ref(0)
const title = ref('')

const data = reactive({
  form: {},
  queryParams: {
    pageNo: 1,
    pageSize: 10,
    path: null,
    searchQuery: null,
    status: null
  },
})

const {queryParams, form} = toRefs(data)

/** 查询使用记录 */
function loadList() {
  loading.value = true
  getApiCallLog(queryParams.value).then((response) => {
    apiCallLogList.value = response.data.list
    total.value = response.data.total
    loading.value = false
  })
}

// 取消按钮
function cancel() {
  open.value = false
  reset()
}

// 表单重置
function reset() {
  form.value = {
    searchQuery: null,
    status: null
  }
  proxy.resetForm('queryRef')
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  loadList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm('queryRef')
  handleQuery()
}

function handleDetails(row) {
  const _id = row.id || ids.value
  // getResources({id: _id}).then(response => {
  //   form.value = response.data
  open.value = true
  title.value = '查看使用记录详情'
  // })
}

loadList()
</script>


<style lang="scss" scoped>
.el-form {
  padding: 20px 20px 0 20px;
  border-radius: 4px;
  background-color: #FFFFFF;
  margin-bottom: 20px;
}

.pagination-container {
  background-color: transparent;
}

.info-block {
  background-color: #ffffff;
  padding: 4px 0;
  //margin-bottom: 14px;
}

.info-item {
  padding: 12px 20px;

  .label {
    font-weight: 400;
    font-size: 16px;
    color: #626566;
  }

  .value {
    font-weight: bold;
    font-size: 16px;
    color: #303233;
  }
}

.ellipsis-text {
  max-width: 180px;    // 控制宽度
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

</style>
