<template>
  <div class="create-instance-page">
    <main class="create-main">
      <div class="breadcrumb-row">
        <div class="breadcrumb">
          <span class="link" @click="$router.push('/homePage/computeMarket')"> <i class="iconfont icon-icon_arrow_left"></i> 返回算力市场</span>
        </div>
      </div>

      <section class="content-card">
        <div class="card-header">
          <h2>计费方式:</h2>
          <button type="button" class="link-btn">计费规则</button>
        </div>
        <div class="option-list">
          <button
            v-for="option in billingOptions"
            :key="option.value"
            type="button"
            class="option-btn"
            :class="{ active: billingType === option.value }"
            @click="billingType = option.value"
          >
            {{ option.label }}
          </button>
        </div>
        <p class="card-tip">创建完主机后仍然可以转换计费方式。如选择按量计费，价格发生变动以实例开机时的价格为准</p>
      </section>

      <section class="content-card">
        <div class="card-header">
          <h2>选择主机:</h2>
        </div>

        <div class="host-table-wrap">
          <table class="host-table">
            <thead>
              <tr>
                <th></th>
                <th>主机ID</th>
                <th>算力型号/显存</th>
                <th>空闲GPU</th>
                <th>每GPU分配</th>
                <th>CPU型号</th>
                <th>硬盘</th>
                <th>驱动/CUDA</th>
                <th>价格(单卡)</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="host in hosts"
                :key="host.id"
                :class="{ selected: selectedHostId === host.id }"
                @click="selectedHostId = host.id"
              >
                <td>
                  <span class="radio-dot"></span>
                </td>
                <td class="host-name">{{ host.name }}</td>
                <td>
                  <strong class="gpu-name">{{ host.gpu }}</strong>
                  <span class="gpu-memory"> {{ host.memory }}</span>
                </td>
                <td><strong class="free-count">{{ host.freeGpu }}</strong></td>
                <td>{{ host.allocation }}</td>
                <td class="muted small">{{ host.cpu }}</td>
                <td class="muted small">{{ host.disk }}</td>
                <td class="muted small">{{ host.driver }}</td>
                <td>
                  <strong class="price">¥{{ host.price }}/时</strong>
                  <span class="origin-price">¥{{ host.originalPrice }}/时</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="field-block">
          <h3>GPU数量:</h3>
          <div class="option-list option-list--compact">
            <button
              v-for="count in gpuCounts"
              :key="count"
              type="button"
              class="option-btn gpu-count-btn"
              :class="{ active: gpuCount === count }"
              @click="gpuCount = count"
            >
              {{ count }}
            </button>
          </div>
        </div>

        <div class="disk-row">
          <span>数据盘: 免费50GB</span>
          <label>
            <input v-model="needExpandDisk" type="checkbox">
            <span>需要扩容</span>
          </label>
          <div v-if="needExpandDisk" class="disk-input">
            <input v-model.number="expandDiskSize" type="number" min="50">
            <span>GB</span>
          </div>
        </div>
      </section>

      <section class="spec-bar">
        <strong>实例规格:</strong>
        <span>{{ specSummary }}</span>
      </section>

      <section class="content-card">
        <div class="card-header">
          <h2>镜像:</h2>
          <button type="button" class="link-btn">没有我要的环境?</button>
        </div>
        <div class="option-list">
          <button
            v-for="option in imageTypes"
            :key="option.value"
            type="button"
            class="option-btn image-option"
            :class="{ active: imageType === option.value }"
            @click="imageType = option.value"
          >
            {{ option.label }}
            <em v-if="option.hot">HOT</em>
          </button>
        </div>
        <p class="card-tip">基础镜像包含常用基本软件，如：深度学习框架、Miniconda等。如需其他软件可创建后安装</p>
        <div class="select-wrap">
          <select v-model="selectedEnv">
            <option value="">请选择框架名称/框架版本/Python版本/CUDA版本</option>
            <option value="pytorch">PyTorch 2.1.0 / Python 3.10 / CUDA 12.1</option>
            <option value="tensorflow">TensorFlow 2.14.0 / Python 3.10 / CUDA 12.1</option>
            <option value="paddle">PaddlePaddle 2.5.1 / Python 3.10 / CUDA 11.8</option>
          </select>
        </div>
      </section>

      <section class="content-card">
        <div class="card-header">
          <h2>优惠券:</h2>
        </div>
        <div class="select-wrap">
          <select v-model="coupon">
            <option value="">请选择</option>
            <option value="10">新人专享满100减10元</option>
            <option value="50">充值满500减50元</option>
            <option value="100">VIP用户满1000减100元</option>
          </select>
        </div>
      </section>

      <aside class="submit-bar">
        <div class="submit-bar__inner">
          <div class="submit-costs">
            <span>日常费用: ¥0.00/日</span>
            <span>
              配置费用
              <strong>¥{{ estimatedPrice }}/时</strong>
            </span>
            <button type="button" class="detail-btn">费用明细</button>
          </div>
          <div class="submit-actions">
            <!-- <span class="balance">账户余额 ¥0.00 <em>余额不足去充值</em></span> -->
            <button type="button" class="cancel-btn" @click="$router.push('/homePage/computeMarket')">取消</button>
            <button type="button" class="create-btn" @click="submitCreate">
              <i class="iconfont icon-icon_guanji-kaiji"></i>
              创建并开机
            </button>
          </div>
        </div>
      </aside>
    </main>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'ComputeMarketCreateInstance',
  data() {
    return {
      billingType: 'hourly',
      selectedHostId: 'D42',
      gpuCount: 1,
      needExpandDisk: false,
      expandDiskSize: 100,
      imageType: 'basic',
      selectedEnv: '',
      coupon: '',
      billingOptions: [
        { label: '按量计费', value: 'hourly' },
        { label: '包日', value: 'daily' },
        { label: '包周', value: 'weekly' },
        { label: '包月', value: 'monthly' },
        { label: '包年', value: 'yearly' }
      ],
      gpuCounts: [1, 2, 3, 4, 5, 6, 7, 8],
      imageTypes: [
        { label: '基础镜像', value: 'basic' },
        { label: '社区镜像', value: 'community', hot: true },
        { label: '我的镜像', value: 'custom' }
      ],
      hosts: [
        {
          id: 'D42',
          name: 'D42机',
          gpu: 'RTX PRO 6000',
          memory: '96GB',
          freeGpu: '1 / 8',
          allocation: 'CPU: 25核 内存: 120GB',
          cpu: 'Xeon(R) Platinum 8470Q',
          disk: '数据盘: 50GB 可扩容: 1622GB',
          driver: '驱动: 595.58.03 CUDA: 13.2',
          price: 5.98,
          originalPrice: 7.97
        }
      ]
    }
  },
  computed: {
    ...mapState({
      loginStateVuex: state => state.login.loginState
    }),
    loginState() {
      const userId = sessionStorage.getItem('userId')
      return this.loginStateVuex || (userId !== null && userId !== 'null' && userId !== '')
    },
    selectedHost() {
      return this.hosts.find(host => host.id === this.selectedHostId) || this.hosts[0]
    },
    dataDiskText() {
      return this.needExpandDisk ? `数据盘：${this.expandDiskSize}GB SSD` : '数据盘：免费50GB SSD'
    },
    specSummary() {
      const host = this.selectedHost
      return `GPU型号：${host.gpu} *${this.gpuCount}卡 | CPU：25核心 | 内存：120GB | 系统盘：30GB | ${this.dataDiskText}`
    },
    estimatedPrice() {
      return (Number(this.selectedHost.price) * this.gpuCount).toFixed(2)
    }
  },
  created() {
    const gpu = this.$route.query.gpu
    if (gpu) {
      this.hosts[0].gpu = String(gpu).split('/')[0].trim()
      this.hosts[0].memory = (String(gpu).split('/')[1] || '96 GB').trim()
    }
  },
  methods: {
    submitCreate() {
      if (!this.loginState) {
        this.$message.warning('请先登录后再创建实例')
        window.dispatchEvent(new Event('kboss-open-login-dialog'))
        return
      }

      if (!this.selectedEnv) {
        this.$message.warning('请先选择镜像环境')
        return
      }
      this.$message.success('实例创建请求已提交')
      this.$router.push('/homePage/computeMarket')
    }
  }
}
</script>

