<template>
<!--  <div class="app-container shopping-cart">-->
<!--    <div class="page-title">-->
<!--      <div>购物车 (总共{{ tableData.length }})</div>-->
<!--    </div>-->

<!--    <div class="page-main">-->
<!--      <div class="detail-info">-->
<!--        <el-table :data="tableData" v-if="tableData.length !== 0" row-key="id" @selection-change="tableSelectionChange" align="center">-->
<!--          <el-table-column type="selection" reserve-selection/>-->
<!--          <el-table-column label="资源型号" prop="model"/>-->
<!--          <el-table-column label="配置详情" width="210px">-->
<!--            <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>-->

<!--          &lt;!&ndash;          <el-table-column v-for="(item,index) in params[0]" :key="item.id" :label="item.name"&ndash;&gt;-->
<!--          &lt;!&ndash;                           :width="item?.name?.length >= 8 ? '150px':''">&ndash;&gt;-->
<!--          &lt;!&ndash;            <template #default="scope">&ndash;&gt;-->
<!--          &lt;!&ndash;              {{ param[scope.$index][index]['valueName'] }}&ndash;&gt;-->
<!--          &lt;!&ndash;            </template>&ndash;&gt;-->
<!--          &lt;!&ndash;          </el-table-column>&ndash;&gt;-->
<!--          &lt;!&ndash;          <el-table-column v-for="(i, index) in headers" :key="index" :label="i.name" :prop="i.name"&ndash;&gt;-->
<!--          &lt;!&ndash;                           :width="i?.name?.length >= 8 ? '150px':''">&ndash;&gt;-->
<!--          &lt;!&ndash;            <template v-slot="scope">&ndash;&gt;-->
<!--          &lt;!&ndash;              {{ getCellValue(scope.row.param, i.name) || '-' }}&ndash;&gt;-->
<!--          &lt;!&ndash;            </template>&ndash;&gt;-->
<!--          &lt;!&ndash;          </el-table-column>&ndash;&gt;-->

<!--          <el-table-column label="配置参数" width="300px">-->
<!--            <template v-slot="scope">-->
<!--              <div v-for="(item, index) in JSON.parse(scope.row.param)" :key="index">-->
<!--                {{ item.name }}：{{ item.valueName }}-->
<!--              </div>-->
<!--            </template>-->
<!--          </el-table-column>-->

<!--          <el-table-column label="申请数量" prop="useNum">-->
<!--            <template #default="{row}">-->
<!--              <el-input-number-->
<!--                  v-model="row.useNum"-->
<!--                  :min="1"-->
<!--                  controls-position="right"-->
<!--                  @change="editNum(row)"-->
<!--                  style="width: 80px"/>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column label="配置费用" prop="publicTotalPrice"/>-->
<!--          <el-table-column align="center" label="操作">-->
<!--            <template #default="{row}">-->
<!--              <el-popconfirm title="确认删除当前订单吗" width="180px" @confirm="confirmDel(row)">-->
<!--                <template #reference>-->
<!--                  <el-button link>删除</el-button>-->
<!--                </template>-->
<!--              </el-popconfirm>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--        </el-table>-->

<!--        <pagination-->
<!--            v-show="total > 0"-->
<!--            :total="total"-->
<!--            v-model:page="pageNum"-->
<!--            v-model:limit="pageSize"-->
<!--            @pagination="getList"/>-->
<!--        <div v-if="tableData.length === 0" class="empty-box">-->
<!--          <el-empty description="暂无数据"/>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class="footer-bar">-->
<!--      <div class="content flex-space-between flex-align-center">-->
<!--        <div class="flex-align-center" style="font-size: 16px">-->
<!--          <span>已选 ({{ ids.length }})</span>-->
<!--          <el-popconfirm title="确认删除当前订单吗" width="180px" @confirm="confirmDel()">-->
<!--            <template #reference>-->
<!--              <div>-->
<!--                <el-button-->
<!--                    :disabled="!ids.length"-->
<!--                    link-->
<!--                    style="margin-left: 40px;margin-top:2px;font-size: 16px">-->
<!--                  删除-->
<!--                </el-button>-->
<!--              </div>-->
<!--            </template>-->
<!--          </el-popconfirm>-->
<!--        </div>-->

<!--        <div class="flex-align-center right">-->
<!--          <div class="mr20">-->
<!--            <div class="price">￥{{ totalPrice }}</div>-->
<!--          </div>-->
<!--          <el-button :disabled="!ids.length" type="primary" @click="submit">提交</el-button>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
</template>

