<template>
    <HcCard actionUi="text-center">
        <HcTable :column="tableColumn" :datas="tableData">
            <template #action="{row,index}">
                <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 bgColor="#ffffff" isToBody isTable :footer="false" :show="recordModal" title="发票信息" widths="66rem" @close="closeRecordClick">
            <HcPdf src="http://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com//upload/20230504/911982ba85e66cfa58fb02d5a738bb2b.pdf"/>
        </HcDialog>
    </HcCard>
</template>

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

const router = useRouter()

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

const infoData = ref(props.datas)

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

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

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

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

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

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