<template>
    <popup
        class="inline mr-3"
        :clickModalClose="false"
        title="选择服务"
        :center="true"
        @close="handleClose(serviceFormRef)"
        @confirm="handleConfirm"
        width="1050px"
    >
        <!-- Trigger Start -->
        <template #trigger>
            <!-- trigger -->
            <slot></slot>
        </template>
        <!-- Trigger End -->

        <!-- Form Start -->
        <el-form :model="serviceForm" ref="serviceFormRef" :inline="true" label-width="auto">
            <el-form-item label="服务名称">
                <el-input
                    class="ls-input"
                    v-model="serviceForm.name"
                    placeholder="请输入"
                ></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="serviceForm.status" placeholder="请选择" class="ls-input">
                    <el-option label="全部" value></el-option>
                    <el-option label="销售中" value="1"></el-option>
                    <el-option label="仓库中" value="0"></el-option>
                </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>
        <!-- Form End -->

        <!-- Table Start -->
        <div>
            <el-table
                ref="tableDataRef"
                :data="pager.lists"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="50"> </el-table-column>
                <el-table-column label="服务名称" min-width="200">
                    <template #default="scope">
                        <div class="flex items-center">
                            <el-image
                                style="width: 48px; height: 48px"
                                :src="scope.row.image"
                                :fit="'cover'"
                            />

                            <el-tooltip :content="scope.row.name" placement="top">
                                <div class="w-16 ml-2 truncate">{{ scope.row.name }}</div>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column property="category" label="服务分类" min-width="160" />
                <el-table-column property="price" label="价格" min-width="100" />
                <el-table-column property="unit" label="单位" min-width="100" />
                <el-table-column property="statusDesc" label="状态" min-width="120">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.status == 1">销售中</el-tag>
                        <el-tag type="info" v-if="scope.row.status == 0">仓库中</el-tag>
                    </template>
                </el-table-column>
                <el-table-column property="createTime" label="创建日期" min-width="170" />
            </el-table>
        </div>
        <!-- Table End -->

        <!-- Footer Pagination Start -->
        <div class="flex justify-end">
            <pagination v-model="pager" @change="getLists" />
        </div>
        <!-- Footer Pagination End -->
    </popup>
</template>

<script lang="ts" setup>
import { apiServiceLists } from '@/api/service/lists'
import Popup from '@/components/popup/index.vue'
import Pagination from '@/components/pagination/index.vue'
import type { ElForm } from 'element-plus'
import { usePaging } from '@/hooks/usePaging'
import { deepClone } from '@/utils/util'
import { computed, withDefaults, watchEffect, ref, reactive } from 'vue'

interface serviceFormObj {
    name?: string
    status?: number | string
}
type FormInstance = InstanceType<typeof ElForm>
const serviceFormRef = ref<FormInstance>()

const props = withDefaults(
    defineProps<{
        modelValue: any
    }>(),
    {
        modelValue: []
    }
)

const emit = defineEmits(['update:modelValue'])

const selectData = ref<Array<object> | null>(props.modelValue)
const serviceForm = reactive<serviceFormObj>({
    name: '',
    status: ''
})

const { pager, getLists, resetPage, resetParams } = usePaging({
    size: 5,
    fetchFun: apiServiceLists,
    params: serviceForm
})

// 表格多选选择的数据
const handleSelectionChange = (val: Event | any) => {
    selectData.value = [...val]
}

// 弹窗关闭
const handleClose = (formEl: FormInstance | undefined): void => {
    if (!formEl) return
    formEl.resetFields()
}
// 确认选择
const handleConfirm = (): void => {
    // 深度克隆防止数据串到父组件
    emit('update:modelValue', deepClone(selectData.value))
}

getLists()

watchEffect(() => {
    selectData.value = props.modelValue
})
</script>

<style lang="scss" scoped>
.ls-input {
    width: 240px;
}
:deep(.el-table__inner-wrapper) {
    height: 365px;
    overflow-y: scroll;
    overflow-x: hidden;
}
</style>
