<template>
  <div class="data-entry-page">
    <!-- 快捷入口 -->
    <section class="quick-nav">
      <button type="button" class="quick-nav-item active">
        <el-icon class="quick-nav-icon">
          <Coin />
        </el-icon>
        <span>未来现金流数据导入</span>
      </button>

      <button type="button" class="quick-nav-item">
        <el-icon class="quick-nav-icon">
          <PieChart />
        </el-icon>
        <span>仪表盘数据导入</span>
      </button>

      <button type="button" class="quick-nav-item">
        <el-icon class="quick-nav-icon">
          <TrendCharts />
        </el-icon>
        <span>SHIBOR数据导入</span>
      </button>

      <button type="button" class="quick-nav-item">
        <el-icon class="quick-nav-icon">
          <Histogram />
        </el-icon>
        <span>同业资产负债数据导入</span>
      </button>
    </section>

    <!-- 表单区域 -->
    <section class="form-grid">
      <!-- 同业资产负债数据录入 -->
      <el-card shadow="hover" class="entry-card">
        <template #header>
          <div class="card-header">
            <div class="card-title-wrap">
              <div class="card-icon">
                <el-icon><OfficeBuilding /></el-icon>
              </div>
              <span class="card-title">同业资产负债数据录入</span>
            </div>
          </div>
        </template>

        <el-form
          ref="interbankFormRef"
          :model="interbankForm"
          :rules="interbankRules"
          label-width="150px"
          class="entry-form"
        >
          <el-form-item label="数据日期" prop="date">
            <el-date-picker
              v-model="interbankForm.date"
              type="date"
              placeholder="请选择日期"
              value-format="YYYY-MM-DD"
              style="width: 100%"
            />
          </el-form-item>

          <el-form-item label="同业负债占比" prop="liabilityRatio">
            <el-input v-model="interbankForm.liabilityRatio" placeholder="请输入" />
          </el-form-item>

          <el-form-item label="同业活期存款余额" prop="depositBalance">
            <el-input v-model="interbankForm.depositBalance" placeholder="请输入" />
          </el-form-item>

          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="interbankForm.remark"
              type="textarea"
              :rows="5"
              maxlength="500"
              show-word-limit
              placeholder="请输入备注内容"
            />
          </el-form-item>

          <el-form-item label="说明" prop="description">
            <el-input
              v-model="interbankForm.description"
              type="textarea"
              :rows="5"
              maxlength="500"
              show-word-limit
              placeholder="请输入说明内容"
            />
          </el-form-item>

          <div class="form-footer">
            <el-button type="primary" size="large" class="submit-btn" @click="submitInterbank">
              <el-icon><Promotion /></el-icon>
              提交
            </el-button>
          </div>
        </el-form>
      </el-card>

      <!-- 仪表盘数据录入 -->
      <el-card shadow="hover" class="entry-card">
        <template #header>
          <div class="card-header">
            <div class="card-title-wrap">
              <div class="card-icon">
                <el-icon><PieChart /></el-icon>
              </div>
              <span class="card-title">仪表盘数据录入</span>
            </div>
          </div>
        </template>

        <el-form
          ref="dashboardFormRef"
          :model="dashboardForm"
          :rules="dashboardRules"
          label-width="150px"
          class="entry-form"
        >
          <el-form-item label="流动性比例" prop="liquidityRatio">
            <el-input v-model="dashboardForm.liquidityRatio" placeholder="请输入" />
          </el-form-item>

          <el-form-item label="流动性覆盖率" prop="coverageRatio">
            <el-input v-model="dashboardForm.coverageRatio" placeholder="请输入" />
          </el-form-item>

          <el-form-item label="净稳定资金比例" prop="stableCapitalRatio">
            <el-input v-model="dashboardForm.stableCapitalRatio" placeholder="请输入" />
          </el-form-item>

          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="dashboardForm.remark"
              type="textarea"
              :rows="5"
              maxlength="500"
              show-word-limit
              placeholder="请输入备注内容"
            />
          </el-form-item>

          <el-form-item label="说明" prop="description">
            <el-input
              v-model="dashboardForm.description"
              type="textarea"
              :rows="5"
              maxlength="500"
              show-word-limit
              placeholder="请输入说明内容"
            />
          </el-form-item>

          <div class="form-footer">
            <el-button type="primary" size="large" class="submit-btn" @click="submitDashboard">
              <el-icon><Promotion /></el-icon>
              提交
            </el-button>
          </div>
        </el-form>
      </el-card>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import {
  Promotion,
  OfficeBuilding,
  PieChart,
  Histogram,
  TrendCharts,
  Coin
} from '@element-plus/icons-vue'

interface InterbankForm {
  date: string
  liabilityRatio: string
  depositBalance: string
  remark: string
  description: string
}

interface DashboardForm {
  liquidityRatio: string
  coverageRatio: string
  stableCapitalRatio: string
  remark: string
  description: string
}

const interbankFormRef = ref<FormInstance>()
const dashboardFormRef = ref<FormInstance>()

const interbankForm = ref<InterbankForm>({
  date: '',
  liabilityRatio: '',
  depositBalance: '',
  remark: '',
  description: ''
})

