<template>
  <div class="app-container shopping-cart">
    <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>购物车 (总共{{ 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">
          <el-table-column type="selection" reserve-selection/>
          <el-table-column label="资源型号" prop="model"/>
          <el-table-column label="配置详情" width="150px">
            <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="(item,index) in params[0]" :key="item.id" :label="item.name"-->
          <!--                           :width="item?.name?.length >= 8 ? '150px':''">-->
          <!--            <template #default="scope">-->
          <!--              {{ param[scope.$index][index]['valueName'] }}-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column v-for="(i, index) in headers" :key="index" :label="i.name" :prop="i.name"
                           :width="i?.name?.length >= 8 ? '150px':''">
            <template v-slot="scope">
              {{ getCellValue(scope.row.param, i.name) || '-' }}
            </template>
          </el-table-column>

          <el-table-column label="申请数量" prop="useNum" width="95px">
            <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%;
}

.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: 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%;

  .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>
