<template>
  <button 
    class="cml-btn" 
    c-bind:tap="onclick" 
    style="{{mrBtnStyle}}" 
    open-type="{{openType}}"
    lang="{{lang}}"
    session-from="{{sessionFrom}}"
    send-message-title="{{sendMessageTitle}}"
    send-message-path="{{sendMessagePath}}"
    send-message-img="{{sendMessageImg}}"
    show-message-card="{{showMessageCard}}"
    app-parameter="{{appParameter}}"
    c-bind:getuserinfo="getuserinfo"
    c-bind:contact="contact"
    c-bind:getphonenumber="getphonenumber"
    c-bind:error="error"
    c-bind:opensetting="opensetting"
    >
    <text class="btn-text" style="{{mrTextStyle}}">{{text}}</text>
  </button>
</template>
<script>
import {
  STYLE_MAP,
  TEXT_STYLE_MAP,
  BUTTON_STYLE_MAP,
  TEXT_FONTSIZE_STYLE_MAP
} from "./type";

function str2obj(str) {
  let styleArr = str.split(';');
  let style = {}
  styleArr.forEach(item => {
    let si = item.split(':');
    if (si.length === 2) {
      style[si[0]] = si[1];
    }    
  })
  return style;
}

function obj2style(styleObj) {
  return styleObj? Object.keys(styleObj).map((key) => `${key}:${styleObj[key]};`).join(''): '';
}
 class Button implements ButtonInterface {
    props = {
      text: {
        type: String,
        default: "确认"
      },
      size: {
        type: String,
        default: "none"
      },
      type: {
        type: String,
        default: "blue"
      },
      disabled: {
        type: Boolean,
        default: false
      },
      btnStyle: {
        type: String,
        default: ""
      },
      textStyle: {
        type: String,
        default: ""
      },
      disabledStyle: {
        type: String,
        default: ""
      },
      openType: {
        type: String,
        default: ""
      },
      lang: {
        type: String,
        default: "en"
      },
      sessionFrom: {
        type: String,
        default: ""
      },
      sendMessageTitle: {
        type: String,
        default: "当前标题"
      },
      sendMessagePath: {
        type: String,
        default: "当前分享路径"
      },
      sendMessageImg: {
        type: String,
        default: "截图"
      },
      showMessageCard: {
        type: Boolean,
        default: false
      },
      appParameter: {
        type: String,
        default: ""
      }
    }
    data = {}
    computed ={
      mrBtnStyle() {
        const { type, disabled, btnStyle, size, disabledStyle } = this;

        const mrBtnStyle = {
          ...STYLE_MAP[type],
          ...str2obj(btnStyle),
          ...BUTTON_STYLE_MAP[size]
        };

        let disabledInStyle = { opacity: 0.2 };
        if (type === "white") {
          disabledInStyle = { "background-color": "rgba(0, 0, 0, 0.1)" };
        }

        let afterStyle = disabled
          ? {
              ...mrBtnStyle,
              ...disabledInStyle,
              ...str2obj(disabledStyle),
              "border-width": 0
            }
          : mrBtnStyle;
        return obj2style(afterStyle);
      },
      mrTextStyle() {
        const { type, disabled, textStyle, size } = this;
        const mrTextStyle = {
          ...TEXT_STYLE_MAP[type],
          ...str2obj(textStyle),
          ...TEXT_FONTSIZE_STYLE_MAP[size]
        };
        let afterStyle = disabled
          ? { ...mrTextStyle, color: "#FFFFFF" }
          : mrTextStyle;

        return obj2style(afterStyle);
      }
    }
    watch = {}
    methods = {
      onclick(e) {
        const { type, disabled } = this
        this.$cmlEmit('onclick', {
          type,
          disabled
        });
      },
      getuserinfo(e){
        this.$cmlEmit('getuserinfo',e.detail);
      },
      contact(e){
        this.$cmlEmit('contact');
      },
      getphonenumber(e){
        this.$cmlEmit('getphonenumber',{
          errMsg: e.detail.errMsg,
          encryptedData: e.detail.encryptedData || '',
          //包括敏感数据在内的完整用户信息的加密数据
          iv: e.detail.iv || ''
          //加密算法的初始向量
        });
      },
      error(e){
        this.$cmlEmit('error',{
          errMsg: e.detail.errMsg
        });
      },
      opensetting(e){
        this.$cmlEmit('opensetting');
      }
    }                       
  }
  export default new Button();
</script>
<style scoped>
@import "../../assets/css/var.less";
.cml-btn {
  display: flex;
  width: 702px;
  height: 88px;
  background: @color-regular-blue;
  border: none;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  &:after{
    border: none;
  }
}
.cml-btn:active {
  opacity: 0.9;
}
.btn-text {
  text-align: center;
  vertical-align: middle;
  text-overflow: ellipsis;
  white-space: nowrap;
  outline: none;
  lines: 1;
  font-size: 36px;
  font-weight: 500;
  color: #ffffff;
}
</style>
<script cml-type="json">
{
  "base": {
    "usingComponents": {
    }
  },
  "wx": {
    "window": {
      "backgroundTextStyle": "dark",
      "navigationBarBackgroundColor": "#343434",
      "navigationBarTitleText": "CNODE",
      "navigationBarTextStyle": "#fff"
    },
    "component": true
  }
}
</script>