<template>
  <h-modal
    destroyOnClose
    v-model:visible="visible"
    :title="t('dictManage.dictDetail.modalTilt')"
    width="886px"
    :maskClosable="false"
    class="dictDetail"
    :centered="true"
  >
    <h-row>
      <h-col style="width: 100%">
        <p class="platform-dict-title">{{ t('dictManage.dictDetail.baseInfo.title') }}</p>
        <h-b-form
          ref="formRef"
          name="sub"
          v-bind="formProps"
          class="hoteam-b-description-form platform-b-description-form"
          :is-query="false"
        ></h-b-form>
      </h-col>
      <h-col style="width: 100%">
        <p class="platform-dict-title platform-dict-detail-table">
          {{ t('dictManage.dictDetail.dictValueTitle') }}
        </p>
        <div class="bottom">
          <h-b-pro-table
            v-bind="tableProps"
            rowKey="EID"
            :pagination="false"
            :needRowIndex="false"
            :show-size="false"
            :showExport="false"
            :expandedRowKeys="expandedRowKeys"
            ref="gridRef"
            :title="t('dictManage.dictValue.tableTitle')"
            :height="500"
            @expand="expandIconHandler"
          >
            <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-pro-table>
        </div>
      </h-col>
    </h-row>
    <template #footer>
      <h-button type="primary" @click.prevent="close">
        {{ t('platform.common.close') }}
      </h-button>
    </template>
  </h-modal>
</template>

<script lang="ts">
//暂定引入 最终确认使用那些
import { defineComponent, ref, computed, reactive, nextTick } from 'vue';
import { useProTable, useForm } from '@crami/bui-platform';
import { commonApi } from '@remote/icpx-platform/commonApi';
/* import { commonApi } from '@/api/commonApi/index'; */
// import { API } from '../../../api';
import { getInfo, ICP_CONFIG } from '@remote/icpx-platform/utils';
/* import { getInfo, ICP_CONFIG } from '@/utils/commMethods'; */
import { useI18n } from '@crami/locale';

export interface queryItem {
  field: '';
  value: '';
  options: '';
}
const dictProps = {
  rows: {
    type: Object,
    default: () => {
      return {};
    },
  },
};

