<template>
    <div>
        <el-dialog v-model="dialogVisible" :close-on-click-modal="false" draggable width="1200px" height="500px">
            <el-card :body-style="cardBodyStyle">
                <el-form inline :model="query">
                    <el-form-item label="对账单号" style="margin-bottom: 5px;">
                        <el-input v-model="query.billNo" placeholder="请输入" style="width: 200px; margin-right: 10px;"
                            clearable></el-input>
                    </el-form-item>
                    <el-form-item label="合同号" style="margin-bottom: 5px;">
                        <el-input v-model="query.contrNo" placeholder="请输入" style="width: 200px; margin-right: 10px;"
                            clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="供应商" style="margin-bottom: 5px;">
                        <el-input v-model="query.tradePartnerName" placeholder="请输入"
                            style="width: 200px; margin-right: 10px;" clearable></el-input>
                    </el-form-item>
                </el-form>
            </el-card>

            <el-card :body-style="cardBodyStyle">
                <el-button plain type="primary" @click="handleSearch">查询</el-button>
                <el-button plain type="success" @click="handleSelect">选择</el-button>
            </el-card>

            <el-card :body-style="cardBodyStyle">
                <el-table :data="tableData" border highlight-current-row @selection-change="handleSelectionChange">
                    <el-table-column type="selection" fixed></el-table-column>
                    <el-table-column type="index" label="序号" align="center" width="60">
                        <template #default="scope">
                            <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="true" prop="billNo" label="对账单单号" min-width="150" header-align="center"
                        align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="true" prop="contrNo" label="合同号" width="150" header-align="center"
                        align="right" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="true" prop="khContrNo" label="对方合同号" width="150" header-align="center"
                        align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="true" prop="tradePartnerName" label="供应商名称" width="150" header-align="center"
                        align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="true" prop="tradePartnerCode" label="供应商编码" width="180" header-align="center"
                        align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="true" prop="accountQty" label="结算重量和" width="100" header-align="center"
                        align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="true" prop="accountAmount" label="结算金额和" width="100" header-align="center"
                        align="right" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="true" prop="accountTaxAmount" label="结算含税金额和" width="150"
                        header-align="center" align="right" show-overflow-tooltip></el-table-column>
                </el-table>

                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="pageSizes"
                    :total="totalRows" background="background" layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </el-card>

            <el-card :body-style="cardBodyStyle" style="margin-top: 10px;">
                <el-table :data="tableDataLine" border highlight-current-row @selection-change="handleSelectionChange">
                    <el-table-column type="index" label="序号" align="center" width="60">
                        <template #default="scope">
                            <span>{{ scope.$index + (currentPageLine - 1) * pageSizeLine + 1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="true" prop="billNo" label="对账单单号" width="150" header-align="center"
                        align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="true" prop="billLine" label="对账单行号" width="150" header-align="center"
                        align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="true" prop="contrNo" label="合同号" width="150" header-align="center"
                        align="right" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="true" prop="contrNoLine" label="合同行号" width="100" header-align="center"
                        align="right" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="false" prop="khContrNo" label="对方合同号" width="150" header-align="center"
                        align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="false" prop="tradePartnerName" label="供应商名称" width="150"
                        header-align="center" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="false" prop="tradePartnerCode" label="供应商编码" width="180"
                        header-align="center" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="false" prop="purOrdNo" label="订单号" width="150" header-align="center"
                        align="right" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="false" prop="purOrdNoLn" label="订单行号" width="100" header-align="center"
                        align="right" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="true" prop="itemCd" label="物料编码" width="150" header-align="center"
                        align="right" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="true" prop="itemNm" label="物料名称" width="100" header-align="center"
                        align="right" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="true" prop="qty" label="收货重量" width="100" header-align="center"
                        align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="true" prop="accountQty" label="结算重量" width="100" header-align="center"
                        align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="true" prop="uom" label="单位" width="100" header-align="center" align="right"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="true" prop="conUnitPrice" label="合同单价" width="100" header-align="center"
                        align="right" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="true" prop="accountUnitPrice" label="结算单价" width="100" header-align="center"
                        align="right" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="true" prop="accountAmount" label="结算金额" width="100" header-align="center"
                        align="right" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="true" prop="conUnitTaxPrice" label="合同含税单价" width="120" header-align="center"
                        align="right" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="true" prop="accountUnitTaxPrice" label="结算含税单价" width="120"
                        header-align="center" align="right" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="true" prop="accountTaxAmount" label="结算含税金额" width="120"
                        header-align="center" align="right" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column v-if="true" prop="stoInDt" label="入库业务日期时间" width="180" header-align="center"
                        align="center" show-overflow-tooltip>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-dialog>
    </div>
</template>

<script setup>

import {
    ref,
    onMounted,
    watch,
    getCurrentInstance
} from 'vue'

const {
    proxy
} = getCurrentInstance()

import tools from '@/tools'
import { ElMessage } from 'element-plus';

const cardBodyStyle = ref(tools.style.card)

onMounted(() => {
    initTableData()
})

const props = defineProps({
    url: {
        type: String,
        default: 'pur/BillHead/queryBillTree'
    }
})



const dialogVisible = ref(false)

watch(dialogVisible, (newValue, oldValue) => {
    if (newValue) {
        initTableData()
    } else {

    }
})

const handleSearch = () => {
    currentPage.value = 1
    initTableData()
}

/**
 * 查询
 */
const query = ref({
    billNo: '',
    contrNo: '',
    tradePartnerName: '',
})
const tableData = ref([])
const initTableData = () => {
    tableData.value = []

    var url = props.url
    var param = {
        page: currentPage.value,
        rows: pageSize.value,
        params: JSON.stringify(query.value)
    }

    proxy.$axios.get(url, param).then(response => {
        if (response.data.code == '0') {
            tableData.value = response.data.data.records
            totalRows.value = response.data.data.total
        } else {
            ElMessage.error('操作失败！' + response.data.msg)
        }
    })
}


/**
 * 分页
 */
const currentPage = ref(1)
const totalRows = ref(0)
const pageSize = ref(10)
const pageSizes = ref([10, 20, 30, 40])
const handleSizeChange = (val) => {
    pageSize.value = val
    initTableData()
}
const handleCurrentChange = (val) => {
    currentPage.value = val
    initTableData()
}


/**
 * 选择
 */
const emit = defineEmits(['receiveFromChild'])
const handleSelect = () => {
    const first = multipleSelection.value[0]

    const isContrNo = multipleSelection.value.every(item => item.contrNo === first.contrNo)
    const isTradePartnerCode = multipleSelection.value.every(item => item.tradePartnerCode === first.tradePartnerCode)

    if (!isContrNo) {
        ElMessage({
            type: 'warning',
            message: '必须是同一份合同下的对账单'
        })
        return
    }

    if (!isTradePartnerCode) {
        ElMessage({
            type: 'warning',
            message: '必须是同一供应商的对账单'
        })
        return
    }

    emit('receiveFromChild', tableDataLine.value)
    close()
}


/**
 * 查询 - 行
 */
const multipleSelection = ref([])
const tableDataLine = ref([])
const handleSelectionChange = (val) => {
    multipleSelection.value = val

    if (multipleSelection.value.length === 0) {
        tableDataLine.value = []
        return
    }

    billNos.value = []
    multipleSelection.value.forEach((item, index) => {
        billNos.value.push(item.billNo)
    })
    handleTableDataLine()
}

const billNos = ref([])
const loadingLine = ref(false)
const handleTableDataLine = () => {
    loadingLine.value = true
    var url = 'pur/BillLine/queryByBillNos'
    var param = {
        billNos: JSON.stringify(billNos.value)
    }

    proxy.$axios.get(url, param).then(response => {
        if (response.data.code == '0') {
            tableDataLine.value = response.data.data
            pageSizeLine.value = tableDataLine.value.length
        } else {
            ElMessage.error('操作失败！' + response.data.msg)
        }
    })
    loadingLine.value = false
}


const currentPageLine = ref(1)
const totalRowsLine = ref(0)
const pageSizeLine = ref(10)
const pageSizesLine = ref([10, 20, 30, 40])
const handleSizeChangeLine = (val) => {
    pageSize.value = val
    initTableDataLine()
}
const handleCurrentChangeLine = (val) => {
    currentPage.value = val
    initTableData()
}


const open = () => {
    dialogVisible.value = true
}
const close = () => {
    dialogVisible.value = false
}
defineExpose({
    open,
    close
})
</script>

<style></style>