<template>
    <PagingTable url="/series" :query="query" ref="table">
        <template #filter>
            <ElInput
                class="!w-52"
                placeholder="请输入"
                clearable
                v-model="query.title"
                @keyup.enter="table.refresh(true)"
            >
                <template #append>
                    <ElButton :icon="Search" @click="table.refresh(true)" />
                </template>
            </ElInput>
            <ElSelect v-model="query.categories" multiple clearable placeholder="筛选分类" collapse-tags>
                <ElOption v-for="item in categories" :key="item.id" :label="item.name" :value="item.id" />
            </ElSelect>
            <ElButton :icon="Plus" @click="onEdit()">添加</ElButton>
        </template>
        <ElTableColumn prop="id" label="#" width="80" />
        <ElTableColumn prop="title" label="剧名" min-width="120" />
        <ElTableColumn prop="cover" label="封面" width="120" align="center">
            <template #default="{ row }">
                <RImage style="width: 30px; height: 35px; vertical-align: middle" :src="row.cover" fit="cover" />
            </template>
        </ElTableColumn>
        <ElTableColumn prop="price" label="价格" width="150" />
        <ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" />
        <ElTableColumn label="操作" align="center" width="120">
            <template #default="{ row }">
                <ElButton @click="onEdit(row)">编辑</ElButton>
            </template>
        </ElTableColumn>
    </PagingTable>
    <EditDialog v-model="showEditDialog" :model="model" :rules="rules" :on-submit="submit" @success="table.refresh()">
        <ElFormItem prop="title" label="剧名">
            <ElInput v-model="model.title" placeholder="请输入剧名" />
        </ElFormItem>
        <ElFormItem prop="description" label="描述">
            <ElInput v-model="model.description" placeholder="请输入描述" />
        </ElFormItem>
        <ElFormItem prop="cover" label="竖屏封面">
            <SingleUpload v-model="model.cover" />
        </ElFormItem>
        <ElFormItem prop="landscapeCover" label="横屏封面">
            <SingleUpload v-model="model.landscapeCover" />
        </ElFormItem>
        <ElFormItem prop="price" label="价格">
            <ElInput v-model="model.price" placeholder="请输入价格" />
        </ElFormItem>
        <ElFormItem prop="categories" label="分类">
            <ElSelect v-model="model.categories" value-key="id" multiple>
                <ElOption v-for="item in categories" :key="item.id" :label="item.name" :value="item" />
            </ElSelect>
        </ElFormItem>
    </EditDialog>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import PagingTable from '@/components/PagingTable.vue'
import { useTimeFormatter } from '@/utils/formatter'
import { Plus, Search } from '@vicons/tabler'
import EditDialog from '@/components/EditDialog.vue'
import { setupEditDialog } from '@/utils/editDialog'
import EnumSelect from '@/components/EnumSelect.vue'
import { http } from '@/plugins/http'
import { ElMessage } from 'element-plus'
import { useClipboard } from '@vueuse/core'
import SingleUpload from '@/components/SingleUpload.vue'
const query = ref({
    categories: [],
    title: ''
})
const timeFormatter = useTimeFormatter()
const table = ref(null)
const model = ref({})
const rules = {
    title: [{ required: true, message: '请输入剧名', trigger: 'blur' }],
    cover: [{ required: true, message: '请上传封面', trigger: 'blur' }]
}
const { showEditDialog } = setupEditDialog(model)
async function onEdit(row) {
    model.value = row ? await http.get(`/series/${row.id}`) : {}
    showEditDialog.value = true
}
async function submit() {
    await http.put(model.value.id ? `/series/${model.value.id}` : '/series', model.value)
    ElMessage.success('保存成功')
}
const categories = ref([])
onMounted(async () => {
    categories.value = (await http.get('/categories', { pageSize: 1000 })).data
})
</script>
