<script setup lang="ts">
import useStore from '@/stores';
import { reactive, ref, computed, onMounted } from 'vue';
import { traduction } from '@/utils/language';
import { RULE_NAME } from '@/model/special-str';
import { IRule } from '@/model/Service/vnc-interface';
import GlobalStoreService from '@/services/gloabal-store-service';
import { getLoginRulesData, editRule } from './login-rules.server';
import { showElMessage, compareObjectEqual, deepClone } from '@/utils/utils';
import { selfTimeValid, ipValid, macValid } from './LoginRulesFunctions';
import { ITableColumns, ISensorsTable, ITableRow } from '@/model/base-interface';
import { UserPrivil } from '@/model/base-enum';
import { checkPrivil } from '@/apps/app-bmc/router/routes';
import { getSecurityInfo } from '@/services/security-enhance.service';

import Dialog from '@/components/Dialog/Dialog.vue';
import HelpIcon from '@/components/HelpIcon/HelpIcon.vue';
import ErrorIcon from '@/components/ErrorIcon/ErrorIcon.vue';
import TableNoData from '@/components/TableNoData/TableNoData.vue';
import ClearableIcon from '@/components/ClearableIcon/ClearableIcon.vue';

const tdClass = 'vertical-align-top-column';
const dialog = ref();
const store = useStore();
const errorMsg = traduction('COMMON_FAILED');
const successMsg = traduction('COMMON_SUCCESS');
const globalStoreService = new GlobalStoreService();
const isEmergencyLoginUser = ref();

// 权限
const securityConfig = checkPrivil(UserPrivil.securityConfig);
// 锁定状态
const isSystemLock = computed(() => {
  return store.state.glob.systemLocked;
});

const columns: ITableColumns[] = [
  {
    title: 'COMMON_NAME',
    width: '10%',
    content: 'ruleName',
  },
  {
    title: 'SECURITY_PERIOD',
    width: '30%',
    iconTip: 'SECURITY_TIME_SEGMENT_SUPPORTED',
    id: 'configureUserCheckbox',
    content: 'time',
  },
  {
    title: 'SECURITY_IP_SEGMENT',
    width: '20%',
    iconTip: 'SECURITY_IP_SEGMENT_SUPPORTED',
    id: 'configureComponents',
    content: 'IP',
  },
  {
    title: 'SECURITY_MAC_SEGMENT',
    width: '20%',
    iconTip: 'SECURITY_MAC_SEGMENT_SUPPORTED',
    content: 'mac',
    id: 'oemKvm',
  },
  {
    title: 'STATUS',
    width: '10%',
    content: 'ruleEnabled',
    id: 'oemVmm',
  },
  {
    title: 'COMMON_OPERATE',
    width: '10%',
    content: 'operation',
    id: 'oemSecurityMgmt',
  },
];

let dataList: ISensorsTable[] = [];
const tableData: ISensorsTable[] = reactive([]);
const formRefObjs: any = reactive({});

let total = ref(0);
let pageSize = ref(10);
let currentPage = ref(1);
let editItem: any[] = reactive([]);
// 点击保存的数据在列表中的序号
let saveIndex: number = -1;

// 点击编辑的数据行序号
let editIndex: number = -1;

// 设置时间输入框的的ref对象
function setTimeFormRef(el: any) {
  if (!formRefObjs[editIndex]) {
    formRefObjs[editIndex] = {};
  }
  formRefObjs[editIndex]['time'] = el;
}

// 设置IP输入框的的ref对象
function setIpFormRef(el: any) {
  if (!formRefObjs[editIndex]) {
    formRefObjs[editIndex] = {};
  }
  formRefObjs[editIndex]['IP'] = el;
}

// 设置mac输入框的的ref对象
function setMacFormRef(el: any) {
  if (!formRefObjs[editIndex]) {
    formRefObjs[editIndex] = {};
  }
  formRefObjs[editIndex]['mac'] = el;
}

