import Taro, {
  useDidShow,
  useShareAppMessage,
  getCurrentPages,
  getCurrentInstance
} from '@tarojs/taro'
import { useState, useEffect, useCallback, useRef } from 'react'
import { updateUserInfo, fetchUserFavs, updateCheckChief } from '@/store/slices/user'
import { View, ScrollView, Text, Image, Button } from '@tarojs/components'
import { SG_APP_CONFIG, MERCHANT_TOKEN, SG_TOKEN } from '@/consts'
import { useSelector, useDispatch } from 'react-redux'
import { useImmer } from 'use-immer'

import {
  SpLogin,
  SpImage,
  SpPrice,
  CouponModal,
  SpModal,
  SpPrivacyModal,
  SpTabbar,
  SpPage,
  SpButton
} from '@/components'
import api from '@/api'
import {
  navigateTo,
  getThemeStyle,
  styleNames,
  classNames,
  showToast,
  showModal,
  isWeixin,
  normalizeQuerys,
  log,
  VERSION_PLATFORM,
  VERSION_STANDARD
} from '@/utils'
import { useLogin } from '@/hooks'
import CompVipCard from './comps/comp-vipcard'
import CompBanner from './comps/comp-banner'
import CompPanel from './comps/comp-panel'
import CompMenu from './comps/comp-menu'
import CompHelpCenter from './comps/comp-helpcenter'
import './index.scss'
import S from '@/spx'
import { AtButton } from 'taro-ui'

const initialConfigState = {
  banner: {
    isShow: false,
    loginBanner: '',
    noLoginBanner: '',
    pageUrl: '',
    urlOpen: false,
    appId: null
  },
  menu: {
    pointMenu: false, // 积分菜单
    activity: false, // 活动预约
    offline_order: false, // 线下订单
    boost_activity: false, // 助力活动
    boost_order: false, // 助力订单
    complaint: false, // 投诉记录
    community_order: false, // 社区团购
    ext_info: false,
    group: false, // 我的拼团
    member_code: false, // 会员二维码
    recharge: false, // 储值
    ziti_order: false, // 自提
    share_enable: false, // 分享
    memberinfo_enable: false, // 个人信息
    tenants: true, //商家入驻
    purchase: true, // 员工内购
    dianwu: false, // 店务,
    community: false // 社区
  },
  infoAppId: '',
  infoPage: '',
  infoUrlIsOpen: true,
  pointAppId: '',
  pointPage: '',
  pointUrlIsOpen: true,
  memberConfig: {
    // defaultImg: null,
    vipImg: null
  },
}

const initialState = {
  favCount: 0,
  point: 0,
  couponCount: 0,
  username: '',
  avatar: '',
  mobile: '',
  waitPayNum: 0,
  waitSendNum: 0,
  waitRecevieNum: 0,
  waitEvaluateNum: 0,
  afterSalesNum: 0,
  finishNum: 0,
  zitiNum: 0,
  deposit: 0,
  isOpen: false,
  loading: false,
  isInternal: false,
}

