<template>
  <div>
    <el-form :inline="true" label-width="0" @submit.prevent>
      <el-form-item>
        <el-input
          v-model="queryParams.lessonName"
          placeholder="请输入章节名"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-select v-model="queryParams.status" placeholder="发布状态" clearable filterable>
          <el-option label="已发布" :value="1" />
          <el-option label="已下架" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery"> 搜索 </el-button>
        <el-button type="primary" @click="handleAdd"> 新增 </el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="tableList"
      highlight-current-row
      max-height="calc(100vh - 320px)"
    >
      <el-table-column type="index" width="55" align="center" />
      <el-table-column label="章节序号" align="left" prop="chapterIndex" width="140" />
      <el-table-column label="章节名" align="left" prop="chapterName" min-width="140" />
      <el-table-column label="作者" align="center" prop="author" min-width="100" />
      <el-table-column label="是否付费" align="center" width="100">
        <template #default="{ row }">
          <el-tag type="success" v-if="row.isFree">免费</el-tag>
          <el-tag type="danger" v-else>付费</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="章节内容" :width="90">
        <template #default="{ row }">
          <el-popover placement="right" width="300px" trigger="click" v-if="row.content">
            <template #reference>
              <el-button type="primary" style="padding: 0" text>预览</el-button>
            </template>
            <!--  -->
            <div class="iphone-frame">
              <!-- 屏幕边框（无内容） -->
              <div class="iphone-screen-border">
                <div v-dompurify-html="row.content"></div>
              </div>

              <!-- 顶部摄像头/听筒区域 -->
              <div class="iphone-camera-bar">
                <div class="camera-dot"></div>
                <div class="earpiece"></div>
                <div class="camera-dot"></div>
              </div>

              <!-- 左侧电源键 -->
              <div class="iphone-power-btn"></div>

              <!-- 右侧音量键 -->
              <div class="iphone-volume-btn volume-up"></div>
              <div class="iphone-volume-btn volume-down"></div>

              <!-- 底部Home键 -->
              <div class="iphone-home-btn"></div>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="发布时间" align="center" prop="publicTime" min-width="100" />
      <el-table-column label="浏览数" align="center" prop="browseCount" width="100" />
      <el-table-column label="点赞数" align="center" prop="goodCount" width="100" />
      <el-table-column label="收藏数" align="center" prop="collectCount" width="100" />
      <el-table-column label="操作" align="center" width="140">
        <template #default="{ row }">
          <el-button type="primary" link @click.stop="handleEdit(row)"> 修改 </el-button>
          <el-button type="primary" link @click="handleDelete(row)"> 删除 </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      style="margin-bottom: 0"
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog
      :title="dialogTitle"
      v-model="showDialog"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">
        <el-form-item label="章节序号" prop="chapterIndex">
          <el-input v-model="form.chapterIndex" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="章节名" prop="chapterName">
          <el-input v-model="form.chapterName" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="form.author" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="是否付费">
          <el-radio-group v-model="form.isFree">
            <el-radio :label="true" :value="true">免费</el-radio>
            <el-radio :label="false" :value="false">付费</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="发布状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="1" :vlaue="1">发布</el-radio>
            <el-radio :label="2" :value="2">不发布</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="章节内容" prop="content">
          <Editor v-model="form.content" />
        </el-form-item>
      </el-form>

      <template #footer>
        <span>
          <el-button @click="showDialog = false">取 消</el-button>
          <el-button type="primary" @click="handleSave">确 认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import * as ChapterApi from '@/api/gds/chapter'

const route = useRoute()
const message = useMessage()

const tableList = ref([])
const total = ref(0)
const loading = ref(false)

const queryParams = ref({
  pageNo: 1,
  pageSize: 20,
  lessonName: undefined,
  author: undefined
})

function handleQuery() {
  queryParams.value.pageNo = 1
  getList()
}

