<template>
  <ConfirmDialog
    :open="open"
    :badge="badge"
    badge-tone="info"
    size="approval"
    actions-align="end"
    :title="title"
    :description="description"
    cancel-text="返回核对"
    :confirm-text="confirmText"
    :busy-text="busyText"
    confirm-tone="primary"
    confirm-icon="mdi mdi-check-circle-outline"
    :confirm-disabled="confirmDisabled"
    :busy="busy"
    @close="emit('close')"
    @confirm="emit('confirm')"
  >
    <section v-if="riskConfirmRequired" class="approval-risk-confirm-panel" aria-label="风险说明确认">
      <div class="approval-risk-confirm-head">
        <span><i class="mdi mdi-alert-decagram-outline"></i>风险说明确认</span>
        <strong>{{ riskConfirmItems.length }} 项需核对</strong>
      </div>
      <ul v-if="riskConfirmItems.length" class="approval-risk-confirm-list">
        <li v-for="item in riskConfirmItems" :key="item.id || item.title">
          <em :class="item.tone">{{ item.label }}</em>
          <div>
            <strong>{{ item.title }}</strong>
            <span>{{ item.description }}</span>
          </div>
        </li>
      </ul>
      <label class="approval-risk-confirm-check">
        <input
          type="checkbox"
          :checked="riskConfirmed"
          :disabled="busy"
          @change="handleRiskConfirmedChange"
        />
        <span>我已核对风险说明、异常原因和佐证材料，确认继续当前审批动作。</span>
      </label>
    </section>

    <label class="approval-opinion-field">
      <span>
        {{ opinionTitle }}
        <em v-if="opinionRequired">必填</em>
      </span>
      <textarea
        :value="currentOpinion"
        maxlength="500"
        :required="opinionRequired"
        :disabled="busy"
        :placeholder="opinionPlaceholder"
        :aria-label="opinionTitle"
        @input="handleOpinionInput"
      ></textarea>
      <small>
        <span>{{ opinionHint }}</span>
        <strong>{{ currentOpinion.length }}/500</strong>
      </small>
    </label>
  </ConfirmDialog>
</template>

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

import ConfirmDialog from '../shared/ConfirmDialog.vue'

const props = defineProps({
  open: { type: Boolean, required: true },
  badge: { type: String, required: true },
  title: { type: String, required: true },
  description: { type: String, required: true },
  confirmText: { type: String, required: true },
  busyText: { type: String, required: true },
  busy: { type: Boolean, required: true },
  opinionTitle: { type: String, required: true },
  opinion: { type: String, default: '' },
  opinionPlaceholder: { type: String, default: '' },
  opinionHint: { type: String, default: '' },
  opinionRequired: { type: Boolean, default: false },
  riskConfirmRequired: { type: Boolean, default: false },
  riskConfirmed: { type: Boolean, default: false },
  riskConfirmItems: { type: Array, default: () => [] }
})

const emit = defineEmits(['close', 'confirm', 'update:opinion', 'update:risk-confirmed'])

const currentOpinion = computed(() => String(props.opinion || ''))
const confirmDisabled = computed(() => (
  (props.riskConfirmRequired && !props.riskConfirmed)
  || (props.opinionRequired && !currentOpinion.value.trim())
))

function handleOpinionInput(event) {
  emit('update:opinion', event.target.value)
}

function handleRiskConfirmedChange(event) {
  emit('update:risk-confirmed', Boolean(event.target.checked))
}
</script>

<style scoped>
.approval-risk-confirm-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #fed7aa;
  border-radius: 4px;
  background: #fff7ed;
}

.approval-risk-confirm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.approval-risk-confirm-head span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #9a3412;
  font-size: 13px;
  font-weight: 850;
}

.approval-risk-confirm-head strong {
  color: #c2410c;
  font-size: 12px;
  font-weight: 850;
}

.approval-risk-confirm-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.approval-risk-confirm-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: flex-start;
  padding: 7px 8px;
  border: 1px solid rgba(251, 146, 60, 0.28);
  border-radius: 4px;
  background: #fff;
}

.approval-risk-confirm-list em {
  min-width: 46px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #fff7ed;
  color: #c2410c;
  font-style: normal;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.approval-risk-confirm-list em.high {
  background: #fef2f2;
  color: #dc2626;
}

.approval-risk-confirm-list div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.approval-risk-confirm-list strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 850;
}

.approval-risk-confirm-list span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.55;
}

.approval-risk-confirm-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #334155;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.6;
}

.approval-risk-confirm-check input {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  accent-color: var(--theme-primary-active);
}

.approval-opinion-field {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.approval-opinion-field > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #334155;
  font-size: 12px;
  font-weight: 850;
}

.approval-opinion-field em {
  border-radius: 999px;
  padding: 2px 7px;
  background: rgba(var(--theme-primary-rgb), .1);
  color: var(--theme-primary-active);
  font-style: normal;
  font-size: 11px;
  font-weight: 850;
}

.approval-opinion-field textarea {
  width: 100%;
  min-height: 74px;
  resize: vertical;
  padding: 10px 11px;
  border: 1px solid #d7e0ea;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-size: 13px;
  line-height: 1.55;
  outline: none;
}

.approval-opinion-field textarea:focus {
  border-color: rgba(var(--theme-primary-rgb), .5);
  box-shadow: 0 0 0 3px var(--theme-focus-ring);
}

.approval-opinion-field small {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.approval-opinion-field small span {
  min-width: 0;
}

.approval-opinion-field small strong {
  flex: 0 0 auto;
  color: var(--theme-primary-active);
  font-weight: 850;
}
</style>
