<!--
 * @Author: micky 1254597151@qq.com
 * @Date: 2023-11-24 15:19:49
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2023-12-20 20:17:30
 * @FilePath: \housekeeping-admin\src\views\service\activity\form.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <el-card class="!border-none" shadow="never">
        <el-page-header content="活动专区配置" @back="$router.back()" />
    </el-card>

    <el-card class="!border-none pt-4 min-h-[500px]" shadow="never" body-style="padding: 0" style="margin-top: 15px">
        <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" class="demo-formData">
            <el-form-item label="名称:" prop="name">
                <el-input class="w-56 ls-input" maxlength="64" show-word-limit v-model.trim="formData.name" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="封面图:" prop="surfacePlot">
                <div>
                    <material-picker v-model="formData.surfacePlot" :limit="1"></material-picker>
                </div>
            </el-form-item>
            <el-form-item label="状态:" prop="status">
                <el-switch v-model="formData.status" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用" />
            </el-form-item>
            <el-form-item label="服务列表:" prop="goodsIds" class="service-list">
                <service-select v-model="formData.goodsIds" v-model:selectData="formData.goodsList">
                    <template #popup>
                        <el-button type="primary">选择服务</el-button>
                    </template>
                </service-select>
            </el-form-item>
        </el-form>
    </el-card>
    <footer-btns>
        <el-button type="primary" @click="handleSubmit()">保存</el-button>
    </footer-btns>
</template>

<script setup lang="ts">
import { unref, reactive } from 'vue'
import FooterBtns from '@/components/footer-btns/index.vue'
import feedback from '@/utils/feedback'
import MaterialPicker from '@/components/material/picker.vue'
import type { FormInstance, FormRules } from 'element-plus'
import ServiceSelect from '@/components/service-select/index.vue'
import { apiActivityAdd, apiActivityEdit, apiActivityDetail } from '@/api/service/activity'

const formRef = ref<FormInstance>()
interface formDataObj {
    name: string
    surfacePlot: string
    goodsIds?: string | Array<number>
    status: number | string
    goodsList?: Array<object>
    id?: number | string
}
let formData = ref<formDataObj>({
    name: '',
    surfacePlot: '',
    goodsIds: '',
    status: 1,
    goodsList: [],
    id: ''
})

const route = useRoute()
const router = useRouter()
const id: any = route.query.id

const rules = reactive<FormRules>({
    name: [
        {
            required: true,
            message: '请输入名称'
        }
    ],
    surfacePlot: [
        {
            required: true,
            message: '请选择封面图'
        }
    ]
})

const handleSubmit = () => {
    formRef.value?.validate(async valid => {
        if (valid) {
            const fetchFunction = id ? apiActivityEdit : apiActivityAdd
            delete formData.value.goodsList
            await fetchFunction({ ...formData.value, goodsIds: formData.value.goodsIds!.toString() })
            router.back()
        }
    })
}
// 获取活动专区详情
const getActivityDetail = async (id: number): Promise<void> => {
    ;(formData.value as object) = await apiActivityDetail({ id })
    formData.value.goodsIds = formData.value.goodsList!.map((item: any) => item.id)
}

// 请求详情 => 如果是编辑的话
if (id) getActivityDetail(id)
</script>

<style lang="scss" scoped>
.service-list {
    .flex.flex-col {
        width: 95%;
    }
}
</style>
