<template>
  <div class="main-content main-content-padding" id="DataPermissionParameters">
    <!-- //查询表单 -->
    <h-card class="top margin-bottom list-query-form">
      <h-b-form
        ref="formRef"
        name="use"
        v-bind="props"
        :title="t('permission.dataPermissionParameters.handlerTitle')"
        id="DataPermissionParameters-queryForm"
      >
        <template #submitBefore>
          <h-b-button-group
            id="DataPermissionParameters-buttonGroup"
            v-bind="menuProps"
            ref="menuRef"
          />
        </template>
      </h-b-form>
    </h-card>
    <!-- 文案表述 -->
    <h-card
      :title="t('permission.dataPermissionParameters.explainTitle')"
      class="bottom list-table list-table-has-card-head"
    >
      <div class="data-permission-determine">
        <p class="platform-dict-title">
          {{ t('permission.dataPermissionParameters.explainSubTitle') }}
        </p>
        <h-steps :current="4" progress-dot direction="vertical" :style="stepStyle">
          <h-step
            :title="t('permission.dataPermissionParameters.progressOne')"
            :description="t('permission.dataPermissionParameters.progressDescOne')"
            :style="stepItemStyle"
          />
          <h-step
            :title="t('permission.dataPermissionParameters.progressTwo')"
            :description="t('permission.dataPermissionParameters.progressDesc')"
            :style="stepItemStyle"
          />
          <h-step
            :title="t('permission.dataPermissionParameters.objPermission') + ':'"
            :description="t('permission.dataPermissionParameters.progressDesc')"
            :style="stepItemStyle"
          />
          <h-step
            :title="t('permission.dataPermissionParameters.progressFour')"
            :description="t('permission.dataPermissionParameters.progressDesc')"
            :style="stepItemStyle"
          />
        </h-steps>
        <div class="progress-description">
          <img src="~@/assets/ICP/icp-arrow.svg" />
          {{ t('permission.dataPermissionParameters.explainDesc') }}
          <br />
          {{ t('permission.dataPermissionParameters.explainDesc1') }}
          <br />
          <div
            style="margin-left: 25px"
            v-html="t('permission.dataPermissionParameters.explainDesc1Content')"
          ></div>
          {{ t('permission.dataPermissionParameters.explainDesc2') }}
          <br />
          <div
            style="margin-left: 25px"
            v-html="t('permission.dataPermissionParameters.explainDesc2Content')"
          ></div>
          {{ t('permission.dataPermissionParameters.explainDesc3') }}
          <br />
          <div
            style="margin-left: 25px"
            v-html="t('permission.dataPermissionParameters.explainDesc3Content')"
          ></div>
          <img src="~@/assets/ICP/icp-arrow.svg" />
          {{ t('permission.dataPermissionParameters.explainDescLast') }}
        </div>
      </div>
    </h-card>
  </div>
</template>

<script lang="ts">
import { useButtonGroup, useForm } from '@crami/bui-platform';
import { computed, defineComponent, reactive, onMounted, ref, h } from 'vue';
// import { message, HModal } from '@crami/ui';
import { getInfo, ICP_CONFIG, usePageParams } from '@remote/icpx-platform/utils';
/* import { getInfo, ICP_CONFIG } from '@/utils/commMethods';
import { usePageParams } from '@/utils/usePageData'; */
import { useHttp } from '@crami/http';
import { message } from 'ant-design-vue';
import { commonApi } from '@remote/icpx-platform/commonApi';
/* import { commonApi } from '@/api/commonApi/index'; */
import { useI18n } from '@crami/locale';

