<template>
  <ValidationProvider
    :rules="rules"
    v-slot="{ errors }"
    class="ws-state"
  >
    <div
      class="ws-state__container"
      :class="[{'is-error':errors&&errors.length}]"
    >
      <div
        v-if="_label"
        class="ws-state-label"
      >{{_label}}</div>
      <WsStateInput
        v-if="type=='text'||type=='password'||type=='email'||type=='link'||type=='number'"
        ref="WsStateInput"
        @keyup="$_onKeyup"
        :autofocus="autofocus"
        :maxWidth="maxWidth"
        :rules="rules"
        :type="type"
        :name="name"
        :errors="errors"
        :placeholder="placeholder"
        :note="note"
        :isOk="isOk"
        :errorMessage="errorMessage"
        :disabled="disabled"
        :value="value"
        @input="$emit('input',$event)"
      ></WsStateInput>
      <WsStateTextarea
        v-else-if="type=='textarea'"
        :value="value"
        :autoGrow="autoGrow"
        @input="$emit('input',$event)"
        @keyup="$_onKeyup"
      ></WsStateTextarea>
      <WsStateEditor
        v-else-if="type=='editor'"
        :value="value"
        @input="$emit('input',$event)"
      ></WsStateEditor>
      <WsStateRelationshipSelect
        v-else-if="type=='belongsTo'"
        :placeholder="placeholder"
        :modelName="modelName"
        :parentState="parentState"
        :requiredField="requiredField"
        :requiredFieldState="requiredFieldState"
        :conditions="conditions"
        :parent="parent"
        :textKey="textKey"
        :getText="getText"
        :value="value"
        :errors="errors"
        :originValue="originValue"
        @input="$emit('input',$event)"
        :note="note"
        :rules="rules"
        :errorMessage="errorMessage"
      />
      <WsStateRelationshipSelect
        v-else-if="type=='hasMany'"
        :placeholder="placeholder"
        :modelName="modelName"
        :conditions="conditions"
        :rules="rules"
        multiple
        :textKey="textKey"
        :getText="getText"
        :errors="errors"
        :parentState="parentState"
        :requiredField="requiredField"
        :requiredFieldState="requiredFieldState"
        :parent="parent"
        :value="value"
        :originValue="originValue"
        @input="$emit('input',$event)"
      />
      <WsStateSwitch
        v-else-if="type=='switch'"
        :activeText="activeText"
        :inactiveText="inactiveText"
        :value="value"
        @input="$emit('input',$event)"
      ></WsStateSwitch>
      <WsStateVersion
        v-else-if="type=='last_version'"
        :fields="fields"
        :value="value"
        :originValue="originValue"
        @input="$emit('input',$event)"
      ></WsStateVersion>
      <WsStateDate
        v-else-if="type=='date'"
        :value="value"
        @input="$emit('input',$event)"
      ></WsStateDate>
      <WsStateDatetime
        v-else-if="type=='datetime'"
        :value="value"
        @input="$emit('input',$event)"
      ></WsStateDatetime>
      <WsStateLocales
        v-else-if="type=='locales'"
        :fields="fields"
        :value="value"
        @input="$emit('input',$event)"
      ></WsStateLocales>
      <WsStateFile
        v-else-if="type=='files'"
        :value="value"
        :uploadUrl="uploadUrl"
        :parent="parent"
        :parentState="parentState"
        @input="$emit('input',$event)"
      ></WsStateFile>
      <WsStateAutocomplete
        v-else-if="type=='tags'"
        :placeholder="placeholder"
        :modelName="modelName"
        :conditions="conditions"
        multiple
        :parentState="parentState"
        :parent="parent"
        :value="value"
        @input="$emit('input',$event)"
      ></WsStateAutocomplete>
      <WsStateSelect
        v-else-if="type=='select'"
        :items="items"
        :value="value"
        @input="$emit('input',$event)"
      ></WsStateSelect>
      <WsStateSelect
        v-else-if="type=='multi-select'"
        :items="items"
        :value="value"
        multiple
        @input="$emit('input',$event)"
      ></WsStateSelect>
      <WsStateRadio
        v-else-if="type=='radio'"
        :items="items"
        :value="value"
        @input="$emit('input',$event)"
      ></WsStateRadio>
      <WsStateImage
        v-else-if="type=='image'"
        :value="value"
        :uploadUrl="uploadUrl"
        :maxWidth="maxWidth"
        :parent="parent"
        :parentState="parentState"
        @input="$emit('input',$event)"
      ></WsStateImage>
      <WsStateImages
        v-else-if="type=='images'"
        :value="value"
        :uploadUrl="uploadUrl"
        :maxWidth="maxWidth"
        :parent="parent"
        :parentState="parentState"
        @input="$emit('input',$event)"
      ></WsStateImages>
      <v-color-picker
        v-else-if="type=='color'"
        :value="value"
        @input="$emit('input',$event)"
      ></v-color-picker>
      <input
        type="hidden"
        :value="value"
      >
      <div
        v-if="errors&&errors.length"
        class="ws-state__detail"
      >
        <v-icon size="20">mdi-information</v-icon>
        <p>{{errors[0]}}</p>
      </div>
      <div
        v-if="errorMessage"
        class="ws-state__detail"
      >
        <v-icon size="20">mdi-information</v-icon>
        <p>{{errorMessage}}</p>
      </div>
      <div
        v-if="note"
        class="ws-state__detail"
      >
      </div>
    </div>
  </ValidationProvider>
