


<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="90px">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="客户信息" name="new_name_1">
                        <el-descriptions title="基本信息" :column="2" border>
                            <el-descriptions-item label="客户名称" label-align="left" align="left"
                                label-class-name="my-label">{{ formData.name }}</el-descriptions-item>
                            <el-descriptions-item label="客户属性" label-align="left" align="left" label-class-name="my-label">
                                {{ formData.custom_type_text }}</el-descriptions-item>
                            <!-- <el-descriptions-item label="上级公司" label-align="left" align="left" label-class-name="my-label">
                                {{ formData.company_name }}</el-descriptions-item> -->
                            <el-descriptions-item label="客户地址" label-align="left" align="left" label-class-name="my-label">
                                {{ formData.province_name + formData.city_name + formData.area_name + formData.address }}
                            </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.credit_rating_text

                                }}</el-descriptions-item>

                            <el-descriptions-item label="备注" label-align="left" align="left" label-class-name="my-label"> {{
                                formData.notes

                            }}</el-descriptions-item>

                        </el-descriptions>

                        <el-descriptions title="主要负责人" :column="2" border style="margin: 20px 0;">

                            <el-descriptions-item label="姓名" label-align="left" align="left" label-class-name="my-label">{{
                                formData.master_name }}</el-descriptions-item>
                            <el-descriptions-item label="职位" label-align="left" align="left" label-class-name="my-label"> {{
                                formData.master_position }}</el-descriptions-item>
                            <el-descriptions-item label="手机" label-align="left" align="left" label-class-name="my-label"> {{
                                formData.master_phone }}</el-descriptions-item>
                            <el-descriptions-item label="邮箱" label-align="left" align="left" label-class-name="my-label">
                                {{ formData.master_email }}
                            </el-descriptions-item>
                            <el-descriptions-item label="电话" label-align="left" align="left" label-class-name="my-label"> {{
                                formData.master_telephone
                            }}</el-descriptions-item>
                            <el-descriptions-item label="备注" label-align="left" align="left" label-class-name="my-label"> {{
                                formData.master_notes

                            }}</el-descriptions-item>

                        </el-descriptions>



                        <div class="tit" style="margin: 20px 0;">其他联系人</div>
                        <el-row>
                            <el-table :data="contactsList">

                                <el-table-column label="序号" type="index" width="55" />
                                <el-table-column label="组织" prop="org_name" show-overflow-tooltip />
                                <el-table-column label="部门" prop="dept_name" show-overflow-tooltip />
                                <el-table-column label="姓名" prop="name" show-overflow-tooltip />
                                <el-table-column label="职位" prop="position" show-overflow-tooltip />
                                <el-table-column label="手机" prop="phone" show-overflow-tooltip />
                                <el-table-column label="电话" prop="telephone" show-overflow-tooltip />
                                <el-table-column label="邮箱" prop="email" show-overflow-tooltip />
                                <el-table-column label="备注" prop="notes" show-overflow-tooltip />
                            </el-table>


                        </el-row>

                        <el-descriptions title="开票信息" :column="2" border style="margin: 20px 0;">

                            <el-descriptions-item label="开票公司名称" label-align="left" align="left"
                                label-class-name="my-label">{{ formData.company_name }}</el-descriptions-item>
                            <el-descriptions-item label="纳税人识别号" label-align="left" align="left"
                                label-class-name="my-label"> {{ formData.company_tin }}</el-descriptions-item>

                            <el-descriptions-item label="开户地址" label-align="left" align="left" label-class-name="my-label">
                                {{ formData.bank_open_address }}
                            </el-descriptions-item>
                            <el-descriptions-item label="电话" label-align="left" align="left" label-class-name="my-label"> {{
                                formData.company_telephone
                            }}</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_account

                                }}</el-descriptions-item>
                        </el-descriptions>




                    </el-tab-pane>
                    <el-tab-pane label="项目" name="new_name_2">
                        <div>
                            <el-table :data="tableData1" stripe style="width: 100%">
                                <el-table-column label="项目编码" prop='project_code' width="180" />
                                <el-table-column label="项目名称" prop='name' width="180" />
                                <el-table-column label="项目估算(万元)" prop='project_estimation' />
                                <el-table-column label="项目状态" prop='status' />
                                <el-table-column label="项目类型" prop='project_type' />
                                <el-table-column label="立项日期" prop='create_time' />
                            </el-table>
                        </div>
                        <div style="margin: 10px 0;">
                            <el-pagination v-model:current-page="pager1.page_no" v-model:page-size="pager1.page_size"
                                :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper"
                                :total="total1" @size-change="handleSizeChange1" @current-change="handleCurrentChange1" />
                        </div>

                    </el-tab-pane>
                    <el-tab-pane label="报价" name="new_name_3">
                        <div>
                            <el-table :data="tableData2" stripe style="width: 100%">
                                <el-table-column label="报价单号" prop='code' width="180" />
                                <el-table-column label="制单人" prop='create_user' width="180" />
                                <el-table-column label="报价日期" prop='quotation_date' />
                                <el-table-column label="订单金额" prop='amount_including_tax' />
                                <el-table-column label="运费" prop='freight' />
                                <el-table-column label="其它费用" prop='other_fee' />
                                <el-table-column label="合计金额" prop='total_amount' />
                            </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="total2" @size-change="handleSizeChange2" @current-change="handleCurrentChange2" />
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="合同" name="new_name_4">
                        <div class='tit'>合同</div>
                        <div>
                            <el-table :data="tableData4" stripe style="width: 100%">


                                <el-table-column label="合同名称" prop="contract_name" show-overflow-tooltip />
                                <el-table-column label="签约日期" prop="contract_date" show-overflow-tooltip />
                                <el-table-column label="合同类型" prop="contract_type_text" show-overflow-tooltip />
                                <el-table-column label="合同金额" prop="amount" show-overflow-tooltip />
                                <el-table-column label="实际合同金额" prop="reality_contract_amount" show-overflow-tooltip />
                                <el-table-column label="已回款" prop="returned_amount" show-overflow-tooltip />
                                <el-table-column label="未回款" prop="not_returned_amount" show-overflow-tooltip />
                                <el-table-column label="已开票" prop="invoicing_amount" show-overflow-tooltip />
                                <el-table-column label="未开票" prop="not_invoicing_amount" show-overflow-tooltip />


                            </el-table>
                        </div>
                        <div style="margin: 10px 0;">
                            <el-pagination v-model:current-page="pager4.page_no" v-model:page-size="pager4.page_size"
                                :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper"
                                :total="total4" @size-change="handleSizeChange4" @current-change="handleCurrentChange4" />
                        </div>
                        <div class='tit' style="margin: 20px 0;">合同洽商</div>
                        <div>
                            <el-table :data="tableData5" stripe style="width: 100%">
                                <el-table-column label="洽商编号" prop="negotiation_no" show-overflow-tooltip />
                                <el-table-column label="合同编号" prop="contract_code" show-overflow-tooltip />
                                <el-table-column label="洽商单名称" prop="negotiation_name" show-overflow-tooltip />
                                <el-table-column label="洽商类别" prop="negotiation_type" show-overflow-tooltip />
                                <el-table-column label="签约日期" prop="contract_date" show-overflow-tooltip />
                                <el-table-column label="洽商金额" prop="negotiation_amount" 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="total5" @size-change="handleSizeChange5" @current-change="handleCurrentChange5" />
                        </div>
                    </el-tab-pane>
                    <!-- <el-tab-pane label="订单" name="new_name_5">Task</el-tab-pane> -->
                    <el-tab-pane label="发票" name="new_name_6">Task</el-tab-pane>
                    <el-tab-pane label="回款" name="new_name_7">
                        <div class="tit" style="margin:20px 0">回款计划</div>
                        <div>

                            <el-table :data="tableData6" 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='period' />
                                <el-table-column label="计划日期" prop='return_date' />
                                <el-table-column label="状态" prop='return_status' />
                                <el-table-column label="金额" prop='amount' />
                                <el-table-column label="已回款" prop='has_return_amount' />
                                <el-table-column label="未回款" prop='not_return_amount' />

                            </el-table>
                        </div>
                        <div style="margin: 10px 0;">
                            <el-pagination v-model:current-page="pager6.page_no" v-model:page-size="pager6.page_size"
                                :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper"
                                :total="total6" @size-change="handleSizeChange6" @current-change="handleCurrentChange6" />
                        </div>
                        <div class="tit" style="margin:20px 0">回款记录</div>
                        <div>
                            <el-table :data="tableData7" 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='period' />
                                <el-table-column label="日期" prop='return_date' />
                                <el-table-column label="金额" prop='amount' />
                                <!-- <el-table-column label="累计回款" prop='is_solve_text' /> -->
                                <el-table-column label="收款人" prop='receiver' />
                            </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>
                    </el-tab-pane>
                    <el-tab-pane label="售后" name="new_name_8">
                        <div>
                            <el-table :data="tableData3" stripe style="width: 100%">
                                <el-table-column label="工单编号" prop='custom_service_code' width="180" />
                                <el-table-column label="合同编号" prop='contract_code' width="180" />
                                <el-table-column label="投诉主题" prop='name' />
                                <el-table-column label="日期" prop='date' />
                                <el-table-column label="分类" prop='classification' />
                                <el-table-column label="是否解决" prop='is_solve_text' />
                                <el-table-column label="解决日期" prop='done_date' />

                            </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="total3" @size-change="handleSizeChange3" @current-change="handleCurrentChange3" />
                        </div>
                    </el-tab-pane>
                </el-tabs>


            </el-form>
        </popup>
    </div>
