<script setup lang="ts">
import { getCoverList, deleteCover } from '../api'
import { ElMessage, ElMessageBox } from 'element-plus'
import AddDialog from '../components/AddDialog.vue'
import { useMapStore } from '@/stores/map'
const store = useMapStore()
const appList = ref()
const isShowDialog = ref(false)
const isEdit = ref(false)
const editData = ref({})
const listOptions = $computed(() => {
  return {
    remote: {
      httpRequest: getCoverList,
      params: { type: '' }
    },
    filters: [
      {
        type: 'select',
        prop: 'type',
        label: '封面类型：',
        placeholder: '请选择封面类型',
        options: store.getMapValuesByKey('system_cover_type')
      },
      {
        type: 'select',
        prop: 'status',
        label: '封面状态：',
        placeholder: '请选择封面状态',
        options: store.getMapValuesByKey('system_status')
      }
    ],
    columns: [
      { label: '封面标题', prop: 'title', align: 'center' },
      { label: '封面预览', prop: 'url', slots: 'table-cover', align: 'center' },
      { label: '封面类型', prop: 'type_name', align: 'center' },
      {
        label: '状态',
        prop: 'status_name',
        align: 'center'
      },
      { label: '创建时间', prop: 'created_time', align: 'center' },
      { label: '操作', slots: 'table-operate', width: 230, align: 'center', fixed: 'right' }
    ]
  }
})
// 删除
const handleDelete = (row: any) => {
  ElMessageBox.confirm('确定要删除吗？', '提示').then(() => {
    const params: any = { id: row.id }
    deleteCover(params).then(() => {
      ElMessage.success('删除成功')
      handleUpdate()
    })
  })
}
// 刷新页面
const handleUpdate = () => {
  appList.value.refetch()
}
// 添加
const handleAdd = () => {
  isShowDialog.value = true
  isEdit.value = false
}
// 编辑
const handleEdit = (row: any) => {
  isShowDialog.value = true
  editData.value = row
  isEdit.value = true
}
</script>

<template>
  <AppCard title="封面管理">
    <AppList v-bind="listOptions" ref="appList" border stripe>
      <template #header-aside> </template>
      <el-button
        type="primary"
        round
        @click="handleAdd"
        style="margin-bottom: 20px"
        v-permission="'v1-backend-cover-create'"
        >新增封面</el-button
      >

      <template #table-cover="{ row }">
        <el-image
          :src="row.url"
          style="width: 50px; height: 50px"
          :preview-src-list="[row.url]"
          :initial-index="4"
          fit="contain"
          :preview-teleported="true"
        />
      </template>
      <template #table-operate="{ row }">
        <el-space>
          <el-link type="primary" plain @click="handleEdit(row)" v-permission="'v1-backend-cover-update'">编辑</el-link>
          <el-link type="primary" plain @click="handleDelete(row)" v-permission="'v1-backend-cover-delete'"
            >删除</el-link
          >
        </el-space>
      </template>
      <template v-if="isShowDialog === true">
        <AddDialog
          v-model:isShowDialog="isShowDialog"
          :editData="editData"
          :isEdit="isEdit"
          @updatePage="handleUpdate"
        />
      </template>
    </AppList>
  </AppCard>
</template>
