import { connect } from 'herculex';

Component(connect({
  mapStateToProps: {
    userInfo: state => state.$global.userInfo,
  },
})({
  data: {
    cardMode: '',
    buttonStyle: '',
    created: false,
    isLoginOutService: false,
  },
  props: {
    item: {},
    extInfo: {},
  },
  didMount() {
    this.onInitData();
  },
  methods: {
    onInitData() {
      const {
        item,
        extInfo,
      } = this.props;
      const {
        url,
        urlType,
      } = item;
      const {
        fontSize,
        fontColor,
        cardMode,
        borderRadius,
        backgroundColor,
      } = extInfo;

      const buttonStyles = [];

      /*
      * 设置字体大小
      * */
      if (+fontSize) {
        buttonStyles.push(`font-size:${fontSize / 50}rem`);
      }

      /*
      * 设置字体颜色
      * */
      if (fontColor) {
        buttonStyles.push(`color:${fontColor}`);
      }

      /*
      * 设置背景颜色
      * */
      if (backgroundColor) {
        const bgColor = backgroundColor.toLocaleLowerCase();
        buttonStyles.push(`background-color:${backgroundColor}`);
        /*
        * 如果按钮不是白色的背景，就不设置阴影
        * */
        if (bgColor !== '#fff' && bgColor !== '#ffffff') buttonStyles.push('box-shadow:none');
      }

      /*
      * 设置圆角
      * */
      if (+borderRadius) {
        buttonStyles.push(`border-radius:${borderRadius / 50}rem`);
      }

      /*
      * 如果为登出服务
      * */
      const isLoginOutService = urlType === 'app_inside' && url === 'func:logout';

      this.setData({
        cardMode,
        created: true,
        isLoginOutService,
        buttonStyle: buttonStyles.join(';'),
      });
    },
  },
}));