function getData() {
  tableData.splice(0);

  // 如果请求过最新数据（为什么是最新：因为这里有编辑操作），那么不再发送请求，直接对现有请求数据做重新组合
  if (dataList.length > 0) {
    initShowData(dataList);
    return;
  }

  globalStoreService.setValue('isLoading', true);
  getLoginRulesData()
    .then((data: any) => {
      globalStoreService.setValue('isLoading', false);
      if (data && data.Members) {
        total.value = data.Count;
        initShowData(data.Members);
      }
    })
    .catch(() => {
      globalStoreService.setValue('isLoading', false);
    });
}

function getRules(tableItem: any) {
  return {
    startTime: {
      trigger: 'blur',
      iconTip: traduction('SECURITY_TIME_SEGMENT_SUPPORTED'),
      validator: (rule: IRule, val: string, callback: any) => {
        return selfTimeValid(true, tableItem, val, callback);
      },
    },
    endTime: {
      trigger: 'blur',
      iconTip: traduction('SECURITY_TIME_SEGMENT_SUPPORTED'),
      validator: (rule: IRule, val: string, callback: any) => {
        return selfTimeValid(false, tableItem, val, callback);
      },
    },
    IP: {
      trigger: 'blur',
      iconTip: traduction('SECURITY_IP_SEGMENT_SUPPORTED'),
      validator: (rule: IRule, val: string, callback: any) => {
        return ipValid(val, callback);
      },
    },
    mac: {
      trigger: 'blur',
      iconTip: traduction('SECURITY_MAC_SEGMENT_SUPPORTED'),
      validator: (rule: IRule, val: string, callback: any) => {
        return macValid(val, callback);
      },
    },
  };
}

function initItem(item: any) {
  return {
    memberId: item.ID,
    ruleName: RULE_NAME[item.ID],
    startTime: item.StartTime || '',
    endTime: item.EndTime || '',
    isEdit: false,
    IP: item.IP,
    mac: item.Mac,
    ruleEnabled: item.Status,
    offLabel: 'OFF',
    onLabel: 'ON',
    disable: false,
    // 是否可以点击保存
    canSave: false,
    // 校验结果
    validateResult: {
      startTime: true,
      endTime: true,
      IP: true,
      mac: true,
    },
    // focus状态
    focusState: {
      startTime: false,
      endTime: false,
      IP: false,
      mac: false,
    },
    // 校验规则
    rules: null,
  };
}

// 加工展示数据
function initShowData(list: any[]) {
  if (dataList.length === 0) {
    dataList = JSON.parse(JSON.stringify(list));
  }
  const transformedData: ITableRow[] = [];
  if (list && typeof list === 'object' && list instanceof Array) {
    for (let index = 0; index < list.length; index++) {
      const item = list[index];
      const tableItem: any = initItem(item);

      tableItem.rules = getRules(tableItem);

      transformedData.push(tableItem);
    }
  }

  const showList = transformedData.slice(
    (currentPage.value - 1) * pageSize.value,
    currentPage.value * pageSize.value,
  );
  tableData.push(...showList);
}

// 点击编辑、保存、取消
function action(item: any, state: boolean, index: number, type?: string) {
  if (isSystemLock.value || !securityConfig) {
    return;
  }

  // 点击编辑、取消
  if (!type) {
    if (state) {
      editIndex = index;
      // 这里不能使用JSON.parse(JSON.stringify()),因为数据中有函数，如果使用，就会丢失函数，只会得到undefined
      editItem[index] = deepClone(item);
    } else {
      Object.assign(item, editItem[index]);
    }
    item.isEdit = state;
    setTrStyle(state, index);
  } else if (item.canSave) {
    // 点击保存
    saveIndex = index;
    dialog.value.show();
  }
}

// 编辑或者取消的时候增删类名来修改当前行的td的padding
function setTrStyle(state: boolean, index: number) {
  const tdList = document.querySelectorAll('.' + tdClass);
  // 查找当前表格的tr，防止获取的是其他不相干的tr
  let arr: any = [];
  tdList.forEach((item: any) => {
    let aim: any = item.parentNode;
    let flag = true;
    for (let i = 0; i < arr.length; i++) {
      if (aim === arr[i]) {
        flag = false;
        break;
      }
    }

    if (flag) {
      arr.push(aim);
    }
  });

  // 第一个是表头的tr，所以这里+1
  const aimTr = arr[index + 1];
  if (aimTr) {
    // 编辑的时候添加类名
    if (state) {
      aimTr.classList.add('edit-tr');
    } else {
      aimTr.classList.remove('edit-tr');
    }
  }
}

