<template>
  <div class="check-renant-wrap">
    <span>
      <div class="red-line"></div>
      {{ t('tenant.tenantManagement.checkOrCreateOrEditTenant.baseTitle') }}
    </span>

    <h-b-form
      ref="formRef"
      name="sub"
      v-bind="formProps2"
      class="hoteam-b-description-form platform-b-description-form"
      :is-query="false"
    ></h-b-form>

    <h-divider dashed></h-divider>
    <span class="check-renant-userInfo-title">
      <div class="red-line"></div>
      {{ t('tenant.tenantManagement.checkOrCreateOrEditTenant.manageTitle') }}
    </span>
    <table border="1" class="check-renant-userInfo-table">
      <tr>
        <th>{{ t('tenant.tenantManagement.checkOrCreateOrEditTenant.eid') }}</th>
        <th>{{ t('tenant.tenantManagement.checkOrCreateOrEditTenant.username') }}</th>
        <th>{{ t('tenant.tenantManagement.checkOrCreateOrEditTenant.password') }}</th>
      </tr>
      <tr v-for="(user, index) in dynamicValidateForm.users" :key="index">
        <td>{{ index + 1 }}</td>
        <td>{{ user.username }}</td>
        <td>{{ user.password }}</td>
      </tr>
    </table>
    <!-- <h-divider dashed></h-divider> -->
    <span class="check-renant-function-title">
      <div class="red-line"></div>
      {{ t('tenant.tenantManagement.checkOrCreateOrEditTenant.openApp') }}
    </span>
    <h-table
      :columns="columns"
      :scroll="{ y: 400 }"
      :pagination="false"
      :data-source="tableList"
      bordered
      stripe
      summary-fixed
    ></h-table>
    <!-- <h-row
      :gutter="24"
      style="
        border-top: 1px solid #e8e8e8;
        padding-top: 10px;
        margin-left: -24px;
        margin-right: -24px;
      "
    >
      <h-col :span="24" class="modal-diy-btn" style="text-align: right; padding-right: 24px">
        <h-button type="primary" @click.prevent="onClick">{{ t('tenant.common.cancel') }}</h-button>
      </h-col>
    </h-row> -->
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from 'vue';
import { useHttp } from '@crami/http';
import { Form, HModal } from '@crami/ui';
import { useI18n } from '@crami/locale';
import { useForm as _useForm } from '@crami/bui-platform';

interface FormState {
  ENAME: string;
  ECODE: string;
  SYSTEMUSERID: string;
  MAXUSERCOUNT: string;
  PHONECODE: string;
}
interface User {
  username: string;
  password: string;
  eid: string;
}