export default defineComponent({
  name: 'DataPermissionParameters',
  components: {},
  emits: ['success'],
  setup() {
    const { t } = useI18n();
    //页面通用参数
    const pageParams: any = usePageParams();
    const commonParams = computed(() => {
      return { ...getInfo(ICP_CONFIG), ...pageParams.value };
    });
    //页面初始化加载数据
    console.log(commonApi().system.getGetOnePageGridDataList);
    const getInitDataFun = async () => {
      const data = await useHttp({
        url: commonApi().system.getGetOnePageGridDataList.url,
        method: commonApi().system.getGetOnePageGridDataList.method,
        params: {
          ...commonApi().system.getGetOnePageGridDataList.params,
          ...{
            viewName: 'P_SYS_DATAPER_GLOBALPARAM_LISTVIEW', //commonParams.value?.listViewName
          },
        },
      });
      return data;
    };
    const formInitData = ref([]);
    const getInitData = () => {
      getInitDataFun().then(result => {
        if (result.code == 200) {
          console.log(result.data);
          if (result.data.data.length) {
            let obj = {};
            formInitData.value = result.data.data;
            result.data.data.forEach(element => {
              obj[element.ECODE] = element.PARAM_VALUE == 'true' ? true : false;
            });
            //更新设置表单初始值
            formRef.value.setData(obj);
          }
        }
      });
    };
    onMounted(() => {
      getInitData();
    });
    //全线参数设置
    const schemasParams = reactive([
      {
        dataIndex: 'objPermission',
        title: t('permission.dataPermissionParameters.objPermission'),
        locale: 'permission.dataPermissionParameters.objPermission',
        valueType: 'Switch',
        // width: '25%',
        formItemProps: {
          // labelCol: { span: 10 },
          // wrapperCol: { span: 14 },
          help: h(
            'div',
            {
              innerHTML: t('permission.dataPermissionParameters.objPermissionHelp'),
            },
            [],
          ),
        },
        fieldProps: {
          // checkedChildren: '启用',
        },
      },
      {
        dataIndex: 'flowPermission',
        title: t('permission.dataPermissionParameters.flowPermission'),
        locale: 'permission.dataPermissionParameters.flowPermission',
        valueType: 'Switch',
        // width: '25%',
        formItemProps: {
          // labelCol: { span: 10 },
          // wrapperCol: { span: 14 },
          help: h(
            'div',
            {
              innerHTML: t('permission.dataPermissionParameters.flowPermissionHelp'),
            },
            [],
          ),
        },
        fieldProps: {
          // checkedChildren: '启用',
        },
      },
      {
        dataIndex: 'noRulePermission',
        title: t('permission.dataPermissionParameters.noRulePermission'),
        locale: 'permission.dataPermissionParameters.noRulePermission',
        valueType: 'Switch',
        // width: '25%',
        formItemProps: {
          // labelCol: { span: 18 },
          // wrapperCol: { span: 4 },
          help: h(
            'div',
            {
              innerHTML: t('permission.dataPermissionParameters.noRulePermissionHelp'),
            },
            [],
          ),
        },
        fieldProps: {
          // checkedChildren: '允许',
        },
      },
      {
        dataIndex: 'adminPermission',
        title: t('permission.dataPermissionParameters.adminPermission'),
        locale: 'permission.dataPermissionParameters.adminPermission',
        valueType: 'Switch',
        // width: '25%',
        formItemProps: {
          // labelCol: { span: 20 },
          // wrapperCol: { span: 4 },
          help: h(
            'div',
            {
              innerHTML: t('permission.dataPermissionParameters.adminPermissionHelp'),
            },
            [],
          ),
        },
        fieldProps: {
          // checkedChildren: '是',
        },
      },
    ]);

    const [formRef, props, methods] = useForm(
      {
        beforeSetData: (type, props) => {
          if (type === 'config') {
            const _props: any = {
              layout: 'horizontal',
              submitter: {
                isQuery: true,
                showResetButton: false,
                showSubmitButton: false,
                showAdvancedButton: false,
                showActionButtonGroup: true,
                actionButtonGroupPosition: 'top',
              },
              column: 3,
              labelCol: { span: 8 }, //标签
              wrapperCol: { span: 20 },
              // title: '权限策略参数',
              schemas: schemasParams,
              model: { objPermission: true, flowPermission: true, noRulePermission: true },
              // model: formInitData.value,
            };

            methods?.setProps(_props, props);
          }
          return props;
        },
        immediate: true,
      },
      '',
      '',
      {},
    );

    const [menuRef, menuProps, { getRowMenu }] = useButtonGroup({
      checkPermission: false,
      sortRule: 'default',
      pageName: 'DataPermissionParameters',
      dataSourceApi: {
        url: commonApi().studioCache.getMetaInfo.url,
        params: {
          ...commonApi().studioCache.getMetaInfo.params,
          ...{
            type: 'menuv2',
            name: 'P_SYS_DATAPER_GLOBALPARAM_MENU', //commonParams.value?.menuName,
          },
        },
        method: commonApi().studioCache.getMetaInfo.method,
      },
    });
    const reset = () => {
      getInitData();
    };

    const saveData = () => {
      const formData = formRef.value.getData();
      const saveFormData = JSON.parse(JSON.stringify(formInitData.value));
      saveFormData.forEach(element => {
        element.eid = element.EID;
        element.paramValue = formData[element.ECODE];
      });
      const params = {
        lang: commonParams.value?.lang,
        connect: commonParams.value?.connect,
        companyId: commonParams.value?.companyId,
        dataPerGlobalParamData: saveFormData,
      };
      saveDataFun(params).then(result => {
        if (result.code == 200) {
          message.success(result.msg);
        }
      });
    };
    const saveDataFun = async params => {
      const data = await useHttp({
        url: '/api/dataperservice/dataPerGlobalParamService/saveDataPerGlobalParam',
        method: 'post',
        params: params,
      });
      return data;
    };
    return {
      t,
      commonParams,
      formRef,
      props,
      methods,
      stepStyle: {
        marginBottom: '60px',
        boxShadow: '0px -1px 0 0 #e8e8e8 inset',
      },
      stepItemStyle: {
        height: '60px',
        marginLeft: '6px',
        fontSize: '14px',
      },
      menuProps,
      reset,
      saveData,
    };
  },
});
</script>

