<template>
  <Dialog
    ref="dialog"
    :dialog-actions="{ width,title,confirmButtom: false}"
    class="report-dialog"
  >
    <template #content>
      <div class="dialog-content">
        <!-- 举报信息头部 -->
        <div class="report-header">
          <div class="reporter">
            <span class="label">举报者：</span>
            <span class="value">用户_123456</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 class="image-section">
          <div class="subtitle">图片说明</div>
          <div class="image-list">
            <el-image
              class="evidence-image"
              src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
              :preview-src-list="['https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg']"
              fit="cover"
            >
              <div slot="error" class="image-error">
                <i class="el-icon-picture-outline" />
              </div>
            </el-image>
          </div>
        </div>
      </div>
    </template>
  </Dialog>
</template>

<script>

import Dialog from '@/components/Dialog/index.vue'

export default {
  components: { Dialog },
  props: {
    prop: {
      type: String,
      default: 'xxxx'
    },
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '提示'
    },
    width: {
      type: String,
      default: '620px'
    },
    inputValue: {
      type: String,
      default: '举报内容举报内容举报内容举报内容'
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(val) {
        this.$nextTick(() => {
          val ? this.$refs.dialog.open() : this.$refs.dialog.close()
        })
      }
    }
  }
}
</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);
}

/* 图片展示区域 */
.image-section {
  margin-top: 20px;
}

.subtitle {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 12px;
}

.evidence-image {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
  cursor: pointer;
  border: 1px solid var(--border-color);
}

.image-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #f5f7fa;
  color: var(--text-secondary);
}

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

  .evidence-image {
    width: 100px;
    height: 100px;
  }
}
</style>
