<template>
  <ConfirmDialog
    :open="open"
    :badge="badge"
    badge-tone="info"
    :title="title"
    :description="description"
    cancel-text="返回核对"
    :confirm-text="confirmText"
    :busy-text="busyText"
    confirm-tone="primary"
    confirm-icon="mdi mdi-check-circle-outline"
    :busy="busy"
    @close="emit('close')"
    @confirm="emit('confirm')"
  >
    <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 }
})

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

const currentOpinion = computed(() => String(props.opinion || ''))

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

<style scoped>
.approval-opinion-field {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.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: 96px;
  resize: vertical;
  padding: 12px;
  border: 1px solid #d7e0ea;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-size: 13px;
  line-height: 1.6;
  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.5;
}

.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>
