<!--
 * @Author: 曹捷
 * @Date: 2021-05-13 09:56:05
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-12-20 16:03:01
 * @Description: 扩展  封装开关操作
-->
<template>
  <a-switch :checkedChildren="check" :disabled="disabled" :unCheckedChildren="uncheck" @change="infoChange" v-model:checked="checked"></a-switch>
</template>

<script>
import { inject, reactive, getCurrentInstance, toRefs, watch } from 'vue'
import { confirm } from './../../utils/modal'
export default {
  props: {
    value: {
      type: [Boolean, String, Number]
    },
    // switch 打开时的值
    activeValue: {
      type: [Boolean, String, Number],
      default: '1'
    },
    // switch 关闭时的值	
    inactiveValue: {
      type: [Boolean, String, Number],
      default: '0'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    //开启操作名称、开始时显示内容
    check: {
      type: String,
      default: '开启',
    },
    //关闭操作名称、关闭时显示内容
    uncheck: {
      type: String,
      default: '关闭',
    },
    data: {
      type: Object
    },
    // Function  必须返回  promise 对象
    before: {
      type: Function
    },
    /**
     * 提示才进行下一步
     */
    confimText: {
      type: String,
      default: ''
    },
    /**
     * 取消提示文本
     */
    cancleText: {
      type: String,
      default: ''
    },
  },
  setup (props, context) {
    let http = inject('http')
    let { proxy } = getCurrentInstance()
    let _data = reactive({
      checked: props.value == props.activeValue
    })

    let methods = {
      sysnValueToChecked () {
        if (props.value === props.activeValue) {
          _data.checked = true
        } else if (props.value === props.inactiveValue) {
          _data.checked = false
        }
      },
      async infoChange (value) {
        try {
          if (props.confimText && props.cancleText) {
            await confirm('提示', value ? props.confimText : props.cancleText)
          }
          if (props.before) {
            if (props.before instanceof Function) {
              // 前置拦截 成功 或者失败
              await props.before(value ? props.activeValue : props.inactiveValue, props.data)
              methods.changeSuccess()
            } else {
              throw new Error(`参数错误，before 必须是Function,且返回promise对象`)
            }
          } else {
            methods.changeSuccess()
          }
        } catch (error) {
          _data.checked = !_data.checked
        }
      },
      changeSuccess () {
        context.emit('reload')
        context.emit('update:value', _data.checked)
      }
    }
    watch(() => _data.checked, (value, oldvalue) => {
      if (oldvalue !== value) {
        context.emit('update:value', value ? props.activeValue : props.inactiveValue)
        context.emit("changed", value ? props.activeValue : props.inactiveValue)
      }
    })
    watch(() => props.value, (value, oldvalue) => {
      if (oldvalue !== value) {
        methods.sysnValueToChecked()
      }
    })
    return {
      ...toRefs(_data),
      ...methods
    }
  }
}
</script>

<style>
</style>
