<template>
  <div class="before-change-demo">
    <h4>
      pending: {{ loading }}
    </h4>
    <ui-switch
      v-model="checked"
      :loading.sync="loading"
      :before-change="handleBeforeChange">
      <template v-slot:hint="{ checked, loading }">
        <ui-typo-text
          v-if="loading && !checked"
          text="开启中..."
          type="info"></ui-typo-text>
      </template>
    </ui-switch>
  </div>
</template>

<script>
import { Switch, TypoText } from "amumu-ui"
import { dialog } from "amumu-ui/src/factory"
import "../../../theme/src/index.scss"

export default {
  components: {
    "ui-switch": Switch,
    "ui-typo-text": TypoText,
  },
  data() {
    return {
      checked: false,
      switchLoading: false,
      loading: false,
    }
  },
  methods: {
    handleBeforeChange(checked) {
      if (!checked) {
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve(true)
          }, 2000)
        })
      } else {
        return new Promise((resolve, reject) => {
          dialog.confirm({
            title: "提示",
            message: "确定关闭吗？",
          }).then(() => {
            resolve()
          }).catch(() => {
            reject()
          })
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.before-change-demo {
  > h4 {
    font-size: 14px;
    margin: 0 0 5px 0;
  }
}
</style>
