<template>
  <view>
    <view
      class="xd-switch" v-if="!$isIpad"
      :class="'xd-switch__' +  size"
      :style="{
        fontSize:textFontSize + 'rpx',
      }">
      <text v-if="isShowText">{{closeText}}</text>
      <view :class="'xd-switch__body xd-switch__' + size + '-body'">
        <switch
          :class="'xd-switch__' + size + '-body-switch ' + (disabled ? 'disabled':'')"
          :checked="checked"
          @change="handleChange"
          :color="uiColor"
          :disabled="disabled"
        ></switch>
      </view>
      <text v-if="isShowText">{{openText}}</text>
    </view>
    <view v-else class="xd-switch" :class="{'xd-switch__ipad': $isIpad}">
      <text class="xd-switch__ipad-left" v-if="isShowText">{{closeText}}</text>
      <switch
        :checked="uiChecked"
        @change="handleChange"
        :color="uiColor"
        :disabled="disabled"
      ></switch>
      <text class="xd-switch__ipad-right" v-if="isShowText">{{openText}}</text>
    </view>
  </view>


</template>

<script>
  import {
    getParentsStyle, //获取页面风格单个键值值
  } from '@/utils/xd.base';
  
  /**
   * XdButton XdSwitch
   * @description 选择是否按钮
   * @tutorial
   * @property {Boolean} disabled = [true|false]    是否禁用     默认：false
   * @property {String}  size                       支持尺寸大小（small,mini,lag,default）   默认:default
   * @property {Boolean}  isShowText                支持显示是否文本    默认：false
   * @property {Boolean}  checked                   是否选中    默认：true
   * @property {String}  openText                   选择文本    默认：开 （isShowText=>true 生效）
   * @property {String}  closeText                  未选择文本    默认：关 （isShowText=>true 生效）
   * @property {String}  color                      按钮选择颜色   默认：主色调
   *
   * @v-model 单向绑定 是否选择通过checked进行绑定
   *
   * @event {Function} change                       状态改变事件
   */
  export default {
    name: "XdSwitch",
    props:{
      size: {
        type: String,
        default: 'default' //small , mini , lag, default,
      },
      isShowText: {
        type: Boolean,
        default: false
      },
      checked:{
        type: Boolean,
        default: true
      },
      disabled: {
        type: Boolean,
        default: false
      },
      openText: {
        type: String,
        default: '开'
      },
      closeText: {
        type: String,
        default: '关'
      },
      color: {
        type: String,
        default: ''
      }
    },
    data(){
      return {
        textFontSize: 34,
        uiColor: '',
        value: false,
        uiChecked: true,
        styleMainColor: '', //插件主题风格样式
      }
    },
    watch:{
      checked(value){
        this.uiChecked = value;
      },
    },
    async created() {
      this.styleMainColor = await getParentsStyle(this.$parent, '$mainColor');
      
      if (this.size === 'small') this.textFontSize = 24;
      if (this.size === 'mini') this.textFontSize = 26;
      if (this.size === 'lag') this.textFontSize = 30;
      this.uiColor = this.styleMainColor;
      this.uiChecked = this.checked;
      if(this.color) this.uiColor = this.color;
      this.$emit('input',this.checked);
    },
    methods:{
      handleChange(e){
        this.$emit('input', e.detail.value);
        this.$emit('change', e.detail.value)
      },
    }
  }
</script>

<style scoped lang="less">
  .xd-switch {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    &__ipad {
      font-size: @xd-font-size-sm;

      &-left {
        margin-right: unit(10,rpx);
      }

      &-right {
        margin-left: unit(10, rpx);
      }

    }

    &__body {
      position: relative;

      & .disabled {
        opacity: 0.6;
      }
    }


    &__small {
      &-body {
        width: unit(68, rpx);
        height: unit(30, rpx);

        &-switch {
          position: absolute;
          top: unit(-16,rpx);
          left: unit(-20,rpx);
          transform: scale(0.5);
          display: flex;
        }
      }
    }

    &__mini {
      &-body {
        width: unit(100, rpx);
        height: unit(44, rpx);

        &-switch {
          position: absolute;
          top: unit(-14, rpx);
          left: unit(-4, rpx);
          transform: scale(0.7);
          display: flex;
        }
      }
    }

    &__lag {
      &-body {
        width: unit(120, rpx);
        height: unit(50, rpx);

        &-switch {
          position: absolute;
          top: unit(-6, rpx);
          left: unit(6, rpx);
          transform: scale(0.85);
          display: flex;
        }
      }
    }

    &__default {
      &-body {
        width: unit(140, rpx);
        height: unit(64, rpx);

        &-switch {
          position: absolute;
          top: unit(0, rpx);
          left: unit(16, rpx);
          transform: scale(1);
          display: flex;
        }
      }
    }
  }
</style>
