<template>
  <section class="json-risk-editor-shell panel digital-worker-detail-shell">
    <header class="json-risk-editor-head asset-detail-topbar list-toolbar">
      <div class="json-risk-editor-title asset-detail-topbar-main filter-set">
        <div class="json-risk-head-copy">
          <div class="json-risk-head-title-row">
            <h2>{{ selectedSkill.name }}</h2>
          </div>
          <p class="json-risk-head-subtitle">
            {{ selectedSkill.summary || '后台自动执行的数字员工技能。' }}
          </p>
          <div class="json-risk-head-meta">
            <span>技能编号：{{ selectedSkill.code || '-' }}</span>
            <span>执行计划：{{ digitalEmployee.scheduleLabel || selectedSkill.scope || '-' }}</span>
            <span>最近更新：{{ selectedSkill.updatedAt || '-' }}</span>
          </div>
        </div>
      </div>
    </header>

    <div class="json-risk-editor-body">
      <section class="json-risk-main-stage">
        <article class="detail-card panel json-risk-summary-card">
          <div class="card-head">
            <div>
              <h3>基本信息</h3>
              <p>展示技能编号、维护人、执行计划和当前版本。</p>
            </div>
          </div>
          <div class="json-risk-meta-grid">
            <div
              v-for="row in basicRows"
              :key="row.label"
              class="json-risk-meta-item"
            >
              <span class="json-risk-meta-label">{{ row.label }}</span>
              <span class="json-risk-meta-value">{{ row.value || '-' }}</span>
            </div>
          </div>
        </article>

        <article class="detail-card panel json-risk-description-card">
          <div class="card-head">
            <div>
              <h3>功能说明</h3>
              <p>面向管理员查看这个技能解决什么问题。</p>
            </div>
          </div>
          <p class="json-risk-description-text">
            {{ digitalEmployee.description || selectedSkill.summary || '暂无功能说明。' }}
          </p>
        </article>

        <article class="detail-card panel json-risk-summary-card digital-worker-source-card">
          <div class="card-head">
            <div>
              <h3>Skills Markdown 源文件</h3>
              <p>管理员可直接修改当前技能源文件内容。</p>
            </div>
            <button
              class="mini-btn primary"
              type="button"
              :disabled="!canEdit || detailBusy"
              @click="emit('save-source')"
            >
              <i class="mdi mdi-content-save-outline"></i>
              <span>{{ actionState === 'save-digital-source' ? '保存中...' : '保存' }}</span>
            </button>
          </div>

          <textarea
            v-model="selectedSkill.markdownContent"
            class="digital-worker-source-editor"
            :readonly="!canEdit || detailBusy"
            spellcheck="false"
            aria-label="Skills Markdown 源文件"
          ></textarea>
        </article>
      </section>
    </div>
  </section>
</template>

<script setup>
import { computed } from 'vue'

defineOptions({
  name: 'AuditDigitalEmployeeDetail'
})

const props = defineProps({
  selectedSkill: { type: Object, required: true },
  canEdit: { type: Boolean, default: false },
  detailBusy: { type: Boolean, default: false },
  actionState: { type: String, default: '' }
})

const emit = defineEmits(['save-source'])

const digitalEmployee = computed(() => props.selectedSkill.digitalEmployee || {})
const basicRows = computed(() => digitalEmployee.value.basicRows || [])
</script>

<style scoped src="../../assets/styles/views/audit-view.css"></style>
<style scoped src="../../assets/styles/views/audit-view-part2.css"></style>
