<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('PROCESS_CATEGORY')" prop="category">
          <a-tree-select
            v-model="form.category"
            allow-clear
            style="width: 100%"
            tree-default-expand-all
            :placeholder="$t('PLACESELECT')"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="treeDataProcessCategory"
            :replace-fields="{
              children: 'children',
              key: 'id',
              value: 'id',
              title: 'categoryName',
            }"
            @change="handleChangeCategory"
          />
        </a-form-model-item>
        <a-form-model-item :label="$t('ICON')" prop="icon">
          <a-select
            v-model="form.icon"
            allow-clear
            style="color: transparent"
            :placeholder="$t('PLACESELECT')"
          >
            <div slot="dropdownRender" style="width: 100%">
              <icon-select ref="iconSelect" @selected="handleIconChecked" />
            </div>
          </a-select>
          <svg-icon
            v-if="form.icon"
            style="font-size: 16px"
            class="menu-icon"
            :icon-class="form.icon"
          />
        </a-form-model-item>
        <a-form-model-item :label="$t('BUTTON_PERMISSIONS')" prop="name">
          <SelectBtnPermission
            type="WHOLE"
            :default-selected-rows="form.btnPermission"
            @confirm="handleChangeBtnPermission"
          />
        </a-form-model-item>
      </a-tab-pane>
      <a-tab-pane key="Form" :tab="$t('FORM')">
        <a-form-model-item :label="$t('CIRCULATION_FORM')" prop="form">
          <SelectForm
            :default-selected-keys="form.form"
            :multiple="false"
            @confirm="handleChangeForm"
          />
        </a-form-model-item>
      </a-tab-pane>
    </a-tabs>
  </a-form-model>
</template>

<script>
import { deleteLeafArray } from "@mega-apps/utils";
import ApiConstant from "@/api/ApiConstant";
import BaseMixin from "../mixin";
import SelectBtnPermission from "@/components/SelectBtnPermission";
import IconSelect from "@/components/IconSelect/index";
import SelectForm from "@/components/SelectForm";

export default {
  name: "Process",
  components: {
    SelectBtnPermission,
    SelectForm,
    IconSelect,
  },
  mixins: [BaseMixin],
  data() {
    return {
      treeDataProcessCategory: [],
      form: {},
      rules: {},
    };
  },
  created() {
    this.getProcessCategoryTree();
  },
  methods: {
    handleIconChecked(value) {
      this.$set(this.form, "icon", value);
      this.updateProperty("icon", value, true);
    },
    getProcessCategoryTree(value) {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/flowable/category/tree`)
        .then((res) => {
          deleteLeafArray(res.data.data, "children");
          this.treeDataProcessCategory = res.data.data;
        });
    },
    handleChangeCategory(value) {
      this.$set(this.form, "category", value);
      this.updateProperty("category", value, true);
    },
    handleChangeForm(selectedKeys, selectedRows) {
      this.$set(this.form, "form", [...selectedKeys]);
      this.updateProperty("form", this.form.form, true);
    },
    handleChangeBtnPermission(selectedKeys, selectedRows) {
      this.$set(this.form, "btnPermission", selectedRows);
      this.updateExtensionElementsProperties("Permission", {
        value: JSON.stringify(
          selectedRows.map((item) => ({
            id: item.id,
            icon: item.icon,
            defaultName: item.defaultName,
            customName: item.customName,
            code: item.code,
            needComment: item.commentChange,
            sort: item.sort,
          }))
        ),
      });
    },
  },
};
</script>

<style lang="less" scoped>
.menu-icon {
  position: absolute;
  left: 10px;
  top: 6px;
}
</style>
