<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="resourcesList" :max-height="620">
      <el-table-column label="订单编号" align="center" prop="tradeOrderNo"/>
      <el-table-column label="商品类别" align="center" prop="categoryName"/>
      <el-table-column
          v-for="(item, index) in resourcesList[0]?.properties.length!==0?resourcesList[0]?.properties.slice(0,4):resourcesList[0]?.properties"
          :key="index"
          :label="item.propertyName"
      >

        <template #default="{ row }">
          {{ row.properties[index].valueName }}
        </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}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="有效期限" align="center" prop="expTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.expTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <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"
    />

    <!-- 添加或修改订单管理-用户资源管理对话框 -->
    <el-dialog :title="title" v-model="open" width="800px" 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.tradeOrderNo }}</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">{{ parseTime(form.createTime, '{y}-{m}-{d}') }}</div>
        </div>
        <div class="info-item  flex-align-center flex-space-between">
          <div class="label">有效期限</div>
          <div class="value">{{ parseTime(form.expTime, '{y}-{m}-{d}') }}</div>
        </div>

        <div class="info-item  flex-align-center flex-space-between">
          <div class="label">鉴权信息</div>
          <div class="value">{{ form.auth}}</div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="NaturalResources">
import {listResources, getResources} from '@/api/computility/resources'
import {parseTime} from "../../utils/ruoyi.js";

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: {
    pageNum: 1,
    pageSize: 10,
  }
})

const {queryParams, form} = toRefs(data)

/** 查询订单管理-用户资源管理列表 */
function getList() {
  loading.value = true
  listResources(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 = '查看详情'
  })
}

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>