</template>

<script lang="ts" setup name="customdetail">
import {
    apiCityList,
    apiAreaList,
    apiProvinceList,
} from "@/api/common";
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { apiProjectLists } from '@/api/project'
import { apiQuotationLists } from '@/api/quotation'
import { apiCustomDetail } from '@/api/custom'
import { apiCustomServiceLists } from '@/api/custom_service'
import { apiCustomContactsLists } from '@/api/custom_contacts'
import { apiContractLists } from '@/api/contract'
import { apiContractNegotiationLists } from '@/api/contract_negotiation'
import { apireturnedLists } from '@/api/remittance'
import { apireturnedrecordLists } from '@/api/recordsPayment'
import { timeFormat } from '@/utils/util'
import type { TabsPaneContext } from 'element-plus'
import type { PropType } from 'vue'
defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()

const tableData1 = ref([])
const tableData2 = ref([])
const tableData3 = ref([])
const tableData4 = ref([])
const tableData5 = ref([])
const tableData6 = ref([])
const tableData7 = ref([])
const activeName = ref('new_name_1')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    // console.log(tab, event)
}
const datas = reactive({
    provinceOptions: [],
    cityOptions: [],
    areaOptions: [],
});
const contactsList = ref([])

// 表单数据
const formData = reactive({

})

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

