<template>
  <div class="flow-form-privilege">
    <div class="flow-form-privilege-reset">
      <a-button class="border-radius blue-btn" @click="reset" v-show="!showChildren"><reload-outlined />重新导入</a-button>
      <span>（如果都不选，为只读状态）</span>
    </div>
    <div v-for="(item, index) in props.formPermission" :key="index" class="privilege-item" v-show="!showChildren">
      <div class="privilege-item-header">
        <FlowSubTitle :name="item.formName" />
      </div>
      <div class="privilege-item-table">
        <a-table :dataSource="item.fieldPermissionList" :columns="columns" :pagination="false" bordered>
          <template #headerCell="{ column }">
            <template v-if="column.dataIndex == 'edit'">
              <a-checkbox v-model:checked="item.edit" @change="allEditChange($event, item)"> 编辑 </a-checkbox>
            </template>
            <template v-if="column.dataIndex == 'hide'">
              <a-checkbox v-model:checked="item.hide" @change="allHideChange($event, item)"> 隐藏 </a-checkbox>
            </template>
            <template v-if="column.dataIndex == 'require'">
              <a-checkbox v-model:checked="item.require" @change="allRequireChange($event, item)"> 必填 </a-checkbox>
            </template>
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex == 'fieldName'">
              <span class="fieldName">
                <span class="fieldName-title" :title="record.fieldName">{{ record.fieldName }}</span>
                <setting-filled v-if="record.subTableFieldPermissionList" class="setting" @click="settingClick(item, record)" />
              </span>
            </template>
            <template v-if="column.dataIndex == 'edit'">
              <a-checkbox v-model:checked="record.edit" @change="editChange($event, item, record)">编辑</a-checkbox>
            </template>
            <template v-if="column.dataIndex == 'hide'">
              <a-checkbox v-model:checked="record.hide" @change="hideChange($event, item, record)">隐藏</a-checkbox>
            </template>
            <template v-if="column.dataIndex == 'require'">
              <a-checkbox v-model:checked="record.require" @change="requireChange($event, item, record)">必填</a-checkbox>
            </template>
          </template>
        </a-table>
      </div>
    </div>
    <!-- 子级 -->
    <div class="privilege-item" v-if="showChildren">
      <div class="privilege-item-header">
        <a-button shape="circle" @click="backParent" class="back"><left-outlined /></a-button>
        <span>{{ currentRecord.fieldName }}</span>
      </div>
      <div class="privilege-item-table">
        <a-table :dataSource="currentRecord.subTableFieldPermissionList" :columns="columns" :pagination="false" bordered>
          <template #headerCell="{ column }">
            <template v-if="column.dataIndex == 'edit'">
              <a-checkbox
                v-model:checked="currentRecord.edit"
                @change="allEditChange($event, currentRecord, 'subTableFieldPermissionList')"
              >
                编辑
              </a-checkbox>
            </template>
            <template v-if="column.dataIndex == 'hide'">
              <a-checkbox
                v-model:checked="currentRecord.hide"
                @change="allHideChange($event, currentRecord, 'subTableFieldPermissionList')"
              >
                隐藏
              </a-checkbox>
            </template>
            <template v-if="column.dataIndex == 'require'">
              <a-checkbox
                v-model:checked="currentRecord.require"
                @change="allRequireChange($event, currentRecord, 'subTableFieldPermissionList')"
              >
                必填
              </a-checkbox>
            </template>
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex == 'fieldName'">
              <span class="fieldName">
                {{ record.fieldName }}
              </span>
            </template>
            <template v-if="column.dataIndex == 'edit'">
              <a-checkbox v-model:checked="record.edit" @change="editChange($event, currentRecord, record, 'subTableFieldPermissionList')"
                >编辑</a-checkbox
              >
            </template>
            <template v-if="column.dataIndex == 'hide'">
              <a-checkbox v-model:checked="record.hide" @change="hideChange($event, currentRecord, record, 'subTableFieldPermissionList')"
                >隐藏</a-checkbox
              >
            </template>
            <template v-if="column.dataIndex == 'require'">
              <a-checkbox
                v-model:checked="record.require"
                @change="requireChange($event, currentRecord, record, 'subTableFieldPermissionList')"
                >必填</a-checkbox
              >
            </template>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script setup name="FlowFormPermissions">
import { ref } from 'vue';
import FlowSubTitle from '../../common/FlowSubTitle.vue';

const props = defineProps({
  // 表单权限列表
  formPermission: {
    type: Array,
    default: []
  }
});

const emits = defineEmits(['reset']);

// 表格配置
const columns = ref([
  {
    title: '字段',
    width: 200,
    ellipsis: true,
    dataIndex: 'fieldName'
  },
  {
    title: '编辑',
    width: 150,
    align: 'center',
    ellipsis: true,
    dataIndex: 'edit'
  },
  {
    title: '隐藏',
    width: 150,
    align: 'center',
    ellipsis: true,
    dataIndex: 'hide'
  },
  {
    title: '必填',
    width: 150,
    align: 'center',
    ellipsis: true,
    dataIndex: 'require'
  }
]);