async function getList() {
  try {
    loading.value = true
    const params = { ...queryParams.value, lessonId: route.query.lessonId }
    const data = await ChapterApi.getChapterPage(params)
    tableList.value = data.list
    total.value = data.total
    loading.value = false
  } finally {
    loading.value = false
  }
}

const showDialog = ref(false)
const dialogTitle = ref('')
const form = ref({})
const formRef = ref()
const rules = {
  chapterName: [{ required: true, message: '请输入章节名称', trigger: 'blur' }],
  chapterIndex: [{ required: true, message: '请输入章节序号', trigger: 'blur' }],
  content: [{ required: true, message: '请输入章节内容', trigger: 'blur' }]
}
function handleAdd() {
  resetForm()
  dialogTitle.value = '新增章节'
  showDialog.value = true
}

function handleEdit(row) {
  resetForm()
  dialogTitle.value = '修改章节'
  showDialog.value = true
  form.value = { ...row }
}

function resetForm() {
  form.value = {
    lessonName: '',
    image: '',
    isFree: false,
    introduction: '',
    author: '',
    status: 2
  }
  formRef.value && formRef.value.resetFields()
}

function handleDelete(row) {
  message
    .confirm('是否确认删除该章节？', '警告', {
      type: 'warning'
    })
    .then(async () => {
      try {
        await ChapterApi.deleteChapter(row.chapterId)
        message.success('删除成功')
        getList()
      } catch (error) {}
    })
    .catch(() => {})
}

function handleSave() {
  formRef.value.validate(async (valid) => {
    if (!valid) return
    try {
      if (form.value.chapterId) {
        await ChapterApi.updateChapter(form.value)
      } else {
        await ChapterApi.addChapter(form.value)
      }
      showDialog.value = false
      getList()
    } catch (error) {}
  })
}

onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
/* 手机框主体 - 核心样式 */
.iphone-frame {
  /* 机身比例（参考iPhone 14） */
  width: 280px;
  height: 580px;
  /* 机身样式 */
  background-color: #1c1c1e; /* 默认黑色 */
  border-radius: 42px; /* 机身大圆角 */
  border: 8px solid #1c1c1e; /* 边框厚度，增强立体感 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1); /* 外阴影+内阴影增强质感 */
  position: relative;
}

/* 屏幕区域（仅边框，无内容） */
.iphone-screen-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 10px;
  margin: 6px; /* 屏幕与机身边框间距 */
  border-radius: 36px; /* 屏幕圆角（比机身小） */
  background-color: #fff; /* 模拟屏幕黑边 */
  overflow-y: auto;
  scrollbar-width: none; /* 隐藏滚动条，保留功能 */
  -ms-overflow-style: none; /* 针对 IE 和 Edge */
  ::-webkit-scrollbar {
    display: none;
  }
}

/* 顶部摄像头区域（刘海简化版） */
.iphone-camera-bar {
  position: absolute;
  top: -8px; /* 与机身边框对齐 */
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 26px;
  background-color: #1c1c1e; /* 与机身同色，隐藏接缝 */
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* 摄像头/听筒细节 */
.camera-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: gray; /* 深灰，模拟摄像头 */
}
.earpiece {
  width: 30px;
  height: 6px;
  border-radius: 3px;
  background-color: gray; /* 模拟听筒 */
}

/* 侧边按键 - 电源键（左侧） */
.iphone-power-btn {
  position: absolute;
  left: -8px; /* 与机身边框对齐 */
  top: 120px;
  width: 8px;
  height: 40px;
  background-color: gray; /* 按键颜色（比机身浅） */
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

/* 侧边按键 - 音量键（右侧） */
.iphone-volume-btn {
  position: absolute;
  right: -8px; /* 与机身边框对齐 */
  width: 8px;
  height: 32px;
  background-color: gray;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.volume-up {
  top: 100px;
}
.volume-down {
  top: 150px;
}

/* 底部Home键（圆形） */
.iphone-home-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #3a3a3c; /* 按键边框 */
  background-color: #1c1c1e; /* 与机身同色 */
}
</style>
