<template>
  <div class="app-container confirm-order">
    <div class="breadcrumb">
      <div class="flex-justify-end">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>计算资源</el-breadcrumb-item>
          <el-breadcrumb-item>确认订单</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="page-title">
      <div>确认订单</div>
    </div>

    <div class="page-main">
      <div class="detail-info">
        <!--        <table style="width: 100%;">-->
        <!--          <thead>-->
        <!--          <tr>-->
        <!--            <th style="width: 180px">资源类别</th>-->
        <!--            <th style="width: 130px">资源型号</th>-->
        <!--            <th>配置详情</th>-->
        <!--            <th style="width: 120px">虚拟器存储</th>-->
        <!--            <th style="width: 120px">网络带宽</th>-->
        <!--            <th style="width: 120px">公网IP</th>-->
        <!--            <th style="width: 120px">申请时长</th>-->
        <!--            <th style="width: 120px">申请数量</th>-->
        <!--            <th style="width: 120px">配置费用</th>-->
        <!--          </tr>-->
        <!--          </thead>-->
        <!--          <tbody>-->
        <!--          <tr>-->
        <!--            <td>CPU裸金属服务器</td>-->
        <!--            <td>型号1</td>-->
        <!--            <td>-->
        <!--              <p>CPU：I7-13900</p>-->
        <!--              <p>GPU：4070TI</p>-->
        <!--              <p>内存：DDR5 16GB</p>-->
        <!--              <p>存储：6*4T,2*0.48T SSD</p>-->
        <!--            </td>-->
        <!--            <td>1T</td>-->
        <!--            <td>2M</td>-->
        <!--            <td>0个</td>-->
        <!--            <td>半年</td>-->
        <!--            <td>3</td>-->
        <!--            <td>-->
        <!--              <span style="color: #FF9811">￥1234.00</span>-->
        <!--            </td>-->
        <!--          </tr>-->
        <!--          <tr>-->
        <!--            <td>CPU裸金属服务器</td>-->
        <!--            <td>型号1</td>-->
        <!--            <td>-->
        <!--              <p>CPU：I7-13900</p>-->
        <!--              <p>GPU：4070TI</p>-->
        <!--              <p>内存：DDR5 16GB</p>-->
        <!--              <p>存储：6*4T,2*0.48T SSD</p>-->
        <!--            </td>-->
        <!--            <td>1T</td>-->
        <!--            <td>2M</td>-->
        <!--            <td>0个</td>-->
        <!--            <td>半年</td>-->
        <!--            <td>3</td>-->
        <!--            <td>-->
        <!--              <span style="color: #FF9811">￥1234.00</span>-->
        <!--            </td>-->
        <!--          </tr>-->
        <!--          </tbody>-->
        <!--        </table>-->
        <el-table :data="tableData">
          <el-table-column label="资源型号" prop="model"/>
          <el-table-column label="配置详情" width="200px">
            <template #default="{row}">
              <p>CPU：{{ row.cpu }}</p>
              <p>GPU：{{ row.gpu }}</p>
              <p>内存：{{ row.memory }}</p>
              <p>存储：{{ row.storage }}</p>
            </template>
          </el-table-column>
          <el-table-column v-for="param in params" :key="param.id" :label="param.name">
            {{ param.valueName }}
          </el-table-column>
          <el-table-column label="使用数量" prop="useNum"/>
          <!--<el-table-column label="配置费用" prop="publicTotalPrice"/>-->
        </el-table>
      </div>
    </div>

    <div class="footer-bar">
      <div class="content flex-space-between flex-align-center">
        <div>应付配置费用</div>

        <div class="flex-align-center">
          <div class="mr20">
            <div class="price">￥{{ totalPrice}}</div>
            <!--<div>约￥15/月</div>-->
          </div>
          <el-button type="primary" @click="submit">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script name="ConfirmOrder" setup>
import { confirmOrderInfo, orderSubmit } from '@/api/computingResource.js'
import { useRoute, useRouter } from 'vue-router'
import { ref } from 'vue'

const route = useRoute()
const router = useRouter()
const tableData = ref([])
const totalPrice = ref(0)
const params = ref([])
confirmOrderInfo({id: route.query.id}).then(res => {
  totalPrice.value = res.data.publicTotalPrice
  params.value = JSON.parse(res.data.param)
  tableData.value = [res.data]
})

function submit () {
  orderSubmit({id: route.query.id}).then(res => {
    if (res.data === 1) {
      router.replace('/computingResource/orderResult')
    }
  })
}

</script>

<style scoped lang="scss">
.app-container {
  background-color: #F7F8F9;
  padding: 0 0 90px;
  min-height: 100%;
}

.breadcrumb {
  background-color: #FFFFFF;
  border-bottom: 1px solid #EBEDED;
  padding-top: 12px;
  padding-bottom: 12px;

  > div {
    width: 1280px;
    margin: 0 auto;
  }

  :deep(.el-breadcrumb__item) {
    &:last-child .el-breadcrumb__inner {
      color: #222222;
    }
  }
}

.page-title {
  font-weight: bold;
  font-size: 24px;
  color: #303233;
  padding: 12px 80px;
  background-color: #FFFFFF;

  > div {
    width: 1280px;
    margin: 0 auto;
  }
}

.page-main {
  padding: 30px 80px;
}

.detail-info {
  width: 1280px;
  margin: 0 auto;
  padding: 0 24px 24px 24px;
  background-color: #FFFFFF;

  .el-table {
    :deep(.el-table__header-wrapper ) th {
      background-color: #FFFFFF !important;
      font-size: 14px;
    }

    :deep(td.el-table__cell) {
      background-color: #F7F8F9 !important;
    }
  }

  //table {
  //  border-collapse: collapse;
  //}
  //
  //tbody tr:not(:last-child) td {
  //  border-bottom: 1px solid #d7d7d7;
  //}
  //
  //th {
  //  font-weight: 500;
  //  font-size: 14px;
  //  color: #303233;
  //  text-align: left;
  //  padding: 16px 20px;
  //}
  //
  //td {
  //  font-weight: 400;
  //  font-size: 14px;
  //  color: #303233;
  //  text-align: left;
  //  padding: 16px 20px;
  //  background-color: #F7F8F9;
  //}

}

.footer-bar {
  padding: 18px;
  //background-color: #FFFFFF;
  //position: fixed;
  //bottom: 0;
  //width: 100%;

  .content {
    margin: 0 auto;
    background-color: #FFFFFF;
    padding: 20px 24px;
    width: 1280px;
  }

  .price {
    font-weight: bold;
    font-size: 24px;
    color: #FF9811;

    & + div {
      font-weight: 400;
      font-size: 14px;
      color: #949899;
      text-align: right;
    }
  }

  .el-button {
    width: 180px;
    height: 46px;
    font-size: 20px;
    border-radius: 2px 2px 2px 2px;
  }
}
</style>
