<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-input
          v-model="queryParams.author"
          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" v-hasPermi="['GDS:course:search']">
          搜索
        </el-button>
        <el-button type="primary" @click="handleAdd" v-hasPermi="['GDS:course:add']">
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="tableList"
      highlight-current-row
      max-height="calc(100vh - 320px)"
      @row-click="handleRowClick"
    >
      <el-table-column type="index" width="55" align="center" />
      <el-table-column label="课程标题" align="left" prop="lessonName" min-width="140" />
      <el-table-column label="课程简介" align="center" prop="introduction" width="100" />
      <el-table-column label="图片" align="center" width="100">
        <template #default="{ row }">
          <el-image
            v-if="row.image"
            :src="getShowImg(row)"
            :preview-src-list="[getShowImg(row)]"
            :lazy="true"
            style="width: 90px"
            preview-teleported
          />
        </template>
      </el-table-column>
      <el-table-column label="作者" align="center" prop="author" min-width="100" />
      <el-table-column label="创建时间" align="center" prop="createTime" min-width="100" />
      <el-table-column label="发布时间" align="center" prop="publicTime" min-width="100" />
      <el-table-column label="浏览数" align="center" prop="browseCount" min-width="100" />
      <el-table-column label="点赞数" align="center" prop="goodCount" min-width="100" />
      <el-table-column label="收藏数" align="center" prop="collectCount" min-width="100" />
      <el-table-column label="操作" align="center" width="200">
        <template #default="scope">
          <el-button
            type="primary"
            link
            @click.stop="handleRowClick(scope.row)"
            v-hasPermi="['GDS:course:edit']"
          >
            课程章节
          </el-button>
          <el-button
            type="primary"
            link
            @click.stop="handleEdit(scope.row)"
            v-hasPermi="['GDS:course:edit']"
          >
            修改
          </el-button>
          <el-button
            type="primary"
            link
            @click="handleDelete(scope.row)"
            v-hasPermi="['GDS:course:delete']"
          >
            删除
          </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="lessonName">
          <el-input v-model="form.lessonName" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="课程简介" prop="introduction">
          <el-input
            v-model="form.introduction"
            type="textarea"
            placeholder="请输入"
            :autosize="{ minRows: 4 }"
          />
        </el-form-item>
        <el-form-item label="课程图片" prop="image">
          <UploadImg v-model="form.image" width="300px" />
        </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.status">
            <el-radio :label="1">发布</el-radio>
            <el-radio :label="2">不发布</el-radio>
          </el-radio-group>
        </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 CourseApi from '@/api/gds/course'

const router = useRouter()
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 data = await CourseApi.getCoursePage(queryParams.value)
    tableList.value = data.list
    total.value = data.total
    loading.value = false
  } finally {
    loading.value = false
  }
}

function getShowImg(row) {
  return row.image.includes('http')
    ? row.image
    : `https://ss-cloud.ahduima.com/sinology/pic/${row.image}`
}

const showDialog = ref(false)
const dialogTitle = ref('')
const form = ref({})
const formRef = ref()
const rules = {
  lessonName: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
  introduction: [{ 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: '',
    introduction: '',
    author: '',
    status: 2
  }
  formRef.value && formRef.value.resetFields()
}

function handleDelete(row) {
  message
    .confirm('是否确认删除该课程？', '警告', {
      type: 'warning'
    })
    .then(async () => {
      try {
        await CourseApi.deleteCourse(row.lessonId)
        message.success('删除成功')
        getList()
      } catch (error) {}
    })
    .catch(() => {})
}

function handleSave() {
  formRef.value.validate(async (valid) => {
    if (!valid) return
    try {
      if (form.value.lessonId) {
        await CourseApi.updateCourse(form.value)
      } else {
        await CourseApi.addCourse(form.value)
      }
      showDialog.value = false
      getList()
    } catch (error) {}
  })
}

function handleRowClick(row) {
  router.push({ path: '/gdsChapter', query: { lessonId: row.lessonId } })
}

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

<style lang="scss" scoped></style>
