<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="resourcesList" :max-height="620">
      <el-table-column label="订单编号" align="center" prop="orderNo"/>
      <el-table-column label="资源名称" align="center" prop="spuName"/>
      <el-table-column label="CPU" align="center" prop="cpu"/>
      <el-table-column label="GPU" align="center" prop="gpu"/>
      <el-table-column label="内存" align="center" prop="ram"/>
      <el-table-column label="存储" align="center" prop="storage"/>
      <el-table-column label="所在地" align="center" prop="location"/>
      <el-table-column label="租期" align="center">
        <template #default="scope">
          <span>{{ scope.row.skuName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center" prop="status">
        <template #default="scope">
          <dict-tag :options="compute_resource_order_status" :value="scope.row.status" />
        </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="rentEndTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.rentEndTime, '{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.orderNo }}</div>
          </div>

          <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">CPU</div>
            <div class="value">{{ form.cpu || '-' }}</div>
          </div>
          <div class="info-item flex-align-center flex-space-between">
            <div class="label">GPU</div>
            <div class="value">{{ form.gpu || '-' }}</div>
          </div>
          <div class="info-item flex-align-center flex-space-between">
            <div class="label">内存</div>
            <div class="value">{{ form.ram || '-' }}</div>
          </div>
          <div class="info-item flex-align-center flex-space-between">
            <div class="label">存储</div>
            <div class="value">{{ form.storage || '-' }}</div>
          </div>
          <div class="info-item flex-align-center flex-space-between">
            <div class="label">服务器IP</div>
            <div class="value">{{ form.ip || '-' }}</div>
          </div>
          <div class="info-item flex-align-center flex-space-between">
            <div class="label">服务器所在地</div>
            <div class="value">{{ form.location || '-' }}</div>
          </div>
          <div class="info-item flex-align-center flex-space-between">
            <div class="label">服务器用户名</div>
            <div class="value">{{ form.initUsername || '-' }}</div>
          </div>
          <div class="info-item flex-align-center flex-space-between">
            <div class="label">服务器密码</div>
            <div class="value">{{ form.initPassword || '-' }}</div>
          </div>
          <div class="info-item flex-align-center flex-space-between">
            <div class="label">租期</div>
            <div class="value">{{ form.skuName }}</div>
          </div>
          <div class="info-item flex-align-center flex-space-between">
            <div class="label">订单状态</div>
            <div class="value">
              <dict-tag :options="compute_resource_order_status" :value="form.status" />
            </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.rentStartTime, '{y}-{m}-{d}') }}</div>
        </div>
        <div class="info-item  flex-align-center flex-space-between">
          <div class="label">租赁结束时间</div>
          <div class="value">{{ parseTime(form.rentEndTime, '{y}-{m}-{d}') }}</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 {proxy} = getCurrentInstance()
const {compute_resource_order_status} = proxy.useDict('compute_resource_order_status')

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>
