<template>
    <div>
        <el-form :model="form" label-width="110px" label-position="right" inline ref="ruleFormRef" :rules="rules">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="结算单号">
                        <el-input v-model="form.accountNo" clearable style="width: 220px" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="合同号" prop="contrNo">
                        <el-input v-model="form.contrNo" clearable style="width: 220px" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="对方合同号">
                        <el-input v-model="form.khContrNo" clearable style="width: 220px" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="供应商名称" prop="tradePartnerName">
                        <el-input v-model="form.tradePartnerName" clearable style="width: 220px" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="供应商编号">
                        <el-input v-model="form.tradePartnerCode" clearable style="width: 220px" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="发票编号">
                        <el-input v-model="form.invoiceNo" clearable style="width: 220px" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="发票号码" prop="invoiceNum">
                        <el-input v-model="form.invoiceNum" clearable style="width: 220px" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="发票张数" prop="invoiceCnt">
                        <el-input v-model="form.invoiceCnt" clearable style="width: 220px" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="发票日期" prop="invoiceDate">
                        <el-date-picker v-model="form.invoiceDate" type="date" style="width: 220px;"
                            value-format="YYYY-MM-DD" format="YYYY-MM-DD" readonly></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="发票金额" prop="invoiceAmount">
                        <el-input-number v-model="form.invoiceAmount" :precision="2" :step="0.1"
                            controls-position="right" clearable style="width: 220px" readonly></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="合同单价">
                        <el-input v-model="form.contrPrice" clearable style="width: 220px" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="合同含税单价">
                        <el-input v-model="form.contrTaxPrice" clearable style="width: 220px"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="运输方式">
                        <el-select v-model="form.transportMth" placeholder="请选择" clearable style="width: 220px"
                            @change="handleChange" disabled>
                            <el-option key="汽运自提" label="汽运自提" value="汽运自提" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="付款方式">
                        <el-select v-model="form.payMth" placeholder="请选择" clearable style="width: 220px" disabled>
                            <el-option v-for="item in dicList.COM_PAY_MTH" :key="item.dicCode" :label="item.dicName"
                                :value="item.dicCode" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="结算依据">
                        <el-select v-model="form.actBasis" placeholder="请选择" clearable style="width: 220px"
                            @change="handleChange" disabled>
                            <el-option key="手动输入" label="手动输入" value="手动输入" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="结算方式">
                        <el-select v-model="form.actMth" placeholder="请选择" clearable style="width: 220px"
                            @change="handleChange" disabled>
                            <el-option key="分批办理" label="分批办理" value="分批办理" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="结算数量">
                        <el-input-number v-model="form.actQty" :precision="2" :step="0.1" controls-position="right"
                            clearable style="width: 220px" disabled></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="不含税金额">
                        <el-input-number v-model="form.totalAmountExcludeTax" :precision="2" :step="0.1"
                            controls-position="right" clearable style="width: 220px" disabled></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="税率">
                        <el-input-number v-model="form.taxRate" style="width: 220px" :precision="2" :step="0.1"
                            controls-position="right" readonly></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="计算税率">
                        <el-input-number v-model="form.taxRateCal" style="width: 220px" :precision="2" :step="0.1"
                            controls-position="right" disabled></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="税额">
                        <el-input-number v-model="form.tax" :precision="2" :step="0.1" controls-position="right"
                            clearable style="width: 220px" disabled></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="起止日期">
                        <el-date-picker v-model="glDate" type="daterange" style="max-width: 200px"
                            value-format="YYYY-MM-DD" format="YYYY-MM-DD" readonly></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="form.description" clearable style="width: 540px"
                            readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>


        <el-table :data="tableDataLine" 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" fixed>
                <template #default="scope">
                    <span>{{ scope.$index + (currentPageLine - 1) * pageSizeLine + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column v-if="true" prop="accountNo" label="结算单号" width="200" header-align="center" align="center"
                show-overflow-tooltip fixed>
            </el-table-column>
            <el-table-column v-if="true" prop="accountLine" label="结算单行号" width="100" header-align="center"
                align="right" show-overflow-tooltip fixed>
            </el-table-column>
            <el-table-column v-if="true" prop="itemCd" label="物料编码" width="150" header-align="center" align="center"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="itemNm" label="物料名称" width="100" header-align="center" align="center"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="quantityInvoiced" label="发票匹配接收数量(对应入库量)" width="250"
                header-align="center" align="right" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="quantityAccount" label="结算量" width="100" header-align="center"
                align="right" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="unit" label="计量单位" width="100" header-align="center" align="center"
                show-overflow-tooltip :formatter="formatter">
            </el-table-column>
            <el-table-column v-if="true" prop="unitPrice" label="单价" width="150" header-align="center" align="right"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="amount" label="行金额" width="150" header-align="center" align="right"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="unitTaxPrice" label="含税单价" width="150" header-align="center"
                align="right" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="taxAmount" label="行含税金额" width="150" header-align="center" align="right"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="purOrdNo" label="订单号" width="200" header-align="center" align="center"
                show-true-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="purOrdLn" label="订单行号" width="100" header-align="center" align="right"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="billNo" label="对账单号" width="100" 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="contractNo" label="合同号" width="200" header-align="center" align="center"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="true" prop="taxRate" label="税率" width="100" header-align="center" align="right"
                show-overflow-tooltip :formatter="formatter">
            </el-table-column>
            <el-table-column v-if="true" prop="description" label="备注" width="120" header-align="center" align="center"
                show-overflow-tooltip>
            </el-table-column>
        </el-table>

        <el-card :body-style="cardBodyStyle">
            <el-pagination :current-page="currentPageLine" :page-size="pageSizeLine" :page-sizes="pageSizesLine"
                :total="totalRowsLine" background="background" layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChangeLine" @current-change="handleCurrentChangeLine">
            </el-pagination>
        </el-card>
    </div>

</template>

<script setup>

import {
    ref,
    reactive,
    onMounted,
    onActivated,
    getCurrentInstance,
    nextTick
} from 'vue'
import { Search } from '@element-plus/icons-vue'

const {
    proxy
} = getCurrentInstance()

import style from '@/tools/style'
const cardBodyStyle = ref(style.card)

import {
    useWorkflowStore
} from "@/stores/workflow"


const workflow = useWorkflowStore()

onMounted(() => {
    getDictList()
    getTableData()
})

onActivated(() => {
    getTableData()
})

/**
 *  查询字典
 */
const dicList = ref({
    COM_PAY_MTH: [],
    TAX_RATE: [],
    MEASURING_UNIT: []
})
const getDictList = () => {
    var url = 'framework/Common/querySelectorList'
    var param = {
        type: JSON.stringify(['COM_PAY_MTH', 'TAX_RATE', 'MEASURING_UNIT'])
    }
    proxy.$axios.get(url, param).then(response => {
        if (response.data.code == '0') {
            dicList.value = response.data.data
        } else {
            ElMessage.error('操作失败！' + response.data.msg)
        }
    })
}
const formatter = (row, column, cellValue, index) => {
    if (!cellValue || cellValue == null || cellValue == '') {
        return cellValue
    }
    switch (column.property) {
        case 'payMth':
            cellValue = dicList.value.COM_PAY_MTH.find(item => item.dicCode == cellValue)?.dicName
            break
        case 'taxRate':
            cellValue = dicList.value.TAX_RATE.find(item => item.dicCode == cellValue)?.dicName
            break
        case 'uom':
            cellValue = dicList.value.MEASURING_UNIT.find(item => item.dicCode == cellValue)?.dicName
            break
        case 'unit':
            cellValue = dicList.value.MEASURING_UNIT.find(item => item.dicCode == cellValue)?.dicName
            break
        case 'glDateBegin':
            cellValue = row.glDateBegin + ' 至 ' + row.glDateEnd
            break
    }
    return cellValue
}
/**
 *  查询字典
 */


const form = ref({
    id: '',
    compCd: '',
    compNm: '',
    accountNo: '',
    tradePartnerCode: '',
    tradePartnerName: '',
    tradePartnerId: '',
    invoiceNo: '',
    invoiceCnt: '',
    invoiceType: '',
    invoiceDate: '',
    invoiceAmount: null,
    invoiceCurrency: '',
    exchangeRate: '',
    exchangeDate: '',
    description: '',
    glDateBegin: '',
    glDateEnd: '',
    totalAmountExcludeTax: null,
    contrNo: '',
    khContrNo: '',
    invoiceNum: '',
    taxRateCode: '',
    taxRateCal: '',
    tax: null,
    taxRate: '',
    transportMth: '',
    payMth: '',
    actBasis: '',
    actMth: '',
    actQty: null,
    contrPrice: '',
    contrTaxPrice: '',
    addId: '',
    addCode: '',
    addName: '',
    addDeptId: '',
    addDeptCode: '',
    addDeptName: '',
    addTime: '',
    modifyCode: '',
    modifyName: '',
})

const getTableData = () => {
    var url = 'pur/ActHead/queryByWorkId'
    var param = {
        workId: workflow.workId
    }
    proxy.$axios.get(url, param).then(response => {
        if (response.data.code == '0') {
            form.value = response.data.data
            form.value.accountFlag = form.value.accountFlag === '0' ? '否' : '是'
            queryLine.value.accountNo = form.value.accountNo
            getTableDataLine()
        } else {
            ElMessage.error('操作失败！' + response.data.msg)
        }
    })
}


/**
 *   查询 —— 对账单行
 */
const queryLine = ref({
    accountNo: ''
})
const loadingLine = ref(false)
const tableDataLine = ref([])
const getTableDataLine = () => {
    loadingLine.value = true
    var url = 'pur/ActLine/query'
    var param = {
        page: currentPageLine.value,
        rows: pageSizeLine.value,
        params: JSON.stringify(queryLine.value)
    }
    proxy.$axios.get(url, param).then(response => {
        tableDataLine.value = response.data.data.records
        totalRowsLine.value = response.data.data.total
    })
    loadingLine.value = false
}
/**
 *   查询
 */


/**
  * 分页
  */
const currentPageLine = ref(1)
const totalRowsLine = ref(0)
const pageSizesLine = ref([5, 10, 20, 30, 40])
const pageSizeLine = ref(5)
const handleSizeChangeLine = (val) => {
    pageSizeLine.value = val
    getTableDataLine()
}
const handleCurrentChangeLine = (val) => {
    currentPageLine.value = val
    getTableDataLine()
}
/**
  * 分页
  */
</script>

<style></style>