<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>
                    <HcCardItem title="报销明细1" ui="hac-bg-grey">
                        <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="key1">
                                    <el-select block v-model="formModel.key1">
                                        <el-option label="选项1" value="选项1"/>
                                        <el-option label="选项2" value="选项2"/>
                                    </el-select>
                                </el-form-item>
                                <div class="ml-2">
                                    <el-button type="default" @click="budgetModalShow">
                                        <HcIcon name="add"/>
                                        <span>关联预算计划</span>
                                    </el-button>
                                </div>
                            </div>
                            <div class="hc-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-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="key4">
                                    <el-select block v-model="formModel.key4">
                                        <el-option label="选项1" value="选项1"/>
                                        <el-option label="选项2" value="选项2"/>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <el-form-item label="费用说明：">
                                <el-input type="textarea"
                                          v-model="formModel.key5"
                                          :autosize="{ minRows: 3, maxRows: 5 }"
                                          placeholder="请输入费用说明"
                                />
                            </el-form-item>
                            <el-form-item label="电子发票：">
                                <HcFormUpload :src="formModel.key6" @item="formInvoiceClick"/>
                            </el-form-item>
                            <el-form-item label="附件文件：">
                                <HcFormUpload :src="formModel.key6" @item="formFileClick"/>
                            </el-form-item>
                        </el-form>
                    </HcCardItem>

                    <div class="record-form-action-box mt-16">
                        <el-divider content-position="right" border-style="dashed">
                            <el-button type="primary" hc-btn>
                                <HcIcon name="add"/>
                                <span>添加明细</span>
                            </el-button>
                        </el-divider>
                        <el-form class="mt-16" inline :model="formInline" label-position="top">
                            <el-form-item label="归属人">
                                <el-select v-model="formInline.key1">
                                    <el-option label="选项1" value="1" />
                                    <el-option label="选项2" value="2" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="是否抵消借款金额">
                                <el-select v-model="formInline.key2">
                                    <el-option label="是" value="1" />
                                    <el-option label="否" value="2" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="选择借款项">
                                <el-select v-model="formInline.key3">
                                    <el-option label="选项1" value="1" />
                                    <el-option label="选项2" value="2" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="冲抵后的实际报销金额">
                                <el-input v-model="formInline.key2" disabled>
                                    <template #append>元</template>
                                </el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </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>

        <!--上传控件-->
        <HcUploadFile ref="HcUploadFileRef" :options="uploadFileOptions" :echoParams="uploadEchoParams" @success="HcUploadFileSuccess"/>

        <!--关联预算计划-->
        <HcDialog bgColor="#ffffff" isToBody isTable
                  title="关联预算计划" widths="80%" saveText="保存"
                  :show="budgetModal"
                  @close="budgetCloseClick"
                  @save="budgetSaveClick"
        >
            <HcTable :column="tableBudgetColumn" :datas="tableBudgetData">
                <template #action="{row,index}">
                    <el-button size="small" type="danger" @click="row.relevance = false" v-if="row.relevance">取消关联</el-button>
                    <el-button size="small" type="primary" @click="row.relevance = true" v-else>关联</el-button>
                </template>
            </HcTable>
        </HcDialog>
    </HcCard>
</template>

<script setup>
import {ref} from "vue";
import {useRouter} from 'vue-router'
import {getTokenHeader} from "~src/api/request/header";

const router = useRouter()

//上传配置
const HcUploadFileRef = ref(null)
const uploadEchoParams = ref({})
const uploadFileOptions = {
    headers: getTokenHeader(),
}

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

//关联预算计划
const budgetModal = ref(false)
const budgetModalShow = () => {
    budgetModal.value = true
}
const budgetCloseClick = () => {
    budgetModal.value = false
}
const budgetSaveClick = () => {

}

//关联预算计划表格
const tableBudgetColumn = [
    {key: 'key1', name: '任务所属项目'},
    {key: 'key2', name: '状态',  width: '120', align: 'center'},
    {key: 'key3', name: '任务描述'},
    {key: 'key4', name: '完成指标', width: '120', align: 'center'},
    {key: 'action', name: '操作', width: '100', align: 'center'},
]
const tableBudgetData = ref([
    {id: 1, key1: 'xxxx'},
    {id: 2, key1: 'xxxx'},
    {id: 3, key1: 'xxxx'},
    {id: 4, key1: 'xxxx'},
])


//电子发票
const formInvoiceClick = () => {
    HcUploadFileRef.value?.selectFile();
}

//附件
const formFileClick = () => {
    HcUploadFileRef.value?.selectFile();
}

//上传完成
const HcUploadFileSuccess = (res) => {

}

const formInline = ref({})
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>
