<template>
  <div class="tabBox">
    <el-button @click="dialogVisible = true">{{ labels.selectModule }}</el-button>
    <!-- 模块选择 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" append-to-body>
      <div>
        <el-checkbox-group v-model="templateConfig.tab" @change="changeShowList(item)">
          <template v-for="item in newList">
            <el-checkbox
              :key="item.prop"
              :name="item.prop"
              :label="item.label"
              :checked="templateConfig.tab.includes(item.label)"
            >
            </el-checkbox>
          </template>
        </el-checkbox-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button>{{ labels.cancel }}</el-button>
        <el-button type="primary" @click="handleTemplateBlock">{{ labels.ok }}</el-button>
      </span>
    </el-dialog>
    <template v-if="showList && showList.length">
      <el-tabs v-model="active" @tab-click="changeTab">
        <template v-for="subTabItem in showList">
          <el-tab-pane
            v-if="!subTabItem.hide"
            :label="subTabItem.label"
            :name="subTabItem.prop"
            :key="subTabItem.prop"
          >
            <fast2-block-provider :option="subTabItem.option" :version="subTabItem.version">
              <template v-slot="component">
                <div>
                  <template v-for="item in component.list">
                    <div :key="item.id" v-if="item.data && item.data.column">
                      <el-checkbox-group v-model="templateConfig.column[subTabItem.prop]">
                        <template v-for="subFielditem in item.data.column">
                          <span :key="subFielditem.prop">
                            <el-checkbox
                              :name="subFielditem.prop"
                              :label="subFielditem.label"
                              :checked="
                                templateConfig.column[subTabItem.prop].includes(subFielditem.label)
                              "
                              @change="changeShowColumList(item.data.column, subTabItem.prop)"
                              >{{ subFielditem.label }}
                            </el-checkbox></span
                          >
                        </template>
                      </el-checkbox-group>
                    </div>
                  </template>
                </div></template
              ></fast2-block-provider
            >
          </el-tab-pane></template
        ></el-tabs
      >
    </template>
  </div>
</template>
<script>
/**
 * 界面配置总管理界面
 * 左侧 维护 所有可配数据列表
 * 主内容根据 可配数据类型 展示 表单，表格，详情，组件列表管理，可选择设置对应的数据
 * 进入屏蔽其他操作状态，单纯进行布局， 保存 及 发布 ， 可维护类型为 表格 表单 详情， 组合， 可 维护 模版 页面  模块
 * block 内含一组组件
 */
import { accessTemplate } from '../demo/template.js';

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

const LABELS = {
  cancel: ft('i18n_common_cancel', '取消'),
  enabledModule: ft('i18n_common_enabled_module', '启用的模块'),
  module: ft('i18n_common_module', '模块'),
  new: ft('i18n_common_new', '新增'),
  ok: ft('i18n_common_ok', '确定'),
  select: ft('i18n_common_select', '选择')
};

LABELS.selectModule = `${LABELS.select}${LABELS.module}`;
LABELS.selectEnabledModule = `${LABELS.select}${LABELS.enabledModule}`;

export default {
  name: 'ConfigTabSetting',
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      }
    },
    config: {},
    debugger: {
      type: String,
      default: 'false'
    },
    providerData: {
      type: Object,
      default: () => {
        return {
          tableData: []
        };
      }
    }
  },
  data() {
    return {
      labels: LABELS,
      tableObj: {},
      tableData: {},
      formData: {},
      templateConfig: {
        tab: [],
        column: {}
      },
      newList: [],
      template: {},
      dialogVisible: false,
      dialogTitle: LABELS.selectEnabledModule,
      dialogWidth: 550,
      showList: [],
      active: ''
    };
  },
  computed: {
    tabData() {
      this.newList.map((item) => {
        if (!this.providerData[item.prop]) {
          this.providerData[item.prop] = {
            tableData: []
          };
        }
      });
      return this.providerData;
    }
  },
  mounted() {
    if (this.debugger === 'true') {
      this.newList = accessTemplate;
    } else {
      this.newList = this.list;
    }
    if (this.list[0]) {
      this.active = this.list[0].prop;
    }
    this.initCheckColumnList();
  },
  methods: {
    changeShowList() {},
    updateTemplateConfig() {
      this.$root.$emit('update-template-config', {
        template: this.template,
        config: this.templateConfig
      });
    },
    changeShowColumList(column, prop) {
      if (!column || !column.length) {
        return false;
      }
      const newColumn = [];
      column.map((item) => {
        const list = this.templateConfig.column[prop];
        const isShow = list && item.label && list.includes(item.label);
        delete item.hide;
        if (isShow) {
          newColumn.push(item);
        }
      });

      this.template = this.template.map((item) => {
        if (item.prop === prop) {
          item.option = item.option || {};
          item.option.column = newColumn;
        }
        return item;
      });
      this.showList = this.template;
      this.updateTemplateConfig();
    },
    initCheckColumnList() {
      this.newList.map((item) => {
        this.templateConfig.column[item.prop] = [];
      });
    },
    handleTemplateBlock() {
      this.showList = [];
      this.newList.map((item) => {
        const list = this.templateConfig.tab;
        const isShow = list && item.label && list.includes(item.label);
        item.option = { column: [] };
        if (isShow) {
          this.showList.push(item);
        }
      });
      this.template = this.showList;
      this.updateTemplateConfig();
      this.dialogVisible = false;
    }
  }
};
</script>
<style scoped>
.tabBox {
  background-color: #fff;
}
</style>
