import { connect } from 'herculex';
import { getAppId, aliTracertTa } from '../../utils/jsapi';
import { createSubscribe } from 'applet-page-component';

const app = getApp();
Component(
  createSubscribe({
    async onShow() {
      const { componentData: { componentType } } = this.props;
      const { data } = my.getStorageSync({ key: componentType });
      // 缓存中的页面id是当前id 执行onshow
      if (this.$id === data) {
        this.showTracertTa();
        await this.dispatch('getCardLevel');
        const [err, res] = await this.dispatch('getOpeMemberCardUrl');
        if (!err) {
          this.setData({
            configure: { ...res },
          });
          const { cardTemplateId = '' } = res;
          const memberInfo = await this.dispatch('getMemberInfo', { componentData: { componentExtInfo: { cardTemplateId } } });
          this.setData({
            memberInfo,
          });
        }
      }
    },
  })(
    connect({
      mapStateToProps: {
        regionCode: state => state.$global.regionCode,
        openMallMemberCard: state => state.$global.openMallMemberCard || false,
        memberLevel: state => state.$global.memberLevel || 'NONE',
        memberRes: state => state.$global.memberRes || '',
      },
    })({
      data: {
        defaultAtvar:
          'https://gw.alipayobjects.com/mdn/rms_47fd3e/afts/img/A*8THwT7aSeiYAAAAAAAAAAABkARQnAQ',
        imgSrcPrefix: app.globalData.imgSrcPrefix,
        rightTagImg:
          'https://gw.alipayobjects.com/mdn/rms_8ed4a1/afts/img/A*YPsUTLMf-AwAAAAAAAAAAAAAARQnAQ',
        componentConfigure: null,
        APPID: getAppId(),
        configure: {
          applyUrl: '',
          cardTemplateId: '',
        },
      },
      props: {
        componentData: null,
      },
      async didMount() {
        const { componentData = {} } = this.props;
        this.setData({
          componentConfigure: componentData.componentConfigure || {},
        });
        // 页面打开 埋点
        this.pageOpenTracertTa();

        // 将页面id缓存
        const { componentType } = componentData;
        my.setStorageSync({
          key: componentType,
          data: this.$id,
        });
        const [err, res] = await this.dispatch('getOpeMemberCardUrl');
        if (!err) {
          this.setData({
            configure: { ...res },
          });
          const { cardTemplateId = '' } = res;
          const memberInfo = await this.dispatch('getMemberInfo', { componentData: { componentExtInfo: { cardTemplateId } } });
          this.setData({
            memberInfo,
          });
        }
        await this.dispatch('getCardLevel');
      },
      async didUpdate(preProps, preData) {
        const { memberRes } = this.data;
        if ((JSON.stringify(memberRes) !== JSON.stringify(preData.memberRes))) {
          await this.dispatch('getCardLevel');
          const [err, res] = await this.dispatch('getOpeMemberCardUrl');
          if (!err) {
            this.setData({
              configure: { ...res },
            });
            const { cardTemplateId = '' } = res;
            const memberInfo = await this.dispatch('getMemberInfo', { componentData: { componentExtInfo: { cardTemplateId } } });
            this.setData({
              memberInfo,
            });
          }
        }
        if (this.data.openMallMemberCard && !preData.openMallMemberCard) {
          this.commitGlobal &&
            this.commitGlobal({
              openMallMemberCard: false,
            });
          this.addCard();
        }
      },
      methods: {
        addCard() {
          const { configure: { applyUrl, cardTemplateId } } = this.data;
          const { regionCode, APPID } = this.data;
          // 点击卡面开卡埋点
          const TracertTa = aliTracertTa({
            spmAPos: 'a2829', // spma位，必填
            spmBPos: 'b38644', // spmb位，必填
          });
          TracertTa.click('c98311.d203402', {
            APPID,
          });

          // 开卡
          this.dispatch('addCard', {
            type: 'mall',
            applyUrl,
            cardTemplateId,
            regionCode,
            version: 'v3',
          });
        },
        goToCardDetail() {
          const { APPID } = this.data;
          // 点击卡面进入卡详情
          const TracertTa = aliTracertTa({
            spmAPos: 'a2829', // spma位，必填
            spmBPos: 'b38644', // spmb位，必填
          });
          TracertTa.click('c98313.d203404', {
            APPID,
          });
          const { memberInfo } = this.data;
          const { passId } = memberInfo;
          if (passId) {
            this.commit({
              memberInfo: {
                isOpenCardDeail: true,
                ...memberInfo,
              },
            });
            my.openCardDetail({
              passId,
            });
          }
        },
        // 会员卡面曝光
        showTracertTa() {
          const {
            componentExtInfo: { memberInfo: { flag = false } = {} },
            serviceList = [],
          } = this.props.componentData || {};
          const { APPID } = this.data;
          const TracertTa = aliTracertTa({
            spmAPos: 'a2829', // spma位，必填
            spmBPos: 'b38644', // spmb位，必填
          });

          // 已经开通
          if (flag) {
            TracertTa.expo('c98313', {
              APPID,
            });
            // 有服务, 服务列表曝光
            if (serviceList.length) {
              TracertTa.expo('c98313.d203405', {
                APPID,
              });
            }
          } else {
            // 未开通 卡面曝光
            TracertTa.expo('c98311', {
              APPID,
            });
          }
        },
        // 页面打开 埋点
        pageOpenTracertTa() {
          const TracertTa = aliTracertTa({
            spmAPos: 'a2829', // spma位，必填
            spmBPos: 'b38644', // spmb位，必填
          });
          TracertTa.logPv({});
        },
        // 快捷入口点击埋点
        bottomPointClick() {
          const { APPID } = this.data;
          const TracertTa = aliTracertTa({
            spmAPos: 'a2829', // spma位，必填
            spmBPos: 'b38644', // spmb位，必填
          });
          TracertTa.click('c98313.d203405', {
            APPID,
          });
        },
      },
    }),
  ),
);
