<script setup lang="ts">
import { reactive, ref, onMounted, toRaw } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { ProModal } from 'antdv-pro-modal';
import { message, Modal, Form, notification } from 'ant-design-vue/es';
import { SizeType } from 'ant-design-vue/es/config-provider';
import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/es/table';
import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
import useNeListStore from '@/store/modules/ne_list';
import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import {
  addCBC,
  delCBC,
  listCBC,
  updateCBCStatus,
  updateCBC,
} from '@/api/cbc/cbe';
import { parseDateToStr, parseDuration } from '@/utils/date-utils';

const { t } = useI18n();

/**网元参数 */
let neOtions = ref<Record<string, any>[]>([]);

/**记录开始结束时间 */
let queryRangePicker = ref<[string, string]>(['', '']);

/**查询参数 */
let queryParams = reactive({
  /**网元ID */
  neId: undefined,
  status: undefined,
  eventName: '',
  /**记录开始时间 */
  startTime: '',
  /**记录结束时间 */
  endTime: '',
  /**排序字段 */
  sortField: 'id',
  /**排序方式 */
  sortOrder: 'asc',
  /**当前页数 */
  pageNum: 1,
  /**每页条数 */
  pageSize: 20,
});

/**查询参数重置 */
function fnQueryReset() {
  queryParams = Object.assign(queryParams, {
    eventName: '',
    status: undefined,
    sortField: 'id',
    sortOrder: 'asc',
    pageNum: 1,
    pageSize: 20,
  });
  tablePagination.current = 1;
  tablePagination.pageSize = 20;
  queryRangePicker.value = ['', ''];
  fnGetList();
}

/**表格状态类型 */
type TabeStateType = {
  /**加载等待 */
  loading: boolean;
  /**紧凑型 */
  size: SizeType;
  /**搜索栏 */
  seached: boolean;
  /**记录数据 */
  data: object[];
  /**勾选记录 */
  selectedRowKeys: (string | number)[];
};

/**表格状态 */
let tableState: TabeStateType = reactive({
  loading: false,
  size: 'small',
  seached: true,
  data: [],
  selectedRowKeys: [],
});

/**表格字段列 */
let tableColumns: ColumnsType = [
  {
    title: t('common.rowId'),
    dataIndex: 'id',
    align: 'left',
    width: 100,
  },
  {
    title: t('views.cbc.cbe.eventName'),
    dataIndex: 'messageJson',
    align: 'left',
    width: 100,
    customRender(opt) {
      const messageJson = opt.value;
      return messageJson.eventName;
    },
  },
  {
    title: t('views.cbc.cbe.repetitionPeriod'),
    dataIndex: 'messageJson',
    align: 'left',
    width: 100,
    customRender(opt) {
      const messageJson = opt.value;
      return messageJson.repetitionPeriod;
    },
  },
  {
    title: t('views.cbc.cbe.numOfBcast'),
    dataIndex: 'messageJson',
    align: 'left',
    width: 100,
    customRender(opt) {
      const messageJson = opt.value;
      return messageJson.numOfBcast;
    },
  },
  {
    title: t('views.cbc.cbe.startTime'),
    dataIndex: 'messageJson',
    align: 'left',
    width: 150,
    customRender(opt) {
      const messageJson = opt.value;
      return messageJson.startTime;
    },
  },
  {
    title: t('views.cbc.cbe.status'),
    dataIndex: 'status',
    key: 'status',
    align: 'left',
    width: 100,
  },
  {
    title: t('views.cbc.cbe.detail'),
    dataIndex: 'detail',
    align: 'center',
    width: 150,
  },

  {
    title: t('views.cbc.cbe.createdAt'),
    dataIndex: 'createdAt',
    align: 'center',
    width: 200,
    customRender(opt) {
      if (!opt.value) return '';
      return parseDateToStr(opt.value);
    },
  },
  {
    title: t('common.operate'),
    key: 'cbeId',
    width: 100,
    align: 'left',
  },
];

/**表格分页器参数 */
let tablePagination = reactive({
  /**当前页数 */
  current: 1,
  /**每页条数 */
  pageSize: 20,
  /**默认的每页条数 */
  defaultPageSize: 20,
  /**指定每页可以显示多少条 */
  pageSizeOptions: ['10', '20', '50', '100'],
  /**只有一页时是否隐藏分页器 */
  hideOnSinglePage: false,
  /**是否可以快速跳转至某页 */
  showQuickJumper: true,
  /**是否可以改变 pageSize */
  showSizeChanger: true,
  /**数据总数 */
  total: 0,
  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
  onChange: (page: number, pageSize: number) => {
    tablePagination.current = page;
    tablePagination.pageSize = pageSize;
    queryParams.pageNum = page;
    queryParams.pageSize = pageSize;
    fnGetList();
  },
});

/**表格紧凑型变更操作 */
function fnTableSize({ key }: MenuInfo) {
  tableState.size = key as SizeType;
}

/**表格分页、排序、筛选变化时触发操作, 排序方式，取值为 ascend descend */
function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) {
  const { field, order } = sorter;
  if (order) {
    queryParams.sortField = field;
    queryParams.sortOrder = order.replace('end', '');
  } else {
    queryParams.sortOrder = 'asc';
  }
  fnGetList(1);
}

/**表格多选 */
function fnTableSelectedRowKeys(keys: (string | number)[]) {
  tableState.selectedRowKeys = keys;
}

