import { View, Image, Text, Navigator, Button } from "@tarojs/components"
import { memo, useEffect, useState } from "react"
import styles from './index.module.scss'
import classnames from "classnames";
import { useSelector } from "@/reducers/hooks";
import { alert, goLink } from "@/common/common";
import useLogin from '@/use/useLogin'
import { BASE_URL } from '@/common/constant'
import Taro from "@tarojs/taro";
import { userassets } from "@/api/mine"
import { formatPriceDiv } from "@/common/fotmat"
export default () => {
	// 用户信息
	const { getSelfUserInfo } = useLogin();
	const { adminUserInfo } = useSelector(state => state.userInfo);
	useEffect(() => {
		getSelfUserInfo().then().catch(() => {
			alert.none("授权失败，请授权后再使用");
		});
	}, []);
	const handleAuth = async () => {
		getSelfUserInfo().then().catch(() => {
			alert.none("授权失败，请授权后再使用");
		});
	}
	const { fetchData, state } = userassets()
	useEffect(() => {
		fetchData();
	}, [])
	const checkGo = () => {
		if (adminUserInfo?.authentication_status === 0 || adminUserInfo?.authentication_status === 1 || adminUserInfo?.authentication_status === 2 || adminUserInfo?.authentication_status === 3) {
			Taro.showModal({
				title: '提示',
				content: '你还未认证,认证后解锁更多功能',
				cancelText: '稍后认证',
				confirmText: '去认证',
				success: function (res) {
					if (res.confirm) {
						Taro.navigateTo({ url: '/pages/certification/index' })
					} else if (res.cancel) {
						console.log('用户点击取消')
					}
				}
			})
		} else {
			Taro.navigateTo({
				url: "/pages/creditLine/index"
			})
		}
	}
	return (
		<View className={styles.main}>
			<Header data={adminUserInfo} />
			<Assets data={state} checkShow={() => checkGo()} />
			<Main />
			{/* {(adminUserInfo as any)?.authentication_status==1&&<Modal data={adminUserInfo}/>} */}
			{/* 测试暂时添加 */}
			<View style={{ fontSize: '26rpx', textAlign: 'center' }}>{BASE_URL}</View>
			{!adminUserInfo.is_authorize_name && <View onClick={handleAuth} className={styles["auth-suspension"]}></View>}
		</View>
	)
}
// 提示弹窗
const Modal = memo((props: any) => {
	const { data } = props;
	const [modalShow, setModalShow] = useState(true);
	const handleouter = () => {
	}
	return (
		<>
			{modalShow &&
				<View onClick={handleouter} catchMove className={styles['tips-modal']}>
					<View className={styles['tips-modal-content']} onClick={e => e.stopPropagation()}>
						<View className={styles['tips-modal-title']}>首次登录提醒</View>
						<View className={styles['tips-modal-letter']}>
							<View className={styles['tips-modal-letter-beginn']}>To: 万丰园纺织科技</View>
							<View className={styles['tips-modal-letter-text']}>尊敬的老朋友，欢迎你使用小程序商城；由于您是我们长期合作的伙伴，你的组织已自动为你生成，关联后可查看历史订单哟。</View>
							<View className={styles['tips-modal-letter-end']}>信息错误请联系客服</View>
						</View>
						<View className={styles['tips-modal-button']}>
							<Button hoverClass="none" openType="contact">联系客服</Button>
							<View onClick={() => setModalShow(false)}>我知道</View>
						</View>
					</View>
				</View>
			}
		</>
	)
})