// 确认修改
function sureSetting(flag: boolean) {
  if (flag) {
    globalStoreService.setValue('isLoading', true);
    const row = tableData[saveIndex];
    editRule({
      ID: row.memberId,
      Status: row.ruleEnabled,
      IP: row.IP || '',
      Mac: row.mac || '',
      StartTime: row.startTime || '',
      EndTime: row.endTime || '',
    })
      .then(() => {
        // 初始化编辑状态和可保存状态
        row.isEdit = false;
        row.canSave = false;
        // 取消编辑状态的时候需要设置当前行的样式
        setTrStyle(false, saveIndex);
        dialog.value.hide();
        globalStoreService.setValue('isLoading', false);
        showElMessage('success', successMsg);
      })
      .catch(() => {
        globalStoreService.setValue('isLoading', false);
        dialog.value.hide();
        showElMessage('error', errorMsg);
      });
  } else {
    dialog.value.hide();
  }
}

// 设置保存按钮的可选状态
function setBtnStyle(item: any, index: number) {
  const { validateResult } = item;
  // 如果当前有处于校验失败的，那么该项数据的保存状态就为false
  for (let key in validateResult) {
    if (!validateResult[key]) {
      item.canSave = false;
      return;
    }
  }

  // 如果开始时间和结束时间只有一个, 或者不为空时相等
  if (
    (item.startTime && !item.endTime) ||
    (!item.startTime && item.endTime) ||
    (item.startTime === item.endTime && item.endTime)
  ) {
    item.canSave = false;
    return;
  }

  const exclusionsKeys = ['isEdit', 'canSave', 'validateResult', 'rules', 'focusState'];
  item.canSave = !compareObjectEqual(item, editItem[index], exclusionsKeys);
}

// 输入框/开关 发生修改
function input(item: any, key: string, index: number, value: string) {
  item[key] = value;
  /**
   * 调用校验方法校验数据是否能通过，因为当前校验方式是blur，在input事件触发时不会触发校验，
   * 但是为了在输入的时候控制保存按钮的状态，所以这里需要手动去触发校验函数获取校验结果，进而控制保存按钮状态
   * 同时，如果是时间，还需要对另外一个时间进行被动校验，
   * 状态字段除外，因为其不涉及校验
   */
  if (key !== 'ruleEnabled') {
    item.validateResult[key] = item.rules[key].validator(item.rules[key], item[key], () => {});
    validateAnotherTime(item, key, index);
  }
  setBtnStyle(item, index);
}

// 清空
function clear(row: any, key: string, index: number) {
  // 没有处于focus状态的时候，点击清空，需要手动调用一次校验
  if (!row.focusState[key]) {
    if (key === 'startTime' || key === 'endTime') {
      formRefObjs[index]['time'].validateField(key);
    } else {
      formRefObjs[index][key].validateField(key);
    }
  }
  input(row, key, index, '');
}

// 对另外一个时间进行校验
function validateAnotherTime(item: any, key: string, index: number) {
  if (
    key === 'startTime' &&
    item.validateResult.startTime &&
    item.endTime &&
    item.startTime &&
    !item.validateResult.endTime
  ) {
    formRefObjs[index]['time'].validateField('endTime');
  } else if (
    key === 'endTime' &&
    item.validateResult.endTime &&
    item.endTime &&
    item.startTime &&
    !item.validateResult.startTime
  ) {
    formRefObjs[index]['time'].validateField('startTime');
  }
}

// 检查是否存在逃生用户
function init() {
  getSecurityInfo().then(res => {
    isEmergencyLoginUser.value = res.EmergencyLoginUser ? true :false;
  });
}
 
onMounted(() => {
  init();
});
 

// 校验时
function validate(index: number) {
  const fn = (key: string, value: boolean) => {
    tableData[index].validateResult[key] = value;
    setBtnStyle(tableData[index], index);
  };
  return { action: fn };
}

function handleSizeChange(val: number) {
  pageSize.value = val;
  getData();
}

function handleCurrentChange(val: number) {
  getData();
}

getData();
</script>

