<template>
    <HcCard>
        <div class="hc-page-layout-box system-parameter">
            <HcCardItem ui="hac-card-item w-60 mr-5">
                <template #header>
                    <span class="mr-2">预算分类:</span>
                    <el-button _icon hc-btn size="small" type="primary" @click="openpriceEdit(1)">
                        <HcIcon name="add"/>
                    </el-button>
                </template>
                <div class="hc-layout-left-box menu">
                    <div class="hc-menu-contents-box">
                        <el-scrollbar>
                            <HcMenuSimple :datas="menuOptions" :keys="menuKey" :props="menusProps"
                                          :menus="contextMenu" @menuTap="contextMenuClick"
                                          @change="menuChange"/>
                        </el-scrollbar>
                    </div>

                    <!--预算分类新增编辑弹窗-->
                    <HcDialog bgColor="#ffffff" widths="22rem" isToBody :show="priceModal" :title="priceTitle" @close="priceModalClose">
                        <el-form :model="priceform" label-position="top" label-width="auto" size="large">
                            <el-form-item label="预算分类名称:">
                                <el-input v-model="priceform.name"/>
                            </el-form-item>
                        </el-form>
                    </HcDialog>
                </div>
            </HcCardItem>

            <div class="hc-page-content-box">
                <HcCardItem ui="hac-card-item" actionSize="lg">
                    <template #header>
                        <span class="mr-2">任务明细:</span>
                        <el-button _icon hc-btn size="small" type="primary" @click="openEdit(1)">
                            <HcIcon name="add"/>
                        </el-button>
                    </template>
                    <HcTable :column="tableColumn" :datas="tableData">
                        <template #action="{row, index}">
                            <el-button size="small" type="primary" @click="openEdit(2)">编辑</el-button>
                            <el-button size="small" type="primary" @click="delTask">删除</el-button>
                        </template>
                    </HcTable>

                    <!--任务明细弹窗-->
                    <HcDialog bgColor="#ffffff" widths="24rem" isToBody :show="editTaskModal" :title="taskTitle" @close="testModalClose">
                        <el-form label-position="top" label-width="auto" :model="formLabelAlign" size="large">
                            <el-form-item label="任务明细名称:">
                                <el-input v-model="formLabelAlign.name"/>
                            </el-form-item>
                            <el-form-item label="任务内容:">
                                <el-input v-model="formLabelAlign.region"/>
                            </el-form-item>
                            <el-form-item label="完成指标:">
                                <el-input v-model="formLabelAlign.type"/>
                            </el-form-item>
                        </el-form>
                    </HcDialog>

                </HcCardItem>
            </div>
        </div>
        <template #action>
            <HcPages :pages="searchForm" @change="pageChange"/>
        </template>
    </HcCard>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";

const props = defineProps({
    cur: {
        type: [String,Number],
        default: ''
    },
})

const tabsKey = ref(props.cur)

//监听
watch(() => [
    props.cur,
], ([key]) => {
    tabsKey.value = key
    console.log(key)
})

onMounted(() => {
    setContextMenu()
})

//左侧菜单
const menuKey = ref('1')
const menuOptions = ref([
    {key: '1', label: '合同洽谈', badge: 0},
    {key: '2', label: '合同洽谈', badge: 0},
    {key: '3', label: '合同洽谈', badge: 0},
    {key: '4', label: '合同洽谈', badge: 0},
    {key: '5', label: '合同洽谈', badge: 0},
]);

const menuChange = (item) => {
    console.log(item)
    menuKey.value = item?.key
}
const menusProps = ref({
    key: 'key',
    label: 'label'
})

//菜单的右键菜单
const contextMenu = ref([])
const setContextMenu = () => {
    let newArr = [];
    newArr.push({icon: 'draft', label: '编辑分类', key: "edit"})
    newArr.push({icon: 'delete-bin', label: '删除分类', key: "del"})

    contextMenu.value = newArr
}

