<template>
    <div class="custom-reciept" v-if="data">
        <div class="header-receipt">
            <div class="logo">
                <img :src="company.logo" alt="" width="80px" />
            </div>
            <div class="title text-center">
                <p class="title_km h5 text_moul">{{ company.name_kh }} ({{ company.name_en }})</p>
                <p class="title_km h5 text_moul">ប័ណ្ណបើកប្រាក់ ( Cash Disbursement Voucher )</p>
            </div>
        </div>
        
        <div class="footer-reciept">
            <div class="d-flex justify-content-center">
                <div class="text-center" style="width: 33.33%">
                    <p class="text_moul">អ្នកត្រួតពិនិត្យ</p>
                    <br>
                    <br>
                    <br>
                    <br>
                    <p> .............. </p>
                </div>
                <div class="text-center" style="width: 33.33%">
                    <p class="text_moul">អ្នកបង់ប្រាក់</p>
                    <br>
                    <br>
                    <br>
                    <br>
                    <p> .............. </p>
                </div>
                <div class="text-center" style="width: 33.33%">
                    <p class="text_moul">អ្នកទទួលប្រាក់</p>
                    <br>
                    <br>
                    <br>
                    <br>
                    <p> {{data.client_name}} </p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import HeaderReport from '../../components/report/header.vue'
import FooterReport from '../../components/report/footer.vue'
export default {
    props:['data'],
    components: {
        HeaderReport,
        FooterReport,
    },
    data(){
        return{
            company:"",
        }
    },
    created() {
        this.funGetCompanyInfo();
    },
    methods: {
        funGetCompanyInfo(){
            axios.get('admin-api/company')
            .then((res) => {
                this.company = res.data;
            });
        },
    },
}
</script>
<style scoped lang="scss">
 .custom-reciept{
    width:210mm;
    min-height: 297mm;
    margin: auto;
    padding: 30px;
    color: #2E318F;
 }
 .custom-reciept .first-form{
    width: 135px;
 }

.custom-reciept .content-receipt .box-label{
    width: 100px;
}

.custom-reciept .content-receipt .value-box{
  border: 1px solid #2E318F;
  font-size: 14px;
  color: #2E318F;
  border-radius: 3px;
  font-weight: bold;
  padding: 0.375rem 0.75rem;
  min-height: 36.5px;
}
.custom-reciept .footer-reciept{
    margin-top: 20px;
}
.custom-reciept-bottom{
    display: none;
}
</style>