const modalStateFromOption = reactive({
  etwsJson: [
    { label: '4352(Earthquake Warning Message)', value: 4352 },
    {
      label: '4353(Tsunami Warning Message)',
      value: 4353,
    },
    {
      label: '4354(Earthquake and Tsunami combined Warning Message)',
      value: 4354,
    },
    {
      label: '4355( Test Message (UE may or may not discard this) )',
      value: 4355,
    },
    { label: '4356(Messages related to other emergency types)', value: 4356 },
    { label: '4357(Future Extension)', value: 4357 },
    { label: '4358(Future Extension)', value: 4358 },
    { label: '4359(Future Extension)', value: 4359 },
  ],
  cmasJson: [
    { label: '4370(Presidential Level Alerts)', value: 4370 },
    {
      label:
        '4371(Extreme Alerts with Severity of Extreme, Urgency of Immediate and Certainty of Observed)',
      value: 4371,
    },
    {
      label:
        '4372(Extreme Alerts with Severity of Extreme, Urgency of Immediate and Certainty of Likely)',
      value: 4372,
    },
    {
      label:
        '4373(Severe Alerts with Severity of Extreme, Urgency of Immediate and Certainty of Observed)',
      value: 4373,
    },
    {
      label:
        '4374(Severe Alerts with Severity of Extreme, Urgency of Immediate and Certainty of Likely)',
      value: 4374,
    },
    {
      label:
        '4375(Severe Alerts with Severity of Severe, Urgency of Immediate and Certainty of Observed)',
      value: 4375,
    },
    {
      label:
        '4376(Severe Alerts with Severity of Severe, Urgency of Immediate and Certainty of Likely)',
      value: 4376,
    },
    {
      label:
        '4377(Severe Alerts with Severity of Severe, Urgency of Expected and Certainty of Observed)',
      value: 4377,
    },
    {
      label:
        '4378(Severe Alerts with Severity of Severe, Urgency of Expected and Certainty of Likely)',
      value: 4378,
    },
    { label: '4379(Child Abduction Emergency (or Amber Alert) )', value: 4379 },
    { label: '4380(Required Monthly Test)', value: 4380 },
    { label: '4381(CMAS Exercise)', value: 4381 },
    { label: '4382(Operator defined use)', value: 4382 },
    { label: '4383(Future Extension)', value: 4383 },
    { label: '4384(Future Extension)', value: 4384 },
    { label: '4385(Future Extension)', value: 4385 },
    { label: '4386(Future Extension)', value: 4386 },
    { label: '4387(Future Extension)', value: 4387 },
    { label: '4388(Future Extension)', value: 4388 },
    { label: '4389(Future Extension)', value: 4389 },
    { label: '4390(Future Extension)', value: 4390 },
    { label: '4391(Future Extension)', value: 4391 },
    { label: '4392(Future Extension)', value: 4392 },
    { label: '4393(Future Extension)', value: 4393 },
    { label: '4394(Future Extension)', value: 4394 },
    { label: '4395(Future Extension)', value: 4395 },
    { label: '4396(Future Extension)', value: 4396 },
    { label: '4397(Future Extension)', value: 4397 },
    { label: '4398(Future Extension)', value: 4398 },
    { label: '4399(Future Extension)', value: 4399 },
  ],
});

/**对话框对象信息状态类型 */
type ModalStateType = {
  /**详情框是否显示 */
  openByView: boolean;
  /**新增框或修改框是否显示 */
  openByEdit: boolean;
  /**标题 */
  title: string;
  /**表单数据 */
  from: Record<string, any>;
  /**确定按钮 loading */
  confirmLoading: boolean;
  /**更新加载数据按钮 loading */
  loadDataLoading: boolean;
};

/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
  openByView: false,
  openByEdit: false,
  title: 'CBC CBE',
  from: {
    id: undefined,
    eventName: 'cmas_',
    startTime: '',
    repetitionPeriod: '',
    neId: '',

    // amDat
    numOfBcast: '',
    //messageIdProfile
    messageIdProfile: {
      msgPWSType: 'CMAS', //
      messageId: 4370,
    },

    //serialNumProfile
    serialNumProfile: {
      displayMode: 'normal',
      geoScope: 'PLMNwide',
    },

    //warningTypeProfile
    warningTypeProfile: {
      warningType: '',
      emergencyUserAlert: false,
      activatePopup: true,
    },
    warningMessageProfile: {
      language: 'English',
      warningMessageText: '',
    },
    warningAreaType: 'tai', // 'tai' | 'eutra' | 'nr' |areaID
    warningAreaList: {
      taiList: [
        {
          plmnId: { mcc: '', mnc: '' },
          tac: '',
        },
      ],
      cellIdList: [
        { plmnId: { mcc: '', mnc: '' }, eutraCellId: '', nrCellId: '' },
      ],
      eutraCellIdList: [],
      nrCellIdList: [],
      emergencyAreaIDList: [
        {
          areaId: '',
        },
      ],
    },
  },
  confirmLoading: false,
  loadDataLoading: false,
});

// TAI
function addTai() {
  modalState.from.warningAreaList.taiList.push({
    plmnId: { mcc: '', mnc: '' },
    tac: '',
  });
}
function delTai(idx: number) {
  modalState.from.warningAreaList.taiList.splice(idx, 1);
}

// EUTRA
function addEutra() {
  modalState.from.warningAreaList.eutraCellIdList.push({
    plmnId: { mcc: '', mnc: '' },
    cellId: '',
  });
}
function delEutra(idx: number) {
  modalState.from.warningAreaList.eutraCellIdList.splice(idx, 1);
}

// NR
function addNr() {
  modalState.from.warningAreaList.nrCellIdList.push({
    plmnId: { mcc: '', mnc: '' },
    cellId: '',
  });
}
function delNr(idx: number) {
  modalState.from.warningAreaList.nrCellIdList.splice(idx, 1);
}

function addCellId() {
  modalState.from.warningAreaList.cellIdList.push({
    plmnId: { mcc: '', mnc: '' },
    eutraCellId: '',
    nrCellId: '',
  });
}
function delCellId(idx: number) {
  modalState.from.warningAreaList.cellIdList.splice(idx, 1);
}