const dashboardForm = ref<DashboardForm>({
  liquidityRatio: '',
  coverageRatio: '',
  stableCapitalRatio: '',
  remark: '',
  description: ''
})

const interbankRules: FormRules<InterbankForm> = {
  date: [{ required: true, message: '请选择数据日期', trigger: 'change' }],
  liabilityRatio: [{ required: true, message: '请输入同业负债占比', trigger: 'blur' }],
  depositBalance: [{ required: true, message: '请输入同业活期存款余额', trigger: 'blur' }]
}

const dashboardRules: FormRules<DashboardForm> = {
  liquidityRatio: [{ required: true, message: '请输入流动性比例', trigger: 'blur' }],
  coverageRatio: [{ required: true, message: '请输入流动性覆盖率', trigger: 'blur' }],
  stableCapitalRatio: [{ required: true, message: '请输入净稳定资金比例', trigger: 'blur' }]
}

async function submitInterbank() {
  if (!interbankFormRef.value) return

  await interbankFormRef.value.validate((valid) => {
    if (!valid) return
    console.log('同业资产负债数据提交：', interbankForm.value)
    ElMessage.success('同业资产负债数据提交成功')
  })
}

async function submitDashboard() {
  if (!dashboardFormRef.value) return

  await dashboardFormRef.value.validate((valid) => {
    if (!valid) return
    console.log('仪表盘数据提交：', dashboardForm.value)
    ElMessage.success('仪表盘数据提交成功')
  })
}
</script>

<style scoped>
.data-entry-page {
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(circle at top right, rgba(64, 158, 255, 0.08), transparent 22%),
    linear-gradient(180deg, #f5f7fb 0%, #eef3fb 100%);
  box-sizing: border-box;
}

.hero-section {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  border-radius: 24px;
  background: linear-gradient(135deg, #ffffff 0%, #f5f8ff 100%);
  box-shadow: 0 10px 30px rgba(15, 35, 95, 0.06);
  margin-bottom: 20px;
}

.hero-left {
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 1;
}

.hero-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2f63ff 0%, #5a8cff 100%);
  color: #fff;
  font-size: 28px;
  box-shadow: 0 12px 24px rgba(47, 99, 255, 0.28);
}

.page-title {
  margin: 0 0 8px;
  font-size: 34px;
  font-weight: 700;
  color: #1f2a44;
}

.page-subtitle {
  margin: 0;
  font-size: 15px;
  color: #7b88a1;
}

.hero-decoration {
  position: absolute;
  right: -50px;
  top: -50px;
  width: 280px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(64, 158, 255, 0.15), transparent 65%);
}

.quick-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 18px;
  margin-bottom: 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(15, 35, 95, 0.06);
}

.quick-nav-item {
  height: 64px;
  border-radius: 16px;
  border: 1px solid #e7edf7;
  background: #fff;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
  color: #334155;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
}

.quick-nav-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(47, 99, 255, 0.12);
}

.quick-nav-item.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #2f63ff 0%, #3d7eff 100%);
  box-shadow: 0 12px 24px rgba(47, 99, 255, 0.24);
}

.quick-nav-icon {
  font-size: 18px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.entry-card {
  border: none;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(15, 35, 95, 0.06);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.card-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e9f1ff 0%, #dfeaff 100%);
  color: #2f63ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.card-title {
  font-size: 18px;
  font-weight: 700;
  color: #1f2a44;
}

.entry-form {
  padding-top: 8px;
}

:deep(.el-form-item__label) {
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
}

:deep(.el-input__wrapper),
:deep(.el-textarea__inner) {
  border-radius: 12px;
  box-shadow: 0 0 0 1px #d5ddea inset;
}

:deep(.el-input__wrapper:hover),
:deep(.el-textarea__inner:hover) {
  box-shadow: 0 0 0 1px #b8c4d8 inset;
}

:deep(.el-input__wrapper.is-focus),
:deep(.el-textarea__inner:focus) {
  box-shadow: 0 0 0 1px #2f63ff inset;
}

.form-footer {
  display: flex;
  justify-content: center;
  margin-top: 8px;
  padding-top: 10px;
}

.submit-btn {
  min-width: 180px;
  height: 46px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(135deg, #2f63ff 0%, #3d7eff 100%);
  border: none;
  box-shadow: 0 12px 20px rgba(47, 99, 255, 0.18);
}

.submit-btn:hover {
  opacity: 0.95;
}

@media (max-width: 1200px) {
  .quick-nav {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (max-width: 768px) {
  .data-entry-page {
    padding: 16px;
  }

  .hero-section {
    padding: 22px 18px;
  }

  .page-title {
    font-size: 26px;
  }

  .quick-nav {
    grid-template-columns: 1fr;
  }

  .quick-nav-item {
    justify-content: flex-start;
    padding: 0 18px;
  }

  :deep(.el-form-item) {
    margin-bottom: 20px;
  }

  :deep(.el-form-item__label) {
    width: 100% !important;
    margin-bottom: 8px;
    text-align: left;
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;
  }
}
</style>
