<template>
    <PagingTable url="/room" :where="where" ref="table">
        <template #filter>
            <ElButton :icon="Plus" @click="onEdit()">添加</ElButton>
        </template>
        <ElTableColumn prop="id" label="#" width="80" />
        <ElTableColumn prop="name" label="名称" />
        <ElTableColumn prop="platform" label="平台" :formatter="platformFormatter" />
        <ElTableColumn prop="channelId" label="频道" />
        <ElTableColumn prop="currentGameId" label="当前游戏" />
        <ElTableColumn prop="active" label="直播中" width="100" align="center">
            <template #default="{ row }">
                <ElSwitch v-model="row.active" @change="onActiveChange($event, row)" />
            </template>
        </ElTableColumn>
        <ElTableColumn prop="notice" label="公告" show-overflow-tooltip />
        <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="name" label="名称">
            <ElInput v-model="model.name" placeholder="请输入名称" />
        </ElFormItem>
        <ElFormItem prop="platform" label="平台">
            <EnumSelect :enum="StreamPlatform" v-model="model.platform" />
        </ElFormItem>
        <ElFormItem prop="channelId" label="频道">
            <ElInput v-model="model.channelId" placeholder="请输入频道" />
        </ElFormItem>
        <ElFormItem prop="code" label="身份码" v-if="model.platform === 'bilibili'">
            <ElInput v-model="model.code" placeholder="请输入身份码" />
        </ElFormItem>
        <ElFormItem prop="notice" label="公告">
            <ElInput v-model="model.notice" placeholder="请输入公告" />
        </ElFormItem>
    </EditDialog>
</template>
<script setup>
import { onActivated, ref } from 'vue'
import PagingTable from '@/components/PagingTable.vue'
import { useEnumFormatter, useTimeFormatter } from '@/utils/formatter'
import { Plus } from '@vicons/tabler'
import EditDialog from '@/components/EditDialog.vue'
import { setupEditDialog } from '@/utils/editDialog'
import EnumSelect from '@/components/EnumSelect.vue'
import { UserRole } from '@/enums'
import { http } from '@/plugins/http'
import { ElMessage } from 'element-plus'
import { useClipboard } from '@vueuse/core'
import { StreamPlatform } from '@/enums'

const where = ref({})
const timeFormatter = useTimeFormatter()
const platformFormatter = useEnumFormatter(StreamPlatform)
const table = ref(null)
const model = ref({})
const rules = {
    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
    platform: [{ required: true, message: '请选择平台', trigger: 'blur' }],
    channelId: [{ required: true, message: '请输入频道', trigger: 'blur' }],
    code: [{ required: true, message: '请输入身份码', trigger: 'blur' }]
}
const { showEditDialog, onEdit } = setupEditDialog(model)
async function submit() {
    await http.put('/room', model.value)
    ElMessage.success('保存成功')
}
function onActiveChange(e, row) {
    console.log(e, row)
    if (e) {
        http.post(`/room/${row.id}/start`)
    } else {
        http.post(`/room/${row.id}/stop`)
    }
}
</script>
