<template>
    <HcCard>
        <template #header>
            <el-form ref="formRef" inline :model="formModel" :rules="formRules">
                <el-form-item label="关联项目" prop="key1">
                    <el-select v-model="formModel.key1" block clearable placeholder="项目名称">
                        <el-option v-for="item in projectName" :label="item.name" :value="item.key"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="预算制订人" prop="key2">
                    <el-input v-model="formModel.key2" placeholder="预算制订人" />
                </el-form-item>
                <el-form-item label="预算总额" prop="key3">
                    <el-input v-model="formModel.key3" placeholder="预算总额" disabled>
                        <template #append>元</template>
                    </el-input>
                </el-form-item>
            </el-form>
        </template>
        <template #extra>
            <el-button type="primary" hc-btn @click="addTableData">
                <HcIcon name="add"/>
                <span>新增预算</span>
            </el-button>
        </template>
        <HcTable :isIndex="false" :column="tableColumn" :datas="tableData">
            <template #key1="{row,index}">
                <el-select v-model="row.key1" placeholder="项目进程" v-if="row.isEditMode">
                    <el-option v-for="item in projectProcess" :label="item.name" :value="item.key"/>
                </el-select>
                <div v-else>{{row.key1}}</div>
            </template>
            <template #key2="{row,index}">
                <el-select v-model="row.key2" placeholder="预算类型" v-if="row.isEditMode">
                    <el-option v-for="item in budgetType" :label="item.name" :value="item.key"/>
                </el-select>
                <div v-else>{{row.key2}}</div>
            </template>
            <template #key3="{row,index}">
                <el-select v-model="row.key3" placeholder="任务明细" v-if="row.isEditMode">
                    <el-option v-for="item in taskDetail" :label="item.name" :value="item.key"/>
                </el-select>
                <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="1"/>
                    <el-option label="业务" value="2"/>
                </el-select>
                <div v-else>{{row.key6}}</div>
            </template>
            <template #key7="{row,index}">
                <el-input v-model="row.key7" v-if="row.isEditMode" disabled/>
                <div v-else>{{row.key7}}</div>
            </template>
            <template #key8="{row,index}">
                <el-input v-model="row.key8" v-if="row.isEditMode"/>
                <div v-else>{{row.key8}}</div>
            </template>
            <template #key9="{row,index}">
                <el-input v-model="row.key9" v-if="row.isEditMode"/>
                <div v-else>{{row.key9}}</div>
            </template>
            <template #key10="{row,index}">
                <el-input v-model="row.key10" v-if="row.isEditMode"/>
                <div v-else>{{row.key10}}</div>
            </template>
            <template #key11="{row,index}">
                <el-input v-model="row.key11" v-if="row.isEditMode" disabled/>
                <div v-else>{{row.key11}}</div>
            </template>
            <template #key12="{row,index}">
                <el-input v-model="row.key12" v-if="row.isEditMode"/>
                <div v-else>{{row.key12}}</div>
            </template>
            <template #key13="{row,index}">
                <el-input v-model="row.key13" v-if="row.isEditMode" disabled/>
                <div v-else>{{row.key13}}</div>
            </template>
            <template #key14="{row,index}">
                <el-input v-model="row.key14" v-if="row.isEditMode"/>
                <div v-else>{{row.key14}}</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>
    </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 projectName = ref([
    {name: '陈油路', key: '陈油路'},
    {name: '奉建路', key: '奉建路'}
])

//项目进程
const projectProcess = ref([
    {name: '商机-演示沟通', key: '1'},
    {name: '商机-成本核算及报价', key: '2'},
    {name: '合同-服务范围洽谈', key: '3'},
    {name: '产品-研发', key: '4'},
    {name: '产品-配置', key: '5'},
    {name: '产品-测试', key: '6'},
    {name: '产品-交付', key: '7'},
    {name: '实施-系统培训', key: '8'},
    {name: '实施-现场服务', key: '9'},
    {name: '实施-合同回款', key: '10'},
    {name: '项目验收', key: '11'},
])

//预算类型
const budgetType = ref([
    {name: '合同签订阶段', key: '1'},
    {name: '项目注册阶段', key: '2'},
    {name: '项目准备阶段', key: '3'},
    {name: '项目研发阶段', key: '4'},
    {name: '项目配置阶段', key: '5'},
    {name: '项目测试阶段', key: '6'},
    {name: '项目培训阶段', key: '7'},
    {name: '项目编辑阶段', key: '8'},
    {name: '资料编辑阶段', key: '9'},
    {name: '过程服务阶段', key: '10'},
    {name: '交工阶段', key: '11'},
    {name: '资料收集阶段', key: '12'},
    {name: '竣工编辑阶段', key: '13'},
    {name: '档案验收阶段', key: '14'},
    {name: '档案移交阶段', key: '15'},
    {name: '耗材', key: '16'},
])

//任务明细
const taskDetail = ref([
    {name: '审核图纸', key: '1'},
    {name: '风险评估', key: '2'},
    {name: '合同报价', key: '3'},
    {name: '合同洽谈及签订', key: '4'},
    {name: '项目注册', key: '5'},
    {name: '数据配置', key: '6'},
    {name: '项目WBS划分', key: '7'},
])

//顶部表单数据
const formRef = ref(null)
const formModel = ref({key1: '', key2: '', key3: ''})
const formRules = {
    key1: {
        required: true,
        trigger: 'blur',
        message: "请选择关联项目"
    },
    key2: {
        required: true,
        trigger: 'blur',
        message: "请输入预算制订人"
    }
}

//工资预算表格
const tableColumn = [
    {key: 'key1', name: '项目环节', width: '200'},
    {key: 'key2', name: '预算类型', width: '200'},
    {key: 'key3', name: '任务明细', width: '200'},
    {key: 'key4', name: '预计工作日(小数/整数/天)', width: '160'},
    {key: 'key5', name: '投入人员数量', width: '140'},
    {key: 'key6', name: '人日单价', width: '140'},
    {key: 'key7', name: '预计人工成本', width: '160'},
    {key: 'key8', name: '预计差旅费(元)', width: '160'},
    {key: 'key9', name: '外包单价', width: '140'},
    {key: 'key10', name: '外包数量', width: '140'},
    {key: 'key11', name: '外包金额', width: '140'},
    {key: 'key12', name: '其他', width: '140'},
    {key: 'key13', name: '预算金额', width: '120'},
    {key: 'key14', name: '测算备注', width: '200'},
    {key: 'action', name: '操作', width: '160', align: 'center', fixed: 'right'},
]
const tableData = ref([
    {id: 1, key1: '', key2: '', key3: '', key4: '33', key5: '44', key6: '', key7: '22', isEditMode: false},
])

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

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

<style lang="scss" scoped>

</style>

<style lang="scss">

</style>