function addArea() {
  modalState.from.warningAreaList.emergencyAreaIDList.push({
    areaId: '',
  });
}
function delArea(idx: number) {
  modalState.from.warningAreaList.emergencyAreaIDList.splice(idx, 1);
}

/**
 * 对话框弹出显示为 新增或者修改
 * @param noticeId 网元id, 不传为新增
 */
function fnModalVisibleByEdit(record?: any) {
  if (!record) {
    modalStateFrom.resetFields();
    modalState.title = t('common.addText') + t('views.cbc.cbe.title');
    modalState.openByEdit = true;
  } else {
    modalStateFrom.resetFields();
    modalState.title = t('common.editText') + t('views.cbc.cbe.title');
    modalState.openByEdit = true;
    modalState.from = Object.assign(modalState.from, record.messageJson, {
      id: record.id,
      status: record.status,
      neId: record.neId,
    });
  }
}

/**对话框内表单属性和校验规则 */
const modalStateFrom = Form.useForm(
  modalState.from,
  reactive({
    eventName: [
      {
        required: true,
        message: t('views.cbc.cbe.eventName') + t('common.unableNull'),
      },
    ],
    repetitionPeriod: [
      {
        required: true,
        message: t('views.cbc.cbe.repetitionPeriod') + t('common.unableNull'),
      },
    ],
    numOfBcast: [
      {
        required: true,
        message: t('views.cbc.cbe.numOfBcast') + t('common.unableNull'),
      },
    ],
    msgPWSType: [
      {
        required: true,
        message: t('views.cbc.cbe.msgPWSType') + t('common.unableNull'),
      },
    ],
    messageId: [
      {
        required: true,
        message: t('views.cbc.cbe.messageId') + t('common.unableNull'),
      },
    ],
    emergencyUserAlert: [
      {
        required: true,
        message: t('views.cbc.cbe.emergencyUserAlert') + t('common.unableNull'),
      },
    ],
    activatePopup: [
      {
        required: true,
        message: t('views.cbc.cbe.activatePopup') + t('common.unableNull'),
      },
    ],
    // ['warningAreaList.taiList']: [
    //   {
    //     type: 'array',
    //     required: true,
    //     message: 'TAI列表不能为空',
    //   },
    //   {
    //     validator: (rule:any, value:any) => {
    //       if (!value || value.some((item:any) => !item.tac)) {
    //         return Promise.reject('TAC不能为空');
    //       }
    //       return Promise.resolve();
    //     },
    //   },
    // ],
  })
);

/**
 * 对话框弹出确认执行函数
 * 进行表达规则校验
 */
function fnModalOk() {
  // 区域列表必填校验
  const areaType = modalState.from.warningAreaType;
  const areaList = modalState.from.warningAreaList;
  let valid = true;
  let errMsg = '';
  if (areaType === 'tai') {
    if (!areaList.taiList || areaList.taiList.length === 0) {
      valid = false;
      errMsg = t('views.cbc.cbe.taiListTip');
    } else {
      for (const item of areaList.taiList) {
        if (!item.plmnId.mcc || !item.plmnId.mnc || !item.tac) {
          valid = false;
          errMsg = t('views.cbc.cbe.taiSonTip');
          break;
        }
      }
    }
  } else if (areaType === 'cell') {
    if (!areaList.cellIdList || areaList.cellIdList.length === 0) {
      valid = false;
      errMsg = t('views.cbc.cbe.cellListTip');
    } else {
      for (const item of areaList.cellIdList) {
        if (
          !item.plmnId.mcc ||
          !item.plmnId.mnc ||
          (!item.eutraCellId && !item.nrCellId)
        ) {
          valid = false;
          errMsg = t('views.cbc.cbe.cellListSonTip');
          break;
        }
      }
    }
  }
  // else if (areaType === 'eutra') {
  //   if (!areaList.eutraCellIdList || areaList.eutraCellIdList.length === 0) {
  //     valid = false;
  //     errMsg = t('views.cbc.cbe.eutraListTip');
  //   } else {
  //     for (const item of areaList.eutraCellIdList) {
  //       if (!item.plmnId.mcc || !item.plmnId.mnc || !item.cellId) {
  //         valid = false;
  //         errMsg = t('views.cbc.cbe.eutraSonTip');
  //         break;
  //       }
  //     }
  //   }
  // } else if (areaType === 'nr') {
  //   if (!areaList.nrCellIdList || areaList.nrCellIdList.length === 0) {
  //     valid = false;
  //     errMsg = t('views.cbc.cbe.nrTip');
  //   } else {
  //     for (const item of areaList.nrCellIdList) {
  //       if (!item.plmnId.mcc || !item.plmnId.mnc || !item.cellId) {
  //         valid = false;
  //         errMsg = t('views.cbc.cbe.nrSonTip');
  //         break;
  //       }
  //     }
  //   }
  // }
  else if (areaType === 'area') {
    if (
      !areaList.emergencyAreaIDList ||
      areaList.emergencyAreaIDList.length === 0
    ) {
      valid = false;
      errMsg = t('views.cbc.cbe.areaTip');
    } else {
      for (const item of areaList.emergencyAreaIDList) {
        if (!item.areaId) {
          valid = false;
          errMsg = t('views.cbc.cbe.areaSonTip');
          break;
        }
      }
    }
  }
  if (!valid) {
    message.error(errMsg, 3);
    return;
  }

  if (modalState.from.warningAreaType === 'cell') {
    // 清空原有
    modalState.from.warningAreaList.eutraCellIdList = [];
    modalState.from.warningAreaList.nrCellIdList = [];
    for (const item of modalState.from.warningAreaList.cellIdList) {
      if (item.eutraCellId) {
        modalState.from.warningAreaList.eutraCellIdList.push({
          plmnId: { ...item.plmnId },
          cellId: item.eutraCellId,
        });
      }
      if (item.nrCellId) {
        modalState.from.warningAreaList.nrCellIdList.push({
          plmnId: { ...item.plmnId },
          cellId: item.nrCellId,
        });
      }
    }
  }

  const from = Object.assign({}, toRaw(modalState.from));
  from.neId = queryParams.neId;

  //return;

  modalStateFrom
    .validate()
    .then(e => {
      modalState.confirmLoading = true;

      const result = from.id ? updateCBC(from) : addCBC(from);

      const hide = message.loading(t('common.loading'), 0);
      result
        .then(res => {
          if (res.code === RESULT_CODE_SUCCESS) {
            message.success({
              content: t('common.msgSuccess', { msg: modalState.title }),
              duration: 3,
            });
            fnGetList(1);
          } else {
            message.error({
              content: `${res.msg}`,
              duration: 3,
            });
          }
        })
        .finally(() => {
          hide();
          fnModalCancel();
          modalState.confirmLoading = false;
        });
    })
    .catch(e => {
      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
    });
}

