<template>
  <view
    class="xd-radio"
    :style="[boxWH]"
    @click="handleClick"
  >
    <view
      class="xd-radio__body"
      :style="[bodyWH]"
    >
      <view v-if="disabled"  class="disabled">
        <xd-font-icon
          :size="iconSize"
          icon="iconjian"
          color="#fff"
        ></xd-font-icon>
      </view>
      <view class="checked" v-if="checked">
        <xd-font-icon
          :size="iconSize"
          icon="iconduigou-xian"
          color="#fff"
        ></xd-font-icon>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getParentsStyle, //获取页面风格单个键值值
    getParentsStyles //获取页面风格列表
  } from '@/utils/xd.base';
  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon.vue";

  export default {
    name: "XdRadio",
    components:{
      XdFontIcon
    },
    props: {
      value: {
        type: Boolean,
        default: false
      },
      disabled: {
        type: Boolean,
        default: false
      },
      color: {
        type: String,
        default: ''
      },
      width: {
        type: Number,
        default: 32
      },
      height: {
        type: Number,
        default: 32
      },
      radioSize: {
        type: Number,
        default: 32
      },
      borderColor: {
        type: String,
        default:'#D7D7D7'
      },
      isClickEvent: {
        type: Boolean,
        default: true
      },
      isOld:{
        type: Boolean,
        default: true
      },
    },
    data(){
      return {
        uiColor: '',
        checked: false,
      }
    },
    computed:{
      iconSize(){
        if(this.isOld) return 26;
        return this.radioSize * 0.625
      },
      boxWH(){
        let width =  this.width;
        let height =  this.height;
        //兼容老模式
        if(this.isOld){
          width = 68;
          if(height < 68) height = 68;
        }
        if(typeof height === 'string') {
          if(height.indexOf('%') === -1) height = height + 'rpx';
        }
        if(typeof height === 'number') height = height + 'rpx';
        return {
          width: width+ 'rpx',
          height,
          cursor: !this.disabled ? 'default':'not-allowed'
        }
      },
      bodyWH(){
        let width = this.radioSize + 'rpx';
        let height = this.radioSize + 'rpx';
        //兼容老模式
        if(this.isOld){
          width = '44rpx';
          height = '44rpx';
        }
        return {
          width,
          height,
          backgroundColor: !this.disabled?(this.checked ? this.uiColor:'#fff'):'#D7D7D7',
          borderColor: !this.disabled?(this.checked? this.uiColor : this.borderColor):'#D7D7D7',
        }
      }
    },
    watch:{
      value(val){
        this.checked = val;
      },
    },
    async created() {
      this.uiColor = await getParentsStyle(this.$parent, '$mainColor');
      if(this.color) this.uiColor = this.color;
      this.checked = this.value;
      if(!this.isClickEvent) return;
      this.$emit('input',this.checked);

    },
    methods:{
      handleClick(){
        if(!this.isClickEvent) return;
        if(this.disabled) return;
        this.checked = !this.checked;
        this.$emit('input',this.checked);
        this.$emit('change', this.checked);
      }
    }
  }
</script>

<style scoped lang="less">
  .xd-radio {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: not-allowed;

    &__body {
      width: 100%;
      height: 100%;
      border: 2rpx solid #ddd;
      border-radius: 50%;
      display: flex;
      box-sizing: border-box;
      justify-content: center;
      align-items: center;
      & .disabled {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      & .checked {
        display: flex;
        justify-content: center;
        align-items: center;
        //#ifdef H5
        margin-top: 2px!important;
        //#endif
        //#ifdef MP-WEIXIN
        margin-top: 0!important;
        //#endif
      }
    }
  }
</style>