// 头部 | 订单
const Header = memo((props: any) => {
	const { data } = props;
	let menu = [{ text: "待配布", icon: "icon-daipeibu", url: "/pages/orderList/index" }, { text: "待付款", icon: "icon-daifukuan", url: "/pages/orderList/index" },
	{ text: "待发货", icon: "icon-daifahuo", url: "/pages/orderList/index" }, { text: "已发货", icon: "icon-yifahuo", url: "/pages/orderList/index" },
	{ text: "退款/售后", icon: "icon-a-tuikuanshouhou", url: "/pages/orderList/index" }];
	const { getPhoneNumber } = useLogin();
	const mGetPhoneNumber = (ev) => {
		if (ev.detail?.code) {
			getPhoneNumber(ev.detail.code);
		} else {
			alert.none("绑定失败!");
		}
	}
	const navTo = () => {
		Taro.navigateTo({
			url: '/pages/certification/index'
		})
	}
	return (
		<View className={styles.header}>
			<View className={`${styles.crad} ${styles['header-card']}`}>
				<View className={styles['card-info']}>
					<View className={styles['arcd-info-left']}>
						<View className={styles['arcd-info-left-portrait']}>
							<Image src={data?.avatar_url} />
						</View>
						<View className={styles['arcd-info-left-desc']}>
							<View className={styles['arcd-info-left-nickname']}>
								{/* {state.data.user_name} */}
								{data?.user_name}
							</View>
							<View className={styles['arcd-info-left-phone']}>
								{data?.phone ? data?.phone?.replace(data?.phone?.substring(3, 7), "****") : <Button openType="getPhoneNumber" onGetPhoneNumber={mGetPhoneNumber}>绑定手机号码</Button>}
							</View>
						</View>
					</View>
					<View className={styles['card-info-right']}>
						<Navigator hoverClass="none" url="/pages/userEdit/index" className={styles['setup-icon']}>
							<View className={classnames(
								styles['icon-wrapper'],
								'iconfont',
								'icon-shezhi',
							)}></View>
							<View className={styles['icon-point']}></View>
						</Navigator>
					</View>
				</View>
				<View className={styles['auth']}>
					{(data?.authentication_status == 0 || data?.authentication_status == 1) &&
						<View className={styles['auth-box']} onClick={() => navTo()}>
							<View className={styles['auth-left-box']}>
								<View className={styles['auth-tag']}>
									未认证
								</View>
								<View className={styles['auth-cont']}>
									暂未加入或注册组织
								</View>
							</View>
							<Text className="iconfont icon-a-moreback"></Text>
						</View>
					}
					{(data?.authentication_status == 3) &&
						<View className={styles['auth-box']} onClick={() => navTo()}>
							<View className={styles['auth-left-box']}>
								<View className={styles['auth-tagthree']}>
									认证失败
								</View>
								<View className={styles['auth-cont']}>
									暂未加入或注册组织
								</View>
							</View>
							<Text className="iconfont icon-a-moreback"></Text>
						</View>
					}
					{data?.authentication_status == 2 &&
						<View className={styles['auth-box']} onClick={() => navTo()}>
							<View className={styles['auth-left-box']}>
								<View className={styles['auth-tagone']}>
									认证中
								</View>
								<View className={styles['auth-contone']}>
									{data?.company_name || '暂未加入或注册组织'}
								</View>
							</View>
							<Text className="iconfont icon-a-moreback"></Text>
						</View>
					}
					{data?.authentication_status == 4 &&
						<View className={styles['auth-box']} onClick={() => navTo()}>
							<View className={styles['auth-left-box']}>
								<View className={styles['auth-tagtwo']}>
									<View className={styles['iconFont-color']}>
										<Text className="iconfont icon-xtianzhangqi"></Text>
									</View>
									<View className={styles['auth-font']}>已认证</View>
								</View>
								<View className={styles['auth-contone']}>
									{data?.company_name}
								</View>
							</View>
							<Text className="iconfont icon-a-moreback"></Text>
						</View>
					}
					{/* <View className={`${styles['auth-top']} ${data?.authentication_status==4&&"auth-tips-adopt"}`}>
						<View className={`${styles['auth-status']} ${data?.authentication_status==2&&styles['auth-status-ongoing']} ${data?.authentication_status==4&&styles['auth-status-adopt']}`}>
							<Text>1</Text>
							{data?.authentication_status==1&&"未认证"}
							{data?.authentication_status==2&&"认证中"}
							{data?.authentication_status==3&&"认证不通过"}
							{data?.authentication_status==4&&"已认证"}
						</View>
						{data?.authentication_status==1&&<Navigator hoverClass="none" url="/pages/certification/index" className={styles['auth-tips']}>认证通过后，解锁更多权限 <Text className="iconfont icon-a-moreback"/></Navigator>}
						{data?.authentication_status==2&&<Navigator hoverClass="none" url="/pages/certification/index" className={styles['auth-tips']}>1-3个工作日，审核完成 <Text className="iconfont icon-a-moreback"/></Navigator>}
						{data?.authentication_status==3&&<Navigator hoverClass="none" url="/pages/certification/index" className={styles['auth-tips']}>重新认证 <Text className="iconfont icon-a-moreback"/></Navigator>}
						{data?.authentication_status==4&&<View className={styles['auth-tips']}>认证通过，可以下单啦 <Text className="iconfont icon-a-moreback"/></View>}
					</View> */}
					{/* <View className={`${styles['auth-company']} ${data?.authentication_status==4&&"auth-tips-adopt"}`}>
						{data?.authentication_status==1&&"暂未加入或注册组织"}
						{data?.authentication_status==2&&data?.company_name}
						{data?.authentication_status==3&&data?.company_name}
						{data?.authentication_status==4&&data?.company_name}
					</View> */}
				</View>
				<View className={styles['card-main']}>
					<View className={styles['card-main-title']}>
						<View>订单</View>
						<Text onClick={() => goLink('/pages/orderList/index')}>全部</Text>
					</View>
					<View className={styles['card-main-title-content']}>
						{
							menu.map((item, index) => {
								return (
									<Navigator hoverClass="none" url={item.url} className={styles['card-main-title-content-item']}>
										<Text className={`iconfont ${item.icon}`}></Text>
										<View>{item.text}</View>
										<View className={styles['card-main-title-content-item-badge']}>{index == 2 ? "99+" : 10}</View>
									</Navigator>
								)
							})
						}
					</View>
				</View>
			</View>
		</View>
	)
})
// 我的资产
const Assets = (props: any) => {
	return (
		<View className={`${styles.assets} ${styles.crad} ${styles['main-card']}`}>
			<View className={`${styles['assets-title']}`}>我的资产</View>
			<View className={`${styles['assets-content']}`}>
				<Navigator hoverClass="none" url="/pages/depositBeforehand/index">
					<View className={`${styles['assets-content-item-top']}`}>
						<Text className={`${styles['assets-content-item-top-before']}`}>¥</Text>
						<Text className={`${styles['assets-content-item-top-content']}`}>{formatPriceDiv(props.data.data.wallet_money || 0)}</Text>
						{/* <Text className={`${styles['assets-content-item-top-after']}`}>{props.wallet_money || 0}</Text> */}
					</View>
					<Text className={`${styles['assets-content-item-tips']}`}>预存款</Text>
				</Navigator>
				<View>
					<View className={`${styles['assets-content-item-top']}`}>
						<Text className={`${styles['assets-content-item-top-content']}`}>{props.data.data.coupon_count || 0}</Text>
						<Text className={`${styles['assets-content-item-top-after']}`}>张</Text>
					</View>
					<Text className={`${styles['assets-content-item-tips']}`}>优惠券</Text>
				</View>
				<Navigator hoverClass="none" onClick={() => props.checkShow()}>
					<View className={`${styles['assets-content-item-top']}`} >
						<Text className={`${styles['assets-content-item-top-before']}`}>¥</Text>
						<Text className={`${styles['assets-content-item-top-content']}`}>{formatPriceDiv(props.data.data.credit_line || 0)}</Text>
						{/* <Text className={`${styles['assets-content-item-top-after']}`}>.-00</Text> */}
					</View>
					<Text className={`${styles['assets-content-item-tips']}`}>授信额度</Text>
				</Navigator>
			</View>
		</View>
	)
};

// 功能
const Main = memo(() => {
	let menu = [{ text: "地址管理", icon: "icon-shoucang", url: "/pages/addressManager/index" }, { text: "码单管理", icon: "icon-shoucang", url: "/pages/weightList/index" },
	{ text: "我的收藏", icon: "icon-shoucang" }, { text: "颜色对比", icon: "icon-yanseduibi", url: "/pages/sampleComparison/index" },
	{ text: "分享推广", icon: "icon-fenxiang" }, { text: "团队邀请", icon: "icon-yaoqingtuandui" }]
	return (
		<View className={`${styles.crad} ${styles['card-main']} ${styles['card-feature']}`}>
			<View className={styles['card-main-list-content']}>
				{
					menu.map((item, index) => {
						return (
							<Navigator hoverClass="none" url={item.url} key={index} className={styles['card-main-list-content-item']}>
								<View className={styles['card-main-list-content-item-left']}>
									<Text className={`iconfont ${item.icon}`}></Text>
									<View>{item.text}</View>
								</View>
								<View className={styles['card-main-list-content-item-right']}>
									<Text className="iconfont icon-a-moreback"></Text>
								</View>
							</Navigator>
						)
					})
				}
			</View>
		</View>
	)
})