<style lang="less">
.component-switch-main {
    width: 114rpx;
    height: 96rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
.component-switch {
    height: 32rpx;
    width: 64rpx;
    background:  #37C3C4;
    border-radius: 24rpx;
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
    &.disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }
}

.component-switch .checked-circle {
    position: absolute;
    top: 49.8%;
    left: -1px;
    width: 32rpx;
    height: 32rpx;
    transform: translate(0, -50%);
    transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(196, 196, 196, 1);
    box-sizing: border-box;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.03);

    &.circle-true {
        left: 1px;
    }
}

.component-switch.checked .checked-circle {
    transform: translate(100%, -50%);
}
</style>

<template>
    <div
        class="component-switch-main"
        v-on:click.stop="changChecked"
    >
        <!-- <div
      class="component-switch"
      :class="{'checked': checked}"
      style="{{'background-color:'+(checked? activeColor||defaultActiveColor: inactiveColor||defaultInactiveColor)+';' }}"
    > -->
        <div
            class="component-switch"
            style="{{'background-color:'+(checked? activeColor||defaultActiveColor: inactiveColor||defaultInactiveColor)+';' }}"
            :class="{'checked': checked,'disabled':disable}"
        >
            <div
                class="checked-circle"
                :class="{'circle-true': checked}"
            ></div>
        </div>
    </div>
</template>

<script>
import wepy from '@wepy/core'

wepy.component({
  data: {
    defaultInactiveColor: 'rgba(196, 196, 196, 0.2)',
    defaultActiveColor: '#37C3C4',
    disable: false
  },
  props: {
    isHand: String,
    isACATFC: Boolean,
    checked: Boolean,
    activeColor: String,
    inactiveColor: String,
    eqTitle: String,
    seasonType: String,
    showWorkTime: Boolean // 展示预约时间弹框
  },
  computed: {
    confirmText() {
      const text = this.checked ? '关闭' : '开启'
      return text
    }
  },
  watch: {
    checked: {
      handler() {
        this.disable = false
      },
      immediate: true
    }

  },
  methods: {
    changChecked() {
      const that = this
      if (this.disable) return
      if (this.isHand == 'auto') {
        wx.showModal({
                    // title: '提示',
          content: `要${that.confirmText}${that.eqTitle}吗？`,
          confirmText: that.confirmText,
          success: function (res) {
            if (res.confirm) {
              that.emitCheck(that) // 开关状态提交
            }
          }
        })
        return
      }
      that.emitCheck(that) // 开关状态提交
    },

    emitCheck(that) {
      let checked = that.checked

      if (!this.showWorkTime) {
        this.disable = false
      } else {
        this.disable = true
      }
      that.$emit('component-switch-change', !checked)
    }

  }
})
</script>
