<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" @selection-change="tableSelectionChange">
          <el-table-column type="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">
              {{ params[scope.$index][index]['valueName'] }}
            </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="edit(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>
    </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 } 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 => {
    console.log(res)
    tableData.value = res.rows
    total.value = res.total
    params.value = res.rows.map(item => {
      return JSON.parse(item.param)
    })
  })
}

getList()

const ids = ref([])

function tableSelectionChange (value) {
  ids.value = value.map(row => row.id)
}

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 edit (row) {
  shoppingEdit({id: row.id, useNum: row.useNum}).then(res => {
    getList()
  })
}

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


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