<template>
  <div>
    <div
      class="toggle-container0"
      :style="{ backgroundColor: defaultBgc }"
      @click="toggle"
      ref="bg"
    >
      <div class="toggle-ball0" ref="ball"></div>
    </div>

    <lc-dialog
      :type="type"
      :title="title"
      :confirm-text="confirmText"
      :cancel-text="cancelText"
      :show="show"
      @LcDialogCancelBtnClicked="dialogCancelBtnClick"
      @LcDialogConfirmBtnClicked="dialogConfirmBtnClick"
    ></lc-dialog>
  </div>
</template>

<style scoped>
.toggle-container0 {
  background: lightcoral;
  width: 100px;
  height: 50px;
  border-radius: 25px;
  position: relative;
  flex-direction: row;
  align-items: center;
}

.toggle-ball0 {
  width: 46px;
  height: 46px;
  border-radius: 46px;
  background-color: #ffffff;
  transform: translate(0, 0);
}
</style>

<script>
const animation = weex.requireModule("animation");
var modal = weex.requireModule("modal");
import LcDialog from "lighting-ui/packages/lc-dialog";

export default {
  // name: "toggle",

  components: { LcDialog },

  props: {
    opened: {
      default: true,
    },

    autoSwitch: {
      default: true,
    },

    width: {
      type: [Number, String],

      default: 100,
    },

    defaultBgc: {
      default: "#cccccc",
    },

    checkedtBgc: {
      default: "#3580ed",
    },

    title: {
      type: [String],

      default: "确定吗？",
    },

    confirmText: {
      type: [String],

      default: "确定",
    },

    cancelText: {
      type: [String],

      default: "取消",
    },
  },

  data() {
    return {
      isOpened: this.opened,
      type: "confirm",
      show: false,
      screenWidth: 0,
    };
  },

  mounted() {
    this.opened ? this.open() : this.close();
    
    // 监听屏幕大小，是否折叠
    this.$light.on("screenWidthChange", (res) => {
      this.screenWidth = res;
      this.isOpened ? this.open() : this.close();
    });
  },

  methods: {
    open() {
      var el = this.$refs.ball;
      var bg = this.$refs.bg;
      animation.transition(
        el,
        {
          styles: {
            transform: "translate(50px, 0px)",
          },
          duration: 300,
          timingFunction: "ease",
          delay: 0,
        },
        function () {}
      );
      animation.transition(
        bg,
        {
          styles: {
            backgroundColor: this.checkedtBgc,
          },
          duration: 300,
          timingFunction: "ease",
          delay: 0,
        },
        function () {}
      );
    },

    close() {
      var el = this.$refs.ball;
      var bg = this.$refs.bg;
      animation.transition(
        el,
        {
          styles: {
            transform: "translate(2px, 0px)",
          },

          duration: 300,

          timingFunction: "ease",

          delay: 0,
        },
        function () {}
      );
      animation.transition(
        bg,
        {
          styles: {
            backgroundColor: this.defaultBgc,
          },
          duration: 300,
          timingFunction: "ease",
          delay: 0,
        },
        function () {}
      );
    },

    toggle() {
      if (!this.autoSwitch) {
        this.show = true;
      } else {
        this.isOpened = !this.isOpened;
        this.isOpened ? this.open() : this.close();

        this.$emit("toggle", this.isOpened);
      }
    },

    dialogConfirmBtnClick() {
      this.isOpened = !this.isOpened;
      this.isOpened ? this.open() : this.close();

      this.$emit("toggle", this.isOpened);

      this.show = false;
    },

    dialogCancelBtnClick() {
      this.show = false;
    },
  },
};
</script>
