<template>
  <div>
    <el-dialog v-model="state.showDialog" destroy-on-close :title="title" draggable :close-on-click-modal="false"
      :close-on-press-escape="false" width="900px">
      <el-form :model="form" ref="formRef" size="default" label-width="120px">
        <div class="form-section">
          <div class="section-title">基本信息</div>
          <el-row :gutter="25">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="设备编号" prop="deviceNo"
                :rules="[{ required: true, message: '请输入设备编号', trigger: ['blur', 'change'] }]">
                <el-input v-model="form.deviceNo" clearable placeholder="请输入设备编号" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="资产编号" prop="assetNo">
                <el-input v-model="form.assetNo" clearable placeholder="请输入资产编号" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="form-section">
          <div class="section-title">网络配置</div>
          <el-row :gutter="25">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="IP地址" prop="ip" :rules="[{ required: true, message: '请输入IP地址', trigger: 'blur' }]">
                <el-input v-model="form.ip" clearable placeholder="请输入IP地址" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="端口" prop="port" :rules="[{ required: true, message: '请输入端口', trigger: 'blur' }]">
                <el-input v-model="form.port" clearable placeholder="请输入端口" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="服务名称" prop="serviceName">
                <el-input v-model="form.serviceName" clearable placeholder="请输入服务名称" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="form-section">
          <div class="section-title">设备配置</div>
          <el-row :gutter="25">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="启用状态">
                <el-switch
                  v-model="form.status"
                  active-text="启用"
                  inactive-text="禁用"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSure" size="default" :loading="state.sureLoading">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup name="platform/nppusp/device/alarm-form">
import { reactive, toRefs, ref, onMounted } from 'vue';
import { AlarmUpdateInput, RoomGetPageOutput, PageInputRoomGetPageInput, AlarmAddInput } from '/@/api/admin/data-contracts';
import { AlarmApi } from '/@/api/admin/AlarmApi';
import { ElMessage } from 'element-plus';

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
});

const emits = defineEmits(['refresh']);

const formRef = ref();
const state = reactive({
  showDialog: false,
  sureLoading: false,
  form: {
    status: true,
    isRuning: 0,
  } as AlarmUpdateInput,
  roomOptions: [] as Array<RoomGetPageOutput>,
});

const { form } = toRefs(state);

onMounted(() => {

});

const open = async (row: any = { id: 0 }) => {
  if (row.id > 0) {
    const res = await new AlarmApi().get({ id: row.id });
    if (res?.success) {
      state.form = res.data as AlarmUpdateInput;
    }
  } else {
    state.form = {
      id: 0,
      deviceNo: '',
      assetNo: '',
      roomId: undefined,
      ip: '',
      port: '',
      serviceName: '',
      status: true,
      isRuning: 0,
    };
  }
  state.showDialog = true;
};

const onCancel = () => {
  state.showDialog = false;
};

const onSure = () => {
  formRef.value.validate(async (valid: boolean) => {
    if (!valid) return;
    state.sureLoading = true;
    let res;
    state.form.isRuning = state.form.isRuning ?? 0;
    if (state.form.id > 0) {
      res = await new AlarmApi().update(state.form as AlarmUpdateInput);
    } else {
      res = await new AlarmApi().add(state.form as AlarmAddInput);
    }
    state.sureLoading = false;

    if (res?.success) {
      ElMessage.success('操作成功');
      emits('refresh');
      onCancel();
    } else {
      ElMessage.error(res?.msg as string);
    }
  });
};

defineExpose({
  open,
});
</script>

<style lang="scss" scoped>
.form-section {
  margin-bottom: 24px;

  &:last-child {
    margin-bottom: 0;
  }
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #f0f0f0;
  position: relative;

  &:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 40px;
    height: 2px;
    background: #409eff;
  }
}

:deep(.el-form-item) {
  margin-bottom: 18px;
}

:deep(.el-switch__label) {
  font-size: 13px;
}
</style>
