<template>
    <hc-new-dialog is-table :footer="false" widths="1200px" :show="isShow" title="清单明细" @close="modalClose">
        <hc-table ref="tableRef" is-new is-expand :index-style="{ width: 60 }" :column="tableColumn" :datas="tableData" :loading="tableLoading">
            <template #table-expand="{ row, index: index1 }">
                <div class="relative p-2">
                    <hc-table is-new :is-index="false" :column="tableColumn1" :datas="row.detail">
                        <template #index-key="{ index: index2 }">
                            {{ index1 + 1 }}-{{ index2 + 1 }}
                        </template>
                    </hc-table>
                </div>
            </template>
            <template #action="{ row }">
                <el-link v-if="!row.isExpands" hc @click="unfoldClick(row)">展开明细</el-link>
                <el-link v-else type="warning" @click="awayClick(row)">收起明细</el-link>
            </template>
        </hc-table>
    </hc-new-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { getArrValue } from 'js-fast-way'
import mainApi from '~api/debit-pay/admin/middlepay'

const props = defineProps({
    projectId: {
        type: [String, Number],
        default: '',
    },
    contractId: {
        type: [String, Number],
        default: '',
    },
    periodId: {
        type: [String, Number],
        default: '',
    },
})

//事件
const emit = defineEmits(['close'])
const tableRef = ref(null)
const period_id = ref(props.periodId)
const pid = ref(props.projectId)
const cid = ref(props.contractId)

//双向绑定
// eslint-disable-next-line no-undef
const isShow = defineModel('modelValue', {
    default: false,
})

//监听
watch(() => [
    props.projectId,
    props.contractId,
    props.periodId,
], ([projectId, contractId, periodId]) => {
    pid.value = projectId
    cid.value = contractId
    period_id.value = periodId
}, { deep: true })

//监听
watch(isShow, (val) => {
    if (val) {
        getTableData()
    } else {
        tableData.value = []
    }
})

//表格数据
const tableLoading = ref(false)
const tableColumn = [
    { key: 'action', name: '操作', width: 130, align: 'center' },
    { key: 'formNumber', name: '清单编号', width: 120, align: 'center' },
    { key: 'formName', name: '清单名称' },
    { key: 'changeTotal', name: '变更后数量', width: 120, align: 'center' },
    { key: 'allMeterTotal', name: '计量数量', width: 120, align: 'center' },
    { key: 'currentPrice', name: '单价', width: 120, align: 'center' },
    { key: 'allMeterMoney', name: '完成金额', width: 120, align: 'center' },
]
const tableData = ref([])

//获取明细数据
const getTableData = async () => {
    tableLoading.value = true
    const { data } = await mainApi.getFormDetail({
        projectId: pid.value,
        contractId: cid.value,
        contractPeriodId: period_id.value,
    })
    tableData.value = getArrValue(data)
    tableLoading.value = false
}

//展开
const unfoldClick = (row) => {
    row.isExpands = true
    tableRef.value?.toggleRowExpansion(row)
}

//收起
const awayClick = (row) => {
    row.isExpands = false
    tableRef.value?.toggleRowExpansion(row, false)
}

const tableColumn1 = [
    { key: 'index-key', name: '序号', width: 90, align: 'center' },
    { key: 'meterNumber', name: '凭证编号', width: 100, align: 'center' },
    { key: 'meterPeriodName', name: '计量期', width: 100, align: 'center' },
    { key: 'engineerDivide', name: '工程部位' },
    { key: 'approveStatusName', name: '审核状态', width: 120, align: 'center' },
    { key: 'currentMeterTotal', name: '本期计量数量', width: 120, align: 'center' },
    { key: 'currentMeterMoney', name: '计量总金额', width: 120, align: 'center' },
]

const modalClose = () => {
    isShow.value = false
    emit('close')
}
</script>
