<template>
  <div class="app-container computing-resource">
    <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>
      </div>
    </div>

    <div class="top-banner-list flex-justify-center">
      <div class="banner-item flex-align-center">
        <img src="@/assets/images/superior-performance.png" alt="">
        <div>
          <h3>性能优越</h3>
          <p>
            提供多种产品配置
            <br>
            满足个性化需求</p>
        </div>
      </div>

      <div class="banner-item flex-align-center">
        <img src="@/assets/images/intelligent-computing.png" alt="">
        <div>
          <h3>智能计算</h3>
          <p>
            提供多种产品配置
            <br>
            满足个性化需求</p>
        </div>
      </div>

      <div class="banner-item flex-align-center">
        <img src="@/assets/images/innovative-design.png" alt="">
        <div>
          <h3>创新设计</h3>
          <p>
            提供多种产品配置
            <br>
            满足个性化需求</p>
        </div>
      </div>
    </div>

    <div class="info-content">
      <div class="switch-display" @click="showVersion = (showVersion === 1 ? 2 : 1)">
        <svg-icon v-show="showVersion === 2" color="#2E77E3" icon-class="list-1"/>
        <svg-icon v-show="showVersion === 1" color="#2E77E3" icon-class="table"/>
      </div>
      <el-tabs v-model="tabActive" @tab-change="tabChange">
        <el-tab-pane
            v-for="productType in productTypes"
            :key="productType.value"
            :label="productType.name"
            :name="productType.value">
          <div v-if="showVersion === 1" class="version-1">
            <el-table :data="tableData" :max-height="490" style="width: 100%">
              <el-table-column prop="model" label="型号" width="190px" sortable/>
              <el-table-column prop="cpu" label="CPU" sortable/>
              <el-table-column prop="gpu" label="GPU" sortable/>
              <el-table-column prop="memory" label="内存" sortable/>
              <el-table-column prop="storage" label="存储" sortable/>
              <el-table-column prop="publicPrice" label="报价" sortable/>
              <el-table-column label="操作" width="204px">
                <template #default="{row}">
                  <el-button class="action-button" @click="selectedProduct(1,row.id)">加入购物车</el-button>
                  <el-button type="primary" class="action-button" @click="selectedProduct(2,row.id)">立即申请
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div v-if="showVersion === 2" class="version-2">
            <el-row :gutter="24">
              <el-col v-for="(item,index) in tableData" :key="index" :span="6">
                <div class="product-card">
                  <div class="top-info">
                    <div class="title">{{ item.model }}</div>
                    <div class="tag">
                      <!--<el-tag type="warning" effect="dark">性价比</el-tag>-->
                      <!--<el-tag type="info" effect="plain">专家推荐</el-tag>-->
                    </div>
                    <div class="desc">{{ item.remark }}</div>
                  </div>
                  <div class="bottom-info">
                    <!--<div class="label">型号</div>-->
                    <!--<div class="value">{{ item.model }}</div>-->
                    <!--<el-divider></el-divider>-->
                    <el-row>
                      <el-col :span="12">
                        <div>
                          <div class="parameter-item">
                            <div class="label">CPU</div>
                            <div class="value">{{ item.cpu }}</div>
                          </div>
                          <div class="parameter-item">
                            <div class="label">GPU</div>
                            <div class="value">{{ item.gpu }}</div>
                          </div>
                        </div>
                      </el-col>

                      <el-col :span="12">
                        <div>
                          <div class="parameter-item">
                            <div class="label">内存</div>
                            <div class="value">{{ item.memory }}</div>
                          </div>
                          <div class="parameter-item">
                            <div class="label">存储</div>
                            <div class="value">{{ item.storage }}</div>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <div class="flex-justify-end price">￥{{ item.publicPrice }}</div>
                    <!--<div class="flex-justify-end month-expenses">约￥15/月</div>-->
                    <el-divider></el-divider>
                    <div class="footer-action flex">
                      <el-button class="action-button" @click="selectedProduct(1,item.id)">加入购物车</el-button>
                      <el-button type="primary" class="action-button" @click="selectedProduct(2,item.id)">立即申请
                      </el-button>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>

          <pagination
              v-show="total > 0"
              :total="total"
              v-model:page="pageNum"
              v-model:limit="pageSize"
              @pagination="getList"/>
        </el-tab-pane>
      </el-tabs>
    </div>

    <el-drawer v-model="showDrawer" class="drawer" direction="rtl" :size="694" title="资源申请详情">
      <template #default>
        <div class="info-block">
          <div class="info-item  flex-align-center flex-space-between">
            <div class="label">类别</div>
            <div class="value">{{ productDetail.category }}</div>
          </div>

          <div class="info-item  flex-align-center flex-space-between">
            <div class="label">型号</div>
            <div class="value">{{ productDetail.model }}</div>
          </div>
        </div>

        <div class="info-block">
          <div class="info-item flex-align-center flex-space-between">
            <div class="label">CPU</div>
            <div class="value">{{ productDetail.cpu }}</div>
          </div>

          <div class="info-item  flex-align-center flex-space-between">
            <div class="label">GPU</div>
            <div class="value">{{ productDetail.gpu }}</div>
          </div>

          <div class="info-item  flex-align-center flex-space-between">
            <div class="label">内存</div>
            <div class="value">{{ productDetail.memory }}</div>
          </div>
          <div class="info-item  flex-align-center flex-space-between">
            <div class="label">存储</div>
            <div class="value">{{ productDetail.storage }}</div>
          </div>
        </div>

        <div class="info-block">

          <div v-for="item in productDetail.options" :key="item.id"
               class="info-item flex-align-center flex-space-between">
            <div class="label">{{ item.label }}</div>

            <div class="value">
              <el-input-number v-if="item.type === 2" v-model="item.value" :min="0" @change="orderComputerPrice" style="width: 110px"/>

              <el-radio-group v-if="[0,1].includes(item.type)" v-model="item.value" @change="orderComputerPrice">
                <el-radio-button v-for="option in item.options" :label="option.id">
                  {{ option.model + option.unit }}
                </el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </div>

        <div class="info-block">

          <div class="info-item flex-align-center flex-space-between">
            <div class="label">使用数量（个）</div>
            <div class="value">
              <el-input-number v-model="form.num" :min="0" style="width: 110px"/>
            </div>
          </div>
        </div>

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

          <div class="flex-align-center">
            <div class="mr20">
              <div class="price">￥{{ orderPrice }}</div>
            </div>
            <el-button type="primary" @click="submit">{{ selectedType === 1 ? '加入购物车' : '立即申请' }}
            </el-button>
          </div>
        </div>
      </template>
    </el-drawer>

    <div class="shopping-trolley" @click="$router.push('/computingResource/shoppingCart')">
      <el-icon size="24px">
        <ShoppingTrolley/>
      </el-icon>
      <div>购</div>
      <div>物</div>
      <div>车</div>
    </div>
  </div>
