<template>
  <div class="tabBox">
    <template v-if="showList && showList.length && tabView">
      <el-tabs v-model="active">
        <template v-for="subItem in showList">
          <el-tab-pane
            v-if="newPermission && subItem.prop && newPermission[subItem.prop]"
            :key="subItem.prop"
            :label="getLabel(subItem)"
            :name="subItem.prop"
          >
            <slot
              :name="subItem.prop + '-header'"
              :dataSource="subItem.prop"
              :permission="newPermission[subItem.prop]"
            ></slot>
            <slot
              :name="subItem.prop"
              :permission="newPermission[subItem.prop]"
              :dataSource="subItem.prop"
            >
              <fast2-block-provider
                :option="subItem.option"
                :version="subItem.option ? null : subItem.version"
              >
                <template v-slot="component">
                  <div>
                    <fast2-component-render
                      :providerData="tabData[subItem.prop]"
                      :list="component.list"
                      :ref="subItem.prop"
                      :readOnly="readOnly"
                      :addInCell="addInCell"
                      :inTab="true"
                      :permission="newPermission[subItem.prop]"
                      :dataSource="subItem.prop"
                      v-on="$listeners"
                    ></fast2-component-render>
                  </div>
                </template>
              </fast2-block-provider>
            </slot>
            <slot :name="subItem.prop + '-footer'" :dataSource="subItem.prop"></slot>
          </el-tab-pane>
          <el-tab-pane :label="subItem.label" v-else :name="subItem.prop" :key="subItem.prop">
            <slot :name="subItem.prop + '-header'" :dataSource="subItem.prop"></slot>
            <slot :name="subItem.prop"></slot>
            <slot :name="subItem.prop + '-footer'" :dataSource="subItem.prop"></slot>
          </el-tab-pane>
        </template>
      </el-tabs>
    </template>
    <template v-if="showList && showList.length && !tabView">
      <template v-for="subItem in showList">
        <div
          class="tab-block"
          :key="subItem.prop"
          v-if="newPermission && newPermission[subItem.prop]"
        >
          <h4 class="block-title">{{ subItem.displayName || subItem.label }}</h4>
          <slot :name="subItem.prop + '-header'" :dataSource="subItem.prop"></slot>
          <slot :name="subItem.prop" :dataSource="subItem.prop">
            <fast2-block-provider
              :option="subItem.option"
              :version="subItem.option ? null : subItem.version"
            >
              <template v-slot="component">
                <div>
                  <fast2-component-render
                    :providerData="tabData[subItem.prop]"
                    :list="component.list"
                    :ref="subItem.prop"
                    :readOnly="readOnly"
                    :addInCell="addInCell"
                    :itemLinkList="itemLinkList"
                    :permission="newPermission[subItem.prop]"
                    :dataSource="subItem.prop"
                    v-on="$listeners"
                  >
                  </fast2-component-render>
                </div>
              </template>
            </fast2-block-provider>
          </slot>
          <slot :name="subItem.prop + '-footer'" :dataSource="subItem.prop"></slot>
        </div>
        <div :label="subItem.label" v-else :name="subItem.prop" :key="subItem.prop">
          <slot :name="subItem.prop + '-header'" :dataSource="subItem.prop"></slot>
          <slot :name="subItem.prop" :dataSource="subItem.prop"></slot>
          <slot :name="subItem.prop + '-footer'" :dataSource="subItem.prop"></slot>
        </div>
      </template>
    </template>
  </div>
</template>
<script>
/**
 * 界面配置总管理界面
 * 左侧 维护 所有可配数据列表
 * 主内容根据 可配数据类型 展示 表单，表格，详情，组件列表管理，可选择设置对应的数据
 * 进入屏蔽其他操作状态，单纯进行布局， 保存 及 发布 ， 可维护类型为 表格 表单 详情， 组合， 可 维护 模版 页面  模块
 * block 内含一组组件
 */
import { accessTemplate } from '../demo/template2.js';
import accessConfiguration from '../demo/tableJson3';

import { ft } from '../../../lib/utils';