//菜单的右键菜单被点击
const contextMenuClick = ({key, item}) => {
    if (key === 'edit') {
        openpriceEdit(2)
        menuKey.value = item?.key
    } else if (key === 'del') {
        window?.$messageBox?.alert('您确定要删除该预算分类信息吗? 一旦注销数据将彻底清除，请谨慎操作？', '删除提醒', {
            showCancelButton: true,
            confirmButtonText: '确认注销',
            cancelButtonText: '取消',
            type: 'warning',
            callback: (action) => {
                if (action === 'confirm') {
                    console.log(11111);
                }
            }
        })
    }
}

const priceTitle = ref('')
const priceModal = ref(false)
const openpriceEdit = (type) => {
    if (type === 1) {
        priceTitle.value = '新增分类'
    } else {
        priceTitle.value = '编辑分类'
    }

    priceModal.value = true
}

const priceform = ref({})
const priceModalClose = () => {
    priceModal.value = false
}

const taskTitle = ref('')
const openEdit = (type) => {
    if (type === 1) {
        taskTitle.value = '新增任务明细'
    } else {
        taskTitle.value = '编辑任务明细'
    }

    editTaskModal.value = true
}


const editTaskModal = ref(false)
const testModalClose = () => {
    editTaskModal.value = false
}

const delTask = () => {
    window?.$messageBox?.alert('您确定要删除该任务明细吗? 一旦注销数据将彻底清除，请谨慎操作？', '删除提醒', {
        showCancelButton: true,
        confirmButtonText: '确认注销',
        cancelButtonText: '取消',
        type: 'warning',
        callback: (action) => {
            if (action === 'confirm') {
                console.log(11111);
            }
        }
    })
}

const tableColumn = [
    {key: 'name', name: '任务明细'},
    {key: 'text', name: '任务内容'},
    {key: 'color', name: '完成指标'},
    {key: 'action', name: '操作', width: 200}
]
const tableData = ref([
    {name: '名称1', text: '文本1', color: 'red'},
    {name: '名称2', text: '文本2', color: 'blue'},
    {name: '名称3', text: '文本3', color: '无'}
])

const formLabelAlign = ref({
    name: '',
    region: '',
    type: '',
})

const searchForm = ref({
    postType: '', name: '',
    current: 1, size: 20, total: 0
})
//分页被点击
const pageChange = ({current, size}) => {
    searchForm.value.current = current
    searchForm.value.size = size
}
</script>

<style lang="scss">
.hc-page-layout-box.system-parameter {
    display: flex;
    position: relative;
    // height: calc(100vh - 228px);
    .hc-layout-left-box.menu {
        width: 100%;
        height: 100%;
        position: relative;
        background: inherit;
        margin-right: auto;
        border-radius: 0;
        box-shadow: none;
        .hc-menu-contents-box {
            position: relative;
            padding: 0;
            height: 100%;
            // height: calc(100% - 60px);
        }
        .hc-menu-simple-box {
            padding: 0;
            .item-box {
                box-shadow: none;
                padding: 8px 10px;
                border-radius: 4px;
                background: var(--el-color-primary-light-8);
                .label-box {
                    color: #8c8c8c;
                }
                .menu-icon {
                    margin-left: 20px;
                    background: inherit;
                    .menu-popover-icon {
                        color: #8c8c8c;
                        .hc-icon-i {
                            font-size: 20px;
                            line-height: initial;
                        }
                    }
                }
            }
            .item-box.active {
                background: var(--el-color-primary-light-5);
                .label-box {
                    color: white;
                }
                .menu-icon .menu-popover-icon {
                    color: white;
                }
            }
        }
        .hc-menu-header-box {
            position: relative;
            padding: 15px 18px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #E9E9E9;
            .name {
                flex: auto;
                position: relative;
            }
        }
    }
    .hc-page-content-box {
        flex: 1;
        position: relative;
    }
}
</style>