</template>

<script>
import { extend } from "vee-validate";
import {
  required,
  email,
  min,
  max,
} from "vee-validate/dist/rules";
import locales from "@/locales/zh_tw";
extend("max", {
  ...max,
  // message: "不得多於{length}位"
  message: locales["validate-max"],
});
extend("min", {
  ...min,
  // message: "不得少於{length}位"
  message: locales["validate-min"],
});
extend("required", {
  ...required,
  // message: "此項目為必填"
  message: locales["validate-required"],
});
extend("email", {
  ...email,
  // message: "email格式不符"
  message: locales["validate-email"],
});
export default {
  computed: {
    _label() {
      if (this.displayLabel) {
        return this.label;
      } else {
        return null;
      }
    },
  },
  methods: {
    $_onKeyup($event) {
      this.$emit("keyup", $event);
    },
    focus() {
      if (
        this.type == "text" ||
        this.type == "email" ||
        this.type == "search" ||
        this.type == "password"
      ) {
        this.$refs.WsStateInput.focus();
      }
    },
  },
  mounted() {
    if (this.autofocus) {
      this.$refs.WsStateInput.focus();
    }
  },
  props: {
    originValue: {},
    displayLabel: {
      type: Boolean,
      default: true,
    },
    getText: {
      type: Function,
      default: null,
    },
    textKey: {
      type: String,
      default: "name",
    },
    requiredFieldState: {},
    requiredField: {
      type: String,
      default: null,
    },
    autoGrow: {
      type: Boolean,
      default: false,
    },
    items: {
      type: Array,
      default: null,
    },
    uploadUrl: {
      type: String,
      default: null,
    },
    activeText: {
      type: String,
      default: null,
    },
    inactiveText: {
      type: String,
      default: null,
    },
    conditions: {
      type: Array,
      default: null,
    },
    maxWidth: {
      type: String,
      default: null,
    },
    fields: {
      type: Object,
      default: null,
    },
    autofocus: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: "text",
    },
    label: {
      type: String,
      default: null,
    },
    placeholder: {
      type: String,
    },
    note: {
      type: String,
      default: null,
    },
    errorMessage: {
      type: String,
      default: null,
    },
    isOk: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    value: {},
    name: {
      type: String,
      default: null,
    },
    rules: {
      type: String,
      default: null,
    },
    modelName: {
      type: String,
      default: null,
    },
    parentState: {},
    parent: {
      type: String,
      default: null,
    },
  },
};
</script>

<style lang="scss">
@import "../assets/scss/ws-state.scss";
</style>