<template>
    <el-card class="!border-none" shadow="never">
        <el-form :model="formData" inline>
            <el-form-item label="服务名称">
                <el-input class="ls-input" v-model="formData.name" placeholder="服务名称" />
            </el-form-item>
            <el-form-item label="模板类型">
                <el-select class="w-[280px]" v-model="formData.type">
                    <el-option label="全部" value="" />
                    <el-option
                        v-for="option in optionMap.serviceTimeType"
                        :key="option.value"
                        :label="option.label"
                        :value="option.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item>
                <div class="flex">
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </div>
            </el-form-item>
        </el-form>
    </el-card>
    <el-card shadow="never" class="mt-4 !border-none">
        <div class="mt-2">
            <el-button type="primary" @click="$router.push('time/edit')">新增时间模板</el-button>
            <el-button @click="handleDelete(selectionData)" :disabled="!selectionData.length">
                批量删除
            </el-button>
        </div>
        <div class="mt-4">
            <el-table
                ref="tableDataRef"
                :data="pager.lists"
                style="width: 100%"
                v-loading="pager.loading"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" max-width="55" />
                <el-table-column label="服务名称" property="name"></el-table-column>
                <el-table-column property="nickname" label="模板类型">
                    <template #default="scope">
                        <span>{{ GoodsTimeType[scope.row.type] }}</span>
                    </template>
                </el-table-column>
                <el-table-column property="username" label="状态">
                    <template #default="scope">
                        <el-switch
                            v-model="scope.row.status"
                            :active-value="0"
                            :inactive-value="1"
                            @change="handleStatusChange(scope.row.id)"
                        />
                    </template>
                </el-table-column>
                <el-table-column property="createTime" label="添加时间"></el-table-column>
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="scope">
                        <div class="flex items-center">
                            <router-link :to="`time/edit?id=${scope.row.id}`">
                                <el-link type="primary" :underline="false">编辑</el-link>
                            </router-link>
                            <el-link
                                class="ml-4"
                                type="danger"
                                :underline="false"
                                @click="handleDelete(scope.row.id)"
                            >
                                删除
                            </el-link>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="flex justify-end mt-4">
            <pagination v-model="pager" @change="getLists" />
        </div>
    </el-card>
</template>

<script lang="ts" setup>
import {
    apiGoodsTimeList,
    apiGoodsTimeUpdateStatus,
    apiGetGoodsTimeDel
} from '@/api/service/subscribe'
import { ref } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import DataPicker from '@/components/daterange-picker/index.vue'
import { usePaging } from '@/hooks/usePaging'
import { optionMap } from '@/config/status'
import feedback from '@/utils/feedback'
import { GoodsTimeType } from '@/enums/modeEnum'

interface formDataObj {
    name?: string
    type?: number | string // 0-自定义，1-自动间隔
}
const formData = ref<formDataObj>({
    name: '',
    type: ''
})

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: apiGoodsTimeList,
    params: formData.value
})
getLists()
const selectionData = ref<number[]>([])
// 表格多选选择的数据
const handleSelectionChange = (val: Event | any) => {
    selectionData.value = val.map((item: Event | any) => item.id)
}

// 删除服务
const handleDelete = async (ids: number | Array<number>) => {
    await feedback.confirm('确认删除？请谨慎操作。')
    ids = Array.isArray(ids) ? ids : [ids]
    const res = await apiGetGoodsTimeDel({ goodsTimeIds: ids })
    res && feedback.msgSuccess('操作成功')
    getLists()
}
// 状态修改
const handleStatusChange = async (id: number) => {
    await apiGoodsTimeUpdateStatus({ id })
    feedback.msgSuccess('操作成功')
    getLists()
}
</script>

<style lang="scss">
.ls-input {
    width: 280px;
}
</style>
