<template>
  <div class="voucher-container">
    <div class="form-card">
      <div class="form-header">
        <h2 class="form-title">算力券信息</h2>
        <div class="form-subtitle">请填写算力券的详细信息</div>
      </div>

      <el-form :model="voucherData" class="voucher-form">
        <div class="form-grid">
          <div class="form-group">
            <label class="form-label">发行方名称</label>
            <el-input
              v-model="voucherData.issuer_name"
              placeholder="请输入发行方名称"
              size="small"
              class="form-input"
            ></el-input>
          </div>

          <div class="form-group">
            <label class="form-label">发行方 orgid</label>
            <el-input
              v-model="voucherData.issuer_orgid"
              placeholder="请输入发行方 orgid"
              size="small"
              class="form-input"
            ></el-input>
          </div>

          <div class="form-group">
            <label class="form-label">接收方名称</label>
            <el-input
              v-model="voucherData.receiver_name"
              placeholder="请输入接收方名称"
              size="small"
              class="form-input"
            ></el-input>
          </div>

          <div class="form-group">
            <label class="form-label">接收方 orgid</label>
            <el-input
              v-model="voucherData.receiver_orgid"
              placeholder="请输入接收方 orgid"
              size="small"
              class="form-input"
            ></el-input>
          </div>

          <div class="form-group">
            <label class="form-label">承接方拿到算力券的时间</label>
            <el-date-picker
              v-model="voucherData.obtain_time"
              type="datetime"
              placeholder="选择日期时间"
              size="small"
              class="form-input"
            ></el-date-picker>
          </div>

          <div class="form-group">
            <label class="form-label">面额</label>
            <el-input
              v-model="voucherData.denomination"
              placeholder="请输入面额"
              size="small"
              class="form-input"
            >
              <template slot="append">元</template>
            </el-input>
          </div>

          <div class="form-group">
            <label class="form-label">余额</label>
            <el-input
              v-model="voucherData.balance"
              placeholder="请输入余额"
              size="small"
              class="form-input"
            >
              <template slot="append">元</template>
            </el-input>
          </div>

          <div class="form-group">
            <label class="form-label">地域</label>
            <el-input
              v-model="voucherData.region"
              placeholder="请输入地域"
              size="small"
              class="form-input"
            ></el-input>
          </div>

          <div class="form-group">
            <label class="form-label">可用区</label>
            <el-input
              v-model="voucherData.zone"
              placeholder="请输入可用区"
              size="small"
              class="form-input"
            ></el-input>
          </div>

          <div class="form-group">
            <label class="form-label">使用范围</label>
            <el-select
              v-model="voucherData.use_scope"
              placeholder="请选择使用范围"
              size="small"
              class="form-input"
            >
              <el-option label="全部服务" value="all"></el-option>
              <el-option label="计算服务" value="compute"></el-option>
              <el-option label="存储服务" value="storage"></el-option>
              <el-option label="网络服务" value="network"></el-option>
            </el-select>
          </div>

          <div class="form-group">
            <label class="form-label">状态</label>
            <el-select
              v-model="voucherData.status"
              placeholder="请选择状态"
              size="small"
              class="form-input"
            >
              <el-option label="未使用" value="unused"></el-option>
              <el-option label="已使用" value="used"></el-option>
              <el-option label="已过期" value="expired"></el-option>
              <el-option label="已冻结" value="frozen"></el-option>
            </el-select>
          </div>

          <div class="form-group">
            <label class="form-label">发放给客户的时间</label>
            <el-date-picker
              v-model="voucherData.distribute"
              type="datetime"
              placeholder="选择日期时间"
              size="small"
              class="form-input"
            ></el-date-picker>
          </div>

          <div class="form-group">
            <label class="form-label">生效时间</label>
            <el-date-picker
              v-model="voucherData.start_time"
              type="datetime"
              placeholder="选择日期时间"
              size="small"
              class="form-input"
            ></el-date-picker>
          </div>

          <div class="form-group">
            <label class="form-label">失效时间</label>
            <el-date-picker
              v-model="voucherData.end_time"
              type="datetime"
              placeholder="选择日期时间"
              size="small"
              class="form-input"
            ></el-date-picker>
          </div>
        </div>

        <div class="form-actions">
          <el-button
            type="primary"
            @click="onSubmit"
            class="submit-btn"
          >
            <i class="el-icon-check"></i>
            添加算力券
          </el-button>
          <el-button
            @click="onReset"
            class="reset-btn"
          >
            <i class="el-icon-refresh"></i>
            重置
          </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "voucher",
  data() {
    return {
      voucherData: {
        issuer_name: "",
        issuer_orgid: "",
        receiver_name: "",
        receiver_orgid: "",
        obtain_time: "",
        denomination: "",
        balance: "",
        region: "",
        zone: "",
        use_scope: "",
        status: "",
        distribute: "",
        record: "",
        start_time: "",
        end_time: ""
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!', this.voucherData);
      // 这里可以添加表单验证和提交逻辑
    },
    onReset() {
      this.voucherData = {
        issuer_name: "",
        issuer_orgid: "",
        receiver_name: "",
        receiver_orgid: "",
        obtain_time: "",
        denomination: "",
        balance: "",
        region: "",
        zone: "",
        use_scope: "",
        status: "",
        distribute: "",
        record: "",
        start_time: "",
        end_time: ""
      }
    }
  }
}
</script>

<style scoped lang="scss">
.voucher-container {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
  min-height: 100vh;
}

.form-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
}

.form-header {
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  color: white;
  padding: 20px 24px;

  .form-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
  }

  .form-subtitle {
    margin-top: 4px;
    opacity: 0.9;
    font-size: 14px;
  }
}

.voucher-form {
  padding: 24px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.form-group {
  display: flex;
  flex-direction: column;

  .form-label {
    font-weight: 600;
    color: #606266;
    margin-bottom: 8px;
    font-size: 14px;
  }

  .form-input {
    width: 100%;

    ::v-deep .el-input__inner {
      border-radius: 4px;
      transition: all 0.3s;

      &:focus {
        border-color: #409eff;
        box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
      }
    }

    ::v-deep .el-select {
      width: 100%;
    }

    ::v-deep .el-date-editor {
      width: 100%;
    }
  }
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid #e4e7ed;

  .submit-btn {
    background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
    border: none;
    border-radius: 4px;
    padding: 10px 24px;
    font-weight: 500;
    transition: all 0.3s;

    &:hover {
      background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
    }

    &:active {
      transform: translateY(0);
    }
  }

  .reset-btn {
    border-radius: 4px;
    padding: 10px 24px;
    font-weight: 500;
    transition: all 0.3s;

    &:hover {
      color: #409eff;
      border-color: #409eff;
      transform: translateY(-2px);
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .voucher-container {
    padding: 12px;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .voucher-form {
    padding: 16px;
  }

  .form-header {
    padding: 16px 20px;

    .form-title {
      font-size: 18px;
    }
  }

  .form-actions {
    flex-direction: column;

    .el-button {
      width: 100%;
    }
  }
}

// 加载状态和动画
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  z-index: 10;
}

// 成功提示样式
.success-message {
  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
  border: 1px solid #91d5ff;
  color: #409eff;
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;

  i {
    margin-right: 8px;
    font-size: 16px;
  }
}
</style>