/**
 * 对话框弹出关闭执行函数
 * 进行表达规则校验
 */
function fnModalCancel() {
  modalState.openByEdit = false;
  //modalState.openByView = false;
  modalStateFrom.resetFields();
}

function fnRecordSend(record: any) {
  Modal.confirm({
    title: t('common.tipTitle'),
    content: t('views.cbc.cbe.letupSure', { id: record.id }),
    onOk() {
      const key = 'cbcSend';
      message.loading({ content: t('common.loading'), key });
      updateCBCStatus(record).then(res => {
        if (res.code === RESULT_CODE_SUCCESS) {
          message.success({
            content: 'Send',
            key,
            duration: 2,
          });
        } else {
          message.error({
            content: `${res.msg}`,
            key: key,
            duration: 2,
          });
        }
        fnGetList();
      });
    },
    onCancel() {
      record.status = record.status === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE';
    },
  });
}

function fnRecordDelete(id: string) {
  const neId = queryParams.neId;

  if (!neId) return;

  Modal.confirm({
    title: t('common.tipTitle'),
    content: t('views.cbc.cbe.delTip', { num: id }),
    onOk() {
      modalState.loadDataLoading = true;
      const hide = message.loading(t('common.loading'), 0);
      delCBC(neId, id)
        .then(res => {
          if (res.code === RESULT_CODE_SUCCESS) {
            const msgContent = t('common.msgSuccess', {
              msg: t('common.deleteText'),
            });
            message.success({
              content: `${msgContent} : ID:${id}`,
              duration: 3,
            });
          } else {
            message.error({
              content: `${res.msg}`,
              duration: 3,
            });
          }
        })
        .finally(() => {
          hide();
          fnGetList();
          modalState.loadDataLoading = false;
        });
    },
  });
}

/**查询网元列表, pageNum初始页数 */
function fnGetList(pageNum?: number) {
  if (tableState.loading) return;
  tableState.loading = true;
  if (pageNum) {
    queryParams.pageNum = pageNum;
    tablePagination.current = pageNum;
  }

  if (!queryRangePicker.value) {
    queryRangePicker.value = ['', ''];
  }

  queryParams.startTime = queryRangePicker.value[0];
  queryParams.endTime = queryRangePicker.value[1];

  listCBC(toRaw(queryParams)).then(res => {
    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
      // 取消勾选
      if (tableState.selectedRowKeys.length > 0) {
        tableState.selectedRowKeys = [];
      }

      tablePagination.total = res.total;
      tableState.data = res.data;

      if (
        tablePagination.total <=
          (queryParams.pageNum - 1) * tablePagination.pageSize &&
        queryParams.pageNum !== 1
      ) {
        tableState.loading = false;
        fnGetList(queryParams.pageNum - 1);
      }
    }
    tableState.loading = false;
  });
}

function fnModalChange(event: any) {
  modalState.from.warningAreaList = {
    taiList: [
      {
        plmnId: { mcc: '', mnc: '' },
        tac: '',
      },
    ],
    // eutraCellIdList: [
    //   {
    //     plmnId: { mcc: '', mnc: '' },
    //     cellId: '',
    //   },
    // ],
    // nrCellIdList: [
    //   {
    //     plmnId: { mcc: '', mnc: '' },
    //     cellId: '',
    //   },
    // ],
    cellIdList: [
      {
        plmnId: { mcc: '', mnc: '' },
        eutraCellId: '',
        nrCellId: '',
      },
    ],
    emergencyAreaIDList: [
      {
        areaId: '',
      },
    ],
  };
}

function pwsTypeChange(value: any) {
  if (value === 'ETWS') {
    modalState.from.warningTypeProfile.warningType = 'TEST';
    modalState.from.serialNumProfile.displayMode = 'immediate';
    modalState.from.warningTypeProfile.emergencyUserAlert = true;
    modalState.from.warningTypeProfile.activatePopup = true;
  } else if (value === 'CMAS') {
    modalState.from.warningTypeProfile.warningType = '';
    modalState.from.serialNumProfile.displayMode = 'normal';
    modalState.from.warningTypeProfile.emergencyUserAlert = false;
    modalState.from.warningTypeProfile.activatePopup = false;
  }
}

