<template>
  <div class="row item" v-if="data && data.type != hiddenComponentType">
    <span
      ><em
        class="flex-baisc-4"
        v-if="data.isSubTable"
        @click="data.showChildren = !data.showChildren"
      >
        <Icon
          class="icon"
          :icon="data.showChildren ? 'ant-design:up-outlined' : 'ant-design:down-outlined'"
        /> </em
      >{{ data.fieldName }}</span
    >
    <span>{{ data.fieldId }}</span>
    <span>
      <a-switch
        v-if="!data.isSubTable && !doNotShowControl.includes(data.type)"
        v-model:checked="data.required"
        :disabled="requiredDisabled.includes(data.type) || data.isSaveTable"
        @change="TableRequired(data.required, data)"
        size="small"
    /></span>
    <span>
      <a-switch v-model:checked="data.view" size="small" @change="TableView(data.view, data)"
    /></span>
    <span
      ><a-switch
        v-if="!data.isSubTable && !doNotShowControl.includes(data.type)"
        :disabled="data.disabled"
        v-model:checked="data.edit"
        @change="TableEdit(data.edit, data)"
        size="small"
    /></span>
  </div>
  <div class="body" v-if="data && data.showChildren && data.isSubTable && data.children.length > 0">
    <div class="padding-left" v-for="(child2, childIndex2) in data.children" :key="childIndex2">
      <RecursiveForm :item="child2" :parent="data" @check-parent="checkCurTableIsEdit(data)" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import Icon from '/@/components/Icon/index';
  import {
    hiddenComponentType,
    requiredDisabled,
    doNotShowControl,
  } from '/@bpmn/config/formPermission';
  const props = defineProps({
    item: Object,

    parent: Object,
  });
  console.log(props.item, 'item');
  const emit = defineEmits(['checkParent']);
  const data = ref(props.item);
  function TableRequired(required, child) {
    if (required) {
      child.view = true;
      child.edit = true;
    }
    emit('checkParent');
  }
  function TableView(view, child) {
    if (!view) {
      child.required = view;
      child.view = view;
      child.edit = view;
    }

    if (child.children?.length > 0) {
      for (let i = 0; i < child.children.length; i++) {
        let o = child.children[i];
        if (!view) {
          o.required = view;
          o.view = view;
          o.edit = view;
        } else {
          o.view = view;
          o.edit = view;
        }
        if (o.children && o.children?.length > 0) {
          for (let j = 0; j < o.children.length; j++) {
            let k = o.children[j];
            if (!view) {
              k.required = view;
              k.view = view;
              k.edit = view;
            } else {
              k.view = view;
              k.edit = view;
            }
          }
        }
      }
    }
    emit('checkParent');
  }
  function TableEdit(edit, child) {
    if (edit) {
      child.view = true;
    } else {
      child.required = false;
    }

    emit('checkParent');
  }
  function checkCurTableIsEdit(item) {
    let view = 0;
    let edit = 0;
    let required = 0;
    item.children.map((ele) => {
      if (ele.required) required += 1;
      if (ele.view) view += 1;
      if (ele.edit || ele.disabled) edit += 1;
    });
    item.required = required > 0 ? true : false;
    item.view = view > 0 ? true : false;
    item.edit = edit > 0 ? true : false;
    emit('checkParent');
  }
</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>
