<template>
    <HcCard actionUi="text-center">
        <HcCardItem id="hc-program-annual-form-card-item" class="hc-program-annual-form-card-item">
            <el-form ref="formRef" inline :model="formModel" :rules="formRules">
                <div>
                    <el-form-item label="预算名称" prop="name" class="w-1/2 mr-6">
                        <el-input v-model="formModel.name" placeholder="请输入预算名称" />
                    </el-form-item>
                    <el-form-item label="预算起止时间" prop="time">
                        <HcDatePicker :dates="betweenTime" clearable @change="betweenTimeUpdate"/>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="合同" prop="key1">
                        <el-tooltip content="年度合同指标">
                            <el-input v-model="formModel.key1" placeholder="年度合同指标" disabled/>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item label="利润" prop="key2">
                        <el-tooltip content="年度利润指标">
                            <el-input v-model="formModel.key2" placeholder="年度利润指标" disabled/>
                        </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>
                </div>
            </el-form>
        </HcCardItem>
        <div class="hc-program-annual-form-tabs" :style="tabsStyle">
            <el-tabs type="border-card" class="form-tabs">
                <el-tab-pane label="年度预算收入">
                    <HcTable :isIndex="false" :column="tableColumn" :datas="tableData">
                        <template #key1="{row,index}">
                            <el-select v-model="row.key1">
                                <el-option label="选项1" value="选项1"/>
                                <el-option label="选项2" value="选项2"/>
                            </el-select>
                        </template>
                        <template #key2="{row,index}">
                            <el-select v-model="row.key2">
                                <el-option label="选项1" value="选项1"/>
                                <el-option label="选项2" value="选项2"/>
                            </el-select>
                        </template>
                        <template #key3="{row,index}">
                            <el-input v-model="row.key3" disabled/>
                        </template>
                        <template #key4="{row,index}">
                            <el-input v-model="row.key4" disabled/>
                        </template>
                        <template #key5="{row,index}">
                            <el-date-picker class="block" v-model="row.key5" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
                        </template>
                        <template #key6="{row,index}">
                            <el-input v-model="row.key6"/>
                        </template>
                        <template #key7="{row,index}">
                            <el-input v-model="row.key7"/>
                        </template>
                        <template #action="{row,index}">
                            <el-button size="small" type="primary">
                                <HcIcon name="add"/>
                                <span>新增</span>
                            </el-button>
                            <el-button size="small" type="danger">
                                <HcIcon name="delete-bin"/>
                                <span>删除</span>
                            </el-button>
                        </template>
                    </HcTable>
                </el-tab-pane>
                <el-tab-pane label="年度预算支出">
                    <HcTable :isIndex="false" :column="tableColumn1" :datas="tableData2">
                        <template #key1="{row,index}">
                            <el-select v-model="row.key1">
                                <el-option label="选项1" value="选项1"/>
                                <el-option label="选项2" value="选项2"/>
                            </el-select>
                        </template>
                        <template #key2="{row,index}">
                            <el-select v-model="row.key2">
                                <el-option label="选项1" value="选项1"/>
                                <el-option label="选项2" value="选项2"/>
                            </el-select>
                        </template>
                        <template #key3="{row,index}">
                            <el-input v-model="row.key3"/>
                        </template>
                        <template #key4="{row,index}">
                            <el-input v-model="row.key4"/>
                        </template>
                        <template #key5="{row,index}">
                            <el-input v-model="row.key4"/>
                        </template>
                        <template #key6="{row,index}">
                            <el-input v-model="row.key6"/>
                        </template>
                        <template #key7="{row,index}">
                            <el-input v-model="row.key7"/>
                        </template>
                        <template #key8="{row,index}">
                            <el-input v-model="row.key7"/>
                        </template>
                        <template #key9="{row,index}">
                            <el-input v-model="row.key7"/>
                        </template>
                        <template #key10="{row,index}">
                            <el-input v-model="row.key7"/>
                        </template>
                        <template #key11="{row,index}">
                            <el-input v-model="row.key7"/>
                        </template>
                        <template #key12="{row,index}">
                            <el-input v-model="row.key7"/>
                        </template>
                        <template #key13="{row,index}">
                            <el-input v-model="row.key7"/>
                        </template>
                        <template #key14="{row,index}">
                            <el-input v-model="row.key7"/>
                        </template>
                        <template #action="{row,index}">
                            <el-button size="small" type="primary">
                                <HcIcon name="add"/>
                                <span>新增</span>
                            </el-button>
                            <el-button size="small" type="danger">
                                <HcIcon name="delete-bin"/>
                                <span>删除</span>
                            </el-button>
                        </template>
                    </HcTable>
                </el-tab-pane>
            </el-tabs>
        </div>
        <template #action>
            <el-button size="large" type="info" hc-btn @click="goBackClick">
                <HcIcon name="arrow-go-back"/>
                <span>取消并返回</span>
            </el-button>
            <el-button size="large" type="primary" hc-btn @click="saveClick">
                <HcIcon name="check-double"/>
                <span>提交保存</span>
            </el-button>
        </template>
    </HcCard>
