<template>
  <div class="ding-scheme-page app-container">
    <section class="page-hero">
      <div class="page-hero__main">
        <div class="page-hero__icon">
          <i class="el-icon-s-order"></i>
        </div>
        <div>
          <h1 class="page-hero__title">技术方案申请归档</h1>
          <p class="page-hero__desc">查看钉钉审批通过的技术方案申请，追溯 PLM 推送状态与表单明细。</p>
        </div>
      </div>
      <div class="page-hero__stats">
        <div class="stat-chip">
          <span class="stat-chip__label">当前页</span>
          <span class="stat-chip__value">{{ applicationList.length }}</span>
        </div>
        <div class="stat-chip stat-chip--accent">
          <span class="stat-chip__label">总记录</span>
          <span class="stat-chip__value">{{ total }}</span>
        </div>
        <div class="stat-chip">
          <span class="stat-chip__label">本页已推送</span>
          <span class="stat-chip__value">{{ pageSuccessCount }}</span>
        </div>
      </div>
    </section>

    <el-card shadow="never" class="search-card">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
        label-width="96px"
        class="search-form"
      >
        <el-form-item label="方案申请编号" prop="schemeApplyNo">
          <el-input
            v-model="queryParams.schemeApplyNo"
            placeholder="模糊匹配"
            clearable
            style="width: 180px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="概述名称" prop="overviewName">
          <el-input
            v-model="queryParams.overviewName"
            placeholder="模糊匹配"
            clearable
            style="width: 180px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="填表人" prop="fillerName">
          <el-input
            v-model="queryParams.fillerName"
            placeholder="模糊匹配"
            clearable
            style="width: 140px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="客户全称" prop="customerFullName">
          <el-input
            v-model="queryParams.customerFullName"
            placeholder="模糊匹配"
            clearable
            style="width: 180px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input
            v-model="queryParams.productName"
            placeholder="模糊匹配"
            clearable
            style="width: 160px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="PLM 推送" prop="plmPushStatus">
          <el-select v-model="queryParams.plmPushStatus" placeholder="全部" clearable style="width: 130px">
            <el-option v-for="item in plmStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="审批完成">
          <el-date-picker
            v-model="dateRange"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始"
            end-placeholder="结束"
            :default-time="['00:00:00', '23:59:59']"
            style="width: 360px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-row :gutter="10" class="toolbar-row">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-card shadow="never" class="table-card">
      <el-table
        v-loading="loading"
        :data="applicationList"
        :header-cell-style="headerCellStyle"
        :row-class-name="tableRowClassName"
        stripe
      >
        <el-table-column type="index" label="#" width="52" align="center" />
        <el-table-column label="方案申请编号" min-width="148" show-overflow-tooltip>
          <template slot-scope="scope">
            <span class="scheme-no">{{ scope.row.schemeApplyNo || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="概述名称" min-width="160" show-overflow-tooltip prop="overviewName" />
        <el-table-column label="填表人" width="96" align="center" prop="fillerName" />
        <el-table-column label="客户全称" min-width="160" show-overflow-tooltip prop="customerFullName" />
        <el-table-column label="产品名称" min-width="120" show-overflow-tooltip prop="productName" />
        <el-table-column label="需求日期" width="108" align="center">
          <template slot-scope="scope">
            <span class="time-text">{{ parseTime(scope.row.needDate, '{y}-{m}-{d}') || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审批状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag size="mini" :type="dingStatusTag(scope.row.dingProcessStatus)" effect="plain">
              {{ formatDingStatus(scope.row.dingProcessStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="PLM 推送" width="108" align="center">
          <template slot-scope="scope">
            <el-tag size="mini" :type="plmStatusTag(scope.row.plmPushStatus)" effect="dark">
              {{ formatPlmStatus(scope.row.plmPushStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="审批完成" width="168" align="center">
          <template slot-scope="scope">
            <span class="time-text">{{ parseTime(scope.row.dingInstanceFinishTime, '{y}-{m}-{d} {h}:{i}:{s}') || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="148" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              v-hasPermi="['system:dingSchemeApplication:query']"
              @click="handleDetail(scope.row)"
            >详情</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-upload2"
              :loading="scope.row._pushing"
              :disabled="scope.row.plmPushStatus === 'SUCCESS'"
              @click="handlePushPlm(scope.row)"
            >推送 PLM</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>

    <el-drawer
      :title="detailTitle"
      :visible.sync="detailOpen"
      direction="rtl"
      size="62%"
      :append-to-body="true"
      custom-class="ding-scheme-drawer"
      @closed="resetDetail"
    >
      <div v-loading="detailLoading" class="drawer-body">
        <template v-if="detail">
          <div class="detail-summary">
            <div class="detail-summary__item">
              <span class="detail-summary__label">方案申请编号</span>
              <span class="detail-summary__value scheme-no">{{ detail.schemeApplyNo || '—' }}</span>
            </div>
            <div class="detail-summary__item">
              <span class="detail-summary__label">PLM 推送</span>
              <el-tag size="small" :type="plmStatusTag(detail.plmPushStatus)" effect="dark">
                {{ formatPlmStatus(detail.plmPushStatus) }}
              </el-tag>
            </div>
            <div class="detail-summary__item detail-summary__item--wide">
              <span class="detail-summary__label">推送说明</span>
              <span class="detail-summary__value">{{ detail.plmPushMessage || '—' }}</span>
            </div>
            <el-button
              type="primary"
              size="small"
              icon="el-icon-upload2"
              :loading="pushLoading"
              :disabled="detail.plmPushStatus === 'SUCCESS'"
              @click="handlePushPlm(detail, true)"
            >手动推送 PLM</el-button>
          </div>

          <el-tabs v-model="detailTab" class="detail-tabs">
            <el-tab-pane label="业务概要" name="overview">
              <el-descriptions :column="2" border size="small" class="overview-desc">
                <el-descriptions-item label="概述名称">{{ detail.overviewName || '—' }}</el-descriptions-item>
                <el-descriptions-item label="填表人">{{ detail.fillerName || '—' }}</el-descriptions-item>
                <el-descriptions-item label="填表日期">{{ parseTime(detail.fillDate, '{y}-{m}-{d}') || '—' }}</el-descriptions-item>
                <el-descriptions-item label="需求日期">{{ parseTime(detail.needDate, '{y}-{m}-{d}') || '—' }}</el-descriptions-item>
                <el-descriptions-item label="客户全称">{{ detail.customerFullName || '—' }}</el-descriptions-item>
                <el-descriptions-item label="联系人及电话">{{ detail.contactAndPhone || '—' }}</el-descriptions-item>
                <el-descriptions-item label="项目分类">{{ detail.projectCategory || '—' }}</el-descriptions-item>
                <el-descriptions-item label="产品名称">{{ detail.productName || '—' }}</el-descriptions-item>
                <el-descriptions-item label="方案提交日期">{{ parseTime(detail.schemeSubmitDate, '{y}-{m}-{d}') || '—' }}</el-descriptions-item>
                <el-descriptions-item label="方案已接收">{{ detail.schemeReceived || '—' }}</el-descriptions-item>
                <el-descriptions-item label="审批标题" :span="2">{{ detail.title || '—' }}</el-descriptions-item>
                <el-descriptions-item label="审批结果">{{ detail.instanceResult || '—' }}</el-descriptions-item>
                <el-descriptions-item label="审批状态">
                  <el-tag size="mini" :type="dingStatusTag(detail.dingProcessStatus)" effect="plain">
                    {{ formatDingStatus(detail.dingProcessStatus) }}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="发起部门">{{ detail.originatorDeptName || '—' }}</el-descriptions-item>
                <el-descriptions-item label="流程实例 ID">
                  <code class="mono-text">{{ detail.processInstanceId || '—' }}</code>
                </el-descriptions-item>
                <el-descriptions-item label="创建时间">{{ parseTime(detail.dingInstanceCreateTime, '{y}-{m}-{d} {h}:{i}:{s}') || '—' }}</el-descriptions-item>
                <el-descriptions-item label="完成时间">{{ parseTime(detail.dingInstanceFinishTime, '{y}-{m}-{d} {h}:{i}:{s}') || '—' }}</el-descriptions-item>
                <el-descriptions-item label="PLM 推送时间">{{ parseTime(detail.plmPushTime, '{y}-{m}-{d} {h}:{i}:{s}') || '—' }}</el-descriptions-item>
                <el-descriptions-item label="触发事件">{{ detail.triggerEventType || '—' }}</el-descriptions-item>
              </el-descriptions>
            </el-tab-pane>

            <el-tab-pane :label="'表单字段 (' + formFieldRows.length + ')'" name="form">
              <el-table
                v-if="formFieldRows.length"
                :data="formFieldRows"
                size="small"
                :header-cell-style="headerCellStyle"
                max-height="520"
                stripe
              >
                <el-table-column type="index" label="#" width="48" align="center" />
                <el-table-column label="字段" min-width="200" prop="label" show-overflow-tooltip />
                <el-table-column label="填写内容" min-width="320" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span class="field-value">{{ scope.row.value || '—' }}</span>
                  </template>
                </el-table-column>
              </el-table>
              <el-empty v-else description="暂无表单字段数据" />
            </el-tab-pane>

            <el-tab-pane label="审批任务" name="task">
              <pre v-if="formattedTaskDetail" class="json-block">{{ formattedTaskDetail }}</pre>
              <el-empty v-else description="暂无任务明细" />
            </el-tab-pane>

            <el-tab-pane label="原始 JSON" name="raw">
              <el-tabs type="border-card" class="raw-tabs">
                <el-tab-pane label="wfValuesJson">
                  <div class="raw-toolbar">
                    <el-button size="mini" plain icon="el-icon-document-copy" @click="copyText(formattedWfValues)">复制</el-button>
                  </div>
                  <pre class="json-block">{{ formattedWfValues }}</pre>
                </el-tab-pane>
                <el-tab-pane label="formJson">
                  <div class="raw-toolbar">
                    <el-button size="mini" plain icon="el-icon-document-copy" @click="copyText(formattedFormJson)">复制</el-button>
                  </div>
                  <pre class="json-block">{{ formattedFormJson }}</pre>
                </el-tab-pane>
                <el-tab-pane label="formLabelMap">
                  <div class="raw-toolbar">
                    <el-button size="mini" plain icon="el-icon-document-copy" @click="copyText(formattedFormLabelMap)">复制</el-button>
                  </div>
                  <pre class="json-block">{{ formattedFormLabelMap }}</pre>
                </el-tab-pane>
              </el-tabs>
            </el-tab-pane>
          </el-tabs>
        </template>
        <el-empty v-else-if="!detailLoading" description="暂无详情数据" />
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  listDingSchemeApplication,
  getDingSchemeApplication,
  pushDingSchemePlm
} from '@/api/system/dingSchemeApplication'

const PLM_STATUS_MAP = {
  PENDING: '待推送',
  SUCCESS: '已成功',
  FAIL: '失败',
  SKIP: '跳过'
}

export default {
  name: 'DingSchemeApplication',
  data() {
    return {
      loading: false,
      showSearch: true,
      total: 0,
      applicationList: [],
      dateRange: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        schemeApplyNo: undefined,
        overviewName: undefined,
        fillerName: undefined,
        customerFullName: undefined,
        productName: undefined,
        plmPushStatus: undefined
      },
      plmStatusOptions: [
        { value: 'PENDING', label: '待推送' },
        { value: 'SUCCESS', label: '已成功' },
        { value: 'FAIL', label: '失败' },
        { value: 'SKIP', label: '跳过' }
      ],
      detailOpen: false,
      detailLoading: false,
      pushLoading: false,
      detail: null,
      detailTab: 'overview'
    }
  },
  computed: {
    pageSuccessCount() {
      return this.applicationList.filter(row => row.plmPushStatus === 'SUCCESS').length
    },
    detailTitle() {
      if (!this.detail) return '技术方案申请详情'
      const no = this.detail.schemeApplyNo || ''
      return no ? '申请详情 · ' + no : '技术方案申请详情'
    },
    formFieldRows() {
      return this.buildFormFieldRows(this.detail)
    },
    formattedTaskDetail() {
      return this.formatJsonBlock(this.detail && this.detail.taskDetail)
    },
    formattedWfValues() {
      return this.formatJsonBlock(this.detail && this.detail.wfValuesJson)
    },
    formattedFormJson() {
      return this.formatJsonBlock(this.detail && this.detail.formJson)
    },
    formattedFormLabelMap() {
      return this.formatJsonBlock(this.detail && this.detail.formLabelMap)
    }
  },
  created() {
    this.getList()
  },
  methods: {
    headerCellStyle() {
      return {
        background: '#eef2fb',
        color: '#1e2a4a',
        fontWeight: '600',
        fontSize: '13px'
      }
    },
    tableRowClassName({ rowIndex }) {
      return rowIndex % 2 === 0 ? 'row-even' : 'row-odd'
    },
    formatPlmStatus(status) {
      if (!status) return '—'
      return PLM_STATUS_MAP[status] || status
    },
    plmStatusTag(status) {
      const map = {
        PENDING: 'info',
        SUCCESS: 'success',
        FAIL: 'danger',
        SKIP: 'warning'
      }
      return map[status] || ''
    },
    formatDingStatus(status) {
      if (!status) return '—'
      const map = {
        COMPLETED: '已完成',
        RUNNING: '审批中',
        TERMINATED: '已终止',
        CANCELED: '已撤销'
      }
      return map[status] || status
    },
    dingStatusTag(status) {
      const map = {
        COMPLETED: 'success',
        RUNNING: 'warning',
        TERMINATED: 'danger',
        CANCELED: 'info'
      }
      return map[status] || ''
    },
    buildQueryParams() {
      let params = { ...this.queryParams }
      params = this.addDateRange(params, this.dateRange, 'DingInstanceFinishTime')
      return params
    },
    getList() {
      this.loading = true
      listDingSchemeApplication(this.buildQueryParams())
        .then(response => {
          this.applicationList = (response.rows || []).map(row => ({ ...row, _pushing: false }))
          this.total = Number(response.total) || 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.dateRange = []
      this.resetForm('queryForm')
      this.handleQuery()
    },
    handleDetail(row) {
      if (!row || row.id == null) return
      this.detailOpen = true
      this.detailLoading = true
      this.detailTab = 'overview'
      getDingSchemeApplication(row.id)
        .then(response => {
          this.detail = response.data || null
        })
        .finally(() => {
          this.detailLoading = false
        })
    },
    resetDetail() {
      this.detail = null
      this.detailTab = 'overview'
    },
    handlePushPlm(row, fromDrawer) {
      if (!row || row.id == null) return
      const isSuccess = row.plmPushStatus === 'SUCCESS'
      const title = isSuccess ? '强制重新推送 PLM' : '推送 PLM'
      const message = isSuccess
        ? '该记录已推送成功，是否强制重新推送？'
        : '确认将本条技术方案申请推送到 PLM？'

      this.$confirm(message, title, {
        confirmButtonText: isSuccess ? '强制推送' : '确认推送',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const force = isSuccess
        if (fromDrawer) {
          this.pushLoading = true
        } else {
          this.$set(row, '_pushing', true)
        }
        pushDingSchemePlm(row.id, force)
          .then(response => {
            if (response.code === 200) {
              this.$modal.msgSuccess('推送请求已提交')
              this.getList()
              if (fromDrawer && this.detail && this.detail.id === row.id) {
                return getDingSchemeApplication(row.id).then(res => {
                  this.detail = res.data || this.detail
                })
              }
            } else {
              this.$modal.msgError(response.msg || '推送失败')
            }
          })
          .catch(() => {})
          .finally(() => {
            if (fromDrawer) {
              this.pushLoading = false
            } else {
              this.$set(row, '_pushing', false)
            }
          })
      }).catch(() => {})
    },
    parseJsonSafe(text, fallback) {
      if (!text) return fallback
      try {
        return JSON.parse(text)
      } catch (e) {
        return fallback
      }
    },
    formatJsonBlock(text) {
      if (!text) return '—'
      try {
        return JSON.stringify(JSON.parse(text), null, 2)
      } catch (e) {
        return text
      }
    },
    formatWfCell(cell) {
      if (!cell || typeof cell !== 'object') return ''
      const ext = cell.ext
      if (ext) {
        const names = this.extractInnerContactNames(ext)
        if (names) return names
      }
      const value = cell.value
      if (value == null) return ''
      return String(value).trim()
    },
    extractInnerContactNames(ext) {
      if (!ext) return ''
      try {
        const arr = typeof ext === 'string' ? JSON.parse(ext) : ext
        if (!Array.isArray(arr) || !arr.length) return ''
        const names = []
        arr.forEach(item => {
          if (!item) return
          const name = item.name || item.nick || item.orgUserName
          if (name) names.push(String(name).trim())
        })
        return names.length ? names.join('，') : ''
      } catch (e) {
        return ''
      }
    },
    buildFormFieldRows(detail) {
      if (!detail) return []
      const labelMap = this.parseJsonSafe(detail.formLabelMap, {})
      const wfValues = this.parseJsonSafe(detail.wfValuesJson, {})
      const rows = []
      const seen = {}

      Object.keys(labelMap).forEach(fieldId => {
        const label = labelMap[fieldId]
        if (!label || label === '分栏') return
        const cell = wfValues[fieldId]
        const value = this.formatWfCell(cell)
        if (!value) return
        seen[fieldId] = true
        rows.push({ fieldId: fieldId, label: label, value: value })
      })

      Object.keys(wfValues).forEach(fieldId => {
        if (seen[fieldId]) return
        const value = this.formatWfCell(wfValues[fieldId])
        if (!value) return
        rows.push({ fieldId: fieldId, label: fieldId, value: value })
      })

      return rows
    },
    copyText(text) {
      if (!text || text === '—') {
        this.$modal.msgWarning('暂无可复制内容')
        return
      }
      const textarea = document.createElement('textarea')
      textarea.value = text
      textarea.style.position = 'fixed'
      textarea.style.opacity = '0'
      document.body.appendChild(textarea)
      textarea.select()
      try {
        document.execCommand('copy')
        this.$modal.msgSuccess('已复制到剪贴板')
      } catch (e) {
        this.$modal.msgError('复制失败')
      }
      document.body.removeChild(textarea)
    }
  }
}
</script>

<style lang="scss" scoped>
.ding-scheme-page {
  --ding-blue: #3b6cf5;
  --ding-blue-dark: #2a4fc0;
  --ding-indigo: #1e2a4a;
  --ding-amber: #f5a623;
  --ding-bg: #f5f7fc;
  --ding-border: #d8e0f0;
  background:
    linear-gradient(180deg, rgba(59, 108, 245, 0.05) 0%, transparent 280px),
    var(--ding-bg);
  min-height: calc(100vh - 84px);
}

.page-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  padding: 22px 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--ding-indigo) 0%, #2a3d6e 55%, #354a82 100%);
  box-shadow: 0 8px 24px rgba(30, 42, 74, 0.2);
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    right: -40px;
    top: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 166, 35, 0.22) 0%, transparent 70%);
    pointer-events: none;
  }
}

.page-hero__main {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.page-hero__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(59, 108, 245, 0.22);
  border: 1px solid rgba(91, 140, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a8c4ff;
  font-size: 24px;
  flex-shrink: 0;
}

.page-hero__title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}

.page-hero__desc {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
  max-width: 520px;
}

.page-hero__stats {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.stat-chip {
  min-width: 88px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;

  &--accent .stat-chip__value {
    color: var(--ding-amber);
  }
}

.stat-chip__label {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 4px;
}

.stat-chip__value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.search-card,
.table-card {
  border-radius: 10px;
  border: 1px solid var(--ding-border);
  margin-bottom: 12px;
}

.search-card ::v-deep .el-card__body {
  padding: 16px 16px 4px;
}

.toolbar-row {
  margin-bottom: 8px;
}

.scheme-no {
  font-family: 'Consolas', 'Monaco', monospace;
  font-weight: 600;
  color: var(--ding-blue-dark);
  letter-spacing: 0.02em;
}

.time-text {
  font-size: 12px;
  color: #5a6478;
  font-variant-numeric: tabular-nums;
}

.mono-text {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 12px;
  color: #4a5568;
  word-break: break-all;
}

.field-value {
  white-space: pre-wrap;
  word-break: break-word;
}

.drawer-body {
  padding: 0 4px 24px;
  min-height: 200px;
}

.detail-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, #eef2fb 0%, #f8faff 100%);
  border: 1px solid var(--ding-border);
}

.detail-summary__item {
  display: flex;
  flex-direction: column;
  gap: 4px;

  &--wide {
    flex: 1;
    min-width: 200px;
  }
}

.detail-summary__label {
  font-size: 11px;
  color: #7a8499;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.detail-summary__value {
  font-size: 13px;
  color: var(--ding-indigo);
  word-break: break-word;
}

.detail-tabs ::v-deep .el-tabs__header {
  margin-bottom: 14px;
}

.overview-desc {
  margin-top: 4px;
}

.json-block {
  margin: 0;
  padding: 14px 16px;
  border-radius: 8px;
  background: #1e2433;
  color: #c8d4e8;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 12px;
  line-height: 1.55;
  overflow: auto;
  max-height: 480px;
  white-space: pre-wrap;
  word-break: break-word;
}

.raw-toolbar {
  margin-bottom: 8px;
  text-align: right;
}

.raw-tabs {
  border-radius: 8px;
  overflow: hidden;
}

::v-deep .ding-scheme-drawer .el-drawer__header {
  margin-bottom: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ding-border);
  color: var(--ding-indigo);
  font-weight: 600;
}

::v-deep .el-table .row-even td {
  background: #fafbfd;
}
</style>
