|
import React, { useRef } from 'react';
|
|
import get from 'lodash/get';
|
|
import range from 'lodash/range';
|
|
import { SafeAreaView, StyleSheet, TouchableOpacity, View } from 'react-native';
|
|
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
|
|
import ViewShot from 'react-native-view-shot';
|
|
import { ActionBar } from '../../components/common';
|
|
import Text from '../../components/common/Text';
|
|
import { Colors } from '../../constants';
|
|
import { currency } from '../../helper';
|
|
import { useInstallmentEstimateResults } from '../../sqlLite/helper/customHooks';
|
|
|
|
export default function InstallmentEstimateResults({ route }) {
|
|
|
|
const viewShotRef = useRef();
|
|
const phone = get(route, 'params.phone', '')
|
|
const price = Number(get(route, 'params.price', 0)) // giá sim
|
|
const prepayment = Number(get(route, 'params.prepayment', 0)) // tiền đã trả (trả trước)
|
|
const duration = Number(get(route, 'params.duration', 1)) // khoảng thời gian trả góp (tháng)
|
|
const profitType = get(route, 'params.profitType', true) // kiểu tính lãi true: theo tiền , false : theo %
|
|
const profitMonth = Number(get(route, 'params.profitMonth', 0)) // số lãi
|
|
|
|
var sumGiaLai = 0
|
|
var sumTongTienTra = 0
|
|
var soTienPhaiVay = price - prepayment
|
|
|
|
const { onCapture, onShare } = useInstallmentEstimateResults()
|
|
|
|
return (
|
|
<SafeAreaView style={styles.container}>
|
|
<ActionBar title={'Kết quả dự toán Trả góp'} />
|
|
<KeyboardAwareScrollView>
|
|
<ViewShot ref={viewShotRef}>
|
|
<View style={styles.content}>
|
|
<Text bold>Bảng dự toán trả góp: {phone}</Text>
|
|
<Text bold>Giá sim: {currency(price, '')}</Text>
|
|
<Text bold>Số tiền trả trước: {currency(prepayment, '')}</Text>
|
|
<Text bold>Phí dịch vụ: {profitType ? currency(profitMonth, ''): profitMonth} {profitType ? '/ triệu / ngày' : '% / tháng'}</Text>
|
|
<View style={styles.table}>
|
|
<View style={styles.row}>
|
|
<View style={styles.stage}><Text bold>Kỳ</Text></View>
|
|
<View style={styles.price}><Text bold>Gốc trả</Text></View>
|
|
<View style={styles.servicePrices}><Text bold>Phí DV</Text></View>
|
|
<View style={styles.priceMonth}><Text bold>Trả tháng</Text></View>
|
|
</View>
|
|
{
|
|
range(duration).map((item, index) => {
|
|
|
|
const giaGoc = soTienPhaiVay / duration
|
|
const giaLai = profitType ? (soTienPhaiVay - (giaGoc * index)) * (profitMonth / 1000000) * 30 : (soTienPhaiVay - index * giaGoc) * profitMonth / 100
|
|
const tongTienThang = giaGoc + giaLai
|
|
sumGiaLai = sumGiaLai + giaLai
|
|
sumTongTienTra = sumTongTienTra + tongTienThang
|
|
return (
|
|
<View style={styles.row} key={index}>
|
|
<View style={styles.stage}><Text bold>{index + 1}</Text></View>
|
|
<View style={styles.price}><Text regular>{currency(giaGoc, '')}</Text></View>
|
|
<View style={styles.servicePrices}><Text regular>{currency(giaLai, '')}</Text></View>
|
|
<View style={styles.priceMonth}><Text regular>{currency(tongTienThang, '')}</Text></View>
|
|
</View>
|
|
)
|
|
})
|
|
}
|
|
<View style={styles.row}>
|
|
<View style={styles.stage}><Text bold>Tổng</Text></View>
|
|
<View style={styles.price}><Text bold style={{ color: "#0451a3" }}>{currency(soTienPhaiVay, '')}</Text></View>
|
|
<View style={styles.servicePrices}><Text bold style={{ color: "#05683a" }}>{currency(sumGiaLai, '')}</Text></View>
|
|
<View style={styles.priceMonth}><Text bold style={{ color: "red" }}>{currency(sumTongTienTra, '')}</Text></View>
|
|
</View>
|
|
</View>
|
|
<Text regular style={styles.averaged}>Trả trung bình hàng tháng: <Text bold style={styles.txtAveraged}>{currency(sumTongTienTra / duration, '')}</Text></Text>
|
|
<Text regular style={styles.note}>* Đây là bảng dự toán để quý khách tham khảo.</Text>
|
|
</View>
|
|
</ViewShot>
|
|
</KeyboardAwareScrollView>
|
|
<View style={styles.viewBtn}>
|
|
<TouchableOpacity style={styles.btnDuToan} onPress={() => onCapture(viewShotRef)}>
|
|
<Text bold style={styles.txtDuToan}>Chụp bảng dự toán</Text>
|
|
</TouchableOpacity>
|
|
<View style={{ width: 10 }} />
|
|
<TouchableOpacity style={styles.btnDuToan} onPress={() => onShare(viewShotRef)}>
|
|
<Text bold style={styles.txtDuToan}>Chia sẻ</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: Colors.white
|
|
},
|
|
content: {
|
|
flexGrow: 1,
|
|
flex: 1,
|
|
padding: 20,
|
|
backgroundColor: Colors.white
|
|
},
|
|
btnDuToan: {
|
|
flex:1,
|
|
height: 50,
|
|
borderRadius: 8,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
backgroundColor: Colors.azul,
|
|
marginTop: 10
|
|
},
|
|
txtDuToan: {
|
|
fontSize: 16,
|
|
color: 'white',
|
|
textAlign: 'center'
|
|
},
|
|
viewBtn: {
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
width: '100%',
|
|
paddingHorizontal: 20,
|
|
paddingBottom: 20,
|
|
paddingTop: 10,
|
|
flexDirection: 'row'
|
|
},
|
|
table: {
|
|
width: '100%',
|
|
marginTop: 10,
|
|
borderWidth: 0.5,
|
|
},
|
|
row: {
|
|
flexDirection: 'row'
|
|
},
|
|
stage: {
|
|
flex: 1,
|
|
borderWidth: 0.5,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
paddingVertical: 8,
|
|
paddingHorizontal: 2
|
|
},
|
|
price: {
|
|
flex: 2,
|
|
borderWidth: 0.5,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
paddingVertical: 8,
|
|
paddingHorizontal: 2
|
|
},
|
|
servicePrices: {
|
|
flex: 2,
|
|
borderWidth: 0.5,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
paddingVertical: 8,
|
|
paddingHorizontal: 2
|
|
},
|
|
priceMonth: {
|
|
flex: 2,
|
|
borderWidth: 0.5,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
paddingVertical: 8,
|
|
paddingHorizontal: 2
|
|
},
|
|
averaged: {
|
|
marginTop: 20,
|
|
},
|
|
txtAveraged: {
|
|
color: 'red'
|
|
},
|
|
note: {
|
|
marginTop: 5,
|
|
color: 'red',
|
|
fontSize: 12,
|
|
}
|
|
})
|