function MemberIndex (props) {
  // console.log('===>getCurrentPages==>', getCurrentPages(), getCurrentInstance())
  const $instance = getCurrentInstance()
  const { isLogin, isNewUser, login, getUserInfoAuth } = useLogin({
    autoLogin: true,
    // policyUpdateHook: (isUpdate) => {
    //   // isUpdate && setPolicyModal(true)
    //   if (isUpdate) {
    //     RefLogin.current._setPolicyModal()
    //   }
    // }
  })
  const [config, setConfig] = useImmer(initialConfigState)
  const [state, setState] = useImmer(initialState)
  const [policyModal, setPolicyModal] = useState(false)

  const { userInfo = {}, vipInfo = {} } = useSelector((state) => state.user)
  const { pointName } = useSelector((state) => state.sys)
  // log.debug(`store userInfo: ${JSON.stringify(userInfo)}`)
  const dispatch = useDispatch()

  Taro.setNavigationBarColor({
    frontColor: '#000000',
    backgroundColor: '#ffffff',
  })
  useEffect(() => {
    if (isLogin) {
      setState((draft) => {
        draft.loading = true
      })
      getMemberCenterData()
      setMemberBackground()
      const { redirect } = $instance.router.params
      if (redirect) {
        Taro.redirectTo({ url: decodeURIComponent(redirect) })
      }
      setState((draft) => {
        draft.loading = false
      })
    }
  }, [isLogin])

  useEffect(() => {
    getMemberCenterConfig()
    // 白名单
    getSettings()
  }, [])


  useDidShow(() => {
    if (isLogin) {
      getMemberCenterData()
    } else {
      // setState((draft) => {
      //   draft.isOpen = true
      // })
    }
  })

  // useDidShow(() => {
  //   if (isLogin) {
  //     getMemberCenterData()
  //     setMemberBackground()
  //   }
  //   // if (S.get(MERCHANT_TOKEN, true)) {
  //   //   S.delete(MERCHANT_TOKEN, true)
  //   // }
  //   // if (S.get(SG_TOKEN)) {
  //   //   setHeaderBlock()
  //   // }
  // })

  async function getSettings () {
    const { whitelist_status = false } = await api.shop.homeSetting()
    // 白名单配置
    Taro.setStorageSync(SG_APP_CONFIG, {
      whitelist_status
    })
  }

  // 分享
  useShareAppMessage(async (res) => {
    const { share_title, share_pic_wechatapp } = await api.member.getMemberShareConfig()
    const { logo } = await api.distribution.getDistributorInfo({
      distributor_id: 0
    })
    return {
      title: share_title,
      imageUrl: share_pic_wechatapp || logo,
      path: '/pages/index'
    }
  })

  const setHeaderBlock = async () => {
    const resAssets = await api.member.memberAssets()
    const { discount_total_count, fav_total_count, point_total_count } = resAssets
    setState((draft) => {
      draft.favCount = fav_total_count
      draft.point = point_total_count
      draft.couponCount = discount_total_count
    })
  }

  const getMemberCenterConfig = async () => {
    const [bannerRes, menuRes, redirectRes, pointShopRes] = await Promise.all([
      // 会员中心banner
      await api.shop.getPageParamsConfig({
        page_name: 'member_center_setting'
      }),
      // 菜单自定义
      await api.shop.getPageParamsConfig({
        page_name: 'member_center_menu_setting'
      }),
      // 积分跳转配置
      await api.shop.getPageParamsConfig({
        page_name: 'member_center_redirect_setting'
      }),
      // 积分商城
      await api.pointitem.getPointitemSetting()
    ])
    let banner,
      menu,
      redirectInfo = {}

    if (bannerRes.list.length > 0) {
      const { app_id, is_show, login_banner, no_login_banner, page, url_is_open } =
        bannerRes.list[0].params.data
      banner = {
        isShow: is_show,
        loginBanner: login_banner,
        noLoginBanner: no_login_banner,
        pageUrl: page,
        urlOpen: url_is_open,
        appId: app_id
      }
    }
    if (menuRes.list.length > 0) {
      menu = { ...menuRes.list[0].params.data, purchase: true }
    }
    if (S.getAuthToken() && (VERSION_PLATFORM || VERSION_STANDARD)) {
      const { result, status } = await api.member.is_admin()
      console.log('env:result', result)
      console.log('env:status', status)
      S.set('DIANWU_CONFIG', result, status)
      menu = {
        ...menu,
        dianwu: status
      }
    }
    if (redirectRes.list.length > 0) {
      const {
        info_app_id,
        info_page,
        info_url_is_open,
        point_app_id,
        point_page,
        point_url_is_open
      } = redirectRes.list[0].params.data
      redirectInfo = {
        infoAppId: info_app_id,
        infoPage: info_page,
        infoUrlIsOpen: info_url_is_open,
        pointAppId: point_app_id,
        pointPage: point_page,
        pointUrlIsOpen: point_url_is_open
      }
    }
    setConfig((draft) => {
      draft.banner = banner
      draft.menu = {
        ...menu,
        pointMenu: pointShopRes.entrance.mobile_openstatus
      }
      draft.infoAppId = redirectInfo.info_app_id
      draft.infoPage = redirectInfo.info_page
      draft.infoUrlIsOpen = redirectInfo.info_url_is_open
      draft.pointAppId = redirectInfo.point_app_id
      draft.pointPage = redirectInfo.point_page
      draft.pointUrlIsOpen = redirectInfo.point_url_is_open
    })
  }

  const setMemberBackground = async () => {
    let memberRes = await api.member.memberInfo()
    setConfig((draft) => {
      draft.memberConfig = {
        // defaultImg: memberRes?.cardInfo?.background_pic_url,
        vipImg: memberRes?.vipgrade?.background_pic_url,
        backgroundImg: memberRes?.memberInfo?.gradeInfo?.background_pic_url
      }
    })
    setState((draft) => {
      draft.deposit = memberRes.deposit / 100
      draft.isInternal = memberRes?.memberInfo?.is_internal
    })
    dispatch(updateUserInfo(memberRes))
  }

  const getMemberCenterData = async () => {
    // const resSales = await api.member.getSalesperson()
    const resTrade = await api.trade.getCount()
    // const resVip = await api.vip.getList()
    // 大转盘
    // const resTurntable = await api.wheel.getTurntableconfig()
    const resAssets = await api.member.memberAssets()
    const { discount_total_count, fav_total_count, point_total_count } = resAssets

    // aftersales: 0   //待处理的售后总数
    // aftersales_pending: 0  //待处理的售后
    // aftersales_processing: 0 //处理中售后
    // normal_not_rate: 3  //待评价
    // normal_notpay_notdelivery: 0    // 未付款未发货
    // normal_payed_daifahuo: 4    // 待发货
    // normal_payed_daishouhuo: 0   // 待收货
    // normal_payed_daiziti: 0  //待自提订单
    // normal_payed_notdelivery: 4     // 已付款未发货 or 已付款已发货
    // normal_finish:1 //已完成

    const {
      aftersales, // 待处理售后
      normal_notpay_notdelivery, // 未付款未发货
      normal_payed_daifahuo, // 待发货
      normal_payed_daishouhuo, // 待收货
      normal_payed_daiziti, // 待自提订单
      normal_not_rate, // 待评论
      normal_finish
    } = resTrade

    setState((draft) => {
      draft.favCount = fav_total_count
      draft.point = point_total_count
      draft.couponCount = discount_total_count
      draft.waitPayNum = normal_notpay_notdelivery
      draft.waitSendNum = normal_payed_daifahuo
      draft.waitRecevieNum = normal_payed_daishouhuo
      draft.afterSalesNum = aftersales
      draft.zitiNum = normal_payed_daiziti
      draft.waitEvaluateNum = normal_not_rate
      draft.finishNum = normal_finish
    })
  }

  const handleClickLink = async (link) => {
    // await getUserInfoAuth()
    Taro.navigateTo({ url: link })
  }

  const handleClickPoint = () => {
    const { pointAppId, pointPage, pointUrlIsOpen } = config
    if (pointUrlIsOpen) {
      Taro.navigateToMiniProgram({
        appId: pointAppId,
        path: pointPage
      })
    }
  }

  const handleClickService = async (item) => {
    const { link, key } = item
    // await getUserInfoAuth(key !== 'tenants')
    // 分销推广
    if (key == 'popularize') {
      // 已经是分销员
      if (userInfo.isPromoter) {
        Taro.navigateTo({ url: link })
      } else {
        const { confirm } = await Taro.showModal({
          title: '邀请推广',
          content: '确定申请成为推广员？',
          showCancel: true,
          cancel: '取消',
          confirmText: '确认',
          confirmColor: '#0b4137'
        })
        if (!confirm) return
        const { status } = await api.distribution.become()
        if (status) {
          Taro.showModal({
            title: '恭喜',
            content: '已成为推广员',
            showCancel: false,
            confirmText: '好'
          })
        }
      }
      return
    }
    if (key == 'useinfo') {
      const { infoAppId, infoPage, infoUrlIsOpen } = config
      if (infoUrlIsOpen) {
        Taro.navigateToMiniProgram({
          appId: infoAppId,
          path: infoPage
        })
      }
    }
    if (key == 'community') {
      const res = await api.community.checkChief()
      dispatch(updateCheckChief(res))
      if (res.status) {
        Taro.navigateTo({ url: link })
      } else {
        Taro.navigateTo({ url: `/subpages/community/order` })
      }
    }

    if (link) {
      Taro.navigateTo({ url: link })
    }
  }

  const VipGradeDom = () => {
    if (isLogin) {
      return (
        <View className='user-grade-name'>
          <View className='username'>
            {(userInfo && (userInfo.username || userInfo.mobile)) || '获取昵称'}
          </View>
          {/* <View
            className='gradename'
            onClick={() => {
              Taro.navigateTo({ url: '/subpages/member/member-level' })
            }}
          >
            {
              {
                true: vipInfo.grade_name || '会员',
                false: userInfo?.gradeInfo?.grade_name || ''
              }[vipInfo.isVip]
            }
          </View> */}
        </View>
      )
    } else {
      return (
        <SpLogin newUser={isNewUser}>
          <View className='box'>
            <Text className='join-us-txt'>立即登录</Text>
            <View className="ws_info">
              <Image className="img" src={require('@/assets/ziliao-light.png')}></Image>
              <Text style={{ marginLeft: "12rpx", marginRight: "16rpx" }}>完善个人资料</Text>
              {/* <Image style={{ width: "22rpx", height: "22rpx" }} src={require('@/assets/you-light.png')}></Image> */}
              <Text className='iconfont icon-qianwang-01' style={{ fontWeight: "bold", fontSize: "24rpx" }}></Text>
            </View>
          </View>
        </SpLogin>
      )
    }
  }

  if (!config) {
    return null
  }

  // console.log(`member page:`, state, config);

  const { memberConfig } = config

  // console.log('====config===', config.menu)

  return (
    <SpPage loading={state.loading} className='pages-member-index has-navbar' renderFooter={<SpTabbar />} isTop>
      <View
        className='header-block'
        style={styleNames({
          'background-image': `url(${`${process.env.APP_IMAGE_CDN_NEW}/member/bg.png`})`,
          // marginTop: `calc(var(--nav-height) + var(--status-bar-height))`,
        })}
      // onClick={() => setState((draft) => { draft.isOpen = true })}
      >
        <View className='header-hd'>
          <View className='header-hd__header' onClick={isLogin && handleClickLink.bind(this, '/subpages/member/user-info')}>
            <SpLogin newUser={isNewUser}>
              <SpImage
                className='usericon'
                src={(userInfo && userInfo.avatar) || `${process.env.APP_IMAGE_CDN_NEW}/member/user-icon.png`}
                width='114'
              />
            </SpLogin>
          </View>
          <View className='header-hd__body' >
            <View className='username-wrap' onClick={isLogin && handleClickLink.bind(this, '/subpages/member/user-info')}>
              <View className='join-us'>{VipGradeDom()}</View>
            </View>

            {state.isInternal && <SpLogin newUser={isNewUser}>
              <View className='username-wrap san-btn' onClick={handleClickLink.bind(this, '/subpages/member/scan')}>
                扫码入口
              </View>
            </SpLogin>}
          </View>
          {/* <View className='header-hd__footer'>
            {config.menu.member_code && (
              <SpLogin onChange={handleClickLink.bind(this, '/marketing/pages/member/member-code')}>
                <Text className='iconfont icon-erweima-01'></Text>
              </SpLogin>
            )}
            <SpLogin className='user-info__link' onChange={handleClickLink.bind(this, '/subpages/member/user-info')}>
              <Text className='iconfont icon-qianwang-01'></Text>
            </SpLogin>
          </View> */}
        </View>
        {false && <View className='header-bd'>
          <SpLogin
            className='bd-item'
            onChange={handleClickLink.bind(this, '/subpages/marketing/coupon')}
          >
            <View className='bd-item-label'>优惠券(张)</View>
            <View className='bd-item-value'>{state.couponCount}</View>
          </SpLogin>
          <SpLogin
            className='bd-item'
            onChange={handleClickLink.bind(this, '/subpages/member/point-detail')}
          >
            <View className='bd-item-label'>{`${pointName}`}</View>
            <View className='bd-item-value'>{state.point}</View>
          </SpLogin>
          {process.env.NODE_ENV === 'development' && (
            <View className='bd-item deposit-item'>
              <View className='bd-item-label'>储值(¥)</View>
              <View className='bd-item-value'>
                <SpPrice noSymbol value={state.deposit} />
              </View>
            </View>
          )}
          <SpLogin
            className='bd-item'
            onChange={handleClickLink.bind(this, '/pages/member/item-fav')}
          >
            <View className='bd-item-label'>收藏(个)</View>
            <View className='bd-item-value'>{state.favCount}</View>
          </SpLogin>
        </View>}
        {vipInfo.isOpen && <View className='header-ft'>
          {/* 会员卡等级 */}
          {vipInfo.isOpen && (
            <SpLogin onChange={handleClickLink.bind(this, '/subpage/pages/vip/vipgrades')}>
              <CompVipCard info={vipInfo} userInfo={userInfo} memberConfig={memberConfig} />
            </SpLogin>
          )}
        </View>}

        {isLogin && <View className="header-code">
          <Text className="" onClick={() => {
            Taro.navigateTo({ url: '/subpages/member/member-level' })
          }}>{
              {
                true: vipInfo.grade_name || '会员',
                false: userInfo?.gradeInfo?.grade_name || ''
              }[vipInfo.isVip]
            }</Text>
          <SpImage onClick={handleClickLink.bind(this, '/marketing/pages/member/member-code')} src='member/qr-code.png' height={30} width={30} isNew />
        </View>}
      </View>

      <View className='body-block'>
        {config.banner?.isShow && (
          <CompBanner
            info={config.banner}
            src={isLogin ? config.banner.loginBanner : config.banner.noLoginBanner}
          />
        )}

        <CompPanel
          title='我的订单'
          extra={
            <SpLogin onChange={handleClickLink.bind(this, '/subpage/pages/trade/list?status=0')}>
              <View style={{ display: "flex", alignItems: "center", fontSize: "24rpx", color: "#505050" }}>全部订单
              </View>
            </SpLogin>
          }
        >
          {config.menu.ziti_order && (
            <SpLogin
              onChange={handleClickLink.bind(this, '/subpage/pages/trade/customer-pickup-list')}
            >
              <View className='ziti-order'>
                <View className='ziti-order-info'>
                  <View className='title'>自提订单</View>
                  <View className='ziti-txt'>
                    您有<Text className='ziti-num'>{state.zitiNum}</Text>
                    个等待自提的订单
                  </View>
                </View>
                <Text className='iconfont icon-qianwang-01'></Text>
              </View>
            </SpLogin>
          )}

          <View className='order-con'>
            <SpLogin
              className='order-item'
              onChange={handleClickLink.bind(this, '/subpage/pages/trade/list?status=5')}
            >
              <View className='order-item-view'>
                <SpImage src='member/daifukuan.png' className='icon-style' isNew />
                {state.waitPayNum > 0 && (
                  <View className='order-bradge'>
                    <Text>{state.waitPayNum}</Text>
                  </View>
                )}
                <Text className='order-txt'>待付款</Text>
              </View>
            </SpLogin>
            <SpLogin
              className='order-item'
              onChange={handleClickLink.bind(this, '/subpage/pages/trade/list?status=6')}
            >
              <View className='order-item-view'>
                <SpImage src='member/daifahuo.png' className='icon-style' isNew />
                {state.waitSendNum > 0 && (
                  <View className='order-bradge'>
                    <Text>{state.waitSendNum}</Text>
                  </View>
                )}
                <Text className='order-txt'>待发货</Text>
              </View>
            </SpLogin>
            <SpLogin
              className='order-item'
              onChange={handleClickLink.bind(this, '/subpage/pages/trade/list?status=1')}
            >
              <View className='order-item-view'>
                <SpImage src='member/daishouhuo.png' className='icon-style' isNew />
                {state.waitRecevieNum > 0 && (
                  <View className='order-bradge'>
                    <Text>{state.waitRecevieNum}</Text>
                  </View>
                )}
                <Text className='order-txt'>待收货</Text>
              </View>
            </SpLogin>
            <SpLogin
              className='order-item'
              onChange={handleClickLink.bind(this, '/subpage/pages/trade/list?status=3')}
            >
              <View className='order-item-view'>
                <SpImage src='member/yiwancheng.png' className='icon-style' isNew />
                {state.finishNum > 0 && (
                  <View className='order-bradge'>
                    <Text>{state.finishNum}</Text>
                  </View>
                )}
                <Text className='order-txt'>已完成</Text>
              </View>
            </SpLogin>
            {/* 先隐藏评价功能 02-24 */}
            {<SpLogin
              className='order-item'
              // /subpage/pages/trade/after-sale
              onChange={handleClickLink.bind(this, '/subpage/pages/trade/list?status=7')}
            >
              <View className='order-item-view'>
                <SpImage src='member/pingjia.png' className='icon-style' mode='aspectFit' height={42} isNew />
                {state.waitEvaluateNum > 0 && (
                  <View className='order-bradge'>
                    <Text>{state.waitEvaluateNum}</Text>
                  </View>
                )}
                <Text className='order-txt'>评价</Text>
              </View>
            </SpLogin>}
          </View>
        </CompPanel>

        {/* <CompPanel>
          <CompMenu
            accessMenu={{
              ...config.menu,
              popularize: userInfo ? userInfo.popularize : false
            }}
            isPromoter={userInfo ? userInfo.isPromoter : false}
            onLink={handleClickService}
          />
        </CompPanel> */}

        {/* <CompPanel>
          <CompHelpCenter onLink={handleClickService} />
        </CompPanel> */}
      </View>
      {/* <View className="dibiao-block">
        <SpImage className="dibiao-image" src="dibiao.png" />
      </View> */}

      {/* 隐私政策 */}
      {/* <SpPrivacyModal
        open={policyModal}
        onCancel={() => {
          setPolicyModal(false)
        }}
        onConfirm={() => {
          login()
          RefLogin._setPolicyModal()
          setPolicyModal(false)
        }}
      /> */}

      <View className="member-block">
        <View className="member_tit">会员服务</View>
        <View className="member_con">
          <View className="member_con_left">
            {/* /subpages/pointshop/list */}
            <View className="member_con_item" onClick={isLogin && handleClickLink.bind(this, '/subpages/marketing/coupon-center')}>
              <SpImage className="member_con_item_img" src="member/jifen.png" height={290} mode='aspectFill' isNew />
              <View className="member_con_item_txt">积分兑换</View>
            </View>
            <View className="member_con_item" onClick={isLogin && handleClickLink.bind(this, '/pages/member/item-fav')}>
              <SpImage className="member_con_item_img" src="member/shoucang.png" height={290} mode='aspectFill' isNew />
              <View className="member_con_item_txt">个人收藏</View>
            </View>
          </View>
          <View className='gap'></View>
          <View className="member_con_right">
            <View className="member_con_item" onClick={isLogin && handleClickLink.bind(this, '/subpages/member/user-info')}>
              <SpImage className="member_con_item_img" src="member/geren.png" height={190} mode='aspectFill' isNew />
              <View className="member_con_item_txt">个人信息</View>
            </View>
            <View className="member_con_item" onClick={handleClickLink.bind(this, '/marketing/pages/member/address')}>
              <SpImage className="member_con_item_img" src="member/dizhi.png" height={190} mode='aspectFill' isNew />
              <View className="member_con_item_txt">地址管理</View>
            </View>
            <View className="member_con_item" onClick={isLogin && handleClickLink.bind(this, '/subpage/pages/trade/invoice-record')}>
              <SpImage className="member_con_item_img" src="member/fapiao.png" height={190} mode='aspectFill' isNew />
              <View className="member_con_item_txt">发票管理</View>
            </View>
          </View>
        </View>
      </View>
    </SpPage>
  )
}

export default MemberIndex