<template>
  <div class="l-auto-window">
    <el-tabs v-model="pageActiveName" :stretch="true">
      <el-tab-pane :label="$t('布局设置')" name="tab01">
        <webcodeLayout />
      </el-tab-pane>
      <el-tab-pane v-if="config.layoutType == 2" :label="$t('左侧树形设置')" name="tab05">
        <webcodeLefttree :colslist="colslist" />
      </el-tab-pane>
      <el-tab-pane :label="$t('列表设置')" name="tab02">
        <webcodeColumns :columnsTree="columnsTree" />
      </el-tab-pane>
      <el-tab-pane :label="$t('查询设置')" name="tab03">
        <webcodeQuery :queryTree="queryTree" />
      </el-tab-pane>
      <el-tab-pane :label="$t('按钮设置')" name="tab04">
        <webcodeBtns :btnsTree="btnsTree" />
      </el-tab-pane>
    </el-tabs>
  </div>
  <a-button @click="validateSteps" />
</template>

<script lang="ts" setup>
  import { ref, provide, onMounted } from 'vue';
  import WebcodeLayout from './config/layout.vue';
  import webcodeLefttree from './config/leftTree.vue';
  import webcodeColumns from './config/columns.vue';
  import webcodeQuery from './config/query.vue';
  import webcodeBtns from './config/btns.vue';
  import { functionGetPreviewForm, functionGetSchemeInfoEntity } from '@/api/demo/formScheme';

  // 初始数据
  const pageActiveName = 'tab01';
  // 左侧树形设置
  const colslist = ref([]);
  // 列表设置
  const columnsTree = ref([
    {
      label: '全选',
      children: [],
    },
  ]);
  // 查询设置
  const queryTree = ref([
    {
      label: '全选',
      children: [],
    },
  ]);
  const btnsTree = ref([]);

  const config = ref({
    layoutType: 1,
    queryType: '1',
    left: {
      title: '左侧树形',
      colField: '',
      dataType: '1',
      dataIdKey: '',
      dataPIdKey: '',
      dataValueKey: '',
      dataLabelKey: '',
      colNames: [], // 数据源字段列表
      options: [], // 静态数据
      dataCode: '',
    },
    table: {
      isPage: true,
      columns: [],
      querys: [],
      sidx: '',
      isDESC: false,
    },
    btns: [
      { label: '新增', id: 'Add', prop: 'Add', icon: 'el-icon-plus', isRowBtn: false },
      { label: '导入', id: 'Import', prop: 'Import', icon: 'el-icon-upload2', isRowBtn: false },
      { label: '导出', id: 'Export', prop: 'Export', icon: 'el-icon-download', isRowBtn: false },
      { label: '编辑', id: 'Edit', prop: 'Edit', isRowBtn: true },
      { label: '删除', id: 'Delete', prop: 'Delete', isRowBtn: true },
      { label: '详情', id: 'Details', prop: 'Details', isRowBtn: true },
    ],
  });

  const formScheme = ref('');

  // 表单验证
  async function validateSteps() {
    // 选中的历史记录表单
    let keyValue: string = '4afddef9-e234-458c-a4a8-f67a9728a634';
    const scheme = await functionGetPreviewForm({ keyValue: keyValue });
    formScheme.value = JSON.parse(scheme.scheme);
    console.log(scheme);

    const columns = [];
    formScheme.value.formInfo.schemas.forEach((tab) => {
      if (!(tab.component in ['Gridtable', 'Divider', 'Password', 'Viewtable', 'Card', 'Btn'])) {
        columns.push(tab);
      }
    });

    const colunmsMap = {};
    columns.forEach((item) => {
      colunmsMap[item.label + item.field] = item;
    });

    console.log(105, columns);
    console.log(106, colunmsMap);

    // 左侧树形设置
    colslist.value = columns.map((t) => {
      return { value: t.componentProps.fieldName, label: t.componentProps.fieldName };
    });

    // 列表设置-树
    columns.map((t) => {
      columnsTree.value[0].children.push({
        key: t.label + t.field,
        label: t.label,
        value: t.label,
        width: 120,
        align: 'left',
        isMinWidth: false,
      });
      // 列表设置-表
      config.value.table.columns.push({
        key: t.label + t.field,
        label: t.label,
        value: t.label,
        width: 120,
        align: 'left',
        isMinWidth: false,
      });
    });

    // 查询设置
    queryTree.value[0].children = columns
      .filter(
        (t) =>
          !['Upload', 'Uploadimg', 'Password', 'Timerange', 'Datetimerange'].includes(t.component),
      )
      .map((t) => {
        return { key: t.label + t.field, label: t.label };
      });
    columns.forEach((t) => {
      config.value.table.querys.push({
        key: t.label + t.field,
        label: t.label,
        // width: 120,
        // align: 'left',
        // isMinWidth: false,
      });
    });

    // 常用按钮
    const schemeInfo = await functionGetSchemeInfoEntity({ id: scheme.schemeInfoId });
    if (schemeInfo.formType === 1) {
      // 如果是视图表单就关闭部分按钮
      config.value.btns = config.value.btns.filter((t) =>
        ['Import', 'Export', 'Details'].includes(t.id),
      );
    }
    config.value.btns.forEach((t) => {
      btnsTree.value.push(t);
    });
  }

  validateSteps();

  provide('formConfig', config.value);
</script>
