<!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->
<!-- Created by Tw93 on 17/07/28. -->

<template>
  <div class="wxc-btn" :class="[isType()]"
       :style="mrBtnStyle"
       @click="onClicked"
       :accessible="true"
       :aria-label="text">
    <text class="btn-text" :class="[isTypeColor()]" :style="mrTextStyle">{{text}}</text>
  </div>
</template>

<script>
  // import { STYLE_MAP, TEXT_STYLE_MAP } from './type'

  export default {
    props: {
      text: {
        type: String,
        default: '确认'
      },
      type: {
        type: String,
        default: 'normal'
      },
      disabled: {
        type: Boolean,
        default: false
      },
      btnStyle: Object,
      textStyle: Object
    },
    computed: {
      mrBtnStyle () {
        const { type, disabled, btnStyle } = this;
        const mrBtnStyle = {
          /* ...STYLE_MAP[type], */
          ...btnStyle
        };
        if(this.disabled&&this.type=='normal'){
          return  {...mrBtnStyle,backgroundColor: '#D7D7D7',borderColor: 'rgba(0,0,0,0.10)'}
        }else if(this.disabled&&this.type=='default'){
          return  {...mrBtnStyle,backgroundColor: '#fff',borderColor: 'rgba(0,0,0,0.40)'}
        }else if(this.disabled&&(this.type == 'blue'||this.type == 'gray')){
          return  {...mrBtnStyle,backgroundColor: '#fff',borderColor: '#D7D7D7'}
        };
        return mrBtnStyle;
      },
      mrTextStyle () {
        const { type, disabled, textStyle } = this;
        const mrTextStyle = { /* ...TEXT_STYLE_MAP[type],  */...textStyle };

        if(this.disabled&&(this.type == 'default'||this.type == 'blue'||this.type == 'gray')){
          return {...mrTextStyle, color:'#D7D7D7'}
        }
        return mrTextStyle;
      }
    },
    methods: {
      onClicked (e) {
        const { type, disabled } = this;
        this.$emit('LcButtonClicked', { e, type, disabled })
      },
      isType(){
        if(this.disabled&&this.type == 'normal'){
          return 'is-normal-disabled'
        }else if(this.disabled&&this.type == 'default'){
          return 'is-default-disabled'
        }else if(this.disabled&&(this.type == 'blue'||this.type == 'gray')){
          return 'is-blue-disabled'
        }
        else{
          if(this.type == 'normal'){
            return 'is-normal'
          }else if(this.type == 'default'){
            return 'is-default'
          }else if(this.type == 'warn'){
            return 'is-warn'
          }else if(this.type == 'blue'){
            return 'is-blue'
          }else if(this.type == 'gray'){
            return 'is-gray'
          }
        }
      },
      isTypeColor(){
        if(this.disabled&&(this.type == 'default'||this.type == 'blue'||this.type == 'gray')){
          return 'c-d7'
        }
        if(this.type == 'normal'||this.type == 'warn'){
          return 'c-white'
        }else if(this.type == 'default'){
          return 'c-4a'
        }else if(this.type == 'blue'){
          return 'c-blue'
        }else if(this.type == 'gray'){
          return 'c-gray'
        }else {
          return 'c-5c'
        }
      }
    }
  }
</script>

<style scoped>
  .c-white{ color:#fff;}
  .c-4a{ color:#4A4A4A;}
  .c-blue{ color:#0785DB;}
  .c-d7{ color:#D7D7D7;}
  .c-gray{ color:#787878;}
  .c-5c{ color:#5c5c5c;}

  .wxc-btn {
    width: 690px;
    height: 88px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border-width: 1px;
  }

  .btn-text {
    text-overflow: ellipsis;
    lines: 1;
    font-size: 34px;
  }
  .is-normal{
    background-color: #399DE2;
    border-color: #399DE2;
  }
  /* .is-normal:active{
    background-color: #0785DB;
    border-color: #0785DB;
  } */
  .is-default{
    background-color: #fff;
    border-color: rgba(0,0,0,0.40);
  }
  /* .is-default:active{
    background-color: #D7D7D7;
    border-color: rgba(0,0,0,0.40);
  } */
  .is-warn{
    background-color: #E56250;
    border-color: rgba(0,0,0,0.10);
  }
  /* .is-warn:active{
    background-color: #DE3B24;
    border-color: rgba(0,0,0,0.10);
  } */
  .is-blue{
    background-color: #fff;
    border-color: #0785DB;
  }
  /* .is-blue:active{
    background-color: #fff;
    border-color: #399DE2;
  } */
  .is-gray{
    background-color: #fff;
    border-color: #4A4A4A;
  }
  /* .is-gray:active{
    background-color: #fff;
    border-color: #787878;
  } */
  .is-normal-disabled{
    background-color: #D7D7D7;
    border-color: rgba(0,0,0,0.10);
  }
  .is-default-disabled{
    background-color: #fff;
    border-color: rgba(0,0,0,0.40);
  }
  .is-blue-disabled{
    background-color: #fff;
    border-color: #D7D7D7;
  }

</style>