<template>
  <div id="loginRule" class="permission-management-box">
    <div class="content">
      <el-table v-addId.table="'loginRuleTable'" :data="tableData" border resizable>
        <el-table-column
          v-for="(item, index) in columns"
          :key="index"
          :min-width="item.width"
          :prop="item.content"
          :label="$t(item.title)"
          :class-name="tdClass"
        >
          <template #header>
            <span class="header-text-icon-box">
              <span class="text">{{ $t(item.title) }}</span>
              <HelpIcon
                v-if="item.iconTip"
                :placement="'right'"
                :append-to-body="true"
                :tips="$t(item.iconTip)"
                :pop-class="'wrap-el-popper'"
              >
                <!-- eslint-disable-next-line vue/no-v-html --> 
                <span v-html="$t(item.iconTip)"></span>
              </HelpIcon>
            </span>
          </template>

          <template v-if="tableData.length > 0" #default="scope">
            <!-- 名称 -->
            <span
              v-if="item.content === 'ruleName'"
              :class="scope.row.isEdit ? 'text-h32' : 'text-h23'"
            >
              {{ $t(scope.row.ruleName) }}
            </span>

            <!-- 时间段 -->
            <div
              v-else-if="item.content === 'time'"
              :id="'timeBox' + scope.row.memberId"
              class="state-value"
              :class="scope.row.isEdit ? 'text-h32' : 'text-h23'"
            >
              <span v-if="!scope.row.isEdit">
                <span :id="'startTime' + scope.$index">{{ scope.row.startTime }}</span>
                <span v-if="scope.row.startTime && scope.row.endTime" class="to">
                  {{ $t('COMMON_SPLIT_TIME') }}
                </span>
                <span :id="'endTime' + scope.$index">{{ scope.row.endTime }}</span>
              </span>

              <span v-if="scope.row.isEdit" class="time-box">
                <el-form
                  :ref="setTimeFormRef"
                  :model="scope.row"
                  :rules="scope.row.rules"
                  label-width="0"
                  :validate-on-rule-change="false"
                  @validate="validate(scope.$index).action"
                >
                  <el-form-item prop="startTime">
                    <el-popover
                      v-model:visible="scope.row.focusState.startTime"
                      popper-class="wrap-el-popper"
                      placement="top"
                      width="264px"
                      :content="scope.row.rules.startTime.iconTip"
                      trigger="focus"
                      trigger-keys
                    >
                      <template #reference>
                        <el-input
                          v-model="scope.row.startTime"
                          v-addId.input="'ruleStartTime' + scope.$index"
                          v-clearable
                          clearable
                          type="text"
                          @focus="scope.row.focusState.startTime = true"
                          @blur="scope.row.focusState.startTime = false"
                          @input="input(scope.row, 'startTime', scope.$index, $event)"
                          @clear="clear(scope.row, 'startTime', scope.$index)"
                        >
                          <template #suffix>
                            <ErrorIcon />
                            <ClearableIcon />
                          </template>
                        </el-input>
                      </template>
                    </el-popover>
                  </el-form-item>

                  <span class="to">{{ $t('COMMON_SPLIT_TIME') }}</span>

                  <el-form-item prop="endTime">
                    <el-popover
                      v-model:visible="scope.row.focusState.endTime"
                      popper-class="wrap-el-popper"
                      placement="top"
                      width="264px"
                      :content="scope.row.rules.endTime.iconTip"
                      trigger="focus"
                      trigger-keys
                    >
                      <template #reference>
                        <el-input
                          v-model="scope.row.endTime"
                          v-addId.input="'ruleEndTime' + scope.$index"
                          v-clearable
                          clearable
                          type="text"
                          @focus="scope.row.focusState.endTime = true"
                          @blur="scope.row.focusState.endTime = false"
                          @input="input(scope.row, 'endTime', scope.$index, $event)"
                          @clear="clear(scope.row, 'endTime', scope.$index)"
                        >
                          <template #suffix>
                            <ErrorIcon />
                            <ClearableIcon />
                          </template>
                        </el-input>
                      </template>
                    </el-popover>
                  </el-form-item>
                </el-form>
              </span>
            </div>

            <!-- IP段 -->
            <div
              v-else-if="item.content === 'IP'"
              class="state-value"
              :class="scope.row.isEdit ? 'text-h32' : 'text-h23'"
            >
              <span v-if="!scope.row.isEdit" :id="'ip' + scope.$index">
                {{ scope.row.IP }}
              </span>

              <el-form
                v-if="scope.row.isEdit"
                :ref="setIpFormRef"
                :model="scope.row"
                :rules="scope.row.rules"
                label-width="0"
                :validate-on-rule-change="false"
                @validate="validate(scope.$index).action"
              >
                <el-form-item prop="IP">
                  <el-popover
                    v-model:visible="scope.row.focusState.IP"
                    popper-class="wrap-el-popper"
                    placement="top"
                    width="380px"
                    trigger="focus"
                    trigger-keys
                  >
                    <!-- eslint-disable-next-line vue/no-v-html -->
                    <span v-html="$t(scope.row.rules.IP.iconTip)"></span>
                    <template #reference>
                      <el-input
                        v-model="scope.row.IP"
                        v-addId.input="'ruleIp' + scope.$index"
                        v-clearable
                        clearable
                        type="text"
                        @focus="scope.row.focusState.IP = true"
                        @blur="scope.row.focusState.IP = false"
                        @input="input(scope.row, 'IP', scope.$index, $event)"
                        @clear="clear(scope.row, 'IP', scope.$index)"
                      >
                        <template #suffix>
                          <ErrorIcon />
                          <ClearableIcon />
                        </template>
                      </el-input>
                    </template>
                  </el-popover>
                </el-form-item>
              </el-form>
            </div>

            <!-- MAC段 -->
            <span
              v-else-if="item.content === 'mac'"
              class="state-value"
              :class="scope.row.isEdit ? 'text-h32' : 'text-h23'"
            >
              <span v-if="!scope.row.isEdit" :id="'mac' + scope.$index">
                {{ scope.row.mac }}
              </span>

              <el-form
                v-if="scope.row.isEdit"
                :ref="setMacFormRef"
                :model="scope.row"
                :rules="scope.row.rules"
                label-width="0"
                :validate-on-rule-change="false"
                @validate="validate(scope.$index).action"
              >
                <el-form-item prop="mac">
                  <el-popover
                    v-model:visible="scope.row.focusState.mac"
                    popper-class="wrap-el-popper"
                    placement="top"
                    width="264px"
                    :content="scope.row.rules.mac.iconTip"
                    trigger="focus"
                    trigger-keys
                  >
                    <template #reference>
                      <el-input
                        v-model="scope.row.mac"
                        v-addId.input="'ruleMac' + scope.$index"
                        v-clearable
                        clearable
                        type="text"
                        @focus="scope.row.focusState.mac = true"
                        @blur="scope.row.focusState.mac = false"
                        @input="input(scope.row, 'mac', scope.$index, $event)"
                        @clear="clear(scope.row, 'mac', scope.$index)"
                      >
                        <template #suffix>
                          <ErrorIcon />
                          <ClearableIcon />
                        </template>
                      </el-input>
                    </template>
                  </el-popover>
                </el-form-item>
              </el-form>
            </span>

            <!-- 状态 -->
            <span
              v-else-if="item.content === 'ruleEnabled'"
              class="state-value"
              :class="scope.row.isEdit ? 'text-h32' : 'text-h23'"
            >
              <!-- tag -->
              <el-tag
                v-if="!scope.row.isEdit"
                :id="'ruleEnabled' + scope.$index"
                size="small"
                :type="scope.row.ruleEnabled ? 'success' : 'info'"
              >
                {{ scope.row.ruleEnabled ? $t('SERVICE_ENABLED') : $t('SERVICE_DISABLED') }}
              </el-tag>
              <!-- 开关 -->
              <el-switch
                v-if="scope.row.isEdit"
                :id="'ruleSwitch' + scope.$index"
                v-model="scope.row.ruleEnabled"
                @change="input(scope.row, 'ruleEnabled', scope.$index, $event)"
              />
            </span>

            <!-- 操作 -->
            <span
              v-else-if="item.content === 'operation'"
              class="operation"
              :class="scope.row.isEdit ? 'text-h32' : 'text-h23'"
            >
              <!-- 编辑 -->
              <span
                v-if="!scope.row.isEdit"
                :id="'ruleEdit' + scope.$index"
                :class="['btn', !securityConfig || isSystemLock ? 'disabled-btn' : '']"
                @click="action(scope.row, true, scope.$index)"
              >
                {{ !scope.row.MySession ? $t('COMMON_EDIT') : '' }}
              </span>
              <span class="save-cancel-box">
                <!-- 保存 -->
                <span
                  v-if="scope.row.isEdit"
                  :id="'ruleSave' + scope.$index"
                  :class="['btn', scope.row.canSave ? '' : 'disabled-btn']"
                  @click="action(scope.row, false, scope.$index, 'save')"
                >
                  {{ !scope.row.MySession ? $t('COMMON_SAVE') : '' }}
                </span>
                <!-- 取消 -->
                <span
                  v-if="scope.row.isEdit"
                  :id="'ruleCancel' + scope.$index"
                  class="btn cancel"
                  @click="action(scope.row, false, scope.$index)"
                >
                  {{ !scope.row.MySession ? $t('COMMON_CANCEL') : '' }}
                </span>
              </span>
            </span>
          </template>
        </el-table-column>
        <template #empty>
          <TableNoData />
        </template>
      </el-table>

      <!-- 点击保存的弹窗 -->
      <!-- 点击注销的弹窗 -->
      <Dialog
        ref="dialog"
        :config="{
          title: traduction('COMMON_INFORMATION'),
          content: isEmergencyLoginUser ? traduction('VALIDATOR_URGENT_USER') : traduction('VALIDATOR_NO_URGENT_USER')
        }"
        @close="sureSetting"
      />
    </div>

    <el-pagination
      v-model:currentPage="currentPage"
      v-addId.pagination="'loginRulesPagination'"
      :page-sizes="[10, 15, 30, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style lang="scss" scoped>
