<template>
    <HcCard scrollbar>
        <HcCardItem>
            <div class="hac-budget-form-card-header">
                <el-form ref="formRef" inline :model="formModel" :rules="formRules">
                    <el-form-item label="预算名称" prop="name" class="w-1/2">
                        <el-input v-model="formModel.name" placeholder="请输入预算名称" />
                    </el-form-item>
                    <el-form-item label="预算起止时间" prop="time" class="ml-6">
                        <HcDatePicker :dates="betweenTime" clearable @change="betweenTimeUpdate"/>
                    </el-form-item>
                </el-form>

                <el-form ref="formRef" inline :model="formModel" :rules="formRules">
                    <el-form-item label="合同" prop="key1">
                        <el-tooltip content="年度合同指标">
                            <el-input v-model="formModel.key1" placeholder="年度合同指标" />
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item label="利润" prop="key2">
                        <el-tooltip content="年度利润指标">
                            <el-input v-model="formModel.key2" placeholder="年度利润指标" />
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item label="预算" prop="key3">
                        <el-tooltip content="预算总额">
                            <el-input v-model="formModel.key3" placeholder="预算总额" disabled>
                                <template #append>元</template>
                            </el-input>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item label="工资" prop="key4">
                        <el-tooltip content="人员工资预算详情">
                            <el-input v-model="formModel.key4" placeholder="人员工资预算详情" disabled>
                                <template #append>元</template>
                            </el-input>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item label="综合" prop="key5">
                        <el-tooltip content="综合管理预算详情">
                            <el-input v-model="formModel.key5" placeholder="综合管理预算详情" disabled>
                                <template #append>元</template>
                            </el-input>
                        </el-tooltip>
                    </el-form-item>
                </el-form>
            </div>
        </HcCardItem>

        <HcCardItem class="mt-4">
            <template #header>
                <span class="text-black text-sm">* 人员工资预算详情：</span>
            </template>
            <template #extra>
                <el-button type="success" @click="addTableData">
                    <HcIcon name="add-circle"/>
                    <span>新增</span>
                </el-button>
            </template>
            <div class="h-72">
                <HcTable :isIndex="false" :column="tableColumn" :datas="tableData">
                    <template #key1="{row,index}">
                        <el-select v-model="row.key1" v-if="row.isEditMode">
                            <el-option label="管理中心" value="管理中心"/>
                            <el-option label="人事行政资源部" value="人事行政资源部"/>
                            <el-option label="研发部" value="研发部"/>
                            <el-option label="技术服务部" value="技术服务部"/>
                        </el-select>
                        <div v-else>{{row.key1}}</div>
                    </template>
                    <template #key2="{row,index}">
                        <el-select v-model="row.key2" v-if="row.isEditMode">
                            <el-option label="总经理" value="总经理"/>
                            <el-option label="人事行政" value="人事行政"/>
                            <el-option label="产品经理" value="产品经理"/>
                            <el-option label="软件实施" value="软件实施"/>
                            <el-option label="业务实施" value="业务实施"/>
                            <el-option label="技术经理" value="技术经理"/>
                            <el-option label="JAVA开发" value="JAVA开发"/>
                            <el-option label="前端开发" value="前端开发"/>
                            <el-option label="测试" value="测试"/>
                        </el-select>
                        <div v-else>{{row.key2}}</div>
                    </template>
                    <template #key3="{row,index}">
                        <el-input v-model="row.key3" v-if="row.isEditMode"/>
                        <div v-else>{{row.key3}}</div>
                    </template>
                    <template #key4="{row,index}">
                        <el-input v-model="row.key4" v-if="row.isEditMode"/>
                        <div v-else>{{row.key4}}</div>
                    </template>
                    <template #key5="{row,index}">
                        <el-input v-model="row.key5" v-if="row.isEditMode"/>
                        <div v-else>{{row.key5}}</div>
                    </template>
                    <template #key6="{row,index}">
                        <el-select v-model="row.key6" v-if="row.isEditMode">
                            <el-option label="在职" value="在职"/>
                            <el-option label="计划招聘" value="计划招聘"/>
                        </el-select>
                        <div v-else>{{row.key6}}</div>
                    </template>
                    <template #key7="{row,index}">
                        <el-input v-model="row.key7" v-if="row.isEditMode"/>
                        <div v-else>{{row.key7}}</div>
                    </template>
                    <template #action="{row,index}">
                        <el-button size="small" type="primary" @click="row.isEditMode = false" v-if="row.isEditMode">
                            <HcIcon name="check"/>
                            <span>完成</span>
                        </el-button>
                        <el-button size="small" type="primary" @click="row.isEditMode = true" v-else>
                            <HcIcon name="edit"/>
                            <span>编辑</span>
                        </el-button>
                        <el-button size="small" type="danger" @click="delTableData(row,index)">
                            <HcIcon name="delete-bin"/>
                            <span>删除</span>
                        </el-button>
                    </template>
                </HcTable>
            </div>
        </HcCardItem>

        <HcCardItem class="mt-4">
            <template #header>
                <span class="text-black text-sm">* 综合管理预算详情：</span>
            </template>
            <template #extra>
                <el-button type="success" @click="addTableData1">
                    <HcIcon name="add-circle"/>
                    <span>新增</span>
                </el-button>
            </template>
            <div class="h-72">
                <HcTable :isIndex="false" :column="tableColumn1" :datas="tableData1">
                    <template #key1="{row,index}">
                        <el-select v-model="row.key1" v-if="row.isEditMode">
                            <el-option label="办公费" value="办公费"/>
                            <el-option label="团建费" value="团建费"/>
                            <el-option label="水电费" value="水电费"/>
                            <el-option label="房租物业" value="房租物业"/>
                            <el-option label="运杂费" value="运杂费"/>
                            <el-option label="后勤费" value="后勤费"/>
                        </el-select>
                        <div v-else>{{row.key1}}</div>
                    </template>
                    <template #key2="{row,index}">
                        <el-input v-model="row.key2" v-if="row.isEditMode"/>
                        <div v-else>{{row.key2}}</div>
                    </template>
                    <template #key3="{row,index}">
                        <el-input v-model="row.key3" v-if="row.isEditMode"/>
                        <div v-else>{{row.key3}}</div>
                    </template>
                    <template #key4="{row,index}">
                        <el-input v-model="row.key4" v-if="row.isEditMode"/>
                        <div v-else>{{row.key4}}</div>
                    </template>
                    <template #action="{row,index}">
                        <el-button size="small" type="primary" @click="row.isEditMode = false" v-if="row.isEditMode">
                            <HcIcon name="check"/>
                            <span>完成</span>
                        </el-button>
                        <el-button size="small" type="primary" @click="row.isEditMode = true" v-else>
                            <HcIcon name="edit"/>
                            <span>编辑</span>
                        </el-button>
                        <el-button size="small" type="danger" @click="delTableData1(row,index)">
                            <HcIcon name="delete-bin"/>
                            <span>删除</span>
                        </el-button>
                    </template>
                </HcTable>
            </div>
        </HcCardItem>
    </HcCard>