const LABELS = {
  factoryAudit: ft('i18n_common_factory_audit', '验厂单'),
  qualificationAccess: ft('i18n_common_qualification_access', '资质准入'),
  sampleAccess: ft('i18n_common_sample_access', '样品准入')
};

export default {
  name: 'ConfigTabRender',
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      }
    },
    tabs: {
      type: Array,
      default: () => {
        return [];
      }
    },
    debugger: {
      type: Boolean,
      default: false
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    addInCell: {
      type: Boolean,
      default: true
    },
    tabView: {
      type: Boolean,
      default: true
    },
    itemLinkList: {
      type: Array,
      default: function () {
        return [
          { name: LABELS.factoryAudit, prop: 'inspectionAccess', link: '/adminission/#/' },
          { name: LABELS.qualificationAccess, prop: 'aptitudesAccess', link: '/adminission/#/' },
          { name: LABELS.sampleAccess, prop: 'sampleAccess', link: '/adminission/#/' }
        ];
      }
    },
    tabPermission: {
      type: Object,
      default: () => {
        return {};
      }
    },
    providerData: {
      type: Object,
      default: () => {
        return {
          tableData: []
        };
      }
    }
  },
  data() {
    return {
      tableObj: {},
      tableData: {},
      formData: {},
      active: '',
      newList: [],
      tabName: this.tabPermission?.newTabsName || [],
      newPermission: {}
    };
  },
  watch: {
    list: {
      handler(val) {
        this.newList = val;
        this.tabs = val;
      },
      deep: true,
      immediate: true
    },

    tabPermission: {
      handler(val) {
        this.newPermission = val;
        this.tabName = val.newTabsName || [];
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    tabData() {
      if (!this.readOnly) {
        this.newList.map((item) => {
          if (!this.providerData[item.prop]) {
            this.providerData[item.prop] = {
              tableData: []
            };
          }
        });
      }
      return this.providerData;
    },
    showList() {
      const showList = [];
      const list = Object.keys(this.newPermission);
      const newList = this.newList;

      if (!(newList.length && list && list.length)) {
        return showList;
      }

      const tabProps = {};
      const tempList = [];

      const tabs = this.tabs;

      tabs.forEach((item, index) => {
        tabProps[item.prop] = {
          displayName: item.displayName || '',
          index: index
        };
      });

      for (const item of newList) {
        if (this.newPermission[item.prop] && tabProps[item.prop]) {
          item.displayName = tabProps[item.prop].displayName;

          tempList[tabProps[item.prop].index] = item;
        }
      }

      for (const tempItem of tempList) {
        if (tempItem) {
          showList.push(tempItem);
        }
      }

      return showList;
    }
  },
  mounted() {
    if (this.debugger === 'true') {
      this.newList = accessTemplate;
    }
    if (this.debugger === 'true') {
      this.newPermission = accessConfiguration;
    }
    this.checkInitialized();
  },
  methods: {
    getLabel(item) {
      let label;

      // 如果配置了国际化 直接使用国际化字段
      // 国际化字段 优先级高于 别名(displayName)
      if (window.$t && item.i18nKey) {
        label = ft(item.i18nKey);

        if (label) {
          return label;
        }
      }

      label = item.label;
      const newTabsName = this.tabPermission.newTabsName || this.tabPermission.tabsName || [];

      if (newTabsName && newTabsName.length) {
        for (const subitem of newTabsName) {
          if (subitem.prop === item.prop && subitem.displayName) {
            label = subitem.displayName;
            return label;
          }
        }
      }

      return label;
    },
    checkInitialized() {
      setTimeout(() => {
        const exist = this.showList.find((item) => {
          return item.prop === this.active;
        });
        if (!exist) {
          if (this.showList[0]) {
            this.active = this.showList[0].prop;
          } else {
            this.checkInitialized();
          }
        }
      }, 1000);
    }
  }
};
</script>
<style scoped>
.avue-form__menu {
  display: none;
}
</style>
<style scoped>
.tabBox {
  background-color: #fff;
}
.tabBox .avue-form__menu {
  display: none;
}
</style>