<!--<script name="ConfirmOrder" setup>-->
<!--import {-->
<!--  shoppingList,-->
<!--  shoppingEdit,-->
<!--  shoppingDelete,-->
<!--  shoppingSubmit,-->
<!--  shoppingComputerVo-->
<!--} from '@/api/computingResource.js'-->
<!--import {ref, computed} from 'vue'-->
<!--import {ElMessageBox} from 'element-plus'-->
<!--import {useRouter} from 'vue-router'-->

<!--const router = useRouter()-->

<!--const total = ref(0)-->
<!--const pageNum = ref(1)-->
<!--const pageSize = ref(10)-->
<!--const tableData = ref([])-->

<!--const params = ref([])-->

<!--function getList() {-->
<!--  shoppingList({pageNum: pageNum.value, pageSize: pageSize.value}).then(res => {-->
<!--    tableData.value = res.rows-->
<!--    total.value = res.total-->
<!--  })-->
<!--}-->


<!--const handler = {-->
<!--  get(target, propKey) {-->
<!--    return target[propKey];-->
<!--  }-->
<!--};-->

<!--getList()-->

<!--const ids = ref([])-->

<!--function tableSelectionChange(value) {-->
<!--  ids.value = value.map(row => row.id)-->
<!--  shoppingComputer()-->
<!--}-->

<!--const headers = computed(() => {-->
<!--  if (tableData.value.length > 0 && tableData.value[0].param) {-->
<!--    const param = JSON.parse(tableData.value[0].param)-->
<!--    return param.map(item => ({-->
<!--      name: item.name-->
<!--    }));-->
<!--  }-->
<!--  return [];-->
<!--});-->

<!--const getCellValue = (params, headerName) => {-->
<!--  const paramsCopy = JSON.parse(params)-->
<!--  const param = paramsCopy.find(item => item.name === headerName);-->
<!--  return param ? param.valueName : '';-->
<!--};-->
<!--// const totalPrice = computed(() => {-->
<!--//   const list = tableData.value.filter(item => {-->
<!--//     return ids.value.includes(item.id)-->
<!--//   })-->
<!--//   let price = 0-->
<!--//   list.forEach(i => price += parseFloat(i.publicTotalPrice))-->
<!--//   return price-->
<!--// })-->

<!--function editNum(row) {-->
<!--  shoppingEdit({id: row.id, useNum: row.useNum}).then(res => {-->
<!--    shoppingComputer()-->
<!--    getList()-->
<!--  })-->
<!--}-->

<!--const totalPrice = ref(0)-->

<!--function shoppingComputer() {-->
<!--  if (!ids.value.length) {-->
<!--    totalPrice.value = 0-->
<!--    return-->
<!--  }-->
<!--  shoppingComputerVo(ids.value).then(res => {-->
<!--    totalPrice.value = res.data.totalPulicPrice-->
<!--  })-->
<!--}-->


<!--function confirmDel(row) {-->
<!--  const idsValue = row?.id ? row.id : ids.value-->
<!--  shoppingDelete(idsValue).then(res => {-->
<!--    getList()-->
<!--  })-->
<!--}-->


<!--function submit() {-->
<!--  ElMessageBox.confirm(-->
<!--      '确认提交订单吗',-->
<!--      '提示',-->
<!--      {-->
<!--        confirmButtonText: '确认提交',-->
<!--        cancelButtonText: '关闭',-->
<!--        icon: 'QuestionFilled'-->
<!--      }-->
<!--  ).then(() => {-->
<!--    shoppingSubmit(ids.value).then(res => {-->
<!--      router.push('/computingResource/orderResult')-->
<!--    })-->
<!--  }).catch(() => {-->
<!--  })-->
<!--}-->

<!--</script>-->

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

<!--.page-title {-->
<!--  font-weight: bold;-->
<!--  font-size: 22px;-->
<!--  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;-->
<!--  //}-->

<!--}-->

<!--.empty-box {-->
<!--  display: flex;-->
<!--  justify-content: center;-->
<!--  align-items: center;-->
<!--  min-height: 650px;-->
<!--}-->

<!--.footer-bar {-->
<!--  padding: 18px;-->
<!--  background-color: #FFFFFF;-->
<!--  position: fixed;-->
<!--  z-index: 99;-->
<!--  bottom: 0;-->
<!--  width: 100%;-->
<!--  -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.25);-->


<!--  .content {-->
<!--    margin: 0 auto;-->
<!--    width: 1280px;-->
<!--  }-->

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

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

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