<script setup lang="ts">
import { reactive, toRaw, watch } from 'vue';
import { ProModal } from 'antdv-pro-modal';
import { dbGetJSON, dbSetJSON } from '@/utils/cache-db-utils';
const emit = defineEmits(['ok', 'cancel', 'update:open']);
const props = defineProps({
  title: {
    type: String,
    default: '标题',
  },
  open: {
    type: Boolean,
    default: false,
  },
});

/**数据参数 */
let dataState = reactive({
  /**基站数 */
  baseNum: 0,
  /**核心网数 */
  coreNetNum: 0,
  /**在线用户数 */
  onlineUserNum: 0,
});

/**弹框取消按钮事件 */
function fnModalOk() {
  dbSetJSON('tbl_mocn', `tmp`, toRaw(dataState));
  emit('ok');
  emit('update:open', false);
}

/**弹框取消按钮事件 */
function fnModalCancel() {
  emit('cancel');
  emit('update:open', false);
}

/**显示弹框时初始数据 */
function init() {
  // 读取数据
  dbGetJSON('tbl_mocn', `tmp`).then(data => {
    if (data) {
      Object.assign(dataState, data);
    }
  });
}

/**监听是否显示，初始数据 */
watch(
  () => props.open,
  val => {
    if (val) init();
  }
);
</script>

<template>
  <ProModal
    :drag="true"
    :width="800"
    :title="props.title"
    :open="props.open"
    :keyboard="false"
    :mask-closable="false"
    @cancel="fnModalCancel"
    @ok="fnModalOk"
  >
    <a-form
      name="dataState"
      layout="horizontal"
      :label-col="{ span: 6 }"
      :labelWrap="true"
    >
      <a-form-item label="baseNum" name="baseNum">
        <a-input-number v-model:value="dataState.baseNum"> </a-input-number>
      </a-form-item>
      <a-form-item label="coreNetNum" name="coreNetNum">
        <a-input-number v-model:value="dataState.coreNetNum"> </a-input-number>
      </a-form-item>
      <a-form-item label="onlineUserNum" name="onlineUserNum">
        <a-input-number v-model:value="dataState.onlineUserNum">
        </a-input-number>
      </a-form-item>
    </a-form>
  </ProModal>
</template>

<style lang="less" scoped></style>

<style lang="less" scoped></style>
