import 'react-native-gesture-handler';
import * as React from 'react';
import { useState } from 'react';
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native';
import Constants from 'expo-constants';
import { Ionicons, FontAwesome } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import { PolicyFooter, Social, ShowroomList, FooterInfo } from '../components/footer/footerMain';

import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View, } from '../components/Themed';
import useColorScheme from '../hooks/useColorScheme';
import { TextInput } from 'react-native-gesture-handler';
import { RadioButton, Checkbox } from 'react-native-paper';
import { Picker } from '@react-native-picker/picker';
import { ArticleItem } from '../components/article/ArticleItem';

export default function ArticleDetail() {
    return (
        <SafeAreaView style={styles.container}>
            <ScrollView>
                <View style={styles.brecrumb}>
                    <Text style={styles.brecrumbText}>Trang chủ</Text>
                    <FontAwesome style={styles.brecrumbIcon} name="angle-right" />
                    <Text style={styles.brecrumbTextLast}>Tin tức</Text>
                </View>

                <ArticleDetailContent />

                <CommentArticle />

                <ArticleDetailNew />

                <ArticleDetailHot />

                <ArticleDetailProduct />

                <PolicyFooter />

                <Social />

                <ShowroomList />

                <FooterInfo />
            </ScrollView>
        </SafeAreaView>
    )
}