export default defineComponent({
  name: 'DictDetail',
  props: dictProps,
  setup: props => {
    const { t } = useI18n();
    const visible = ref(false);
    const commonParams = computed(() => {
      return getInfo(ICP_CONFIG);
    });
    const propsData: any = ref({});
    const newJsFun = () => {};
    const expandedRowKeys = ref([]);

    const [gridRef, tableProps, tableMethods] = useProTable({
      initialLoad: false,
      // 表头数据
      configApi: {
        url: commonApi().system.getData.url,
        method: commonApi().system.getData.method,
        params: {
          type: 'gridTitle',
          data: {
            ...commonApi().system.getData.params,
            viewName: 'P_SYS_ENUMITEM_LISTVIEW',
          },
        },
      },
      // 数据接口
      dataSourceApi: {
        url: '/api/system/model/dealEnumItemTree',
        method: 'post',
        studioParams: {
          viewName: 'P_SYS_ENUMITEM_LISTVIEW',
          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: propsData.value?.rows?.[0]?.EID,
            },
          ],
        };
      },
      afterRequest: (_, data) => {
        if (data?.data?.length) {
          expandedRowKeys.value = getTableEidAll(data?.data) || [];
        }
        return data;
      },
      // operation: {
      //   dataIndex: 'action',
      //   title: '操作',
      //   width: 300,
      //   show: false,
      //   customSlot: 'action',
      //   fixed: 'right',
      // },
      columnExtra: {
        ITEM_STATUS: {
          customSlot: 'ItemState',
        },
      },
    });

    // 循环HBTable数据获取所有EID
    const getTableEidAll = (data, arr = []) => {
      data.forEach(item => {
        if (item.EID) {
          arr.push(item.EID);
        }
        if (item?.children?.length) {
          getTableEidAll(item.children, arr);
        }
      });
      return arr;
    };

    const schemasData = reactive([
      {
        dataIndex: 'PEID',
        title: t('dictManage.dictDetail.baseInfo.dictType'),
        locale: 'dictManage.dictDetail.baseInfo.dictType',
        valueType: 'Input',
        width: '50%',
        formItemProps: {
          labelCol: { style: { width: '100px' } },
        },
      },
      {
        dataIndex: 'DIC_CODE',
        title: t('dictManage.dictDetail.baseInfo.dictTCode'),
        locale: 'dictManage.dictDetail.baseInfo.dictTCode',
        valueType: 'Input',
        width: '50%',
        formItemProps: {
          labelCol: { style: { width: '100px' } },
        },
      },
      {
        dataIndex: 'ENAME',
        title: t('dictManage.dictDetail.baseInfo.dictTyName'),
        locale: 'dictManage.dictDetail.baseInfo.dictTyName',
        valueType: 'Input',
        width: '50%',
        formItemProps: {
          labelCol: { style: { width: '100px' } },
        },
      },
      {
        dataIndex: 'DIC_STATUS',
        title: t('dictManage.dictDetail.baseInfo.dictTyStatus'),
        locale: 'dictManage.dictDetail.baseInfo.dictTyStatus',
        valueType: 'Input',
        width: '50%',
        formItemProps: {
          labelCol: { style: { width: '100px' } },
        },
      },
      {
        dataIndex: 'SHOWMODE',
        title: t('dictManage.dictDetail.baseInfo.dictMode'),
        locale: 'dictManage.dictDetail.baseInfo.dictMode',
        valueType: 'Input',
        width: '50%',
        formItemProps: {
          labelCol: { style: { width: '100px' } },
        },
      },
      {
        dataIndex: 'DESCRIPTION',
        title: t('dictManage.dictDetail.baseInfo.dictTyDesc'),
        locale: 'dictManage.dictDetail.baseInfo.dictTyDesc',
        valueType: 'Input',
        width: '50%',
        formItemProps: {
          labelCol: { style: { width: '100px' } },
        },
      },
    ]);

    const [formRef, formProps, methodsSub] = useForm(
      {
        beforeSetData: (type, props) => {
          if (type === 'config') {
            const _props: any = {
              submitter: {
                isQuery: false,
                showResetButton: false,
                showSubmitButton: false,
                showAdvancedButton: false,
                showActionButtonGroup: false,
              },
              column: 1, // 一行展示几个
              isQuery: false,
              readonly: true,
              schemas: schemasData,
            };
            methodsSub?.setProps(_props, props);
          }
          return props;
        },
        immediate: true,
      },
      '',
      '',
      {},
    );

    // 打开弹窗
    const show = data => {
      visible.value = true;
      propsData.value = data;
      tableMethods.query();
      nextTick(() => {
        methodsSub.setData(data?.rows?.length ? data?.rows[0] : {});
      });
    };
    //关闭弹窗
    const close = () => {
      visible.value = false;
      tableMethods.query();
      expandedRowKeys.value = [];
    };

    // 点击进行展开收起操作
    const expandIconHandler = (expanded, record) => {
      if (expanded) {
        expandedRowKeys.value.push(record.EID);
      } else {
        if (expandedRowKeys.value.indexOf(record.EID) >= 0) {
          const ind = expandedRowKeys.value.indexOf(record.EID);
          expandedRowKeys.value.splice(ind, 1);
        }
      }
    };

    return {
      t,
      newJsFun,
      props,
      visible,
      show,
      close,
      propsData,
      gridRef,
      tableProps,
      tableMethods,
      formRef,
      formProps,
      methodsSub,
      expandedRowKeys,
      expandIconHandler,
    };
  },
});
</script>
<style lang="less" scoped>
@import '@/theme/default/variables.less';

.platform-dict-title {
  font-size: 16px;
  font-weight: bold;
  &::before {
    content: '';
    width: 3px;
    height: 16px;
    background: @modal-formgroup-color;
    margin-right: 5px;
    display: inline-block;
  }
}
.platform-dict-detail-info {
  margin-bottom: 24px;
  :deep(.ant-descriptions-view .ant-descriptions-item-content) {
    width: 50%;
  }
}
.platform-dict-detail-table {
  padding-top: 23px;
  border-top: 1px dotted #e9e9e9;
  margin-top: 14px;
}
:deep(.dict-desc span) {
  min-height: 16px;
  display: inline-block;
}
.dict-detail-divider {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 10px;
  border: 1px solid #e8e8e8;
}
.dicy-detail-btns {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .cancel-btn {
    margin-right: 20px;
  }
}
</style>
