<template>
  <div>
    <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('BUTTON_PERMISSIONS')" prop="name">
            <SelectBtnPermission
              type="LOCAL"
              :default-selected-rows="form.btnPermission"
              @confirm="handleChangeBtnPermission"
            />
          </a-form-model-item>
        </a-tab-pane>
        <a-tab-pane key="Person" :tab="$t('PERSONNEL')">
          <a-form-model layout="vertical" :model="form">
            <a-form-model-item :label="$t('CANDIDATE')" prop="candidate">
              <SelectUser
                show-key="name"
                row-key="id"
                :default-selected-rows="form.candidate"
                @confirm="handleChangeCandidate"
              />
            </a-form-model-item>
            <a-form-model-item
              :label="$t('MULTI-PERSON_HANDLING_RULES')"
              prop="dealRule"
            >
              <a-select
                v-model="form.dealRule"
                :placeholder="$t('PLACESELECT')"
                allow-clear
                @change="(value) => updateProperty('dealRule', value, true)"
              >
                <a-select-option
                  v-for="(item, index) in dealRuleList"
                  :key="index"
                  :value="item.value"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item
              :label="$t('TIMEOUT_SETTING')"
              prop="timeout"
              class="timeout-setting"
            >
              <a-input
                :value="form.timeout"
                :placeholder="$t('PLEASE_SET')"
                read-only
                auto-size
                @click="handleOpenTimeout"
              >
                <a-icon slot="suffix" type="down" />
              </a-input>
            </a-form-model-item>
          </a-form-model>
        </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>

    <MegaModal
      class="timeout-setting-modal"
      :title="$t('TIMEOUT_SETTING')"
      :visible="visible"
      :width="580"
      @ok="handleChangeTimeout"
      @cancel="() => (visible = false)"
    >
      <a-input v-model.number="timeout.d" type="number" :min="0"></a-input>
      <span class="mr-5">{{ $t("DAY") }}</span>
      <a-input v-model.number="timeout.h" type="number" :min="0"></a-input>
      <span class="mr-5">{{ $t("HOUR") }}</span>
      <a-input v-model.number="timeout.m" type="number" :min="0"></a-input>
      <span class="mr-5">{{ $t("MINUTE") }}</span>
      <a-input v-model.number="timeout.s" type="number" :min="0"></a-input>
      <span class="mr-5">{{ $t("SECOND") }}</span>
    </MegaModal>
  </div>
</template>

<script>
import { Modal as MegaModal } from "@mega-design/ui-vue";
import SelectBtnPermission from "@/components/SelectBtnPermission";
import SelectUser from "@/components/SelectUser";
import SelectForm from "@/components/SelectForm";
import BaseMixin from "../mixin";

export default {
  name: "UserTaskNode",
  components: {
    MegaModal,
    SelectBtnPermission,
    SelectUser,
    SelectForm,
  },
  mixins: [BaseMixin],
  data() {
    return {
      dealRuleList: [],
      visible: false,
      timeout: {
        d: undefined,
        h: undefined,
        m: undefined,
        s: undefined,
      },
      form: {},
      rules: {},
      excutionEventTypes: [
        { value: "start", label: "start" },
        { value: "take", label: "take" },
        { value: "end", label: "end" },
      ],
      taskEventTypes: [
        { value: "create", label: "create" },
        { value: "assignment", label: "assignment" },
        { value: "complete", label: "complete" },
        { value: "delete", label: "delete" },
      ],
    };
  },
  created() {
    this.getDictByCode("DIC:ACT:PERSON_HANELD_RULES").then((res) => {
      this.dealRuleList = res.data.data;
    });
  },
  methods: {
    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,
          }))
        ),
      });
    },
    handleChangeCandidate(selectedKeys, selectedRows) {
      this.form.candidate = selectedRows; // type: user
      const ids = [];
      const names = [];
      selectedRows.forEach((item) => {
        ids.push(item.id);
        names.push(item.name);
      });
      this.updateExtensionElementsProperties("Candidate", {
        value: JSON.stringify([{ type: "user", ids, names }]),
      });
    },
    handleChangeForm(selectedKeys, selectedRows) {
      this.form.form = selectedKeys;
      this.updateProperty("form", selectedKeys, true);
    },
    handleChangeTimeout() {
      let timeout = "";
      if (this.timeout.d) {
        timeout = `${timeout + this.timeout.d}${this.$t("DAY")}`;
      }
      if (this.timeout.h) {
        timeout = `${timeout + this.timeout.h}${this.$t("HOUR")}`;
      }
      if (this.timeout.m) {
        timeout = `${timeout + this.timeout.m}${this.$t("MINUTE")}`;
      }
      if (this.timeout.s) {
        timeout = `${timeout + this.timeout.s}${this.$t("SECOND")}`;
      }
      this.form.timeout = timeout;
      this.visible = false;
      this.updateProperty("timeout", timeout, true);
    },
    handleOpenTimeout() {
      const [, d, h, m, s] =
        this.form.timeout?.match(/(\d)?(\d)?(\d)?(\d)?/) || [];
      d && (this.timeout.d = parseInt(d, 10));
      h && (this.timeout.h = parseInt(h, 10));
      m && (this.timeout.m = parseInt(m, 10));
      s && (this.timeout.s = parseInt(s, 10));

      this.visible = true;
    },
  },
};
</script>
