import Taro, { Component } from '@tarojs/taro';
import { View, Image } from '@tarojs/components';
import arrowRightIcon from '../../static/images/arrow-right-2.png';
import avatar from '../../static/images/avatar.png';
import yinVip from '../../static/images/yin-vip@2x.png';
import jinVip from '../../static/images/jin-vip@2x.png';
import baiJinVip from '../../static/images/baijin-vip@2x.png';
import { connect } from '@tarojs/redux';
import { bindActionCreators } from 'redux';
import * as globalData from '../../actions/globalData';
import user from '../../utils/user';
import { login as loginModel } from '../../models';
import './index.scss';
import event from '../../utils/event.js';
import { getImgUrl } from '../../utils/index.js'

@connect(({ globalData }) => ({
  globalData
}), (dispatch) => {
  return bindActionCreators({ ...globalData }, dispatch);
})
export default class UserCenter extends Component {
  constructor(props) {
    super(...arguments);

    this.state = {
      list: [
        {
          text: '购买'
        },
        {
          text: '出售'
        },
        {
          text: '收藏'
        },
        {
          text: '我的资产'
        },
        {
          text: '客服与帮助',
          mt: true
        }
      ],
      hasUnionID: '',
      isLogin: false,
      userInfo: {},
      uid: '',
      infoNum: {}
    };
  }

  config = {
    navigationBarTitleText: '我的'
  }

  componentDidShow() {
    let { globalData } = this.props;
    console.log('进入个人中心页面')
    console.log(globalData)
    this.setState({
      hasUnionID: globalData.wxUnionId !== null && globalData.wxUnionId !== '' && globalData.wxUnionId !== undefined ? true : false,
      isLogin: globalData.userInfo.uid > 0 ? true : false
    });

    this.showUserInfo();
  }

  //测试接口，将获取到的unionID等参数，上报给服务端以便于调试
  // checkUnionIDExist(openID, unionID, srdSession, method) {
  //     let param = {
  //         ops: method,
  //         openId: openID,
  //         unionId: unionID,
  //         srdSession: srdSession
  //     }
  //     GET(API_HOST + "/wechat/miniapp/collect/", param)
  //     .then(data => {
  //         callbackFunc({
  //         succeed: true,
  //         message: ''
  //         });
  //     })
  //     .catch(error => {
  //         callbackFunc({
  //         succeed: false,
  //         message: error.message
  //         });
  //     });
  // }



  getWechatThirdSession() {
    let value = this.props.globalData.WXThird_session;

    return !value ? user.getYHStorageSync('WXThird_session', 'app') : value;
  }

  /**
   * 新的授权方式
   */
  async getUserInfo(e) {
    console.log('getUserInfo')
    console.log(e)
    console.log(this.props.globalData.WXThirdSession)
    if (e.detail.errMsg === 'getUserInfo:ok') {
      let response = await this.props.decodeUnionId(this.props.globalData.WXThirdSession, e);
      console.log('getUserInfo decodeUnionId')
      console.log(response)
      if (response.isHaveUnionID) {
        this.setState({
          hasUnionID: true
        });
      }
    } else {
      let response = await this.props.loginAndRegisterTapped();
      console.log('getUserInfo loginAndRegisterTapped')
      console.log(response)

      if (response && response.isHaveUnionID) {
        this.setState({
          hasUnionID: true
        })
      }
    }
  }

  async getPhoneNumber(e) {
    console.log('getPhoneNumber')
    console.log(e)

    if (e.detail.errMsg === 'getPhoneNumber:ok') {
      let result = await this.props.decodePhoneNumber(e.detail.iv, e.detail.encryptedData, '');

      console.log('====getPhoneNumber result', result)
      result = result || {};

      if (result.code != 200) {
        Taro.showToast({
          title: result.message,
          duration: 1000,
          success: async () => {
            let ret = await this.props.loginAndRegisterTapped();
            console.l0g('getPhoneNumber ret', ret)
            if (ret && ret.succeed === true) {
              this.showUserInfo();
              this.getInfoNum();
            }
          }
        });
      } else {
        if (result.is_register) {
          cosnole.log('getPhoneNumber is_register')
          console.log(this.props)
          Taro.showToast({
            title: '欢迎加入Yoho!Family!新人礼包已发放到个人中心-优惠券,请注意查收',
            duration: 1500,
            success() {
              let uid = this.props.globalData.userInfo.uid > 0 ? this.props.globalData.userInfo.uid : 0;
              this.props.setUserInfo({ ...this.props.globalData.userInfo, uid: uid });

              this.setState({ uid: uid });
              this.showUserInfo();
            }
          });
        } else {
          let uid = this.props.globalData.userInfo.uid > 0 ? this.props.globalData.userInfo.uid : 0;

          this.props.setUserInfo({ ...this.props.globalData.userInfo, uid: uid });
          this.setState({ uid: uid });
          this.showUserInfo();
        }
      }
    } else {
      Taro.navigateTo({
        url: '/pages/login/index',
      });
    }
  }

  showUserInfo() {
    this.props.reloadSessionkey();
    this.props.reloadUserInfo();
    let uid = this.props.globalData.userInfo.uid;

    if (uid) {
      loginModel.profile({
        uid: uid
      }).then((ret) => {
        console.log('showUserInfo ret', ret)
        if (ret && ret.code === 200) {
          let img = '';
          let curLevel = ret.data.vip_info.cur_level;

          if (curLevel === 1) {
            img = yinVip;
          } else if (curLevel === 2) {
            img = jinVip;
          } else if (curLevel === 3) {
            img = baiJinVip;
          }

          this.setState({
            userInfo: Object.assign(...this.props.globalData.userInfo, {
              nickName: ret.data.nickname,
              avatarUrl: !ret.data.head_ico ? avatar : ret.data.head_ico,
              vipImg: img
            }),
            isLogin: true
          });
        } else {
          this.setState({
            isLogin: false
          });
        }
      });
    } else {
      this.setState({
        userInfo: this.props.globalData.userInfo,
        isLogin: false
      });
    }
  }

  login() {
    event.emit('user-is-login');
  }

  getInfoNum() {
    // let myUid = this.props.globalData.userInfo.uid;

    loginModel.getInfoNum().then(ret => {
      if (ret && ret.code === 200) {
        this.setData({
          infoNum: ret.data
        });
      }
    });
  }

  render() {
    let { list, hasUnionID, isLogin, userInfo, vipImg } = this.state;
    // console.log('用户信息')
    // console.log(this.state.userInfo);
    // console.log('islogin')
    // console.log(this.state.isLogin)
    // console.log('hasUnionID')
    // console.log(this.state.userInfo)

    return (
      <View className= "user-center-page" >
      <View className="header" >
      <Image src={ isLogin ? getImgUrl(userInfo.avatarUrl) : avatar } className = "avatar-img" > </Image>

    {
      !isLogin &&
        <Button
                        className="user-name"
      onClick = { this.login } > 点击登录 < /Button>
    }

    {
      isLogin &&
        <View className="user-name" > { userInfo.nickName } < /View>                    
    }

    {
      userInfo.vipImg &&
        <Image className='vip-icon-image' src = { userInfo.vipImg } mode = "aspectFill" > </Image>   
    }
    </View>
    {
      list.map(item => {
        return (
          <View className= { item.mt ? 'entry-item mt' : 'entry-item' } key = { item.text } >
            <View className="label" > { item.text } < /View>
              < View className = "num" > <Image src={ arrowRightIcon } className = "arrow-right-icon" > </Image></View >
                </View>
                        )
    })
  }
            </View>
		)
	}
}