</template>

<script setup>
import {onActivated, ref} from "vue";
import {useRouter, useRoute} from 'vue-router'
import {delMessage} from "~uti/tools";

//初始变量
const router = useRouter()
const useRoutes = useRoute()
const dataId = ref(useRoutes?.query?.id ?? '')

//缓存页面被激活时
onActivated(() => {
    dataId.value = useRoutes?.query?.id ?? ''
    console.log(useRoutes.query)
})

//顶部表单数据
const formRef = ref(null)
const formModel = ref({
    key1: '', key2: '', key3: '', key4: '', key5: '',
})
const formRules = {
    key1: {
        required: true,
        trigger: 'blur',
        message: "请输入年度合同指标"
    },
    key2: {
        required: true,
        trigger: 'blur',
        message: "请输入年度利润指标"
    },
    key3: {
        required: true,
        trigger: 'blur',
        message: "请输入预算总额"
    },
    key4: {
        required: true,
        trigger: 'blur',
        message: "请输入人员工资预算"
    },
    key5: {
        required: true,
        trigger: 'blur',
        message: "请输入综合管理预算"
    },
}

//日期时间被选择
const betweenTime = ref(null)
const betweenTimeUpdate = ({arr, query}) => {
    betweenTime.value = arr
    //formModel.value.betweenTime = query
}

//工资预算表格
const tableColumn = [
    {key: 'key1', name: '部门', align: 'center'},
    {key: 'key2', name: '岗位', align: 'center'},
    {key: 'key3', name: '工资支出', align: 'center'},
    {key: 'key4', name: '五险一金支出',  align: 'center'},
    {key: 'key5', name: '人员数量',  align: 'center'},
    {key: 'key6', name: '状态', align: 'center'},
    {key: 'key7', name: '工期(月)', align: 'center'},
    {key: 'action', name: '操作', width: '160', align: 'center'},
]
const tableData = ref([
    {id: 1, key1: '管理中心', key2: '产品经理', key3: '22', key4: '33', key5: '44', key6: '在职', key7: '22', isEditMode: false},
])

//新增工资预算表格
const addTableData = () => {
    tableData.value.push({isEditMode: true})
}

//删除工资预算表格
const delTableData = (row,index) => {
    delMessage(() => {
        if (!row.id)  {
            tableData.value.splice(index, 1)
        }
    })
}


//综合管理费用表格
const tableColumn1 = [
    {key: 'key1', name: '支出类目', align: 'center'},
    {key: 'key2', name: '每月费用', align: 'center'},
    {key: 'key3', name: '预算期数(月)', align: 'center'},
    {key: 'key4', name: '测算备注',  align: 'center'},
    {key: 'action', name: '操作', width: '160', align: 'center'},
]
const tableData1 = ref([
    {id: 1, key1: '办公费', key2: '1', key3: '22', key4: '33', isEditMode: false},
])

//新增工资预算表格
const addTableData1 = () => {
    tableData1.value.push({isEditMode: true})
}

//删除工资预算表格
const delTableData1 = (row,index) => {
    delMessage(() => {
        if (!row.id)  {
            tableData1.value.splice(index, 1)
        }
    })
}
</script>

<style lang="scss" scoped>

</style>

<style lang="scss">
.hac-budget-form-card-header {
    .el-form--inline .el-form-item {
        margin-right: 16px;
        margin-bottom: 16px;
    }
}
</style>
