<template>
    <div class='tit'>主合同</div>
    <div>
        <el-table :data="tableData19" stripe style="width: 100%">
            <el-table-column label="合同编号" prop='contract_name' width="180" />
            <el-table-column label="合同名称" prop='contract_code' width="180" />
            <el-table-column label="合同类型" prop='contract_type_text' />
            <el-table-column label="负责人" prop='business_director_name' />
            <el-table-column label="签约日期" prop='contract_date' />
            <el-table-column label="合同金额" prop='amount' />
            <el-table-column label="洽商金额" prop='negotiation_amount' />
            <el-table-column label="实际合同金额" prop='reality_contract_amount' />
            <el-table-column label="已回款" prop='returned_amount' />
            <el-table-column label="未回款" prop='not_returned_amount' />
            <el-table-column label="已开票" prop='invoicing_amount' />
            <el-table-column label="未开票" prop='not_invoicing_amount' />
        </el-table>
    </div>
    <div style="margin: 10px 0;">
        <el-pagination v-model:current-page="pager19.page_no" v-model:page-size="pager19.page_size"
            :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="total18"
            @size-change="handleSizeChange19" @current-change="handleCurrentChange19" />
    </div>
    <div class='tit' style="margin: 20px 0;">合同洽商</div>
    <div>
        <el-table :data="tableData20" stripe style="width: 100%">
            <el-table-column label="洽商编号" prop='negotiation_no' width="180" />
            <el-table-column label="洽商单名称" prop='negotiation_name' width="180" />
            <el-table-column label="合同编号" prop='contract_code' />
            <el-table-column label="洽商类别" prop='negotiation_type' />
            <el-table-column label="签约日期" prop='contract_date' />
            <el-table-column label="业务负责人" prop='business_director' />
            <el-table-column label="洽商金额" prop='negotiation_amount' />
        </el-table>
    </div>
    <div style="margin: 10px 0;">
        <el-pagination v-model:current-page="pager20.page_no" v-model:page-size="pager20.page_size"
            :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="total19"
            @size-change="handleSizeChange20" @current-change="handleCurrentChange20" />
    </div>
</template>



<script setup>

import { ref, reactive, defineProps } from "vue"
import { apiContractLists } from '@/api/contract'
import { apiContractNegotiationLists } from '@/api/contract_negotiation'
const props = defineProps({
    project_id: Number
})




const tableData19 = ref([])
const tableData20 = ref([])
const total18 = ref(0)
const total19 = ref(0)
const total20 = ref(0)
const pager19 = reactive({
    page_size: 10,
    page_no: 1,
    project_id: props.project_id
})

const pager20 = reactive({
    page_size: 10,
    page_no: 1,
    project_id: props.project_id
})

//获取项目合同列表
const contractLists = () => {
    apiContractLists(pager19).then((res) => {
        tableData19.value = res.lists
        total18.value = res.count
    })
}

//获取合同洽商列表
const contcractNegotiationLists = () => {
    apiContractNegotiationLists(pager20).then((res) => {
        tableData20.value = res.lists
        total19.value = res.count
    })
}


contractLists()
contcractNegotiationLists()
</script>
<style >
.tit {
    font-size: 1.2em;
    margin-bottom: 10px;
}
</style>