<template>
    <PagingTable url="/properties" :query="query" ref="table">
        <template #filter>
            <ElButton :icon="Plus" @click=";(editMode = false), onEdit()">添加</ElButton>
        </template>
        <ElTableColumn prop="id" label="#" width="150" />
        <ElTableColumn prop="name" label="名称" width="150" />
        <ElTableColumn prop="remark" label="备注" />
        <ElTableColumn prop="value" label="值" min-width="120" show-overflow-tooltip />
        <ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" />
        <ElTableColumn label="操作" align="center" width="120">
            <template #default="{ row }">
                <ElButton @click=";(editMode = true), 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="remark" label="备注">
            <ElInput v-model="model.remark" placeholder="请输入备注" />
        </ElFormItem>
        <ElFormItem prop="type" label="类型">
            <EnumSelect v-model="model.type" :enum="PropertiesType" :disabled="!!model.id" show-overflow-tooltip />
        </ElFormItem>
        <ElFormItem prop="value" label="值" v-if="model.type === 'file'">
            <ElInput v-model="model.value" placeholder="请输入值">
                <template #append>
                    <ElButton type="primary" @click="upload" :loading="uploading">上传</ElButton>
                </template>
            </ElInput>
        </ElFormItem>
        <ElFormItem prop="value" label="值" v-else-if="model.type === 'boolean'">
            <ElRadioGroup v-model="model.value">
                <ElRadio label="1">是</ElRadio>
                <ElRadio label="0">否</ElRadio>
            </ElRadioGroup>
        </ElFormItem>
        <ElFormItem prop="value" label="值" v-else-if="model.type === 'time_range'">
            <ElTimePicker v-model="model.value" value-format="HH:mm:ss" is-range placeholder="选择时间范围" />
        </ElFormItem>
        <ElFormItem prop="value" label="值" v-else-if="model.type === 'range'">
            <ElSlider v-model="model.value" range :max="500" :step="5" />
        </ElFormItem>
        <ElFormItem prop="value" label="值" v-else>
            <ElInput v-model="model.value" placeholder="请输入值" type="textarea" />
        </ElFormItem>
    </EditDialog>
</template>
<script setup>
import { ref } from 'vue'
import PagingTable from '@/components/PagingTable.vue'
import { 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 { PropertiesType } from '@/enums'

const query = ref({})
const timeFormatter = useTimeFormatter()
const table = ref(null)
const model = ref({})
const rules = {
    id: [
        { required: true, message: '请输入ID', trigger: 'blur' },
        { type: 'string', pattern: /^[a-zA-Z0-9_]+$/, message: '只能输入字母、数字、下划线', trigger: 'blur' },
        { min: 1, max: 72, message: '长度在 1 到 72 个字符', trigger: 'blur' }
    ],
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' },
        { type: 'string', pattern: /^[a-zA-Z0-9_]+$/, message: '只能输入字母、数字、下划线', trigger: 'blur' }
    ],
    type: [{ required: true, message: '请输入类型', trigger: 'blur' }],
    value: [{ required: true, message: '请输入值', trigger: 'blur' }],
    remark: [{ required: true, message: '请输入备注', trigger: 'blur' }]
}
const { showEditDialog, onEdit } = setupEditDialog(model)
const editMode = ref(false)

async function submit() {
    await (editMode.value
        ? http.put(`/properties/${model.value.id}`, model.value)
        : http.post('/properties', model.value))
    ElMessage.success('保存成功')
}

const uploading = ref(false)

function upload() {
    const a = document.createElement('input')
    a.type = 'file'
    a.onchange = (e) => {
        const file = e.target.files[0]
        uploading.value = true
        const form = new FormData()
        form.append('file', file)
        http.post('/files/upload', form).then((res) => {
            model.value.value = res.url
        })
        uploading.value = false
    }
    a.click()
}
</script>
