
<template>
    <div class="detail-popup">
        <popup ref="popupRef" title="供应商管理详情" :async="true" width="80%" @confirm="handleSubmit" @close="handleClose">
            <el-form ref="formRef" :model="formData" label-width="120px">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="基本信息" name="demo-tabs-1">
                        <el-descriptions title="基本信息" :column="2" border>
                            <el-descriptions-item label="组织名称" label-align="left" align="left"
                                label-class-name="my-label">{{ formData.org_name }}</el-descriptions-item>
                            <el-descriptions-item label="部门名称" label-align="left" align="left"
                                label-class-name="my-label">{{ formData.dept_name }}</el-descriptions-item>
                            <el-descriptions-item label="供应商简介" label-align="left" align="left"
                                label-class-name="my-label">{{ formData.supplier_introduction }}</el-descriptions-item>
                            <el-descriptions-item label="供应商分组" label-align="left" align="left" label-class-name="my-label">
                                {{ formData.supplier_group_text }}</el-descriptions-item>
                            <el-descriptions-item label="供应商分类" label-align="left" align="left" label-class-name="my-label">
                                {{ formData.supplier_category_text }}</el-descriptions-item>
                            <el-descriptions-item label="供应商等级" label-align="left" align="left" label-class-name="my-label">
                                {{ formData.supplier_grade_text }}
                            </el-descriptions-item>
                            <el-descriptions-item label="联系人" label-align="left" align="left" label-class-name="my-label">
                                {{ formData.contacts
                                }}</el-descriptions-item>
                            <el-descriptions-item label="性别" label-align="left" align="left" label-class-name="my-label"> {{
                                formData.contacts_sex_text


                            }}</el-descriptions-item>

                            <el-descriptions-item label="出生日期" label-align="left" align="left" label-class-name="my-label">
                                {{ formData.birthday }}</el-descriptions-item>

                            <el-descriptions-item label="联系电话" label-align="left" align="left" label-class-name="my-label">
                                {{ formData.phone

                                }}</el-descriptions-item>
                            <el-descriptions-item label="邮箱" label-align="left" align="left" label-class-name="my-label"> {{
                                formData.email

                            }}</el-descriptions-item>

                            <el-descriptions-item label="地址" label-align="left" align="left" label-class-name="my-label"> {{
                                formData.address

                            }}</el-descriptions-item>
                            <el-descriptions-item label="备注" label-align="left" align="left" label-class-name="my-label"> {{
                                formData.remark
                            }}</el-descriptions-item>
                            <el-descriptions-item label="附件" label-align="left" align="left" label-class-name="my-label">
                                <div v-if="formData?.annex?.length > 0">
                                    <div v-for="(item, index) in formData.annex" style="margin-left: 5px;display: block;">
                                        <el-link style="margin-left: 10px; color: #4a5dff; align-self: flex-start"
                                            :href="item" target="_blank">文件{{ index + 1 }}查看</el-link>
                                    </div>
                                </div>
                                <div v-else>
                                    暂无附件
                                </div>
                            </el-descriptions-item>
                        </el-descriptions>
                        <el-descriptions title="开票信息" border style="margin:20px 0">
                            <el-descriptions-item label="开票公司名称" label-align="left" align="left"
                                label-class-name="my-label">{{ formData.invoice_company_name }}</el-descriptions-item>
                            <el-descriptions-item label="纳税人识别号" label-align="left" align="left"
                                label-class-name="my-label">{{ formData.taxpayer_identification_number
                                }}</el-descriptions-item>
                            <el-descriptions-item label="开户银行" label-align="left" align="left"
                                label-class-name="my-label">{{ formData.bank_name }}</el-descriptions-item>
                            <el-descriptions-item label="开户名称" label-align="left" align="left" label-class-name="my-label">
                                {{ formData.bank_accnout_name }}</el-descriptions-item>
                            <el-descriptions-item label="账号" label-align="left" align="left" label-class-name="my-label"> {{
                                formData.bank_account }}</el-descriptions-item>
                            <el-descriptions-item label="开户地址" label-align="left" align="left" label-class-name="my-label">
                                {{ formData.bank_address }}
                            </el-descriptions-item>
                            <el-descriptions-item label="期初未开票金额" label-align="left" align="left"
                                label-class-name="my-label"> {{ formData.init_invoice_amount
                                }}</el-descriptions-item>

                        </el-descriptions>
                        <el-descriptions title="账期管理" border style="margin:20px 0">
                            <el-descriptions-item label="授信额度" label-align="left" align="left"
                                label-class-name="my-label">{{ formData.credit_limit }}</el-descriptions-item>
                            <el-descriptions-item label="账期" label-align="left" align="left" label-class-name="my-label">{{
                                formData.account_period }}</el-descriptions-item>
                        </el-descriptions>
                    </el-tab-pane>

                    <el-tab-pane label="合同" name="demo-tabs-3">
                        <div class="tit">采购合同</div>
                        <div>
                            <el-table :data="tableData1" stripe style="width: 100%">
                                <el-table-column label="序号" type="index" width="55" show-overflow-tooltip />
                                <el-table-column label="项目名称" prop="project_name" show-overflow-tooltip />
                                <el-table-column label="合同名称" prop="contract_name" show-overflow-tooltip />
                                <el-table-column label="合同编号" prop="contract_no" show-overflow-tooltip />
                                <el-table-column label="供应商名称" prop="supplier_name" show-overflow-tooltip />
                                <el-table-column label="合同类型" prop="contract_type" show-overflow-tooltip />
                                <el-table-column label="签订日期" prop="signing_date" show-overflow-tooltip />
                                <el-table-column label="合同金额" prop="contract_amount" show-overflow-tooltip />
                                <el-table-column label="已付款金额" prop="has_pay_amount" show-overflow-tooltip />
                                <el-table-column label="已开票金额" prop="has_invoice_amount" show-overflow-tooltip />
                                <el-table-column label="未付款金额" prop="not_pay_amount" show-overflow-tooltip />
                                <el-table-column label="未开票金额" prop="not_invoice_amount" show-overflow-tooltip />
                                <el-table-column label="退款金额" prop="refund_amount" show-overflow-tooltip />
                                <el-table-column label="已入库数量" prop="has_storage_num" show-overflow-tooltip />
                                <el-table-column label="未入库数量" prop="not_storage_num" show-overflow-tooltip />
                                <el-table-column label="数量" prop="num" show-overflow-tooltip />
                            </el-table>
                        </div>
                        <div style="margin: 10px 0;">
                            <el-pagination v-model:current-page="pager2.page_no" v-model:page-size="pager2.page_size"
                                :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper"
                                :total="total1" @size-change="handleSizeChange2" @current-change="handleCurrentChange2" />
                        </div>
                        <div class="tit">分包合同</div>
                        <div>
                            <el-table :data="tableData2" stripe style="width: 100%">
                                <el-table-column label="项目名称" prop="project_name" show-overflow-tooltip />
                                <el-table-column label="合同编号" prop="contract_no" show-overflow-tooltip />
                                <el-table-column label="合同名称" prop="contract_name" show-overflow-tooltip />
                                <el-table-column label="供应商名称" prop="supplier_name" show-overflow-tooltip />
                                <el-table-column label="签订日期" prop="signing_date" show-overflow-tooltip />
                                <el-table-column label="合同类型" prop="contract_type" show-overflow-tooltip />
                                <el-table-column label="合同金额" prop="contract_amount" show-overflow-tooltip />
                                <el-table-column label="洽商金额" prop="negotiation_amount" show-overflow-tooltip />
                                <el-table-column label="不含税金额" prop="excluding_tax_amount" show-overflow-tooltip />
                                <el-table-column label="实际合同金额" prop="reality_contract_amount" show-overflow-tooltip />
                                <el-table-column label="已付款金额" prop="has_pay_amount" show-overflow-tooltip />
                                <el-table-column label="未付款金额" prop="not_pay_amount" show-overflow-tooltip />
                                <el-table-column label="已开票金额" prop="invoice_amount" show-overflow-tooltip />
                                <el-table-column label="未开票金额" prop="not_invoice_amount" show-overflow-tooltip />
                                <el-table-column label="已退款金额" prop="refund_amount" show-overflow-tooltip />
                                <el-table-column label="结算差异" prop="settlement_difference" show-overflow-tooltip />
                            </el-table>
                        </div>
                        <div style="margin: 10px 0;">
                            <el-pagination v-model:current-page="pager3.page_no" v-model:page-size="pager3.page_size"
                                :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper"
                                :total="total2" @size-change="handleSizeChange3" @current-change="handleCurrentChange3" />
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="收票" name="demo-tabs-4">
                        <div class="tit">采购/分包发票</div>
                        <div>
                            <el-table :data="tableData4" stripe style="width: 100%">
                                <el-table-column type="selection" width="55" />
                                <el-table-column label="序号" type="index" width="55" />
                                <el-table-column label="项目名称" prop="project_name" show-overflow-tooltip />
                                <el-table-column label="合同编号" prop="contract_no" show-overflow-tooltip />
                                <el-table-column label="合同类型" prop="contract_type">
                                    <template #default="{ row }">
                                        {{ row.contract_type == 1 ? "采购合同" : "分包合同" }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="供应商名称" prop="supplier_name" show-overflow-tooltip />
                                <el-table-column label="收票日期" prop="receipt_date" show-overflow-tooltip />
                                <el-table-column label="开票日期" prop="invoicing_date" show-overflow-tooltip />
                                <el-table-column label="提交人" prop="commitor" show-overflow-tooltip />
                                <el-table-column label="发票税率" prop="invoice_tax_rate_text" show-overflow-tooltip>
                                    <template #default="{ row }">
                                        {{ row.invoice_tax_rate_text }}%
                                    </template>
                                </el-table-column>
                                <el-table-column label="发票金额" prop="invoice_amount" show-overflow-tooltip />
                                <el-table-column label="不含税金额" prop="amount_excluding_tax" show-overflow-tooltip />
                                <el-table-column label="税额" prop="tax_amount" show-overflow-tooltip />
                                <el-table-column label="发票类型" prop="invoice_type">
                                    <template #default="{ row }">
                                        {{ row.invoice_type_text }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="发票编号" prop="invoice_no" show-overflow-tooltip />
                            </el-table>
                        </div>
                        <div style="margin: 10px 0;">
                            <el-pagination v-model:current-page="pager5.page_no" v-model:page-size="pager5.page_size"
                                :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper"
                                :total="total4" @size-change="handleSizeChange5" @current-change="handleCurrentChange5" />
                        </div>

                    </el-tab-pane>
                    <el-tab-pane label="付款" name="demo-tabs-5">
                        <div class="tit">付款计划</div>
                        <div>
                            <el-table :data="tableData6" stripe style="width: 100%">
                                <el-table-column label="序号" type="index" width="55" />
                                <el-table-column label="供应商名称" prop="supplier_name" show-overflow-tooltip />
                                <el-table-column label="项目名称" prop="project_name" show-overflow-tooltip />
                                <el-table-column label="合同编号" prop="contract_no" show-overflow-tooltip />
                                <el-table-column label="计划付款日期" prop="pay_date" show-overflow-tooltip />
                                <el-table-column label="金额" prop="amount" show-overflow-tooltip />
                                <el-table-column label="期次" prop="period" show-overflow-tooltip>
                                    <template #default="{ row }">
                                        {{ row.period_text }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="已付款" prop="has_payment_amount" show-overflow-tooltip />
                                <el-table-column label="未付款" prop="not_payment_amount" show-overflow-tooltip />
                                <el-table-column label="备注" prop="remark" show-overflow-tooltip />
                            </el-table>
                        </div>
                        <div style="margin: 10px 0;">
                            <el-pagination v-model:current-page="pager7.page_no" v-model:page-size="pager7.page_size"
                                :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper"
                                :total="total7" @size-change="handleSizeChange7" @current-change="handleCurrentChange7" />
                        </div>
                        <div class="tit">付款申请</div>
                        <div>
                            <el-table :data="tableData8" stripe style="width: 100%">
                                <el-table-column label="序号" type="index" width="55" />
                                <el-table-column label="付款单号" prop="payment_apply_code" show-overflow-tooltip />
                                <el-table-column label="供应商名称" prop="supplier_name" show-overflow-tooltip />
                                <el-table-column label="项目名称" prop="project_name" show-overflow-tooltip />
                                <el-table-column label="合同编号" prop="contract_no" show-overflow-tooltip />
                                <el-table-column label="付款日期" prop="pay_date" show-overflow-tooltip />
                                <el-table-column label="付款金额" prop="amount" show-overflow-tooltip />
                                <el-table-column label="付款方式" prop="pay_type" show-overflow-tooltip>
                                    <template #default="{ row }">
                                        {{ row.pay_type_text }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="付款性质" prop="payment_natrue" show-overflow-tooltip>
                                    <template #default="{ row }">
                                        {{ row.payment_nature_text }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="期次" prop="period" show-overflow-tooltip>
                                    <template #default="{ row }">
                                        {{ row.period }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="申请人" prop="apply_user" show-overflow-tooltip />
                                <el-table-column label="备注" prop="remark" show-overflow-tooltip />
                            </el-table>
                        </div>
                        <div style="margin: 10px 0;">
                            <el-pagination v-model:current-page="pager8.page_no" v-model:page-size="pager8.page_size"
                                :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper"
                                :total="total8" @size-change="handleSizeChange8" @current-change="handleCurrentChange8" />
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
        </popup>
    </div>
</template>

<script lang="ts" setup name="customdetail">

import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { apiCustomDetail } from '@/api/custom'
import { apiCustomerDemandSolutionLists } from '@/api/customer_demand_solution'
import { apiProjectEstimateLists } from '@/api/project_estimate'
import { apiCompetitorLists } from '@/api/competitor'
import { timeFormat } from '@/utils/util'
import { apiProcurementContractLists } from "@/api/procurement_contract.ts"
import { apiSubcontractingContractLists } from "@/api/subcontracting_contract.ts"
import { apifinancereceiptLists } from "@/api/receiptrecord.ts"
import { paymentplanLists } from "@/api/paymentplan.ts"
import { paymentapplyLists } from '@/api/paymentrequest'

import type { TabsPaneContext } from 'element-plus'
const activeName = ref('demo-tabs-1')
import type { PropType } from 'vue'
defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})


const pager2 = reactive({
    page_size: 10,
    page_no: 1,
    supplier_id: ""
})
const pager3 = reactive({
    page_size: 10,
    page_no: 1,
    supplier_id: ""
})


const pager5 = reactive({
    page_size: 10,
    page_no: 1,
    customer_demand_id: ""
})

const pager4 = reactive({
    page_size: 10,
    page_no: 1,
    supplier_id: ""
})


const pager7 = reactive({
    page_size: 10,
    page_no: 1,
    supplier_id: ""
})
const pager8 = reactive({
    page_size: 10,
    page_no: 1,
    supplier_id: ""
})

const total1 = ref(0)
const total2 = ref(0)
const total4 = ref(0)
const total7 = ref(0)
const total8 = ref(0)


const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const formDataannex = reactive([])
const datas = reactive({
    provinceOptions: [],
    cityOptions: [],
    areaOptions: [],
});
const tableData1 = ref([])
const tableData2 = ref([])
const tableData4 = ref([])
const tableData6 = ref([])
const tableData8 = ref([])

const handleClick = (tab: TabsPaneContext, event: Event) => {
}
// 表单数据
const formData = reactive({

})


//条数

const handleSizeChange2 = (val: number) => {

    pager2.page_size = val
    estimateLists()
}
const handleSizeChange3 = (val: number) => {

    pager3.page_size = val
    competitorLists()
}

const handleSizeChange5 = (val: number) => {

    pager5.page_size = val
    financereceiptecordLists()
}

const handleSizeChange7 = (val: number) => {

    pager7.page_size = val
    competitorLists()
}
const handleSizeChange8 = (val: number) => {

    pager8.page_size = val
    competitorLists()
}

//分页

const handleCurrentChange2 = (val: number) => {
    console.log(`current page: ${val}`)
    pager2.page_no = val
    estimateLists()
}
const handleCurrentChange3 = (val: number) => {
    pager3.page_no = val
    console.log(`current page: ${val}`)
    competitorLists()
}

const handleCurrentChange5 = (val: number) => {
    pager5.page_no = val
    console.log(`current page: ${val}`)
    competitorLists()
}


const handleCurrentChange7 = (val: number) => {
    pager7.page_no = val
    getpaymentplanLists()
}

const handleCurrentChange8 = (val: number) => {
    pager8.page_no = val
    console.log(`current page: ${val}`)
    getpaymentapplyLists()
}



// 解决方案列表
const solutionLists = () => {
    apiCustomerDemandSolutionLists(pager1).then((res) => {
        tableData.value = res.lists

        total.value = res.count

    })
}

// 获取项目概算列表
const estimateLists = () => {
    apiProcurementContractLists(pager2).then((res) => {
        tableData1.value = res.lists
        total1.value = res.count
    })
}

// 获取竞争对手列表
const competitorLists = () => {
    apiSubcontractingContractLists(pager3).then((res) => {
        tableData2.value = res.lists
        total2.value = res.count
    })
}

// 获取供应商
const financereceiptecordLists = () => {
    apifinancereceiptLists(pager4).then((res) => {
        tableData4.value = res.lists
        total4.value = res.count
    })
}
// 付款计划
const getpaymentplanLists = () => {
    paymentplanLists(pager7).then((res) => {
        tableData6.value = res.lists
        total7.value = res.count
    })

}

// // 付款申请
const getpaymentapplyLists = () => {
    paymentapplyLists(pager8).then((res) => {
        tableData8.value = res.lists
        total8.value = res.count
        console.log(tableData8.value, 4545454)
    })

}

// 获取详情
const setFormData = async (data: Record<any, any>) => {
    Object.assign(formData, data)
    pager2.supplier_id = data.id
    pager3.supplier_id = data.id
    pager4.supplier_id = data.id
    pager7.supplier_id = data.id
    pager8.supplier_id = data.id
    if (data.annex && data.annex.length > 0) {
        const arry1 = data.annex.map((item: any, index: any) => {
            return {
                name: `文件${index + 1}`,
                uri: item
            };
        });
        Object.assign(formDataannex, arry1)
    }
    competitorLists()
    estimateLists()
    financereceiptecordLists()
    getpaymentplanLists()
    getpaymentapplyLists()
}

const getDetail = async (row: Record<string, any>) => {
    const data = await apiCustomDetail({
        id: row.id
    })
    setFormData(data)
}


// 提交按钮
const handleSubmit = async () => {
    popupRef.value?.close()

}

//打开弹窗
const open = () => {
    popupRef.value?.open()
}

// 关闭回调
const handleClose = () => {
    emit('close')
}








defineExpose({
    open,
    setFormData,
    getDetail
})
</script>
<style lang="scss" scoped>
.tit {
    font-size: 1.2em;
    margin-bottom: 10px;
}

:deep(.my-label) {
    width: 150px;
}
</style>
