<template>
    <HcCard>
        <template #header>
            <div class="w-36">
                <el-select v-model="searchForm.projectType" block clearable placeholder="项目类型" size="large">
                    <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
                </el-select>
            </div>
            <div class="w-40 ml-2">
                <el-select v-model="searchForm.user" block clearable placeholder="报销人" size="large">
                    <el-option v-for="item in users" :label="item.name" :value="item.key"/>
                </el-select>
            </div>
            <div class="w-52 ml-2">
                <el-select v-model="searchForm.project" block clearable placeholder="项目名称" size="large">
                    <el-option v-for="item in projectName" :label="item.name" :value="item.key"/>
                </el-select>
            </div>
            <div class="ml-4">
                <el-button type="primary" @click="searchClick" size="large">
                    <HcIcon name="search-2"/>
                    <span>搜索</span>
                </el-button>
            </div>
            <div class="ml-2">
                <el-button size="large" @click="resetClick">
                    <HcIcon name="close-circle"/>
                    <span>重置</span>
                </el-button>
            </div>
        </template>
        <template #extra>
            <el-button size="large" type="primary" hc-btn @click="addRowClick">
                <HcIcon name="add"/>
                <span>新增报销记录</span>
            </el-button>
        </template>

        <HcTable :isIndex="false" :column="tableColumn" :datas="tableData" :loading="tableLoading">
            <template #key1="{row}">
                <span class="text-blue">{{row.key1}}</span>
            </template>
            <template #action="{row,index}">
                <el-button plain size="small" type="primary" @click="editRowClick(row)">编辑</el-button>
                <el-button plain size="small" type="danger">删除</el-button>
            </template>
        </HcTable>

        <template #action>
            <HcPages :pages="searchForm" @change="pageChange"/>
        </template>

        <!--报销记录-->
        <HcDialog bgColor="#ffffff" isToBody :loading="recordLoading" :show="recordModal" title="报销记录" widths="500px" @close="closeRecordClick" @save="saveRecordClick">
            <el-form ref="formRecordRef" :model="formRecordModel" :rules="formRecordRules" label-width="auto" size="large">
                <el-form-item label="报销类型" prop="key1">
                    <el-select v-model="formRecordModel.key1" block clearable placeholder="报销类型" size="large">
                        <el-option v-for="item in reimburseType" :label="item.name" :value="item.key"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="关联项目" prop="key2">
                    <el-select v-model="formRecordModel.key2" block clearable placeholder="项目名称" size="large">
                        <el-option v-for="item in projectName" :label="item.name" :value="item.key"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="关联预算" prop="key3">
                    <el-button size="default" type="primary" @click="associatedBudgetClick">
                        <HcIcon name="add"/>
                        <span>关联预算</span>
                    </el-button>
                </el-form-item>
                <el-form-item label="费用金额" prop="key4">
                    <el-input v-model="formRecordModel.key4" placeholder="请输入费用金额">
                        <template #append>元</template>
                    </el-input>
                </el-form-item>
            </el-form>
        </HcDialog>

        <!--关联预算-->
        <HcDialog bgColor="#ffffff" isToBody isTable isRowFooter :loading="relatedLoading" :show="relatedModal" title="关联预算" widths="62rem">
            <HcTable :isIndex="false" :column="tableBudgetColumn" :datas="tableBudgetData" :loading="tableBudgetLoading">
                <template #action="{row,index}">
                    <el-button plain size="small" type="primary" @click="row.isRelated = true" v-if="!row.isRelated">
                        <HcIcon name="link" :line="false"/>
                        <span>关联</span>
                    </el-button>
                    <el-button plain size="small" type="danger" @click="row.isRelated = false" v-else>
                        <HcIcon name="link-unlink-m" :line="false"/>
                        <span>取消</span>
                    </el-button>
                </template>
            </HcTable>
            <template #leftRowFooter>
                <el-button size="large" @click="closeRelatedClick">
                    <HcIcon name="close"/>
                    <span>取消</span>
                </el-button>
                <el-button size="large" type="primary" @click="saveRelatedClick">
                    <HcIcon name="check"/>
                    <span>确认关联</span>
                </el-button>
            </template>
            <template #rightRowFooter>
                <HcPages :pages="searchBudgetForm" @change="pageBudgetChange"/>
            </template>
        </HcDialog>

    </HcCard>
</template>

<script setup>
import {ref} from "vue";

//项目类型
const projectType = ref([
    {name: '二级路', key: '二级路'},
    {name: '国道', key: '国道'},
    {name: '水利水电', key: '水利水电'},
    {name: '市政', key: '市政'},
])

//报销人
const users = ref([
    {name: '张三', key: '张三'},
    {name: '李四', key: '李四'}
])

//项目名称
const projectName = ref([
    {name: '陈油路', key: '陈油路'},
    {name: '奉建路', key: '奉建路'}
])