// 当前所在的表单
const currentItem = ref(null);

// 当前所在行
const currentRecord = ref(null);

// 是否显示children
const showChildren = ref(false);

// 重新导入
const reset = () => {
  emits('reset');
};

// 全局编辑改变
const allEditChange = ({ target }, item, type = 'fieldPermissionList') => {
  setEdit(target.checked, item);
  item[type].forEach(fItem => {
    setEdit(target.checked, fItem);
  });
};

// 全局隐藏改变
const allHideChange = ({ target }, item, type = 'fieldPermissionList') => {
  setHide(target.checked, item);
  item[type].forEach(fItem => {
    setHide(target.checked, fItem);
  });
};
// 全局必填改变
const allRequireChange = ({ target }, item, type = 'fieldPermissionList') => {
  setRequire(target.checked, item);
  item[type].forEach(fItem => {
    setRequire(target.checked, fItem);
  });
};

// 编辑改变
const editChange = ({ target }, item, record, type = 'fieldPermissionList') => {
  setEdit(target.checked, record);
  if (type == 'fieldPermissionList') {
    item.edit = item[type].filter(item => item.edit == undefined || item.edit == false).length == 0 ? true : false;
    item.hide = false;
    item.require = false;
  }
};

// 隐藏改变
const hideChange = ({ target }, item, record, type = 'fieldPermissionList') => {
  setHide(target.checked, record);
  if (type == 'fieldPermissionList') {
    item.hide = item[type].filter(item => item.hide == undefined || item.hide == false).length == 0 ? true : false;
    item.edit = false;
    item.require = false;
  }
};
// 必填改变
const requireChange = ({ target }, item, record, type = 'fieldPermissionList') => {
  setRequire(target.checked, record);
  if (type == 'fieldPermissionList') {
    item.require = item[type].filter(item => item.require == undefined || item.require == false).length == 0 ? true : false;
    item.hide = false;
    if (item.require) {
      item.edit = item.require;
    }
  }
};

// 设置编辑
const setEdit = (checked, item) => {
  item.edit = checked;
  if (checked) {
    item.hide = !checked;
  } else {
    item.require = checked;
  }

  if (item.subTableFieldPermissionList) {
    item.subTableFieldPermissionList.forEach(sItem => {
      setEdit(checked, sItem);
    });
  }
};
// 设置只读
const setRead = (checked, item) => {
  item.read = checked;
  if (checked) {
    item.edit = !checked;
    item.hide = !checked;
    item.require = !checked;
  }

  if (item.subTableFieldPermissionList) {
    item.subTableFieldPermissionList.forEach(sItem => {
      setRead(checked, sItem);
    });
  }
};
// 设置隐藏
const setHide = (checked, item) => {
  item.hide = checked;
  if (checked) {
    item.edit = !checked;
    item.require = !checked;
  }

  if (item.subTableFieldPermissionList) {
    item.subTableFieldPermissionList.forEach(sItem => {
      setHide(checked, sItem);
    });
  }
};
// 设置必填
const setRequire = (checked, item) => {
  item.require = checked;
  if (checked) {
    item.hide = !checked;
    item.edit = checked;
  }

  if (item.subTableFieldPermissionList) {
    item.subTableFieldPermissionList.forEach(sItem => {
      setRequire(checked, sItem);
    });
  }
};

// 点击设置
const settingClick = (item, record) => {
  record.edit = record.subTableFieldPermissionList.filter(item => item.edit == undefined || item.edit == false).length == 0 ? true : false;
  record.hide = record.subTableFieldPermissionList.filter(item => item.hide == undefined || item.hide == false).length == 0 ? true : false;
  record.require =
    record.subTableFieldPermissionList.filter(item => item.require == undefined || item.require == false).length == 0 ? true : false;
  currentItem.value = item;
  currentRecord.value = record;
  showChildren.value = true;
};

// 返回父级
const backParent = () => {
  showChildren.value = false;
};
</script>

<style scoped lang="less">
.flow-form-privilege {
  width: 100%;
  height: 100%;
}
.privilege-item-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  margin-top: 10px;
}
.privilege-item-header-formName {
  margin-left: 10px;
  font-size: 16px;
}
.privilege-item-table {
  margin-bottom: 10px;
}
.fieldName {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fieldName-title {
  width: 80%;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.setting {
  margin-left: 5px;
  font-size: 20px;
  color: var(--primary-color);
  cursor: pointer;
}
.back {
  margin-right: 10px;
}
.blue-btn {
  color: var(--primary-color);
  font-weight: bold;
  border: 1px solid var(--primary-color);
}
</style>
