<template>
    <HcCard action-ui="text-center">
        <HcTable :column="tableColumn" :datas="tableData">
            <template #action="{ row }">
                <span class="text-blue" @click="rowNameTap(row)">查看发票</span>
            </template>
        </HcTable>
        <template #action>
            <el-button size="large" type="info" hc-btn @click="goBackClick">
                <HcIcon name="arrow-go-back" />
                <span>返回上一级</span>
            </el-button>
        </template>

        <!-- 查看发票 -->
        <HcDialog bg-color="#ffffff" is-to-body is-table :footer="false" :show="recordModal" title="发票信息" widths="66rem" @close="closeRecordClick">
            <HcPdf :src="pdfUrl" />
        </HcDialog>
    </HcCard>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'

//参数
const props = defineProps({
    datas: {
        type: Array,
        default: () => ([]),
    },
})

const router = useRouter()

const tableData = ref(props.datas)

//深度监听
watch(() => [
    props.datas,
], ([datas]) => {
    tableData.value = datas
}, { deep: true })

//成本测算表格
const tableColumn = [
    { key: 'invoiceDate', name: '开票日期', align: 'center' },
    { key: 'invoiceHead', name: '对方名称', align: 'center' },
    { key: 'invoiceMoney', name: '开票金额', align: 'center' },
    { key: 'action', name: '发票附件', align: 'center' },
]
// const tableData = ref([
//     {id: 1}, {id: 2}, {id: 3}, {id: 4},
// ])

//查看发票
const recordModal = ref(false)
const pdfUrl = ref('')
const rowNameTap = (row) => {
    recordModal.value = true
    pdfUrl.value = row?.invoicePdfUrl
}

const closeRecordClick = () => {
    recordModal.value = false
}

//返回
const goBackClick = () => {
    router.back()
}
</script>

<style scoped lang="scss">
@import "~src/styles/project/contract/form.scoped.scss";
</style>
