<template>
  <div class="list-box">
    <div class="opr-box">
      <NodeHead :nodeName="t('表单列表')" />
      <div class="button-box">
        <SettingModal :list="[]" :isSingle="false" @submit="addItem">
          <a-button type="primary" class="!rounded">{{ t('添加表单') }}</a-button>
        </SettingModal>
      </div>
    </div>
    <div class="list">
      <div class="row head">
        <span class="up-or-down"></span>
        <span class="form-name">{{ t('表单名称') }}</span>
        <span class="form-type">{{ t('表单类型') }}</span>
        <span class="opr">{{ t('操作') }}</span>
      </div>
      <div class="body" v-if="formSetting.list.length > 0">
        <div class="box" v-for="(item, index) in formSetting.list" :key="index">
          <div class="row item">
            <div class="up-or-down" @click="item.showChildren = !item.showChildren">
              <Icon
                class="icon"
                :icon="item.showChildren ? 'ant-design:up-outlined' : 'ant-design:down-outlined'"
              />
            </div>
            <span class="form-name">{{ item.formName }}</span>
            <span class="form-type">{{ formTypeOptions[item.formType] }}</span>
            <span class="opr">
              <a-popconfirm @confirm="deleteItem(index)" placement="topRight">
                <template #title>
                  <div style="width: 300px">
                    <p>{{ t('删除表单') }}</p>
                    <p>{{ t('删除表单会清空已引用该表单数据的所有配置，请确认是否继续？') }}</p>
                    <p class="pop-desc">{{
                      t('如果引用该表单的配置较多，清空时间会相应变长，请耐心等待。')
                    }}</p>
                  </div>
                </template>
                <div class="delete-icon">{{ t('删除') }}</div>
              </a-popconfirm>
            </span>
          </div>
          <div
            class="children list"
            v-if="item.showChildren && item.children && item.children.length > 0"
          >
            <div class="row head">
              <span class="flex-baisc-4"></span>
              <span>{{ t('字段名') }}</span>
              <span>{{ t('字段ID') }}</span>
              <span
                ><a-checkbox
                  v-model:checked="item.requiredAll"
                  size="small"
                  @change="requiredAll(item)"
                  >{{ t('必填') }}</a-checkbox
                ></span
              >
              <span
                ><a-checkbox v-model:checked="item.viewAll" size="small" @change="viewAll(item)">{{
                  t('查看')
                }}</a-checkbox></span
              >
              <span
                ><a-checkbox v-model:checked="item.editAll" size="small" @change="editAll(item)">{{
                  t('编辑')
                }}</a-checkbox></span
              >
            </div>

            <div class="body" v-if="item.children.length > 0">
              <div
                v-for="(child, childIndex) in item.children"
                :key="childIndex"
                class="padding-left"
              >
                <RecursiveForm :item="child" :forms="item" @check-parent="checkIsAll(item)" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <EmptyBox v-else :has-icon="false" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import useStateFormInfo from '/@bpmn/hooks/useStateFormInfo';
  import Icon from '/@/components/Icon/index';
  import { NodeHead, EmptyBox } from '/@/components/ModalPanel/index';
  import SettingModal from '/@bpmn/components/formSettings/SettingModal.vue';
  import { FormType } from '/@/enums/workflowEnum';
  import { FormConfigItem } from '/@/model/workflow/formSetting';

  import { onMounted, reactive } from 'vue';
  import { formPermissionList } from '/@bpmn/config/formPermission';
  import { updateFormDataInfo } from '/@bpmn/config/useUpdateAllFormInfo';
  import { useI18n } from '/@/hooks/web/useI18n';
  import RecursiveForm from './RecursiveForm.vue';

  const { t } = useI18n();
  const { formInfo } = useStateFormInfo();
  const formTypeOptions = {};
  formTypeOptions[FormType.CUSTOM] = t('自定义表单');
  formTypeOptions[FormType.SYSTEM] = t('系统表单');
  let formSetting: { list: Array<FormConfigItem> } = reactive({ list: [] });

  onMounted(() => {
    if (formInfo.value.formConfigs) formSetting.list = formInfo.value.formConfigs;
    formSetting.list.forEach((val) => {
      checkIsAll(val);
    });
  });
  function deleteItem(index: number) {
    updateFormDataInfo(formSetting.list[index]['key']);
    formSetting.list.splice(index, 1);
  }

  async function addItem(list: Array<FormConfigItem>) {
    let returnArr = await formPermissionList(list);
    returnArr.forEach((val) => {
      checkIsAll(val);
    });
    formSetting.list.push(...returnArr);
  }

  function requiredAll(item) {
    // 必填所有为true， 所有的必填，编辑，查看都为true（除了disabled）
    // 必填所有为false， 所有必填都取消（除了disabled）

    let requiredAll = item.requiredAll;
    if (requiredAll) {
      item.viewAll = true;
      item.editAll = true;
    }
    recursiveRequired(requiredAll, item.children);
  }
  function recursiveRequired(perm, list) {
    list.map((ele) => {
      if (!ele.disabled) {
        if (perm) {
          ele.required = true;
          ele.edit = true;
        } else {
          ele.required = false;
        }
      }
      if (perm) ele.view = true;
      if (ele.children && ele.children.length > 0) {
        recursiveRequired(perm, ele.children);
      }
    });
  }
  function editAll(item) {
    // 编辑所有为true， 所有的编辑，查看都为true（除了disabled）
    // 编辑所有为false， 所有编辑都为false（除了disabled）
    let editAll = item.editAll;
    if (editAll) {
      item.viewAll = true;
    } else {
      item.requiredAll = false;
    }
    recursiveEdit(editAll, item.children);
  }
  function recursiveEdit(perm, list) {
    list.map((ele) => {
      if (!ele.disabled) {
        if (perm) {
          ele.edit = true;
        } else {
          ele.edit = false;
          ele.required = false;
        }
      }
      if (perm) ele.view = true;
      if (ele.children && ele.children.length > 0) {
        recursiveEdit(perm, ele.children);
      }
    });
  }
  function viewAll(item) {
    // 查看所有为true， 所有的查看都为true（除了disabled）
    // 查看所有为false， 所有查看都为false（除了disabled）
    let viewAll = item.viewAll;
    if (!viewAll) {
      item.requiredAll = false;
      item.editAll = false;
    }
    recursiveView(viewAll, item.children);
  }
  function recursiveView(perm, list) {
    list.map((ele) => {
      if (perm) {
        ele.view = true;
      } else {
        ele.view = false;
        ele.edit = false;
        ele.required = false;
      }
      if (ele.children && ele.children.length > 0) {
        recursiveView(perm, ele.children);
      }
    });
  }

  function checkIsAll(item) {
    let all = 0;
    let required = 0;
    let view = 0;
    let edit = 0;
    item.children.map((ele) => {
      all += 1;
      if (ele.required || ele.disabled) required += 1;
      if (ele.view) view += 1;
      if (ele.edit || ele.disabled) edit += 1;

      if (ele.children && ele.children.length > 0) {
        ele.children.map((ele2) => {
          all += 1;
          if (ele2.required || ele2.disabled) required += 1;
          if (ele2.view) {
            view += 1;
          }
          if (ele2.edit || ele2.disabled) edit += 1;
          if (ele2.children && ele2.children.length > 0) {
            ele2.children.map((ele3) => {
              all += 1;
              if (ele3.required || ele3.disabled) required += 1;
              if (ele3.edit || ele3.disabled) edit += 1;
              if (ele3.view) {
                view += 1;
              }
            });
          }
        });
      }
    });

    item.requiredAll = required == all ? true : false;
    item.viewAll = view == all ? true : false;
    item.editAll = edit == all ? true : false;
  }