/**控件对外数据*/
const formProps = {
  componentProps: {
    type: Object,
  },
};
const useForm = Form.useForm;
export default defineComponent({
  name: 'CheckRenant',
  props: formProps,
  setup: (props, { emit }) => {
    const { t } = useI18n();
    const initEid = props.componentProps.params.getDataParams.ObjectID || '';
    const dynamicValidateForm = reactive<{ users: User[] }>({
      users: [],
    });
    const formState = reactive<FormState>({
      ENAME: '',
      ECODE: '',
      SYSTEMUSERID: '',
      MAXUSERCOUNT: '',
      PHONECODE: '',
    });

    const schemasData = reactive([
      {
        dataIndex: 'ENAME',
        title: t('tenant.tenantManagement.checkOrCreateOrEditTenant.tenantName'),
        valueType: 'Input',
        width: '50%',
        formItemProps: {
          labelCol: { style: { width: '100px' } },
        },
      },
      {
        dataIndex: 'ECODE',
        title: t('tenant.tenantManagement.checkOrCreateOrEditTenant.tenantNum'),
        valueType: 'Input',
        width: '50%',
        formItemProps: {
          labelCol: { style: { width: '100px' } },
        },
      },
      {
        dataIndex: 'SYSTEMUSERID',
        title: t('tenant.tenantManagement.checkOrCreateOrEditTenant.contacts'),
        valueType: 'Input',
        width: '50%',
        formItemProps: {
          labelCol: { style: { width: '100px' } },
        },
      },
      {
        dataIndex: 'MAXUSERCOUNT',
        title: t('tenant.tenantManagement.checkOrCreateOrEditTenant.userCap'),
        valueType: 'Input',
        width: '50%',
        formItemProps: {
          labelCol: { style: { width: '100px' } },
        },
      },
      {
        dataIndex: 'PHONECODE',
        title: t('tenant.tenantManagement.checkOrCreateOrEditTenant.phone'),
        valueType: 'Input',
        width: '50%',
        formItemProps: {
          labelCol: { style: { width: '100px' } },
        },
      },
    ]);

    const [formRef, formProps2, 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 formRules = reactive({
      ENAME: [
        {
          required: true,
          message: t('tenant.tenantManagement.checkOrCreateOrEditTenant.nameLengthRule'),
          pattern: /^[\s\S]{0,50}$/,
          trigger: 'blur',
        },
      ],
      ECODE: [
        {
          required: true,
          pattern: /^[A-Za-z0-9]{0,50}$/,
          message: t('tenant.tenantManagement.checkOrCreateOrEditTenant.ecodeRule'),
          trigger: 'blur',
        },
      ],
      SYSTEMUSERID: [
        {
          pattern: /^([\s\S]{0,50})?$/,
          message: t('tenant.tenantManagement.checkOrCreateOrEditTenant.systemuserIdRule'),
          trigger: 'blur',
        },
      ],
      MAXUSERCOUNT: [
        {
          required: true,
          pattern: /^[0-9]{0,5}$/,
          message: t('tenant.tenantManagement.checkOrCreateOrEditTenant.maxusercountRule'),
          trigger: 'blur',
        },
      ],
      PHONECODE: [
        {
          pattern: /^0?(13|14|15|16|17|18|19)[0-9]{9}$/,
          message: t('tenant.tenantManagement.checkOrCreateOrEditTenant.phoneRule'),
          trigger: 'change',
        },
      ],
    });
    const formValidate = useForm(formState, formRules);
    const tableList = ref([]);
    const columns = reactive([
      {
        title: t('tenant.tenantManagement.checkOrCreateOrEditTenant.appname'),
        dataIndex: 'APPLICATION_NAME',
      },
      {
        title: t('tenant.tenantManagement.checkOrCreateOrEditTenant.term'),
        dataIndex: 'EXPIRETIME',
      },
    ]);

    const openData = reactive({
      text: t('tenant.tenantManagement.checkOrCreateOrEditTenant.openApp'),
      title: 'title',
    });

    const getUserInfo = async () => {
      const result = await useHttp({
        url: '/api/system/tenant/getOneInfo',
        method: 'post',
        params: {
          EID: initEid,
        },
      });
      const appData = result.data.data['appData'];
      const userData = result.data.data['userData'];
      const tenantData = result.data.data['tenantData'];
      Object.assign(formState, tenantData);
      methodsSub.setData(Object.assign({}, formState, { PHONECODE: formState.PHONECODE || '无' }));
      tableList.value.length = 0;
      for (let i = 0; i < appData.length; i++) {
        let item = appData[i];
        item['key'] = i;
        // 只展示年月日
        item['EXPIRETIME'] = item['EXPIRETIME'].slice(0, 10);
        tableList.value.push(item);
      }
      tableList.value = [].concat(tableList.value);

      if (userData.length > 0) {
        dynamicValidateForm.users.length = 0;
        for (let i = 0; i < userData.length; i++) {
          const item = userData[i];
          const user = {
            username: item.USER_NAME,
            password: '',
            eid: '',
          };
          dynamicValidateForm.users.push(user);
        }
      }
    };

    onMounted(() => {
      getUserInfo();
    });

    const ok = () => {
      // emit('end', { success: true, msg: '' });
      HModal.destroyAll();
    };

    return {
      t,
      formValidate,
      formState,
      openData,
      dynamicValidateForm,
      columns,
      tableList,
      ok,

      formRef,
      formProps2,
    };
  },
});
</script>

<style lang="less" scoped>
@import '@/theme/default/variables.less';

.title {
  font-size: 16px;
  font-weight: bold;
  color: black;
  margin-bottom: 10px;
}
.margin-t-10 {
  margin-top: 10px;
}
.base-form {
  margin-top: 10px;
}
.manage-info {
  margin-top: 10px;
  .manage-container {
    margin-top: 14px;
    .manage-box {
      margin-bottom: 10px;
    }
  }
}
.open-info {
  margin-top: 14px;
  margin-bottom: 20px;
  :deep(.open-grid) {
    margin-top: 10px;
  }
}
.submit-parent {
  position: relative;
  height: 40px;
  .submit {
    position: absolute;
    right: 8px;
    bottom: 0px;
  }
}
// 表格样式
.check-renant-baseInfo-table {
  width: 100%;
  height: 240px;
  border-collapse: separate;
  border-spacing: 0;
  td {
    border: 1px solid #d9d9d9;
    border-bottom: none;
  }
  th {
    border: 1px solid #d9d9d9;
    border-bottom: none;
  }
  tr th:first-child {
    border-right: none;
  }
  tr td:first-child {
    border-right: none;
  }

  tr:last-child td:last-child {
    border: 1px solid #d9d9d9;
  }
  tr:last-child td:nth-last-child(2) {
    border: 1px solid #d9d9d9;
    border-right: none;
  }

  tr:first-child th:first-child {
    border-top-left-radius: 4px;
  }
  tr:first-child th:last-child {
    border-top-right-radius: 4px;
  }
  tr:last-child td:last-child {
    border-bottom-right-radius: 4px;
  }
  tr:last-child td:first-child {
    border-bottom-left-radius: 4px;
  }
}
.check-renant-baseInfo-table tr:nth-child(odd) {
  background-color: #f5f6f7;
}
.check-renant-userInfo-table {
  width: 100%;
  // height: 240px;
  border: 1px solid white;
}
.check-renant-userInfo-table tr:nth-child(odd) {
  background-color: rgba(245, 246, 247, 1);
}
.check-renant-wrap {
  th {
    padding-left: 10px;
  }
  td {
    padding-left: 10px;
  }
  .red-line {
    width: 4px;
    height: 12px;
    background: linear-gradient(180deg, #f55448 0%, #ff8076 100%);
    float: left;
    margin-top: 7px;
    margin-right: 7px;
  }
  //标题样式
  span {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #333333;
  }
  .check-renant-userInfo-title {
    margin-top: 14px;
  }
  .check-renant-function-title {
    margin-top: 14px;
  }
  .modal-diy-btn {
    margin-top: 7px;
  }
}
</style>
