<template>
  <DefaultFormSettingModal
    :list="processInfo.defaultFormList"
    :isSingle="false"
    @submit="submit"
    @close="close"
    :key="renderKey"
  >
    <InputModel :placeholder="t('请选择默认表单')" :value="processInfo.defaultFormList.length">
      <div
        v-if="processInfo.defaultFormList && processInfo.defaultFormList.length > 0"
        class="tag-box"
      >
        <div class="tag-item" v-for="(item, index) in processInfo.defaultFormList" :key="index">
          <span>{{ item.formName }}</span>
          <CloseOutlined @click.stop="closeTag(index)" style="margin: 0 6px; font-size: 14px" />
        </div>
      </div>
    </InputModel>
    <a-modal :visible="state.open" title="是否删除" :closable="false">
      <div style="background-color: #f5f5f5; margin: 10px; padding: 20px">
        已有用户节点绑定该表单，是保留各个节点表单信息还是清除所有绑定的该表单？</div
      >
      <template #footer>
        <a-button type="primary" @click="handleCancel" :loading="state.loading">取消</a-button>
        <a-button type="primary" @click="handleSubmit" :loading="state.loading"
          >清除绑定数据</a-button
        >
        <a-button type="primary" @click="handleOk" :loading="state.loading">保留节点表单</a-button>
      </template>
    </a-modal>
  </DefaultFormSettingModal>
</template>

<script setup lang="ts">
  import { storeToRefs } from 'pinia';
  import DefaultFormSettingModal from '/@bpmn/components/formSettings/DefaultFormSettingModal.vue';
  import InputModel from '/@bpmn/components/InputModel.vue';
  import { FormSettingItem } from '/@/model/workflow/formSetting';
  import { useBpmnStore } from '/@bpmn/store/bpmn';
  import {
    nodesAppendDefaultForm,
    setDefaultFormList,
    setProperties,
  } from '/@bpmn/config/property';
  import { formPermissionList } from '/@bpmn/config/formPermission';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BpmnNodeKey } from '/@/enums/workflowEnum';
  import { cloneDeep } from 'lodash-es';
  import { CloseOutlined } from '@ant-design/icons-vue';
  import { reactive, ref } from 'vue';
  const { t } = useI18n();
  const renderKey = ref(0);
  const store = useBpmnStore();
  const { processInfo } = storeToRefs(store);
  const state = reactive({
    open: false,
    key: '',
    index: -1,
    loading: false,
  });
  async function submit(list: Array<FormSettingItem>) {
    processInfo.value.defaultFormList = list;
    let returnArr = await formPermissionList(list);
    nodesAppendDefaultForm(returnArr);
    close();
  }
  function close() {
    renderKey.value++;
  }
  function closeTag(index: number) {
    // 根据弹窗
    let item = processInfo.value.defaultFormList[index];
    state.key = item.key;
    state.index = index;
    let hasVal = hasFormItem();
    if (hasVal) {
      showModal();
    } else {
      handleOk();
    }
  }
  function showModal() {
    state.open = true;
  }
  function closeModal() {
    state.open = false;
  }
  function handleCancel() {
    closeModal();
  }
  function handleOk() {
    state.loading = true;
    let index = state.index;
    processInfo.value.defaultFormList.splice(index, 1);
    setTimeout(async () => {
      state.loading = false;
      await changeList(processInfo.value.defaultFormList);
      closeModal();
    }, 1000);
  }
  async function changeList(list) {
    let demo = cloneDeep(list);
    let returnArr = await formPermissionList(demo);
    setDefaultFormList(returnArr);
  }
  function handleSubmit() {
    closeDefaultFormItem();
    handleOk();
  }
  // 定义常量
  const SHOW_NODE_TYPES = [BpmnNodeKey.START, BpmnNodeKey.USER];
  // 如果没有用户节点绑定该表单，那叉掉就直接叉掉了，也不用提示了
  function hasFormItem() {
    let formKey = state.key;
    const { info } = store;
    return [...info].some(([_key, item]) => {
      if (SHOW_NODE_TYPES.includes(item.type)) {
        if (item.formConfigs && Array.isArray(item.formConfigs) && item.formConfigs.length > 0) {
          return item.formConfigs.some((element) => {
            return element.key === formKey;
          });
        }
        return false;
      }
    });
  }
  // 查询所有开始节点，用户节点 删除配置了此表单的表单配置
  function closeDefaultFormItem() {
    let formKey = state.key;
    const { info } = store;
    [...info].forEach(([_key, item]) => {
      if (SHOW_NODE_TYPES.includes(item.type)) {
        if (item.formConfigs && Array.isArray(item.formConfigs) && item.formConfigs.length > 0) {
          // 使用 filter 方法删除指定 key 的 formConfig
          const updatedFormConfigs = item.formConfigs.filter((ele) => ele.key !== formKey);
          // 克隆 properties 并更新 formConfigs
          const properties = { ...item, formConfigs: updatedFormConfigs };
          setProperties(item.id, properties); //   合并新数据与旧数据
        }
      }
    });
  }
</script>

<style lang="less" scoped>
  :deep(.slot-item) {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .open-icon {
    text-align: center;
    height: 30px;
  }

  :deep(.ant-tag) {
    background: rgb(28 141 255 / 8%);
    border-radius: 4px;
    border: 1px solid rgb(28 141 255 / 8%);
  }

  .tag-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .tag-item {
      background: rgb(28 141 255 / 8%);
      border-radius: 4px;
      border: 1px solid rgb(28 141 255 / 8%);
      margin: 6px;
      padding-left: 6px;
    }
  }
</style>
