<template>
    <el-card class="!border-none" shadow="never">
        <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
            <el-form-item label="服务名称" prop="name">
                <el-input class="w-[280px]" v-model="queryParams.name" clearable placeholder="请输入服务名称" />
            </el-form-item>
            <el-form-item label="服务分类" prop="groupId">
                <el-select v-model="queryParams.categoryId" placeholder="请选择" class="ls-input" clearable>
                    <el-option v-for="category in categoryLists" :key="category.id" :label="category.name" :value="category.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="退款设置" prop="isStop">
                <el-select class="w-[280px]" v-model="queryParams.isSetRefund">
                    <el-option label="全部" value="" />
                    <el-option v-for="option in optionMap.refundOptions" :key="option.value" :label="option.label" :value="option.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getLists">查询</el-button>
                <el-button @click="resetParams">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <el-card class="!border-none mt-4" shadow="never">
        <div class="mt-3">
            <el-table ref="tableRef" class="mt-4" size="large" v-loading="loading" :data="pager.lists" row-key="id">
                <el-table-column label="服务名称" prop="name" show-overflow-tooltip></el-table-column>
                <el-table-column label="服务分类" prop="category"></el-table-column>
                <el-table-column label="前台价格" prop="price">
                    <template #default="{ row }">
                        ￥
                        <span class="strong">{{ row.price }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="退款设置" prop="isSetRefund">
                    <template #default="{ row }">
                        <span :class="{ 'text-success': row.isSetRefund === RefundEnum.SETTING }">{{ parseRefundLabel(row) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" fixed="right">
                    <template #default="{ row }">
                        <router-link
                            v-if="isSetRefund(row)"
                            class="mr-2"
                            :to="{
                                path: '/user/setting_rule',
                                query: {
                                    id: row.id
                                }
                            }"
                        >
                            <el-link type="primary" :underline="false">编辑</el-link>
                        </router-link>
                        <router-link
                            v-else
                            class="mr-2"
                            :to="{
                                path: '/user/setting_rule',
                                query: {
                                    id: row.id
                                }
                            }"
                        >
                            <el-button type="danger" link>设置</el-button>
                        </router-link>
                    </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 { reactive, ref } from 'vue'
import type { ElTable, FormInstance } from 'element-plus'
import Pagination from '@/components/pagination/index.vue'
import { usePaging } from '@/hooks/usePaging'
import { optionMap } from '@/config/status'
import { useCommon } from '@/hooks/useCommon'
import { apiUserRefundList } from '@/api/user'
import { RefundEnum } from '@/enums/modeEnum'

const router = useRouter()

const tableRef = ref<InstanceType<typeof ElTable>>()
const formRef = ref<FormInstance>()
const loading = ref(false)
const selectedIds = ref<number[]>([])
const queryParams = reactive({
    name: '',
    isSetRefund: '',
    categoryId: ''
})
const parseRefundLabel = computed(() => (row: any) => row.isSetRefund === RefundEnum.UN_SETTING ? '--' : '已设置')
const isSetRefund = computed(() => (row: any) => row.isSetRefund === RefundEnum.SETTING)

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: apiUserRefundList,
    params: queryParams
})
const { categoryLists, fetchCategoryList } = useCommon()

onMounted(() => {
    getLists()
    fetchCategoryList()
})
const isDisabled = computed(() => !selectedIds.value.length)
</script>

<style lang="scss" scoped></style>