<style scoped lang="less">
@import '@/theme/default/variables.less';
.bottom {
  .data-permission-determine {
    :deep(.ant-steps-vertical) {
      .ant-steps-item {
        .ant-steps-item-container {
          .ant-steps-item-content {
            .ant-steps-item-title {
              float: left;
              color: #333;
              font-weight: 400;
              font-size: 14px;
            }
            .ant-steps-item-description {
              padding-top: 6px;
              color: #333;
              font-weight: 500;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot {
  background: @modal-formgroup-color;
}
.platform-dict-title {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  line-height: 20px;
  &::before {
    content: '';
    width: 3px;
    height: 16px;
    background: @modal-formgroup-color;
    margin-right: 5px;
    display: inline-block;
  }
}
.data-permission-divider {
  margin: 16px 0 !important;
}
.progress-description {
  margin-top: -20px;
  margin-left: 30px;
  color: #666;
  line-height: 30px;
  font-size: 14px;
}
:deep(.data-permission-determine) {
  .ant-steps-vertical {
    .ant-steps-icon-dot {
      width: 12px;
      height: 12px;
      background: @white;
      border: 1px solid @modal-formgroup-color;
    }
    .ant-steps-item .ant-steps-item-tail::after {
      background-color: transparent;
      border-right: 1px #e9e9e9 dashed;
      margin-left: 15px;
    }
  }
}
.top {
  :deep(.hoteam-b-form .ant-row-start) {
    justify-content: space-between;
    .form-help-icon {
      color: rgba(0, 0, 0, 0.65);
    }
  }
  :deep(.hoteam-b-form-col-item.hoteam-b-form-col-item-last-one) {
    flex: inherit !important;
    .ant-form-item-label {
      width: auto !important;
      flex: inherit;
      max-width: 100% !important;
      margin-right: 22px !important;
    }
  }
}
</style>