</template>

<script name="ResourceList" setup>
import { ref, watch } from 'vue'
import { ElMessageBox } from 'element-plus'
import SvgIcon from '@/components/SvgIcon/index.vue'
import {
  computilityMenu,
  getRListByCategory,
  getRDetail,
  orderBuy,
  shoppingAdd,
  orderComputer
} from '@/api/computingResource.js'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const showVersion = ref(2)
const tabActive = ref()
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)

const productTypes = ref([])
const tableData = ref([])

function getTypeData () {
  computilityMenu().then(res => {
    productTypes.value = res.data
    if (route.query.type) {
      tabActive.value = route.query.type
    } else {
      tabActive.value = res.data[0].value
    }
    getList()
  })
}

getTypeData()

watch(() => route.query.type, (value, oldValue) => {
  if (value) {
    tabActive.value = value
  }
})

function tabChange () {
  pageNum.value = 1
  getList()
}

function getList () {
  getRListByCategory({nav: tabActive.value, pageNum: '', pageSize: ''}).then(res => {
    total.value = res.total
    tableData.value = res.rows
  })
}

const showDrawer = ref(false)
const form = ref({
  num: 1
})

const selectedType = ref()
const selectedId = ref()
const productDetail = ref({})

function selectedProduct (type, id) {
  selectedType.value = type
  selectedId.value = id
  getRDetail({id}).then(res => {
    res.data.options.forEach(item => {
      if ([0, 1].includes(item.type)) {
        item.value = item.options[0].id
      }
      if (item.type === 2) {
        item.value = 1
      }
    })
    productDetail.value = res.data
    orderComputerPrice()
    showDrawer.value = true
  })
}

function initSubmitData () {
  return {
    id: selectedId.value,
    num: form.value.num,
    computerItems: productDetail.value.options.map(item => {
      if ([0, 1].includes(item.type)) {
        return {
          id: item.id,
          name: item.label,
          valueId: item.value
        }
      }
      return {
        id: item.id,
        name: item.label,
        valueId: item.options[0].id,
        value: item.value.toString()
      }
    })
  }
}

const orderPrice = ref(0)

function orderComputerPrice () {
  orderComputer(initSubmitData()).then(res => {
    orderPrice.value = res.data.totalInnerPrice
  })
}

function submit () {
  const data = initSubmitData()
  if (selectedType.value === 1) {
    shoppingAdd(data).then(res => {
      ElMessageBox.confirm(
          '添加到购物车成功',
          {
            confirmButtonText: '去提交',
            cancelButtonText: '关闭',
            type: 'success'
          }
      ).then(() => {
        router.push('/computingResource/shoppingCart')
      }).catch(() => {
      })
    })
  }

  if (selectedType.value === 2) {
    orderBuy(data).then(res => {
      router.push({
        path: '/computingResource/confirmOrder',
        query: {id: res.data}
      })
    })
  }
}
</script>

