<template>
  <WsStateSwitch
    class="ws-active-switch"
    :value="C_value"
    @input="$_onInput($event)"
    :activeText="activeText"
    :inactiveText="inactiveText"
  ></WsStateSwitch>
</template>

<script>
export default {
  data: () => ({
    C_value: false
  }),
  props: {
    modelId: {
      type: [String, Number],
      default: null
    },
    modelName: {
      type: String,
      default: null
    },
    field: {
      type: String,
      default: null
    },
    activeText: {
      type: String,
      default: "啟用"
    },
    inactiveText: {
      type: String,
      default: "隱藏"
    },
    value: {
      type: [Boolean, Number],
      default: false
    }
  },
  mounted() {
    this.C_value = this.value;
  },
  methods: {
    $_onInput($event) {
      this.C_value = $event;
      this.$_activeUpdate();
    },
    async $_activeUpdate() {
      try {
        await this.$axios.patch(
          `/${this.modelName}/${this.modelId}`,
          {
            [this.field]: this.C_value
          }
        );
      } catch (error) {
        if (
          error &&
          error.response &&
          error.response.data.message == "data update fail."
        ) {
          alert("更新失敗");
        } else {
          alert("更新失敗");
        }
      }
    }
  }
};
</script>

<style>
</style>