<template>
    <div>
        <ListPage tableKey="businessPriceId" :column="listPageData.tableColumn" :tableApi="listPageData.tableApi" :isSelect="listPageData.isSelect"
            :scopeBtns="listPageData.scopeBtns" :searchBtns="listPageData.searchBtns" ref="userTableRef" v-if="options && options.length>0"/>

        <el-dialog :title="title" v-model="open" width="500" :before-close="cancel">
            <div style="padding: 20px;">
                <el-form ref="dialogFormsRef" :model="form" :rules="rules" label-width="80px">
                    <el-form-item label="服务项目" prop="businessManagementId">
                        <el-cascader v-model="form.businessManagementId" :options="options" style="width: 100%;"
                            :props="{ label: 'businessName', value: 'id',checkStrictly:true }" />
                    </el-form-item>
                    <el-form-item label="服务时长" prop="businessDuration">
                        <el-input v-model="form.businessDuration" placeholder="请输入服务时长" >
                            <template #append>分钟</template>
                        </el-input>
                        
                    </el-form-item>
                    <el-form-item label="服务价格" prop="businessPrice">
                        <el-input v-model="form.businessPrice" placeholder="请输入服务价格" />
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, ref, render } from 'vue';
import ListPage from '@/views/components/ListPage/index.vue';
import { add, update, list, delPrice, details, getTreeList } from "@/api/staff/price.js";

const { proxy } = getCurrentInstance();

const userTableRef = ref();
const options = ref([]);
const listPageData = reactive({
    tableColumn: [
        {
            label: '服务层级名称',
            prop: 'businessManagementId',
            type: 'cascader',
            isSearch: true,
            tableProp:'businessTierName',
            options:options,
            props: { label: 'businessName', value: 'id', checkStrictly:true },


        },
        // {
        //     label: '项目类别',
        //     prop: 'projectTypeName',
        // },
        {
            label: '服务时长',
            prop: 'businessDuration',
            type:'render',
            render: (row) => {
                return row.businessDuration + '分钟'
            }
        },
        {
            label: '服务价格',
            prop: 'businessPrice',
            type:'render',
            render: (row) => {
                return '￥'+row.businessPrice
            }
           
        },
        
    ],
    searchBtns: [
        {
            label: '新增',
            func: () => {
                console.log('新增')
                openDialog();
            },
            key: 'add',
            hasPermi: ['price:add'],
            icon: 'Plus',
            type: 'primary'
        },
        {
            label: '批量删除',
            func: () => {
                const ids = userTableRef.value.ids;
                console.log('批量删除', ids)
                handleDelete(ids)
            },
            key: 'deletes',
            hasPermi: ['price:delete'],
            type: 'danger'
        },
    ],
    tableApi: list,//接口地址
    isSelect: true,//是否勾选
    scopeBtns: [
        {
            label: '编辑',
            type: 'primary',
            hasPermi: ['price:edit'],
            key: 'edit',
            func: (row) => {
                console.log(row)
                openDialog(row);

            }
        },
        {
            label: '删除',
            type: 'danger',
            hasPermi: ['price:delete'],
            key: 'edit',
            func: (row) => {
                console.log(row)
                handleDelete([row.businessPriceId])
            }
        }
    ]
})
// const options = [
//     {
//         value: 'guide',
//         label: 'Guide',
//         children: [
//             {
//                 value: 'disciplines',
//                 label: 'Disciplines',
//                 children: [
//                     {
//                         value: 'consistency',
//                         label: 'Consistency',
//                     },
//                     {
//                         value: 'feedback',
//                         label: 'Feedback',
//                     },
//                     {
//                         value: 'efficiency',
//                         label: 'Efficiency',
//                     },
//                     {
//                         value: 'controllability',
//                         label: 'Controllability',
//                     },
//                 ],
//             },
//             {
//                 value: 'navigation',
//                 label: 'Navigation',
//                 children: [
//                     {
//                         value: 'side nav',
//                         label: 'Side Navigation',
//                     },
//                     {
//                         value: 'top nav',
//                         label: 'Top Navigation',
//                     },
//                 ],
//             },
//         ],
//     },
//     {
//         value: 'resource',
//         label: 'Resource',
//         children: [
//             {
//                 value: 'axure',
//                 label: 'Axure Components',
//             },
//             {
//                 value: 'sketch',
//                 label: 'Sketch Templates',
//             },
//             {
//                 value: 'docs',
//                 label: 'Design Documentation',
//             },
//         ],
//     },
// ]

const open = ref(false);
const dialogFormsRef = ref(null);
const data = reactive({
    title: '',
    form: {
        businessManagementId: "",
        businessPrice: '',
        businessDuration: null
    },
    rules: {
        businessManagementId: [{ required: true, message: "请选择服务项目", trigger: "blur" }],
        businessDuration: [{ required: true, message: "请填入服务时间", trigger: "blur" }],
        businessPrice: [{ required: true, message: "请填入服务价格", trigger: "blur" }],
    }

});
const { title, rules, form } = toRefs(data);

function getParentPathById(data, targetId) {
    const path = [];

    function traverse(node, id) {
        if (node.id === id) {
            path.unshift(node.id);
            return true;
        }

        if (node.children) {
            for (const child of node.children) {
                if (traverse(child, id)) {
                    path.unshift(node.id);
                    return true;
                }
            }
        }

        return false;
    }

    for (const item of data) {
        if (traverse(item, targetId)) {
            break;
        }
    }

    return path;
}
const openDialog = async (row) => {

    try {
   
        if (row) {
            //修改
            title.value = '价格修改'
            const result = getParentPathById(options.value, row.businessManagementId+'');
            console.log(result,row.businessManagementId); 
            form.value = {
                ...row,
                businessManagementId: result
            };
        } else {
            //新增
            title.value = '价格新增'
        }


    } catch (error) {



    } finally {
        open.value = true;
    }
}

const handleDelete = (ids) => {
    console.log('ids',ids);
    
    proxy.$modal.confirm('是否确认删除编号为"' + ids + '"的数据项?').then(function () {
        return delPrice(ids)
    }).then(() => {
        userTableRef.value.resetForm();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
}
const submitForm = () => {
    console.log('submit');
    proxy.$refs["dialogFormsRef"].validate(async (valid) => {
        if (valid) {
            console.log('form', form.value);
            const businessManagementId = form.value.businessManagementId[form.value.businessManagementId.length -1];
            const parmas = {...form.value, businessManagementId}
            if (form.value.businessPriceId) {
                const up_res = await update(parmas);
                if (up_res.code === 200) {
                    proxy.$modal.msgSuccess("修改成功");
                    cancel()
                    return;
                }
                proxy.$modal.msgSuccess(res.msg);
                return
            }
            const res = await add(parmas);
            if (res.code === 200) {
                proxy.$modal.msgSuccess("新增成功");
                cancel()
                return;
            }
            proxy.$modal.msgSuccess(res.msg);
        }
    });
}
const cancel = () => {
    open.value = false;
    userTableRef.value.resetForm();
    // dialogFormsRef.value.resetFields();
    form.value = {
        businessManagementId: "",
        businessPrice: '',
        businessDuration: null
    }
    console.log('cancel');
}
const parentId = ref(0);

const getTreeListData = async () => {
    try {
        const res = await getTreeList({ parentId: parentId.value });
        console.log('res', res);
        options.value = res.data;
    } catch (error) {

    }
}

getTreeListData();
</script>

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