.permission-management-box {
  flex: 1;
  padding: 16px;
  background-color: var(--o-bg-color-base);
  border-radius: 0 4px 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .content {
    padding-bottom: 16px;
    flex: 1;
    position: relative;

    .state-value {
      display: flex;
      align-items: center;

      .to {
        margin: 0 4px;
      }

      :deep(.el-icon) {
        font-size: 16px;
      }
    }

    :deep(.header-text-icon-box) {
      display: flex;
      align-items: center;

      .text {
        margin-right: 4px;
      }
    }

    .icon-help {
      display: inline-block;
      height: 16px;
      width: 16px;
      font-size: 16px;
      cursor: pointer;
      &:hover::before {
        color: $APP-COLOR-HOVER !important;
      }
    }

    .operation {
      .btn {
        cursor: pointer;
        color: var(--o-color-primary);

        &:hover {
          color: var(--o-color-primary-secondary);
        }
      }

      .disabled-btn {
        cursor: not-allowed;
        color: var(--o-text-color-tertiary);
      }

      .cancel {
        margin-left: 8px;
      }
    }

    .dialog-title {
      display: flex;
      align-items: center;
      .title-text {
        font-size: 16px;
        line-height: 24px;
        font-weight: 900;
      }
      :deep(.el-icon) {
        margin-right: 5px;
        font-size: 18px;
      }
    }

    :deep(.el-table--border) {
      padding-top: 0;

      .el-input__prefix-inner,
      .el-input__suffix-inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .el-table__body-wrapper {
        .vertical-align-top-column {
          vertical-align: top;

          .text-h23 {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
          }

          .text-h32 {
            min-height: 32px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;

            .el-form-item__error {
              padding-bottom: 0;
            }
          }
        }

        .edit-tr {
          td {
            padding-top: 8px;
            padding-bottom: 7px;
          }
        }
      }

      .time-box {
        display: flex;
        align-items: flex-start;

        .to {
          line-height: 32px;
        }

        .el-form {
          display: flex;
          align-items: flex-start;
        }
      }

      .el-form {
        display: flex;

        .el-form-item {
          margin-bottom: 0;

          .el-form-item__content {
            width: 200px;

            .el-form-item__error {
              position: relative;
              top: 0;
              left: 0;
              word-wrap: break-word;
            }
          }
        }
      }
    }
  }

  :deep(.el-dialog) {
    width: 432px;
  }
}
</style>
