<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="resourcesList" :max-height="620">
      <el-table-column label="应用名称" align="center" prop="apiName" width="150px" />
      <el-table-column label="套餐名称" align="center" prop="packageName" width="150px" />
      <el-table-column label="套餐总量" align="center" prop="packageTimes" />
      <el-table-column label="有效时长" align="center" prop="packageValidDays">
        <template #default="scope">
          {{ scope.row.packageValidDays }} 天
        </template>
      </el-table-column>
      <el-table-column label="已使用次数" align="center" prop="usedTimes" width="150px" />
      <el-table-column
          label="过期时间"
          align="center"
          prop="expireTime"
          :formatter="dateFormatter"
          width="180px"
      />
      <el-table-column
          label="购买时间"
          align="center"
          prop="createTime"
          :formatter="dateFormatter"
          width="180px"
      />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" @click="handleUpdate(scope.row,scope.$index)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

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

  </div>
</template>

<script setup name="NaturalResources">
import {listResources, getResources, listApiResources} from '@/api/computility/resources'
import dayjs from 'dayjs'


const resourcesList = ref([])
const open = ref(false)
const loading = ref(true)
const ids = ref([])
const total = ref(0)
const title = ref('')

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

const {queryParams, form} = toRefs(data)

/** 查询订单管理-用户资源管理列表 */
function getList() {
  loading.value = true
  listApiResources(queryParams.value).then(response => {
    resourcesList.value = response.data.list
    total.value = response.data.total
    loading.value = false
  })
}

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

/** 修改按钮操作 */
function handleUpdate(row) {
  const _id = row.id || ids.value
  getResources({id: _id}).then(response => {
    form.value = response.data
    open.value = true
    title.value = '查看详情'
  })
}

const dateFormatter = (row, column, cellValue) => {
  if (!cellValue) return ''
  return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
}

getList()
</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;
}

.el-select {
  width: 100% !important;
}

.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;
  }
}
</style>
