<template>
  <a-form-model layout="vertical" :model="form" :rules="rules">
    <a-tabs default-active-key="General">
      <a-tab-pane key="General" :tab="$t('GENERAL')">
        <a-form-model-item :label="$t('CODE')" prop="id">
          <a-input v-model="form.id" disabled />
        </a-form-model-item>
        <a-form-model-item :label="$t('NAME')" prop="name">
          <a-input
            v-model="form.name"
            @change="(e) => updateProperties({ name: e.target.value })"
          />
        </a-form-model-item>
        <a-form-model-item :label="$t('CONDITION_TYPE')" prop="conditionType">
          <a-select
            v-model="form.conditionType"
            allow-clear
            :placeholder="$t('PLACESELECT')"
            @change="handleChangeConditionType"
          >
            <a-select-option
              v-for="item in conditionTypeList"
              :key="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          v-show="form.conditionType === 'expression'"
          :label="$t('EXPRESSION')"
          prop="express"
        >
          <a-input
            v-model="form.express"
            allow-clear
            :placeholder="$t('PLACEENTER')"
            @blur="(e) => handleChangeExpress(e.target.value)"
          />
        </a-form-model-item>
      </a-tab-pane>
    </a-tabs>
  </a-form-model>
</template>

<script>
import BaseMixin from "../mixin";

export default {
  name: "Condition",
  mixins: [BaseMixin],
  data() {
    return {
      conditionTypeList: [],
      form: {
        express: undefined,
      },
      rules: {},
    };
  },
  watch: {
    "form.conditionType": function (val) {
      if (val && this.form.conditionType === "expression") {
        this.$set(this.rules, "express", [
          { required: true, message: this.$t("PLACEENTER") },
        ]);
      } else {
        this.$set(this.rules, "express", []);
      }
    },
  },
  created() {
    this.getDictByCode("DIC:WORKFLOW:CONDITION_TYPE").then((res) => {
      this.conditionTypeList = res.data.data;
    });
  },
  methods: {
    handleChangeConditionType(value) {
      this.$set(this.form, "conditionType", value);

      this.updateCondition();
    },
    handleChangeExpress(value) {
      this.$set(this.form, "express", value);

      this.updateCondition({ body: value });
    },
  },
};
</script>