</script>

<style lang="less" scoped>
  .list-box {
    margin-top: 16px;

    .opr-box {
      display: flex;
      justify-content: space-between;
      margin: 0 10px 10px;
    }
  }

  .list {
    .row {
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        flex-basis: 20%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
      }

      .up-or-down {
        flex-basis: 30px;
        margin-left: 8px;
      }

      .form-name {
        flex: 1;
      }

      .form-type {
        flex-basis: 120px;
      }

      .opr {
        flex-basis: 80px;
      }

      .small {
        flex-basis: 60px;
      }

      .flex-baisc-35 {
        flex-basis: 120px;
      }

      .flex-baisc-4 {
        flex-basis: 40px;
      }

      .icon {
        color: #ccc;
      }
    }

    .padding-left {
      padding-left: 40px;
    }

    .head {
      border-bottom: 1px solid #ddd;
      background: #f7fbff;
      text-align: center;

      span {
        height: 20px;
        margin: 15px 0;
        border-right: 1px solid rgb(221 221 221);
        padding: 0 16px;
        font-weight: bold;
      }
    }

    .item {
      border-bottom: 1px solid #f9f9f9;
    }

    .delete-icon {
      color: @clear-color;
    }

    .empty-box {
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #f9f9f9;
      border-top: none;
    }
  }

  .box {
    .row {
      height: 50px;

      &.item {
        text-align: center;
        border-bottom: 1px solid #ddd;

        &:hover {
          background: #f1f8ff;
        }
      }
    }
  }

  :deep(.slot-item) {
    display: inline;
  }

  .pop-desc {
    font-size: 12px;
    color: rgb(0 0 0 / 40%);
  }
</style>
