<template>
  <!-- InputConfirmDialog.vue -->
  <Dialog
    ref="dialog"
    :dialog-actions="{
      title,
      width,
      confirmButtom: false
    }"
    class="report-dialog"
  >
    <template slot="content">
      <div class="dialog-content">
        <!-- 信息头部 -->
        <div class="report-header">
          <div class="reporter">
            <span class="label">被举报者：</span>
            <span class="value">用户_654321</span>
          </div>
          <div class="reported">
            <span class="label">被举报单号：</span>
            <span class="value">654321</span>
          </div>
        </div>

        <!-- 内容区域 -->
        <div class="report-content">
          <div class="content-title">受理内容</div>
          <div class="content-box">{{ inputValue }}</div>
        </div>
      </div>
    </template>
  </Dialog>
</template>

<script>
import Dialog from '@/components/Dialog/index.vue'

export default {
  name: 'InputConfirmDialog',
  components: {
    Dialog
  },
  props: {
    // 字段名
    prop: {
      type: String,
      default: 'xxxx'
    },
    // 控制显示
    visible: {
      type: Boolean,
      default: false
    },
    // 弹窗标题
    title: {
      type: String,
      default: '提示'
    },
    width: {
      type: String,
      default: '620px'
    }
  },
  data() {
    return {
      inputValue: '受理内容受理内容受理内容'
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.$refs.dialog.open()
      } else {
        this.$refs.dialog.close()
      }
    }
  },
  methods: {}
}
</script>
<style scoped>
/* 基础样式 */
.report-dialog {
  --primary-color: #409eff;
  --text-secondary: #909399;
  --border-color: #ebeef5;
  --box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.dialog-content {
  padding: 0 24px;
}

/* 头部信息样式 */
.report-header {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 16px;
}

.report-header .label {
  color: var(--text-secondary);
  margin-right: 8px;
}

.report-header .value {
  font-weight: 500;
  color: #303133;
}

/* 内容区域 */
.report-content {
  margin-bottom: 20px;
}

.content-title {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 8px;
}

.content-box {
  width: 100%;
  min-height: 160px;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  line-height: 1.6;
  color: #606266;
  border: 1px solid var(--border-color);
  box-shadow: var(--box-shadow);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .report-header {
    flex-direction: column;
    gap: 8px;
  }
}
</style>
