<template>
    <HcCard>
        <template #header>
            <div class="hc-expense-total-title">支付总额(元)：1520</div>
        </template>
        <div class="hac-expense-record-body">
            <div class="record-form-box">
                <el-scrollbar>
                    <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto" size="large">
                        <div class="hc-form-item">
                            <el-form-item label="关联项目：" prop="key2">
                                <el-select block v-model="formModel.key4">
                                    <el-option label="选项1" value="选项1"/>
                                    <el-option label="选项2" value="选项2"/>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="非项目请输入：" prop="key3">
                                <el-input v-model="formModel.key2"/>
                            </el-form-item>
                        </div>
                        <el-form-item label="对方单位：" prop="key3">
                            <el-input v-model="formModel.key2"/>
                        </el-form-item>
                        <el-form-item label="支付金额：" prop="key3">
                            <el-input v-model="formModel.key2"/>
                        </el-form-item>
                        <el-form-item label="申请支付时间：" prop="key3">
                            <el-date-picker type="date" class="block" v-model="formModel.key3" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
                        </el-form-item>
                        <el-form-item label="外包类型：" prop="key2">
                            <el-select block v-model="formModel.key4">
                                <el-option label="选项1" value="选项1"/>
                                <el-option label="选项2" value="选项2"/>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-scrollbar>
            </div>
            <div class="record-flow-box">
                <div class="title">流程</div>
                <div class="content">
                    <el-scrollbar>
                        <el-timeline>
                            <el-timeline-item v-for="(item, index) in timeLineData" :key="index">
                                <div class="timeline-title">{{item.title}}</div>
                                <div class="timeline-section">{{item.section}}</div>
                            </el-timeline-item>
                        </el-timeline>
                    </el-scrollbar>
                </div>
                <div class="action">
                    <el-button type="warning" hc-btn>
                        <HcIcon name="draft"/>
                        <span>暂存草稿</span>
                    </el-button>
                    <el-button type="primary" hc-btn>
                        <HcIcon name="check-double"/>
                        <span>提交报销申请</span>
                    </el-button>
                </div>
            </div>
        </div>
    </HcCard>
</template>

<script setup>
import {ref} from "vue";
import {useRouter} from 'vue-router'
const router = useRouter()

//明细表单
const formRef = ref(null)
const formModel = ref({
    key1: '', key2: '', key3: '', key4: '', key5: '',
})
const formRules = {}

const timeLineData = ref([
    {title: '审批人', section: '部门负责人'},
    {title: '财务审核', section: '财务'},
    {title: '最终确认付款人', section: '总经理'},
    {title: '出纳付款', section: '出纳'},
    {title: '抄送人', section: '总经理、财务、申请人'},
])
</script>

<style scoped lang="scss">
@import "~src/styles/expense/expense.scoped.scss";
.record-form-action-box {
    position: relative;
}
</style>

<style lang="scss">
@import "~src/styles/expense/expense.scss";
</style>
