<template>
  <div class="main-content main-content-padding" id="ObjectViewer">
    <h-card class="margin-bottom list-query-form">
      <h-b-form
        id="ObjectViewer-queryForm"
        ref="formRef"
        name="use"
        v-bind="formProps"
        @finish="onFinish"
        @reset="onReset"
      />
    </h-card>
    <h-card class="list-table-has-card-head" :title="t('platform.objectViewer.detailTitle')">
      <h-b-table
        id="ObjectViewer-queryTable"
        ref="tableResultRef"
        :columns="columnResult"
        rowKey="EID"
        :dataSource="dataSourceResult"
        :needRowIndex="false"
        :animateRows="false"
        :showExport="false"
        :pagination="false"
        :show-size="false"
        :row-selection="false"
        :title="t('platform.objectViewer.tableResultTitle')"
      >
        <template #bodyCell="{ text }">
          <template v-if="text">
            <h-three-checkbox :disabled="true" :checked="text"></h-three-checkbox>
          </template>
        </template>
      </h-b-table>
      <h-b-table
        id="ObjectViewer-queryTable"
        ref="tableDetailRef"
        rowKey="EID"
        :columns="columnDetail"
        :dataSource="dataSourceDetail"
        :needRowIndex="true"
        :animateRows="false"
        :showExport="false"
        :show-size="false"
        :row-selection="false"
        :title="t('platform.objectViewer.tableDetailTitle')"
      >
        <template #bodyCell="{ record, column, text }">
          <template
            v-if="
              ['LOOK', 'EDIT', 'DEL', 'DOWNLOAD', 'COPY', 'START', 'EXPORT', 'print'].includes(
                column.dataIndex,
              )
            "
          >
            <h-three-checkbox :disabled="true" :checked="text"></h-three-checkbox>
          </template>
          <template v-else>
            {{ text }}
          </template>
        </template>
      </h-b-table>
    </h-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, watch, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useForm, useTable, useButtonGroup } from '@crami/bui-platform';
import { useI18n } from '@crami/locale';
import { commonApi } from '@remote/icpx-platform/commonApi';
import { getInfo, ICP_CONFIG } from '@remote/icpx-platform/utils';

export default defineComponent({
  name: 'ObjectViewer',
  props: {
    EID: {
      type: String,
    },
    showSearch: {
      type: Boolean,
      default: true,
    },
    tableTitle: {
      type: String,
      default: '',
    },
    listViewName: {
      type: String,
    },
    menuName: {
      type: String,
    },
  },
  setup(props) {
    // 多语言
    const { t } = useI18n();
    const commonParams = computed(() => {
      return getInfo(ICP_CONFIG);
    });

    const route = useRoute();

    console.log('route.params.UNIQUEID', route.params.UNIQUEID);

    watch(
      () => route.params.UNIQUEID,
      (newVal, oldVal) => {
        console.log('newVal', newVal);
        console.log('oldVal', oldVal);

        if (!props.EID) {
          RefreshTable();
        }
      },
    );

    const [formRef, formProps, formMethods] = useForm({
      configApi: {
        url: commonApi().studioCache.getMetaInfo.url,
        params: {
          ...commonApi().studioCache.getMetaInfo.params,
          type: 'form_view',
          mode: 'search',
          name: props.listViewName ? props.listViewName : commonParams.value?.listViewName,
        },
        method: commonApi().studioCache.getMetaInfo.method,
      },
      beforeSetData: (type, props) => {
        if (type === 'config') {
          const _props = {
            submitter: {
              isQuery: true,
            },
            // layout: 'vertical',
            column: 2,
          };
          formMethods?.setProps(_props, props);
        }

        return props;
      },
      immediate: true,
    });
    const [buttonGroupRef, buttonGroupProps] = useButtonGroup({
      pageName: 'ObjectViewer',
      dataSourceApi: {
        url: commonApi().studioCache.getMetaInfo.url,
        method: commonApi().studioCache.getMetaInfo.method,
        params: {
          ...commonApi().studioCache.getMetaInfo.params,
          type: 'menuv2',
          name: props.menuName ? props.menuName : commonParams.value?.menuName,
        },
      },
    });

    // 校验完成，提交前
    const onFinish = () => {
      // 获取/刷新data数据
    };

    // 重置
    const onReset = () => {};

    // 刷新表格-FunName是从buttonGroup样式接口获取的
    const RefreshTable = () => {};

    // 权限计算结果
    const tableResultRef = ref(null);
    const columnResult = [
      {
        dataIndex: 'EID',
        show: false,
        title: '',
        width: '0',
      },
      {
        dataIndex: 'LOOK',
        show: true,
        title: '浏览',
        width: -1,
        customSlot: 'LOOK',
      },
      {
        dataIndex: 'EDIT',
        show: true,
        title: '编辑',
        width: -1,
      },
      {
        dataIndex: 'DEL',
        show: true,
        title: '删除',
        width: -1,
      },
      {
        dataIndex: 'COPY',
        show: true,
        title: '粘贴复制',
        width: -1,
      },
      {
        dataIndex: 'START',
        show: true,
        title: '发起流程',
        width: -1,
      },
      {
        dataIndex: 'EXPORT',
        show: true,
        title: '导出',
        width: -1,
      },
      {
        dataIndex: 'print',
        show: true,
        title: '打印',
        width: -1,
      },
    ];
    const dataSourceResult = ref([
      { LOOK: 'checked', EID: '1', EDIT: 'negative', START: 'unchecked' },
    ]);

    // 权限策略明细
    const tableDetailRef = ref(null);
    const columnDetail = [
      {
        dataIndex: 'EID',
        show: false,
        title: '',
        width: '0',
      },
      {
        dataIndex: 'type',
        show: true,
        title: '类型',
        width: -1,
      },
      {
        dataIndex: 'name',
        show: true,
        title: '策略名称',
        width: -1,
      },
      {
        dataIndex: 'authbody',
        show: true,
        title: '授权主题类型',
        width: -1,
      },
      {
        dataIndex: 'LOOK',
        show: true,
        title: '浏览',
        width: -1,
      },
      {
        dataIndex: 'EDIT',
        show: true,
        title: '编辑',
        width: -1,
      },
      {
        dataIndex: 'DEL',
        show: true,
        title: '删除',
        width: -1,
      },
      {
        dataIndex: 'DOWNLOAD',
        show: true,
        title: '下载',
        width: -1,
      },
      {
        dataIndex: 'COPY',
        show: true,
        title: '粘贴复制',
        width: -1,
      },
      {
        dataIndex: 'START',
        show: true,
        title: '发起流程',
        width: -1,
      },
      {
        dataIndex: 'EXPORT',
        show: true,
        title: '导出',
        width: -1,
      },
      {
        dataIndex: 'print',
        show: true,
        title: '打印',
        width: -1,
      },
    ];
    const dataSourceDetail = ref([
      { type: '授权策略', LOOK: 'checked', EID: '1', EDIT: 'negative', START: 'unchecked' },
    ]);

    return {
      formRef,
      formProps,
      tableResultRef,
      tableDetailRef,
      buttonGroupRef,
      buttonGroupProps,
      commonParams,
      t,
      onFinish,
      onReset,
      RefreshTable,
      dataSourceResult,
      columnResult,
      dataSourceDetail,
      columnDetail,
    };
  },
});
</script>
<style lang="less" scoped></style>