</template>

<script setup>
import {nextTick, onActivated, ref, onDeactivated} from "vue";
import {useRouter} from 'vue-router'

const router = useRouter()

//页面激活
onActivated(() => {
    setFormTabsStyle()
    windowResize()
})

//设置表单tabs样式
const tabsStyle = ref('')
const setFormTabsStyle = () => {
    //处理为响应式高度
    nextTick(() => {
        const cardItemHeight = document.getElementById('hc-program-annual-form-card-item')?.offsetHeight
        tabsStyle.value = 'height: calc(100% - ' + cardItemHeight + 'px)'
    })
}

//顶部表单数据
const formRef = ref(null)
const formModel = ref({
    key1: '', key2: '', key3: '', key4: '', key5: '',
})
const formRules = {}

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

//监听浏览器窗口变化
const windowResize = () => {
    window.addEventListener("resize", resizeEvent);
}
const resizeEvent = () => {
    window.requestAnimationFrame(() => {
        setFormTabsStyle()
    })
}

//获取数据
const tableColumn = [
    {key: 'key1', name: '项目名称', minWidth: '180', align: 'center'},
    {key: 'key2', name: '收入类别', width: '180', align: 'center'},
    {key: 'key3', name: '项目类别', width: '180', align: 'center'},
    {key: 'key4', name: '产品线', width: '180', align: 'center'},
    {key: 'key5', name: '预计签单时间', width: '220', align: 'center'},
    {key: 'key6', name: '预计新签合同额', width: '180', align: 'center'},
    {key: 'key7', name: '预计本年度回款额', width: '180', align: 'center'},
    {key: 'action', name: '操作', width: '170', align: 'center', fixed: 'right'},
]
const tableData = ref([
    {id: 1}, {id: 2},
])

const tableColumn1 = [
    {key: 'key1', name: '预算科目（一级）', minWidth: '180', align: 'center'},
    {key: 'key2', name: '二级科目', minWidth: '180', align: 'center'},
    {key: 'key3', name: '1月', width: '100', align: 'center'},
    {key: 'key4', name: '2月', width: '100', align: 'center'},
    {key: 'key5', name: '3月', width: '100', align: 'center'},
    {key: 'key6', name: '4月', width: '100', align: 'center'},
    {key: 'key7', name: '5月', width: '100', align: 'center'},
    {key: 'key8', name: '6月', width: '100', align: 'center'},
    {key: 'key9', name: '7月', width: '100', align: 'center'},
    {key: 'key10', name: '8月', width: '100', align: 'center'},
    {key: 'key11', name: '9月', width: '100', align: 'center'},
    {key: 'key12', name: '10月', width: '100', align: 'center'},
    {key: 'key13', name: '11月', width: '100', align: 'center'},
    {key: 'key14', name: '12月', width: '100', align: 'center'},
    {key: 'action', name: '操作', width: '170', align: 'center', fixed: 'right'},
]
const tableData2 = ref([
    {id: 1}, {id: 2},
])


//返回
const goBackClick = () => {
    router.back()
}

//提交保存
const saveClick = () => {

}

//被卸载时
onDeactivated(() => {
    window.removeEventListener("resize",resizeEvent);
})
</script>

<style lang="scss" scoped>
.hc-program-annual-form-card-item {
    height: auto;
}
.hc-program-annual-form-tabs {
    position: relative;
    padding-top: 24px;
    .el-tabs.form-tabs {
        height: 100%;
    }
}
</style>

<style lang="scss">
.hc-program-annual-form-tabs .el-tabs.form-tabs .el-tabs__content {
    height: calc(100% - 39px);
    .el-tab-pane {
        height: 100%;
    }
}
</style>