<style scoped lang="scss">
.create-instance-page {
  min-height: 100vh;
  padding: 82px 0 88px;
  background:
    radial-gradient(circle at top left, rgba(30, 111, 255, 0.12), transparent 30%),
    linear-gradient(180deg, #f7fbff 0%, #f5f7fb 100%);
}

.create-main {
  width: min(1160px, calc(100% - 48px));
  margin: 0 auto;
}

.breadcrumb-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #98a2b3;
  font-size: 14px;

  .link {
    color: #1e6fff;
    cursor: pointer;
    font-weight: 600;
  }

  strong {
    color: #344054;
  }
}

.content-card,
.spec-bar,
.submit-bar {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(219, 234, 254, 0.78);
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(31, 72, 135, 0.08);
}
aside{
  margin: 0;
}
.content-card {
  padding: 24px;
  margin-bottom: 18px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;

  h2 {
    margin: 0;
    color: #1f2937;
    font-size: 16px;
  }
}

.link-btn {
  color: #1e6fff;
  font-size: 14px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.option-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.option-list--compact {
  margin-bottom: 0;
}

.option-btn {
  min-width: 88px;
  height: 40px;
  padding: 0 18px;
  color: #5f6b7a;
  font-size: 14px;
  font-weight: 600;
  background: #fff;
  border: 2px solid #e3e8f0;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;

  &.active,
  &:hover {
    color: #1e6fff;
    border-color: #1e6fff;
    background: #eef5ff;
  }
}

.image-option em {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 2px 7px;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  background: #ef4444;
  border-radius: 999px;
}

.card-tip {
  margin: 0;
  color: #8a94a6;
  font-size: 13px;
  line-height: 1.7;
}

.host-table-wrap {
  overflow-x: auto;
  margin-bottom: 22px;
  border: 1px solid #edf1f7;
  border-radius: 16px;
}

.host-table {
  width: 100%;
  min-width: 1060px;
  border-collapse: collapse;
  font-size: 13px;

  th {
    padding: 14px 12px;
    color: #667085;
    text-align: left;
    font-weight: 700;
    background: #f8fafc;
  }

  td {
    padding: 16px 12px;
    color: #5f6b7a;
    border-top: 1px solid #edf1f7;
  }

  tr {
    cursor: pointer;
  }

  tr.selected {
    background: #f2f7ff;
  }
}

.radio-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #1e6fff;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px #fff;
  background: #1e6fff;
}

