<template>
<view class="cml-radio">
  <view class="cml-radio-wrap" c-bind:tap="changeSelect">
    <view class="cml-radio-select" style="{{ radioStyle }}">
      <view class="{{ radioClass }}">
      </view>
    </view>
    <text class="cml-radio-label" >{{ label }}</text>
  </view>
</view>
</template>
<script>
class Radio  {
  props = {
    checked: {
      type: Boolean,
      default: false
    },
    label: {
      type: String
    },
    disabled: {
      type: Boolean,
      default: false
    },
    position: {
      type: String,
      default: 'left'
    },
    groupIndex: {
      type: Number,
      default: -1
    }
  }
  data = {
    innerChecked: false
  }

  computed = {
    radioStyle () {
      let style = '';
      if (this.disabled) {
        style += 'opacity:0.5;'
      }
      if (this.position == 'right') {
        style += 'position:absolute;right:0;margin-right:45px;'
      } else {
        style += 'margin-right:13px;'
      }
      return style;
    },
    radioClass () {
      if (this.disabled) {
        return  this.innerChecked? 'cml-radio-selected-disabled': 'cml-radio-unselect-disabled';
      }
      return this.innerChecked? 'cml-radio-selected': 'cml-radio-unselect';
    }
  }

  watch  = {
    checked (val) {
      this.innerChecked = val;
    }
  }

  methods = {
    changeSelect () {
      if (this.disabled) return;
      this.innerChecked = !this.innerChecked
      let value = {
        value: this.innerChecked
      }
      if (this.groupIndex !== -1) {
        value.index = this.groupIndex
      }
      this.$cmlEmit('changeevent', value);
    }
  }

  beforeCreate() {
  }

  created() {
  }

  beforeMount() {
  }

  mounted() {
    this.innerChecked = this.checked;
  }

  beforeDestroy() {
  }

  destroyed() {
  }
}

export default new Radio();
</script>
<style scoped>
@import "../../assets/css/var.less";
.cml-radio {
  margin: 10px;
}
.cml-radio-wrap {
  padding:11px 0;
  word-break: break-word;
  word-wrap: break-word;
  display: flex;
  flex-direction: row;
  align-items: center;
  line-height: 1.5;
  position: relative;
}
.cml-radio-selected {
  width:32px;
  height:32px;
  border:10px solid @color-orange;
  border-radius: 20px;
  box-sizing:border-box;
}
.cml-radio-selected-disabled {
  width:32px;
  height:32px;
  border:10px solid @color-orange;
  border-radius: 20px;
  box-sizing:border-box;
  opacity: 0.5;
}
.cml-radio-unselect {
  width:32px;
  height:32px;
  border:1px solid #ccc;
  border-radius: 20px;
  box-sizing:border-box;
}
.cml-radio-unselect-disabled {
  width:32px;
  height:32px;
  border-radius: 20px;
  background: #ccc;
  box-sizing:border-box;
}
.cml-radio-label {
  color:#666;
  font-weight: 400;
  font-size: 32px;
}
</style>
<script cml-type="json">
{
    "base": {
        "usingComponents": {
        }
    },
    "wx": {
        "navigationBarTitleText": "index",
        "backgroundTextStyle": "dark",
        "backgroundColor": "#E2E2E2",
        "component": true
    }
}
</script>