onMounted(() => {
  // 获取网元网元列表
  useNeListStore()
    .fnNelist()
    .then(res => {
      if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
        if (res.data.length > 0) {
          let arr: Record<string, any>[] = [];
          res.data.forEach(i => {
            if (i.neType === 'CBC') {
              arr.push({ value: i.neId, label: i.neName });
            }
          });
          neOtions.value = arr;
          if (arr.length > 0) {
            queryParams.neId = arr[0].value;
          }
        }
      } else {
        message.warning({
          content: t('common.noData'),
          duration: 2,
        });
      }
    })
    .finally(() => {
      // 获取列表数据
      fnGetList();
    });
});
</script>

<template>
  <PageContainer>
    <a-card
      v-show="tableState.seached"
      :bordered="false"
      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
    >
      <!-- 表格搜索栏 -->
      <a-form :model="queryParams" name="queryParams" layout="horizontal">
        <a-row :gutter="16">
          <a-col :lg="8" :md="12" :xs="24">
            <a-form-item :label="t('views.cbc.cbe.neType')" name="neId ">
              <a-select
                v-model:value="queryParams.neId"
                :options="neOtions"
                :placeholder="t('common.selectPlease')"
                @change="fnGetList(1)"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="8" :md="12" :xs="24">
            <a-form-item :label="t('views.cbc.cbe.eventName')" name="eventName">
              <a-input
                v-model:value="queryParams.eventName"
                :placeholder="t('common.inputPlease')"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="8" :md="12" :xs="24">
            <a-form-item :label="t('views.cbc.cbe.status')" name="status">
              <a-select
                v-model:value="queryParams.status"
                :options="[
                  { label: 'ACTIVE', value: 'ACTIVE' },
                  { label: 'INACTIVE', value: 'INACTIVE' },
                ]"
                :placeholder="t('common.selectPlease')"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="8" :md="12" :xs="24">
            <a-form-item
              :label="t('views.cbc.cbe.createdAt')"
              name="queryRangePicker"
            >
              <a-range-picker
                v-model:value="queryRangePicker"
                allow-clear
                bordered
                :show-time="{ format: 'HH:mm:ss' }"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="width: 100%"
              ></a-range-picker>
            </a-form-item>
          </a-col>

          <a-col :lg="6" :md="12" :xs="24">
            <a-form-item>
              <a-space :size="8">
                <a-button type="primary" @click.prevent="fnGetList(1)">
                  <template #icon>
                    <SearchOutlined />
                  </template>
                  {{ t('common.search') }}
                </a-button>
                <a-button type="default" @click.prevent="fnQueryReset">
                  <template #icon>
                    <ClearOutlined />
                  </template>
                  {{ t('common.reset') }}
                </a-button>
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <a-card :bordered="false" :body-style="{ padding: '0px' }">
      <!-- 插槽-卡片左侧侧 -->
      <template #title>
        <a-flex wrap="wrap" gap="small">
          <a-button type="primary" @click.prevent="fnModalVisibleByEdit()">
            <template #icon>
              <PlusOutlined />
            </template>
            {{ t('common.addText') }}
          </a-button>
        </a-flex>
      </template>

      <!-- 插槽-卡片右侧 -->
      <template #extra>
        <a-space :size="8" align="center">
          <a-tooltip>
            <template #title>{{ t('common.searchBarText') }}</template>
            <a-switch
              v-model:checked="tableState.seached"
              :checked-children="t('common.switch.show')"
              :un-checked-children="t('common.switch.hide')"
              size="small"
            />
          </a-tooltip>
          <a-tooltip>
            <template #title>{{ t('common.reloadText') }}</template>
            <a-button type="text" @click.prevent="fnGetList()">
              <template #icon>
                <ReloadOutlined />
              </template>
            </a-button>
          </a-tooltip>

          <a-tooltip placement="topRight">
            <template #title>{{ t('common.sizeText') }}</template>
            <a-dropdown placement="bottomRight" trigger="click">
              <a-button type="text">
                <template #icon>
                  <ColumnHeightOutlined />
                </template>
              </a-button>
              <template #overlay>
                <a-menu
                  :selected-keys="[tableState.size as string]"
                  @click="fnTableSize"
                >
                  <a-menu-item key="default">
                    {{ t('common.size.default') }}
                  </a-menu-item>
                  <a-menu-item key="middle">
                    {{ t('common.size.middle') }}
                  </a-menu-item>
                  <a-menu-item key="small">
                    {{ t('common.size.small') }}
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </a-tooltip>
        </a-space>
      </template>

      <!-- 表格列表 -->
      <a-table
        class="table"
        row-key="id"
        :columns="tableColumns"
        :loading="tableState.loading"
        :data-source="tableState.data"
        :size="tableState.size"
        :pagination="tablePagination"
        :scroll="{ y: 'calc(100vh - 480px)' }"
        @change="fnTableChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'cbeId'">
            <a-space :size="8" align="center">
              <a-tooltip>
                <template #title>{{ t('common.editText') }}</template>
                <a-button
                  type="link"
                  @click.prevent="fnModalVisibleByEdit(record)"
                >
                  <template #icon>
                    <FormOutlined />
                  </template>
                </a-button>
              </a-tooltip>
              <a-tooltip>
                <template #title>{{ t('common.deleteText') }}</template>
                <a-button
                  type="link"
                  danger
                  :disabled="record.status === 'ACTIVE'"
                  @click.prevent="fnRecordDelete(record.id)"
                >
                  <template #icon>
                    <DeleteOutlined />
                  </template>
                </a-button>
              </a-tooltip>
            </a-space>
          </template>

          <template v-if="column.key === 'status'">
            <a-switch
              v-model:checked="record.status"
              checked-value="ACTIVE"
              checked-children="ACTIVE"
              un-checked-value="INACTIVE"
              un-checked-children="INACTIVE"
              size="small"
              @change="fnRecordSend(record)"
            />
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 新增框或修改框 -->
    <ProModal
      :drag="true"
      :width="800"
      :destroyOnClose="true"
      style="top: 0px"
      :body-style="{ maxHeight: '600px', 'overflow-y': 'auto' }"
      :keyboard="false"
      :mask-closable="false"
      :open="modalState.openByEdit"
      :title="modalState.title"
      :confirm-loading="modalState.confirmLoading"
      @ok="fnModalOk"
      @cancel="fnModalCancel"
    >
      <a-form
        name="modalStateFrom"
        layout="horizontal"
        :label-col="{ span: 6 }"
        :labelWrap="true"
      >
        <a-row>
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item
              :label="t('views.cbc.cbe.eventName')"
              name="eventName"
              v-bind="modalStateFrom.validateInfos.eventName"
              :help="t('views.cbc.cbe.eventNameHelp')"
            >
              <a-input
                :disabled="modalState.from.id"
                v-model:value="modalState.from.eventName"
              ></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item :label="t('views.cbc.cbe.startTime')" name="startTime">
              <a-date-picker
                v-model:value="modalState.from.startTime"
                show-time
                type="date"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item :label="t('views.cbc.cbe.endTime')" name="endTime">
              <a-date-picker
                v-model:value="modalState.from.endTime"
                show-time
                type="date"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item
              :label="t('views.cbc.cbe.repetitionPeriod')"
              name="repetitionPeriod"
              v-bind="modalStateFrom.validateInfos.repetitionPeriod"
              :help="t('views.cbc.cbe.repetitionPeriodHelp')"
            >
              <a-input-number
                :min="0"
                v-model:value="modalState.from.repetitionPeriod"
                style="width: 100%"
              ></a-input-number>
            </a-form-item>
          </a-col>

          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item
              :label="t('views.cbc.cbe.numOfBcast')"
              name="numOfBcast"
              v-bind="modalStateFrom.validateInfos.numOfBcast"
              :help="t('views.cbc.cbe.numOfBcastHelp')"
            >
              <a-input-number
                :min="0"
                v-model:value="modalState.from.numOfBcast"
                style="width: 100%"
              ></a-input-number>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row> </a-row>

        <a-divider orientation="left">
          {{ t('views.cbc.cbe.messageIdProfile') }}
        </a-divider>

        <a-row>
          <a-col :lg="24" :md="24" :xs="24">
            <a-form-item
              :label="t('views.cbc.cbe.msgPWSType')"
              name="msgPWSType"
              :label-col="{ span: 6 }"
              v-bind="modalStateFrom.validateInfos.msgPWSType"
            >
              <a-select
                v-model:value="modalState.from.messageIdProfile.msgPWSType"
                :disabled="modalState.from.id"
                @change="pwsTypeChange"
              >
                <a-select-option value="CMAS"
                  >CMAS({{ t('views.cbc.cbe.cmas') }})</a-select-option
                >
                <a-select-option value="ETWS"
                  >ETWS({{ t('views.cbc.cbe.etws') }})</a-select-option
                >
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :lg="24" :md="24" :xs="24">
            <a-form-item
              :label="t('views.cbc.cbe.messageId')"
              name="messageId"
              v-bind="modalStateFrom.validateInfos.messageId"
            >
              <a-select
                v-model:value="modalState.from.messageIdProfile.messageId"
                style="width: 100%"
                :disabled="modalState.from.id"
                placeholder="Please select"
                :options="
                  modalState.from.msgPWSType === 'ETWS'
                    ? modalStateFromOption.etwsJson
                    : modalStateFromOption.cmasJson
                "
              >
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-divider orientation="left">
          {{ t('views.cbc.cbe.serialNumProfile') }}
        </a-divider>

        <a-row>
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item
              :label="t('views.cbc.cbe.displayMode')"
              name="displayMode"
            >
              <a-select
                v-model:value="modalState.from.serialNumProfile.displayMode"
              >
                <a-select-option value="normal">normal</a-select-option>
                <a-select-option value="immediate">immediate</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item :label="t('views.cbc.cbe.geoScope')" name="geoScope">
              <a-select
                v-model:value="modalState.from.serialNumProfile.geoScope"
              >
                <a-select-option value="Cellwide">Cellwide</a-select-option>
                <a-select-option value="PLMNwide">PLMNwide</a-select-option>
                <a-select-option value="Area">Area</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-divider orientation="left">
          {{ t('views.cbc.cbe.warningTypeProfile') }}
        </a-divider>

        <a-row>
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item
              :label="t('views.cbc.cbe.warningType')"
              name="warningType"
            >
              <a-select
                v-model:value="modalState.from.warningTypeProfile.warningType"
              >
                <a-select-option value="Earthquake">Earthquake</a-select-option>
                <a-select-option value="Tsunami">Tsunami</a-select-option>
                <a-select-option value="EarthquakeAndTsunami"
                  >EarthquakeAndTsunami</a-select-option
                >
                <a-select-option value="Test">Test</a-select-option>
                <a-select-option value="Other">Other</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item
              :label="t('views.cbc.cbe.emergencyUserAlert')"
              name="emergencyUserAlert"
              v-bind="modalStateFrom.validateInfos.emergencyUserAlert"
            >
              <a-select
                v-model:value="
                  modalState.from.warningTypeProfile.emergencyUserAlert
                "
              >
                <a-select-option :value="true">true</a-select-option>
                <a-select-option :value="false">false</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item
              :label="t('views.cbc.cbe.activatePopup')"
              name="activatePopup"
              v-bind="modalStateFrom.validateInfos.activatePopup"
            >
              <a-select
                v-model:value="modalState.from.warningTypeProfile.activatePopup"
              >
                <a-select-option :value="true">true</a-select-option>
                <a-select-option :value="false">false</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-divider orientation="left">
          {{ t('views.cbc.cbe.warningMessageProfile') }}
        </a-divider>

        <a-row>
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item
              :label="t('views.cbc.cbe.language')"
              name="language"
              :label-col="{ span: 6 }"
            >
              <a-select
                v-model:value="modalState.from.warningMessageProfile.language"
              >
                <a-select-option value="English">English</a-select-option>
                <a-select-option value="French">French</a-select-option>
                <a-select-option value="Spanish">Spanish</a-select-option>
                <a-select-option value="Chinese">Chinese</a-select-option>
                <a-select-option value="Japanese">Japanese</a-select-option>
                <a-select-option value="Korean">Korean</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item
          :label="t('views.cbc.cbe.warningMessageText')"
          :label-col="{ span: 3 }"
          name="warningMessageText"
        >
          <!-- <a-input

                v-model:value="
                  modalState.from.warningMessageProfile.warningMessageText
                "
              ></a-input> -->
          <a-textarea
            v-model:value="
              modalState.from.warningMessageProfile.warningMessageText
            "
            :auto-size="{ minRows: 1, maxRows: 6 }"
            :show-count="true"
            :placeholder="t('common.inputPlease')"
          />
        </a-form-item>

        <a-form-item
          :label="t('views.cbc.cbe.warningAreaType')"
          name="warningAreaType"
        >
          <a-radio-group
            v-model:value="modalState.from.warningAreaType"
            @change="fnModalChange"
          >
            <a-radio value="tai">TAI List</a-radio>
            <!-- <a-radio value="eutra">EUTRA CellId List</a-radio>
            <a-radio value="nr">NR CellId List</a-radio> -->
            <a-radio value="cell">CellId List</a-radio>
            <a-radio value="area">Area ID List</a-radio>
          </a-radio-group>

          <!-- <a-select
                v-model:value="modalState.from.warningAreaType"
                    @change="fnModalChange"
              >
                <a-select-option value="tai">TAI List</a-select-option>
                <a-select-option value="eutra">EUTRA CellId List</a-select-option>
                <a-select-option value="nr">NR CellId List</a-select-option>
                <a-select-option value="area">Area ID List</a-select-option>
              </a-select> -->
        </a-form-item>

        <!-- TAI List -->
        <div v-if="modalState.from.warningAreaType === 'tai'">
          <a-divider orientation="left">
            TAI
            <a-tooltip title="Add TAI">
              <a-button
                shape="circle"
                @click="addTai"
                style="margin-left: 10px"
              >
                <template #icon><plus-outlined /></template>
              </a-button> </a-tooltip
          ></a-divider>

          <!-- <a-space>
            <a-button type="dashed" @click="addTai" size="small">添加TAI</a-button>
          </a-space> -->

          <div
            v-for="(item, idx) in modalState.from.warningAreaList.taiList"
            :key="'tai' + idx"
            style="margin-bottom: 8px"
          >
            <a-row>
              <a-col :lg="12" :md="12" :xs="24">
                <a-form-item
                  label="MCC"
                  name="mcc"
                  :validateTrigger="[]"
                  :required="true"
                >
                  <a-input v-model:value="item.plmnId.mcc" placeholder="MCC" />
                </a-form-item>
              </a-col>

              <a-col :lg="12" :md="12" :xs="24">
                <a-form-item
                  label="MNC"
                  name="mnc"
                  :validateTrigger="[]"
                  :required="true"
                >
                  <a-input v-model:value="item.plmnId.mnc" placeholder="MNC" />
                </a-form-item>
              </a-col>

              <a-col :lg="12" :md="12" :xs="24">
                <a-form-item
                  label="TAC"
                  name="tac"
                  :validateTrigger="[]"
                  :required="true"
                  :help="t('views.cbc.cbe.tacHelp')"
                >
                  <a-input v-model:value="item.tac" placeholder="TAC" />
                </a-form-item>
              </a-col>

              <a-col :span="4">
                <a-tooltip title="Delete Tai" v-if="idx !== 0">
                  <a-button
                    danger
                    shape="circle"
                    v-if="idx !== 0"
                    @click="delTai(idx)"
                    style="margin-left: 10px"
                  >
                    <template #icon><minus-outlined /></template
                  ></a-button>
                </a-tooltip>
              </a-col>
            </a-row>
          </div>
        </div>

        <!-- EUTRA CellId List -->
        <div v-if="modalState.from.warningAreaType === 'eutra'">
          <a-divider orientation="left">
            EUTRA CellId List
            <a-tooltip title="Add EUTRA">
              <a-button
                shape="circle"
                @click="addEutra"
                style="margin-left: 10px"
              >
                <template #icon><plus-outlined /></template>
              </a-button> </a-tooltip
          ></a-divider>

          <div
            v-for="(item, idx) in modalState.from.warningAreaList
              .eutraCellIdList"
            :key="'eutra' + idx"
            style="margin-bottom: 8px"
          >
            <a-row>
              <a-col :lg="12" :md="12" :xs="24">
                <a-form-item
                  label="MCC"
                  name="mcc"
                  :validateTrigger="[]"
                  :required="true"
                >
                  <a-input v-model:value="item.plmnId.mcc" placeholder="MCC" />
                </a-form-item>
              </a-col>

              <a-col :lg="12" :md="12" :xs="24">
                <a-form-item
                  label="MNC"
                  name="mnc"
                  :validateTrigger="[]"
                  :required="true"
                >
                  <a-input v-model:value="item.plmnId.mnc" placeholder="MNC" />
                </a-form-item>
              </a-col>

              <a-col :lg="12" :md="12" :xs="24">
                <a-form-item
                  label="CellId"
                  name="cellId"
                  :validateTrigger="[]"
                  :required="true"
                >
                  <a-input v-model:value="item.cellId" placeholder="CellId" />
                </a-form-item>
              </a-col>

              <!-- 123 -->

              <a-col :span="4">
                <a-tooltip title="Delete EUTRA" v-if="idx !== 0">
                  <a-button
                    danger
                    shape="circle"
                    v-if="idx !== 0"
                    @click="delEutra(idx)"
                    style="margin-left: 10px"
                  >
                    <template #icon><minus-outlined /></template
                  ></a-button>
                </a-tooltip>
              </a-col>
            </a-row>
          </div>
        </div>

        <!-- NR CellId List -->

        <div v-if="modalState.from.warningAreaType === 'nr'">
          <a-divider orientation="left">
            NR CellId List
            <a-tooltip title="Add NR">
              <a-button shape="circle" @click="addNr" style="margin-left: 10px">
                <template #icon><plus-outlined /></template>
              </a-button> </a-tooltip
          ></a-divider>

          <div
            v-for="(item, idx) in modalState.from.warningAreaList.nrCellIdList"
            :key="'nr' + idx"
            style="margin-bottom: 8px"
          >
            <a-row>
              <a-col :lg="12" :md="12" :xs="24">
                <a-form-item
                  label="MCC"
                  name="mcc"
                  :validateTrigger="[]"
                  :required="true"
                >
                  <a-input v-model:value="item.plmnId.mcc" placeholder="MCC" />
                </a-form-item>
              </a-col>

              <a-col :lg="12" :md="12" :xs="24">
                <a-form-item
                  label="MNC"
                  name="mnc"
                  :validateTrigger="[]"
                  :required="true"
                >
                  <a-input v-model:value="item.plmnId.mnc" placeholder="MNC" />
                </a-form-item>
              </a-col>

              <a-col :lg="12" :md="12" :xs="24">
                <a-form-item label="CellId" name="cellId" :validateTrigger="[]">
                  <a-input v-model:value="item.cellId" placeholder="CellId" />
                </a-form-item>
              </a-col>

              <a-col :span="4">
                <a-tooltip title="Delete NR" v-if="idx !== 0">
                  <a-button
                    danger
                    shape="circle"
                    v-if="idx !== 0"
                    @click="delNr(idx)"
                    style="margin-left: 10px"
                  >
                    <template #icon><minus-outlined /></template
                  ></a-button>
                </a-tooltip>
              </a-col>
            </a-row>
          </div>
        </div>

        <div v-if="modalState.from.warningAreaType === 'cell'">
          <a-divider orientation="left">
            CellId List
            <a-tooltip title="Add CellId">
              <a-button
                shape="circle"
                @click="addCellId"
                style="margin-left: 10px"
              >
                <template #icon><plus-outlined /></template>
              </a-button>
            </a-tooltip>
          </a-divider>
          <div
            v-for="(item, idx) in modalState.from.warningAreaList.cellIdList"
            :key="'cell' + idx"
            style="margin-bottom: 8px"
          >
            <a-row>
              <a-col :lg="10" :md="10" :xs="24">
                <a-form-item label="MCC" :required="true">
                  <a-input v-model:value="item.plmnId.mcc" placeholder="MCC" />
                </a-form-item>
              </a-col>
              <a-col :lg="10" :md="10" :xs="24">
                <a-form-item label="MNC" :required="true">
                  <a-input v-model:value="item.plmnId.mnc" placeholder="MNC" />
                </a-form-item>
              </a-col>
              <a-col :lg="10" :md="10" :xs="24">
                <a-form-item
                  label="EUTRA CellId"
                  :help="t('views.cbc.cbe.cellIdHelp')"
                >
                  <a-input
                    v-model:value="item.eutraCellId"
                    placeholder="EUTRA CellId"
                  />
                </a-form-item>
              </a-col>
              <a-col :lg="10" :md="10" :xs="24">
                <a-form-item
                  label="NR CellId"
                  :help="t('views.cbc.cbe.cellIdHelp')"
                >
                  <a-input
                    v-model:value="item.nrCellId"
                    placeholder="NR CellId"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-tooltip title="Delete CellId" v-if="idx !== 0">
                  <a-button
                    danger
                    shape="circle"
                    @click="delCellId(idx)"
                    style="margin-left: 10px"
                  >
                    <template #icon><minus-outlined /></template>
                  </a-button>
                </a-tooltip>
              </a-col>
            </a-row>
          </div>
        </div>

        <!-- area ID  List -->

        <div v-if="modalState.from.warningAreaType === 'area'">
          <a-divider orientation="left">
            Area ID List
            <a-tooltip title="Add Area">
              <a-button
                shape="circle"
                @click="addArea"
                style="margin-left: 10px"
              >
                <template #icon><plus-outlined /></template>
              </a-button> </a-tooltip
          ></a-divider>

          <div
            v-for="(item, idx) in modalState.from.warningAreaList
              .emergencyAreaIDList"
            :key="'area' + idx"
            style="margin-bottom: 8px"
          >
            <a-row>
              <a-col :lg="12" :md="12" :xs="24">
                <a-form-item
                  label="AreaID"
                  name="areaId"
                  :validateTrigger="[]"
                  :help="t('views.cbc.cbe.tacHelp')"
                  :required="true"
                >
                  <a-input v-model:value="item.areaId" />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-tooltip title="Delete Area" v-if="idx !== 0">
                  <a-button
                    danger
                    shape="circle"
                    v-if="idx !== 0"
                    @click="delArea(idx)"
                    style="margin-left: 10px"
                  >
                    <template #icon><minus-outlined /></template>
                  </a-button>
                </a-tooltip>
              </a-col>
            </a-row>
          </div>
        </div>
      </a-form>
    </ProModal>
  </PageContainer>
</template>

<style lang="less" scoped>
.table :deep(.ant-pagination) {
  padding: 0 24px;
}
</style>