const ArticleDetailContent = () => {
    return (
        <View style={styles.boxArticleDetail}>
            <Text style={styles.boxArticleDetailTitle}>Chương trình Khuyến mãi “Play-with Power by MSI”</Text>
            <Text style={styles.boxArticleDetailTime}>Từ 17-03-2021, 4:32 pm</Text>
            <View style={styles.boxArticleDetailCreateBy}>
                <Image style={styles.boxArticleDetailCreateByImg} source={require('../assets/images/img-cmt.png')} />
                <View style={styles.boxArticleDetailCreateByText}>
                    <Text style={styles.boxArticleDetailCreateByTextSt}>By</Text>
                    <Text style={styles.boxArticleDetailCreateByTextB}>HNC</Text>
                    <Text style={styles.boxArticleDetailCreateByTextSt}>- 7-03-2021, 4:32 pm</Text>
                </View>
            </View>
            <View>
                <Image style={styles.boxArticleDetailImageMain} source={{ uri: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg' }} />
            </View>
            <View style={styles.boxArticleDetailContent}>
                <Text>Nội dung đang được cập nhật!</Text>
            </View>
        </View>
    )
}


const CommentArticle = () => {
    return (
        <View style={styles.boxCommentArticle}>
            <Text style={styles.boxCommentArticleTitle}>Trả lời</Text>
            <Text style={styles.boxCommentArticleNote}>Email của bạn sẽ không được hiển thị công khai.</Text>
            <Text style={styles.boxCommentArticleNote}>Các trường bắt buộc được đánh dấu <Text>*</Text></Text>
            <View style={styles.boxCommentArticleContent}>
                <View style={styles.boxCommentArticleItem}>
                    <Text style={styles.boxCommentArticleItemName}>Bình luận*</Text>
                    <TextInput style={styles.boxCommentArticleItemArea} multiline={true} numberOfLines={4} />
                </View>
                <View style={styles.boxCommentArticleItem}>
                    <Text style={styles.boxCommentArticleItemName}>Tên*</Text>
                    <TextInput style={styles.boxCommentArticleItemInput} />
                </View>
                <View style={styles.boxCommentArticleItemStyleNd}>
                    <View style={styles.boxCommentArticleItemNd}>
                        <Text style={styles.boxCommentArticleItemName}>Email*</Text>
                        <TextInput style={styles.boxCommentArticleItemInput} />
                    </View>
                    <View style={styles.boxCommentArticleItemNd}>
                        <Text style={styles.boxCommentArticleItemName}>Trang web</Text>
                        <TextInput style={styles.boxCommentArticleItemInput} />
                    </View>
                </View>
                <View style={styles.boxCommentArticleSubmit}>
                    <Pressable style={styles.boxCommentArticleSubmitButton}>
                        <Text style={styles.boxCommentArticleSubmitText}>Phản hồi</Text>
                    </Pressable>
                </View>
            </View>
        </View>
    )
}


const dataArticle = [
    {
        id: 1,
        title: 'Chương trình Khuyến mãi “Play-with Power by MSI”',
        image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
        category: 'Review sản phẩm',
        visit: 10,
        comment: 40,
        createDate: '12-03-2021, 5:30 pm',
        createBy: 'Bùi Phương Thảo',
        summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
    },
    {
        id: 2,
        title: 'Tự bẻ khóa tính năng hạn chế khai thác tiền ảo của RTX 3060, Nvidia đang \'tiếp tay\' cho dân đào coin?',
        image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
        category: 'Review sản phẩm',
        visit: 10,
        comment: 40,
        createDate: '13-03-2021, 8:30 pm',
        createBy: 'Tiêu Phong',
        summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
    },
    {
        id: 3,
        title: '3 CPU “thần thánh” sẽ cứu rỗi game thủ',
        image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
        category: 'Review sản phẩm',
        visit: 10,
        comment: 40,
        createDate: '13-03-2021, 5:30 am',
        createBy: 'Gâu Gâu',
        summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
    },
    {
        id: 4,
        title: 'Chương trình Khuyến mãi “Quà Cực Sốc Khi Dựng Cấu Hình PC Lắp Ráp”',
        image: 'https://hanoicomputercdn.com/media/news/454_cpu_ch__i_game.jpg',
        category: 'Review sản phẩm',
        visit: 10,
        comment: 40,
        createDate: '22-03-2021, 5:30 pm',
        createBy: 'Meo Meo',
        summary: 'Khi chọn mua cho mình một chiếc laptop để đồng hành mình trong công việc, học lập và giải trí phải chăng chúng ta chỉ quan tâm đến cầu hình',
    },
]

const ArticleDetailNew = () => {
    const dataArticleNew = dataArticle;
    return (
        <View style={styles.boxArticleDetailNew}>
            <View style={styles.ArticleTitleAll}>
                <Text style={styles.ArticleTitleAllText}>Bài viết mới nhất</Text>
                <View style={styles.ArticleTitleAllLine}></View>
            </View>
            <View>
                {
                    dataArticleNew.map((item, index) => {
                        if (index == 0) {
                            return (
                                <View key={item.id} style={styles.boxArticleDetailNewFirstItem}>
                                    <Image style={styles.boxArticleDetailNewFirstItemImg} source={{ uri: item.image }} />
                                    <Text style={styles.boxArticleDetailNewFirstItemName} numberOfLines={2}>{item.title}</Text>
                                    <View style={styles.boxArticleDetailNewFirstItemOther}>
                                        <Text style={styles.boxArticleDetailNewFirstItemOtherText}>By</Text>
                                        <Text style={styles.boxArticleDetailNewFirstItemCus}>{item.createBy}</Text>
                                        <Text style={styles.boxArticleDetailNewFirstItemOtherText}>{item.createDate}</Text>
                                        <View style={styles.boxArticleNewHomeItemView}>
                                            <FontAwesome style={styles.boxArticleNewHomeItemIcon} name="comment" />
                                            <Text style={styles.boxArticleNewHomeItemViewText}>{item.comment}</Text>
                                        </View>
                                        <View style={styles.boxArticleNewHomeItemView}>
                                            <FontAwesome style={styles.boxArticleNewHomeItemIcon} name="eye" />
                                            <Text style={styles.boxArticleNewHomeItemViewText}>{item.visit}</Text>
                                        </View>
                                    </View>
                                    <View style={styles.boxArticleDetailNewFirstItemSummary}>
                                        <Text style={styles.boxArticleDetailNewFirstItemSummaryCt} numberOfLines={2}>{item.summary}</Text>
                                    </View>
                                </View>
                            )
                        } else if (index > 0 && index < 4) {
                            return (
                                <View key={item.id} style={styles.boxArticleDetailNewItem}>
                                    <View style={styles.boxArticleDetailNewItemImage}>
                                        <Image style={styles.boxArticleDetailNewItemImageCt} source={{ uri: item.image }} />
                                    </View>
                                    <View style={styles.boxArticleDetailNewItemInfo}>
                                        <Text style={styles.boxArticleDetailNewItemName} numberOfLines={2}>{item.title}</Text>
                                        <View style={styles.boxArticleDetailNewItemInfoOther}>
                                            <View style={styles.boxArticleNewHomeItemViewSt}>
                                                <FontAwesome style={styles.boxArticleNewHomeItemIcon} name="clock-o" />
                                                <Text style={styles.boxArticleNewHomeItemViewText}>{item.createDate}</Text>
                                            </View>
                                            <View style={styles.boxArticleNewHomeItemView}>
                                                <FontAwesome style={styles.boxArticleNewHomeItemIcon} name="comment" />
                                                <Text style={styles.boxArticleNewHomeItemViewText}>{item.comment}</Text>
                                            </View>
                                            <View style={styles.boxArticleNewHomeItemView}>
                                                <FontAwesome style={styles.boxArticleNewHomeItemIcon} name="eye" />
                                                <Text style={styles.boxArticleNewHomeItemViewText}>{item.visit}</Text>
                                            </View>
                                        </View>
                                    </View>
                                </View>
                            )
                        }
                    })
                }
            </View>
        </View>
    )
}

const ArticleDetailHot = () => {

    const dataArticleHot = dataArticle;

    return (
        <View style={styles.boxArticleDetailNew}>
            <View style={styles.ArticleTitleAll}>
                <Text style={styles.ArticleTitleAllText}>Bài viết nhiều người xem</Text>
                <View style={styles.ArticleTitleAllLine}></View>
            </View>
            <View>
                {
                    dataArticleHot.map((item, index) => {
                        if (index < 5) {
                            return (
                                <View key={item.id} style={styles.boxArticleDetailNewFirstItem}>
                                    <Image style={styles.boxArticleDetailNewFirstItemImg} source={{ uri: item.image }} />
                                    <Text style={styles.boxArticleDetailNewFirstItemName} numberOfLines={2}>{item.title}</Text>
                                    <View style={styles.boxArticleDetailNewFirstItemOther}>
                                        <Text style={styles.boxArticleDetailNewFirstItemOtherText}>By</Text>
                                        <Text style={styles.boxArticleDetailNewFirstItemCus}>{item.createBy}</Text>
                                        <Text style={styles.boxArticleDetailNewFirstItemOtherText}>{item.createDate}</Text>
                                        <View style={styles.boxArticleNewHomeItemView}>
                                            <FontAwesome style={styles.boxArticleNewHomeItemIcon} name="comment" />
                                            <Text style={styles.boxArticleNewHomeItemViewText}>{item.comment}</Text>
                                        </View>
                                        <View style={styles.boxArticleNewHomeItemView}>
                                            <FontAwesome style={styles.boxArticleNewHomeItemIcon} name="eye" />
                                            <Text style={styles.boxArticleNewHomeItemViewText}>{item.visit}</Text>
                                        </View>
                                    </View>
                                    <View style={styles.boxArticleDetailNewFirstItemSummary}>
                                        <Text style={styles.boxArticleDetailNewFirstItemSummaryCt} numberOfLines={2}>{item.summary}</Text>
                                    </View>
                                </View>
                            )
                        }
                    })
                }
            </View>
        </View>
    )
}

function formatCurrency(price: string | number) {
    let priceConvert = parseFloat(`${price}`).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1.").toString();
    let len = priceConvert.length;
    return priceConvert.substring(0, len - 3);
}

const ArticleDetailProduct = () => {
    const productData = [
        {
            id: 1,
            productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
            productSKU: 'TESTSKU',
            productImage: {
                small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
            },
            price: 30000000,
            marketPrice: 50000000,
            quantity: 1,
        },
        {
            id: 2,
            productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
            productSKU: 'TESTSKU',
            productImage: {
                small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
            },
            price: 25000000,
            marketPrice: 50000000,
            quantity: 0,
        },
        {
            id: 3,
            productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
            productSKU: 'TESTSKU',
            productImage: {
                small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
            },
            price: 35000000,
            marketPrice: 50000000,
            quantity: 1,
        },
        {
            id: 4,
            productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
            productSKU: 'TESTSKU',
            productImage: {
                small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
            },
            price: 40000000,
            marketPrice: 50000000,
            quantity: 1,
        },
        {
            id: 5,
            productName: 'Laptop LG Gram 14ZD90N-V.AX55A5 (i5 1035G7/8GB RAM/512GBSSD/14.0 inch FHD/FP/Xám Bạc) (model 2020)',
            productSKU: 'TESTSKU',
            productImage: {
                small: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                medium: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                large: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
                original: 'https://hanoicomputercdn.com/media/product/120_52019_14zd90n_v_ax55a5.png',
            },
            price: 30000000,
            marketPrice: 50000000,
            quantity: 1,
        },
    ]

    return(
        <View style={styles.boxPrductArticleDetail}>
            <View style={styles.ArticleTitleAll}>
                <Text style={styles.ArticleTitleAllText}>Sản phẩm bán chạy nhất</Text>
                <View style={styles.ArticleTitleAllLine}></View>
            </View>
            <View style={styles.boxPrductArticleDetailList}>
                {
                    productData.map((item, index) => {
                        if(index < 5) {
                            return(
                                <View style={styles.boxPrductArticleDetailItem} key={index}>
                                    <View style={styles.boxPrductArticleDetailImg}>
                                        <Image style={styles.boxPrductArticleDetailImgCt} source={{ uri: item.productImage.large }} />
                                    </View>
                                    <View style={styles.boxPrductArticleDetailInfo}>
                                        <Text style={styles.boxPrductArticleDetailSku}>Mã SP: {item.productSKU}</Text>
                                        <Text style={styles.boxPrductArticleDetailName} numberOfLines={2}>{item.productName}</Text>
                                        <Text style={styles.boxPrductArticleDetailPrice}>{formatCurrency(item.price)} đ</Text>
                                        <Text style={styles.boxPrductArticleDetailOldPrice}>{formatCurrency(item.marketPrice)}đ</Text>
                                    </View>
                                </View>
                            )
                        }
                    })
                }
            </View>
        </View>
    )
}

const winWidth = Dimensions.get('window').width; //full width
const winHeight = Dimensions.get('window').height; //full height
const winWidthP10 = winWidth - 20;
const halfWinWidth = winWidth / 2;
const ratio = winWidthP10 / 850; //541 is actual image width

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#fff',
    },
    brecrumb: {
        display: 'flex',
        width: winWidth,
        paddingLeft: 10,
        paddingRight: 10,
        flexDirection: 'row',
        height: 18,
        alignItems: 'center',
        marginTop: 10,
        marginBottom: 10,
    },
    brecrumbText: {
        fontSize: 13,
        color: '#222',
    },
    brecrumbTextLast: {
        fontSize: 13,
        color: '#b7b7b7',
    },
    brecrumbIcon: {
        fontSize: 13,
        color: '#222',
        marginLeft: 6,
        marginRight: 6
    },
    boxArticleDetail: {
        marginBottom: 20,
        width: winWidth,
        paddingHorizontal: 10,
    },
    boxArticleDetailTitle: {
        fontSize: 30,
        fontWeight: 'bold',
        color: '#222',
        marginBottom: 10,
    },
    boxArticleDetailTime: {
        fontSize: 18,
        color: '#888888',
        marginBottom: 10,
    },
    boxArticleDetailCreateBy: {
        width: '100%',
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 20,
    },
    boxArticleDetailCreateByImg: {
        width: 29,
        height: 29,
        borderRadius: 3,
        overflow: 'hidden',
        marginRight: 10,
    },
    boxArticleDetailCreateByText: {
        flexDirection: 'row'
    },
    boxArticleDetailCreateByTextSt: {
        fontSize: 13,
        color: '#888'
    },
    boxArticleDetailCreateByTextB: {
        fontSize: 13,
        fontWeight: 'bold',
        color: '#536be8',
        marginHorizontal: 5,
    },
    boxArticleDetailImageMain: {
        width: '100%',
        height: ratio * 450,
    },
    boxArticleDetailContent: {
        marginTop: 20,
        width: '100%',
        paddingBottom: 20,
        borderBottomColor: '#e1e1e1',
        borderBottomWidth: 1,
    },
    boxCommentArticle: {
        width: winWidth,
        paddingHorizontal: 10,
        marginBottom: 20,
    },
    boxCommentArticleTitle: {
        fontWeight: 'bold',
        fontSize: 24,
        marginBottom: 10,
    },
    boxCommentArticleNote: {
        fontSize: 14,
    },
    boxCommentArticleContent: {
        marginTop: 20,
    },
    boxCommentArticleItem: {
        width: '100%',
        marginBottom: 20,
    },
    boxCommentArticleItemNd: {
        width: '49%',
        marginBottom: 20,
    },
    boxCommentArticleItemName: {
        fontSize: 16,
        fontWeight: 'bold',
        marginBottom: 5,
    },
    boxCommentArticleItemArea: {
        width: '100%',
        height: 110,
        borderWidth: 1,
        borderColor: '#e1e1e1',
        borderRadius: 5,
        padding: 10,
    },
    boxCommentArticleItemInput: {
        width: '100%',
        height: 40,
        borderWidth: 1,
        borderColor: '#e1e1e1',
        borderRadius: 5,
        paddingHorizontal: 10,
    },
    boxCommentArticleItemStyleNd: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    boxCommentArticleSubmit: {
        flexDirection: 'row',
    },
    boxCommentArticleSubmitButton: {
        width: 115,
        height: 40,
        backgroundColor: '#f70d28',
        borderRadius: 5,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    boxCommentArticleSubmitText: {
        textTransform: 'uppercase',
        color: '#fff',
    },
    boxArticleDetailNew: {
        width: winWidth,
        paddingHorizontal: 10,
    },
    ArticleTitleAll: {
        paddingVertical: 10,
        marginBottom: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#e1e1e1',
    },
    ArticleTitleAllText: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#ce0707',
        textTransform: 'uppercase',
    },
    ArticleTitleAllLine: {
        width: 100,
        height: 1,
        backgroundColor: '#ce0707',
        position: 'absolute',
        bottom: -1,
        left: 0,
    },
    boxArticleDetailNewFirstItem: {
        width: '100%',
        marginBottom: 20,
    },
    boxArticleDetailNewFirstItemImg: {
        width: '100%',
        marginBottom: 10,
        height: ratio * 450,
    },
    boxArticleDetailNewFirstItemName: {
        fontSize: 18,
        fontWeight: 'bold',
        marginBottom: 10,
    },
    boxArticleDetailNewFirstItemOther: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 10,
    },
    boxArticleDetailNewFirstItemOtherText: {
        fontSize: 12,
        color: '#888'
    },
    boxArticleDetailNewFirstItemCus: {
        fontSize: 12,
        color: '#536be8',
        textTransform: 'uppercase',
        marginHorizontal: 8,
        fontWeight: 'bold'
    },
    boxArticleNewHomeItemView: {
        flexDirection: 'row',
        marginLeft: 10,
        alignItems: 'center'
    },
    boxArticleNewHomeItemIcon: {
        fontSize: 11,
        color: '#2e9fff',
        marginRight: 2,
    },
    boxArticleNewHomeItemViewText: {
        fontSize: 12,
        color: '#888'
    },
    boxArticleDetailNewFirstItemSummary: {
        marginBottom: 10,
    },
    boxArticleDetailNewFirstItemSummaryCt: {},
    boxArticleDetailNewItem: {
        flexDirection: 'row',
        width: '100%',
        marginBottom: 20,
    },
    boxArticleDetailNewItemImage: {
        width: 130,
        height: 87,
        overflow: 'hidden',
        position: 'relative',
        marginRight: 10,
    },
    boxArticleDetailNewItemImageCt: {
        width: '100%',
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
    },
    boxArticleDetailNewItemInfo: {
        width: winWidthP10 - 140,
    },
    boxArticleDetailNewItemName: {
        fontWeight: 'bold',
        marginBottom: 10,
        lineHeight: 23,
    },
    boxArticleDetailNewItemInfoOther: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    boxArticleNewHomeItemViewSt: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    boxPrductArticleDetail: {
        width: winWidth,
        paddingHorizontal: 10,
        marginBottom: 20,
    },
    boxPrductArticleDetailList: {},
    boxPrductArticleDetailItem: {
        flexDirection: 'row',
        marginBottom: 10,
    },
    boxPrductArticleDetailImg: {
        width: 174,
        height: 174,
        position: 'relative',
        overflow: 'hidden',
        marginRight:  10,
    },
    boxPrductArticleDetailImgCt: {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
    },
    boxPrductArticleDetailInfo: {
        width: winWidthP10 - 184,
    },
    boxPrductArticleDetailName: {
        fontWeight: 'bold',
        marginBottom: 10,
    },
    boxPrductArticleDetailSku: {
        fontSize: 12,
        color: '#ce0707',
        marginBottom: 10,
    },
    boxPrductArticleDetailPrice: {
        fontSize: 19,
        fontWeight: 'bold',
        color: '#f40606',
        marginBottom: 7,
    },
    boxPrductArticleDetailOldPrice: {
        color: '#888',
        textDecorationLine: 'line-through',
    },
})