<template>
  <div>
    <slot name="header">
      <page-header :title="title" :buttons="currentButtons" @do-action="doBtnAction" />
    </slot>
    <slot name="searchBox">
      <fast2-search-provider :option="searchOption" />
    </slot>
    <slot name="tabBox" />
    <slot name="listBox">
      <fast2-row-page-provider :option="tableOption" />
    </slot>
  </div>
</template>
<script>
import { ElsPageConfigService } from '../../../lib/api/materials';
import { getUserInfo } from '../../../lib/auth';
import { ft } from '../../../lib/utils';

const LABELS = {
  pageTitle: ft('i18n_common_page_title', '页面标题'),
  receipt: ft('i18n_common_receipt', '单据'),
  configuration: ft('i18n_common_configuration', '配置'),
  failedToQueryData: ft('i18n_common_failed_to_query_specified_data', '查询?数据失败')
};

export default {
  name: 'PageProvider',
  props: {
    api: {
      type: Function
    },
    pageCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: true,
      title: LABELS.pageTitle,
      buttons: [],
      searchOption: { column: [], data: {} },
      tableOption: { column: [], data: {} },
      pageType: 'page-versions',
      pageJson: []
    };
  },

  methods: {
    loadConfigurations() {
      ElsPageConfigService.list({
        elsAccount: getUserInfo().elsAccount,
        code: this.pageCode
      })
        .then((res) => {
          if (
            res.data &&
            res.data.statusCode === '200' &&
            res.data.message === 'response OK' &&
            res.data.data
          ) {
            const item = res.data.data || {};

            const configJson = item.outputJson || [];

            const json = JSON.parse(configJson);

            const field = json.field;

            const table = json.table;
            const searchColumn = [];
            // TODO 添加权限过滤条件
            field.map((item) => {
              if (item.isSearch) {
                searchColumn.push(item);
              }
            });
            table.map((item) => {
              if (item.isSearch) {
                searchColumn.push(item);
              }
            });

            this.finalOption.column = searchColumn;

            const configurations = {
              listColumns: field
            };
            this.configurations = configurations;
          } else {
            console.log('Failed to detail receipt configuration.', res.data);
            this.$message.error(
              res.data.message ||
                LABELS.failedToQueryData.replace(
                  '?',
                  `${LABELS.receipt.toLowerCase()} ${LABELS.configuration.toLowerCase()}`
                )
            );
          }
          // 默认加载
          this.setTableColumns();
        })
        .catch((err) => {
          console.log('Error to detail receipt configuration.', err);
          this.$message.error(
            LABELS.failedToQueryData.replace(
              '?',
              `${LABELS.receipt.toLowerCase()} ${LABELS.configuration.toLowerCase()}`
            )
          );
        });
    }
  }
};
</script>
<style scoped>
.configlist tr {
  cursor: pointer;
}
</style>
