<template>
  <!-- 表格，操作按钮和按钮组插槽实现 -->
  <div class="main-content" id="DictValue">
    <h-card class="list-table">
      <h-b-table
        v-bind="tableProps"
        rowKey="EID"
        :pagination="false"
        :needRowIndex="false"
        :show-size="false"
        :showExport="false"
        :title="t('dictManage.dictValue.tableTitle')"
        :row-selection="{
          type: 'checkbox',
          memory: true,
          clickSelectTrigger: 'row',
          unSelectable: true,
        }"
        ref="gridRef"
        id="DictValue-queryTable"
        :scroll="{
          y: '400px',
        }"
        :height="500"
      >
        <!-- 按钮组插槽 -->
        <template #headerContent>
          <h-b-button-group v-bind="menuProps" ref="menuRef" id="DictValue-buttonGroup" />
        </template>
        <!-- 行内操作按钮 -->
        <template #action="{}">
          <h-b-button-group
            v-bind="menuPropsTable"
            ref="menuRefTable"
            id="DictValue-buttonGroup-inline"
          />
        </template>
        <template #ItemState="{ text }">
          <template v-if="text === '启用'">
            <h-badge status="success" :text="text" />
          </template>
          <template v-else>
            <h-badge status="error" :text="text" />
          </template>
        </template>
      </h-b-table>
    </h-card>
  </div>
</template>
<script lang="ts">
import { defineComponent, computed, watchEffect } from 'vue';
import { useTable, useButtonGroup } from '@crami/bui-platform';
import { getInfo, ICP_CONFIG } from '@remote/icpx-platform/utils';
/* import { getInfo, ICP_CONFIG } from '@/utils/commMethods'; */
import { message } from '@crami/ui';
import { commonApi } from '@remote/icpx-platform/commonApi';
/* import { commonApi } from '@/api/commonApi/index'; */
import { useI18n } from '@crami/locale';

const dictProps = {
  componentProps: {
    type: Object,
    default: () => {
      return {};
    },
  },
};

export default defineComponent({
  name: 'DictValue',
  props: dictProps,
  setup: _ => {
    const { t } = useI18n();
    const commonParams = computed(() => {
      return getInfo(ICP_CONFIG);
    });

    const value1 = computed(() => {
      return _.componentProps?.rows[0]?.EID;
    });

    const code = computed(() => {
      return _.componentProps?.rows[0]?.DIC_CODE;
    });

    const initForm = computed(() => {
      return {
        PENAME: _.componentProps?.rows[0]?.ENAME,
        PEID: _.componentProps?.rows[0]?.EID,
        APPLICATION_ID: _.componentProps?.propsData?.rootValue1,
        RATION_CODE: _.componentProps?.rows[0]?.DIC_CODE,
      };
    });

    const viewName = 'P_SYS_ENUMITEM_LISTVIEW';
    const [gridRef, tableProps, tableMethods] = useTable({
      // 表头数据
      configApi: {
        url: commonApi().system.getData.url,
        method: commonApi().system.getData.method,
        params: {
          type: 'gridTitle',
          data: {
            ...commonApi().system.getData.params,
            viewName: viewName,
          },
        },
      },
      // 数据接口
      dataSourceApi: {
        url: '/api/system/model/dealEnumItemTree',
        method: 'post',
        studioParams: {
          viewName: viewName,
          lang: commonParams.value?.lang,
          connect: commonParams.value?.connect,
          companyId: commonParams.value?.companyId,
          timeZone: commonParams.value?.TIME_ZONE,
          objectType: '',
        },
      },
      beforeRequest: (type, params: any) => {
        if (type == 'column') {
          if (params && params.data && typeof params.data == 'object') {
            params.data = JSON.stringify(params.data);
          }
        }
        return {
          ...params,
          filter: [
            {
              // andOrFlag: 'AND',
              field: 'PEID',
              operation: '=',
              value: _.componentProps?.rows[0]?.EID,
            },
          ],
        };
      },
      operation: {
        dataIndex: 'action',
        title: t('platform.common.operate'),
        width: 175,
        show: true,
        customSlot: 'action',
        fixed: 'right',
      },
      columnExtra: {
        ITEM_STATUS: {
          customSlot: 'ItemState',
        },
      },
    });

    const [menuRef, menuProps, { getRowMenu }] = useButtonGroup({
      checkPermission: false,
      sortRule: 'default',
      pageName: 'DictValue',
      dataSourceApi: {
        url: commonApi().studioCache.getMetaInfo.url,
        params: {
          ...commonApi().studioCache.getMetaInfo.params,
          type: 'menuv2',
          name: 'P_SYS_ENUMITEM',
        },
        method: commonApi().studioCache.getMetaInfo.method,
      },
    });
    const [menuRefTable, menuPropsTable, { load }] = useButtonGroup({
      checkPermission: false,
      sortRule: 'computedByNumber',
      computedByNumber: 3,
      pageName: 'DictValue',
      items: [],
    });

    const newJsFun = (event: any) => {
      if (event.result?.code == 200) {
        message.success(event.result.msg);
        refreshTable();
      } else {
        if (undefined == event?.result) {
          //TODO：后期可能会有处理
        } else {
          message.warning(event.result.msg);
        }
      }
    };

    // 刷新
    const refreshTable = () => {
      tableMethods.query();
    };

    const refreshCurrentPage = () => {
      tableMethods.query();
    };

    //处理行内操作按钮
    watchEffect(async () => {
      const rowData = getRowMenu('link');
      load(rowData);
    });
    return {
      t,
      menuRef,
      menuProps,
      menuRefTable,
      menuPropsTable,

      gridRef,
      tableProps,
      newJsFun,
      value1,
      initForm,
      refreshTable,
      refreshCurrentPage,
      commonParams,
      code,
    };
  },
});
</script>