const pager5 = reactive({
    page_size: 10,
    page_no: 1,
    custom_id: ""
})
const pager6 = reactive({
    page_size: 10,
    page_no: 1,
    custom_id: ""
})
const pager7 = reactive({
    page_size: 10,
    page_no: 1,
    custom_id: ""
})

const total1 = ref(0)
const total2 = ref(0)
const total3 = ref(0)
const total4 = ref(0)
const total5 = ref(0)
const total6 = ref(0)
const total7 = ref(0)
const total8 = ref(0)

//条数
const handleSizeChange1 = (val: number) => {
    pager1.page_size = val
    projectLists()

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

    quotationLists()
}
const handleSizeChange3 = (val: number) => {

    pager3.page_size = val
    customServiceLists()
}
const handleSizeChange4 = (val: number) => {

    pager4.page_size = val
    contractLists()

}
const handleSizeChange5 = (val: number) => {

    pager5.page_size = val

    negotiationLists()
}
const handleSizeChange6 = (val: number) => {

    pager6.page_size = val
    returnedLists()

}
const handleSizeChange7 = (val: number) => {

    pager7.page_size = val

    returnedrecordLists()
}

//分页
const handleCurrentChange1 = (val: number) => {
    console.log(`current page: ${val}`)
    pager1.page_no = val
    projectLists()

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

    quotationLists()
}
const handleCurrentChange3 = (val: number) => {
    pager3.page_no = val
    console.log(`current page: ${val}`)
    customServiceLists()
}
const handleCurrentChange4 = (val: number) => {
    pager4.page_no = val
    console.log(`current page: ${val}`)
    contractLists()

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

    negotiationLists()
}
const handleCurrentChange6 = (val: number) => {
    pager6.page_no = val
    console.log(`current page: ${val}`)
    returnedLists()

}

const handleCurrentChange7 = (val: number) => {
    pager7.page_no = val
    console.log(`current page: ${val}`)

    returnedrecordLists()
}
// 获取详情
const setFormData = async (data: Record<any, any>) => {
    // for (const key in formData) {
    //     if (data[key] != null && data[key] != undefined) {
    //         //@ts-ignore
    //         formData[key] = data[key]

    //         if (key == 'province') {
    //             await getCityList()
    //         }
    //         if (key == 'city') {
    //             await getAreaList()
    //         }

    //     }

    // }
    customContactsLists(data.id)
    Object.assign(formData, data)
    pager1.custom_id = data.id
    pager2.custom_id = data.id
    pager3.custom_id = data.id
    pager4.custom_id = data.id
    pager5.custom_id = data.id
    pager6.custom_id = data.id
    pager7.custom_id = data.id
    projectLists()
    quotationLists()
    customServiceLists()
    contractLists()
    negotiationLists()
    returnedLists()
    returnedrecordLists()
}

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


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

}

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

// 关闭回调
const handleClose = () => {
    emit('close')
}
//获取联系人信息

const customContactsLists = (id) => {
    apiCustomContactsLists({
        'page_size': 1000,
        'page_no': 1,
        'custom_id': id
    }).then((res) => {
        contactsList.value = res.lists

    })
}

//项目信息
const projectLists = () => {
    apiProjectLists(pager1).then((res) => {
        tableData1.value = res.lists
        total1.value = res.count
    })
}
//报价信息
const quotationLists = () => {
    apiQuotationLists(pager2).then((res) => {
        tableData2.value = res.lists
        total2.value = res.count
    })
}
//售后信息
const customServiceLists = () => {
    apiCustomServiceLists(pager3).then((res) => {
        tableData3.value = res.lists
        total3.value = res.count
    })
}

//获取合同信息
const contractLists = () => {
    apiContractLists(pager4).then((res) => {
        tableData4.value = res.lists
        total4.value = res.count
    })
}

//获取合同洽商
const negotiationLists = () => {
    apiContractNegotiationLists(pager5).then((res) => {
        tableData5.value = res.lists
        total5.value = res.count
    })
}
//获取回款计划
const returnedLists = () => {
    apireturnedLists(pager6).then((res) => {
        tableData6.value = res.lists
        total6.value = res.count
    })
}

//获取回款记录
const returnedrecordLists = () => {
    apireturnedrecordLists(pager7).then((res) => {
        tableData7.value = res.lists
        total7.value = res.count
    })
}




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

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