//报销类型
const reimburseType = 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'},
    {name: '公司车辆使用费', key: '17'},
    {name: '金融手续费', key: '18'},
    {name: '交通费', key: '19'},
    {name: '五险一金', key: '20'},
    {name: '工资', key: '21'},
    {name: '项目合作劳务费', key: '22'},
    {name: '福利费', key: '23'},
    {name: '技术服务费', key: '24'},
    {name: '商务佣金', key: '25'},
    {name: '礼品费', key: '26'},
])

//搜索表单
const searchForm = ref({
    projectType: null, user: null, project: null,
    current: 1, size: 20, total: 0
})

//搜索
const searchClick = () => {
    searchForm.value.current = 1;
    getTableData()
}

//重置搜索表单
const resetClick = () => {
    searchForm.value = {current: 1, size: 20, total: 0}
}

//分页被点击
const pageChange = ({current, size}) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}

//获取数据
const tableLoading = ref(false)
const tableColumn = [
    {key: 'key', name: '报销编号', width: '90', align: 'center'},
    {key: 'key1', name: '报销类型', width: '180', align: 'center'},
    {key: 'key2', name: '报销项目'},
    {key: 'key3', name: '项目进程', width: '180', align: 'center'},
    {key: 'key4', name: '报销金额', width: '160', align: 'center'},
    {key: 'key5', name: '报销人', width: '140', align: 'center'},
    {key: 'key6', name: '报销时间', width: '160', align: 'center'},
    {key: 'action', name: '操作', width: '130', align: 'center'},
]
const tableData = ref([
    {id: 1, key: 'BX-01', key1: '差旅费', key2: '奉建路', key3: '商机', key4: '6667', key5: '张三', key6: '2022-02-22'},
    {id: 2, key: 'BX-01', key1: '差旅费', key2: '奉建路', key3: '商机', key4: '6667', key5: '张三', key6: '2022-02-22'},
    {id: 3, key: 'BX-01', key1: '差旅费', key2: '奉建路', key3: '商机', key4: '6667', key5: '张三', key6: '2022-02-22'},
])

const getTableData = () => {

}

//报销记录弹窗
const recordLoading = ref(false)
const recordModal = ref(false)

//编辑报销记录
const editRowClick = (row) => {
    recordLoading.value = false
    recordModal.value = true
}

//新增报销记录
const addRowClick = () => {
    recordLoading.value = false
    recordModal.value = true
}

//报销记录表单
const formRecordRef = ref(null)
const formRecordModel = ref({})
const formRecordRules = {}

//关闭报销记录
const closeRecordClick = () => {
    recordLoading.value = false
    recordModal.value = false
}

//提交保存报销记录
const saveRecordClick = () => {
    recordLoading.value = false
    recordModal.value = false
}

//关联预算弹窗
const relatedLoading = ref(false)
const relatedModal = ref(false)

//展开关联预算弹窗
const associatedBudgetClick = () => {
    relatedLoading.value = false
    relatedModal.value = true
}

//预算分页和搜索
const searchBudgetForm = ref({current: 1, size: 20, total: 0})
const pageBudgetChange = ({current, size}) => {
    searchBudgetForm.value.current = current
    searchBudgetForm.value.size = size
}

//预算表格
const tableBudgetLoading = ref(false)
const tableBudgetColumn = [
    {key: 'key', name: '项目环节', width: '160', align: 'center'},
    {key: 'key1', name: '预算类型', width: '100', align: 'center'},
    {key: 'key2', name: '任务明细', width: '160', align: 'center'},
    {key: 'key3', name: '预算金额', width: '120', align: 'center'},
    {key: 'key4', name: '任务完成标准'},
    {key: 'key5', name: '投入人员数量', width: '120', align: 'center'},
    {key: 'action', name: '操作', width: '90', align: 'center'},
]
const tableBudgetData = ref([
    {id: 1, key: 'xxx', key1: 'xxx', key2: 'xxx', key3: 'xxx', key4: 'xxx', key5: 'xxx'},
    {id: 2, key: 'xxx', key1: 'xxx', key2: 'xxx', key3: 'xxx', key4: 'xxx', key5: 'xxx'},
    {id: 3, key: 'xxx', key1: 'xxx', key2: 'xxx', key3: 'xxx', key4: 'xxx', key5: 'xxx'},
    {id: 4, key: 'xxx', key1: 'xxx', key2: 'xxx', key3: 'xxx', key4: 'xxx', key5: 'xxx'},
])


//关闭报销记录
const closeRelatedClick = () => {
    relatedLoading.value = false
    relatedModal.value = false
}

//提交保存报销记录
const saveRelatedClick = () => {
    relatedLoading.value = false
    relatedModal.value = false
}
</script>

<style lang="scss" scoped>

</style>

<style lang="scss">

</style>