<style scoped lang="scss">
.app-container {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

.breadcrumb {
  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;
    }
  }
}

.top-banner-list {
  margin-top: 24px;

  .banner-item {
    width: 360px;
    height: 144px;
    background: linear-gradient(180deg, #DEEBFF 0%, rgba(222, 235, 255, 0) 100%), #FFFFFF;
    box-shadow: 0px 9px 28px 8px rgba(46, 119, 227, 0.02), 0px 6px 16px 0px rgba(46, 119, 227, 0.04), 0px 3px 6px -4px rgba(46, 119, 227, 0.06);
    border-radius: 0px 0px 0px 0px;
    border: 2px solid #FFFFFF;

    &:nth-child(2) {
      margin: 0 24px;
    }

    img {
      margin-right: 24px;
      width: 96px;
      height: 96px;
      object-fit: contain;
    }

    h3 {
      margin: 0 0 6px;
      font-weight: bold;
      font-size: 16px;
      color: #303233;
    }

    p {
      margin: 0;
      font-weight: 400;
      font-size: 14px;
      color: #626566;
      line-height: 22px;
    }
  }
}

.info-content {
  width: 1280px;
  margin: 40px auto 0 auto;
  position: relative;

  .switch-display {
    position: absolute;
    cursor: pointer;
    right: 0;
    top: 12px;
    z-index: 99;
    font-size: 24px;
  }

  .el-tabs {
    --el-border-color-light: #2E77E3;
    --el-tabs-header-height: 48px;

    :deep(.el-tabs__content) {
      overflow: visible
    }

    :deep(.el-tabs__active-bar) {
      display: none;
    }

    :deep(.el-tabs__item) {
      --el-font-size-base: 16px;
      padding-left: 24px !important;
      padding-right: 24px !important;

      &.is-active {
        color: #ffffff;
        background-color: #2E77E3;
      }
    }
  }

  .version-2 {
    height: 490px;
    margin: 0 -12px;
    overflow-x: auto;

    .el-row {
      margin: 0 !important;
    }
  }
}

.el-table {
  font-size: 14px;

  :deep(.el-table__header-wrapper th) {
    font-size: 14px;
  }

  .action-button {
    padding-left: 8px;
    padding-right: 8px;
    height: 24px;
  }
}

.product-card {
  margin-bottom: 24px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.08);
  border-radius: 0px 0px 0px 0px;

  &:hover {
    border: 1px solid #2E77E3;
    box-sizing: border-box;
  }

  .top-info {
    padding: 18px 20px 12px 20px;
    background: linear-gradient(153deg, rgba(255, 175, 175, 0) 0%, #FDE7E7 100%), linear-gradient(145deg, #EDFCFF 0%, rgba(97, 227, 255, 0) 100%), #F0F6FF;

    .title {
      font-weight: bold;
      font-size: 20px;
      color: #303233;
      margin-bottom: 6px;
    }

    .tag {
      margin-bottom: 8px;

      .el-tag {
        margin-right: 5px;
      }
    }

    .desc {
      font-weight: 400;
      font-size: 14px;
      color: #949899;
    }
  }

  .bottom-info {
    padding: 12px 24px 20px 24px;

    .el-divider {
      margin: 12px 0;
    }
  }

  .el-col {
    &:nth-child(even) {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
  }

  .parameter-item:first-child {
    margin-bottom: 15px;
  }

  .label {
    font-weight: 500;
    font-size: 14px;
    color: #626566;
    margin-bottom: 2px;
  }

  .value {
    font-weight: bold;
    font-size: 16px;
    color: #303233;
  }

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

  .month-expenses {
    font-weight: 400;
    font-size: 14px;
    color: #949899;
  }

  .footer-action {
    .el-button {
      flex: 1
    }
  }
}

.shopping-trolley {
  cursor: pointer;
  color: #FFFFFF;
  position: absolute;
  right: 20px;
  bottom: 270px;
  padding: 16px 8px;
  background-color: #2E77E3;
  font-size: 16px;
  text-align: center;
}

:deep(.drawer) {
  .el-drawer__header {
    margin: 0;
    padding-bottom: 20px;
  }

  .el-drawer__title {
    font-weight: bold;
    font-size: 32px;
    color: #303233;
  }

  .el-drawer__body {
    padding-top: 12px;
    background-color: #F7F8F9;
  }
}

.info-block {
  background-color: #ffffff;
  padding: 4px 0;
  margin-bottom: 14px;
}

.info-item {
  padding: 12px 48px;

  .label {
    font-weight: 400;
    font-size: 14px;
    color: #626566;
  }

  .value {
    font-weight: bold;
    font-size: 14px;
    color: #303233;
  }
}

.drawer-footer {
  padding: 20px 48px 10px 48px;

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