.host-name {
  color: #1f2937;
  font-weight: 700;
}

.gpu-name {
  color: #1e6fff;
}

.gpu-memory,
.muted {
  color: #8a94a6;
}

.small {
  font-size: 12px;
}

.free-count {
  color: #10b981;
}

.price {
  display: block;
  color: #ef4444;
  font-weight: 800;
}

.origin-price {
  display: block;
  color: #98a2b3;
  font-size: 12px;
  text-decoration: line-through;
}

.field-block {
  margin-bottom: 18px;

  h3 {
    margin: 0 0 12px;
    color: #1f2937;
    font-size: 16px;
  }
}

.gpu-count-btn {
  min-width: 44px;
  padding: 0 14px;
}

.disk-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  color: #5f6b7a;
  font-size: 14px;

  label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }

  input[type='checkbox'] {
    width: 15px;
    height: 15px;
    accent-color: #1e6fff;
  }
}

.disk-input {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  input {
    width: 92px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #dfe5ef;
    border-radius: 10px;
    outline: none;
  }
}

.spec-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 18px 20px;
  margin-bottom: 18px;
  background: #eef5ff;

  strong {
    flex-shrink: 0;
    color: #1e6fff;
    font-size: 16px;
  }

  span {
    color: #344054;
    font-size: 14px;
    line-height: 1.7;
  }
}

.select-wrap {
  position: relative;

  select {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    color: #667085;
    background: #fff;
    border: 1px solid #dfe5ef;
    border-radius: 12px;
    outline: none;
  }
}

.submit-bar {
  position: fixed;
  right: 0;
  bottom: 0 !important;
  left: 0;
  z-index: 30;
  width: 100%;
  padding: 0;
  background: rgba(255, 255, 255, 0.98);
  border: none;
  border-top: 1px solid rgba(223, 229, 239, 0.95);
  border-radius: 0;
  box-shadow: 0 -10px 30px rgba(31, 72, 135, 0.08);
  backdrop-filter: blur(10px);
}

.submit-bar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  width: min(1600px, calc(100% - 48px));
  min-height: 86px;
  margin: 0 auto;
  padding: 18px 0;
}

.submit-costs,
.submit-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.submit-costs span,
.balance {
  color: #667085;
  font-size: 14px;
}

.submit-costs strong {
  color: #ef4444;
  font-size: 20px;
  font-weight: 800;
}

.detail-btn {
  color: #1e6fff;
  font-size: 13px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.balance em {
  margin-left: 6px;
  color: #ef4444;
  font-size: 12px;
  font-style: normal;
}

.cancel-btn,
.create-btn {
  height: 48px;
  padding: 0 26px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-btn {
  color: #667085;
  background: #fff;
  border: 1px solid #dfe5ef;

  &:hover {
    color: #1e6fff;
    border-color: #1e6fff;
  }
}

.create-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  background: linear-gradient(135deg, #1e6fff, #43a3ff);
  border: none;
  box-shadow: 0 10px 20px rgba(30, 111, 255, 0.24);

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(30, 111, 255, 0.3);
  }

  i {
    font-size: 15px;
  }
}

@media (max-width: 768px) {
  .create-main {
    width: calc(100% - 24px);
  }

  .content-card {
    padding: 18px;
  }

  .card-header,
  .spec-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .submit-bar__inner {
    width: calc(100% - 24px);
    min-height: auto;
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 16px 0;
  }

  .submit-costs,
  .submit-actions {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
  }

  .create-btn {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .create-instance-page {
    padding-top: 16px;
  }
}
</style>
