vabse
<template>
  <div>
    <info-card class="alarmPeriod">
      <info-item-group title="系统参数">
        <template #extra>
          <a-space>
            <a-button type="primary" size="small" @click="addConfigHandler"> 新增 </a-button>
          </a-space>
        </template>
        <ScrollContainer style="max-height: 300px">
          <div v-if="systemConfigList && systemConfigList.length" class="alarmPlan">
            <div class="alarmPlan-item" v-for="(item, index) in systemConfigList" :key="index">
              <div class="alarmPlan-item-contant">
                <infoItem label="参数名称" ellipsis>{{ item.paramName }}</infoItem>
                <infoItem label="参数值" ellipsis>{{ item.paramValue }}</infoItem>
                <infoItem label="参数描述" ellipsis>{{ item.paramDesc }}</infoItem>
                <infoItem label="备注" ellipsis>{{ item.remark }}</infoItem>
              </div>
              <div class="alarmPlan-item-action">
                <a-space>
                  <EditOutlined @click="editParamHandler(index)" />
                  <a-popconfirm
                    title="确认删除参数吗？"
                    ok-text="确认"
                    cancel-text="取消"
                    @confirm="deleteParamHandler(item?.parameterId as string)"
                  >
                    <DeleteOutlined />
                  </a-popconfirm>
                </a-space>
              </div>
            </div>
          </div>
          <div v-else class="alarmPlan-empty">
            <a-empty :image="simpleImage" />
          </div>
        </ScrollContainer>
      </info-item-group>
    </info-card>

    <baseModal v-model:open="isOpenConfig" title="新增参数" @cancel="cancel">
      <a-form
        ref="formRef"
        :model="formState"
        :label-col="{ style: { width: '80px' } }"
        hideRequiredMark
      >
        <a-form-item
          label="参数编码"
          name="paramCode"
          :rules="[{ required: true, message: '请输入参数编码' }]"
        >
          <a-input
            v-model:value.trim="formState.paramCode"
            placeholder="请输入参数编码"
            :maxlength="30"
            show-count
            allow-clear
          />
        </a-form-item>

        <a-form-item
          label="参数名称"
          name="paramName"
          :rules="[{ required: true, message: '请输入参数名称' }]"
        >
          <a-input
            v-model:value.trim="formState.paramName"
            placeholder="请输入参数名称"
            :maxlength="30"
            show-count
            allow-clear
          />
        </a-form-item>

        <a-form-item
          label="参数值"
          name="paramValue"
          :rules="[{ required: true, message: '请输入参数值' }]"
        >
          <a-input
            v-model:value.trim="formState.paramValue"
            placeholder="请输入参数值，如: 30"
            :maxlength="30"
            show-count
            allow-clear
          />
        </a-form-item>

        <a-form-item label="参数描述" name="paramDesc">
          <a-input
            v-model:value.trim="formState.paramDesc"
            placeholder="请输入参数描述，如: 天"
            :maxlength="30"
            show-count
            allow-clear
          />
        </a-form-item>

        <a-form-item label="备注" name="remark">
          <a-input
            v-model:value.trim="formState.remark"
            placeholder="请输入备注"
            :maxlength="50"
            show-count
            allow-clear
          />
        </a-form-item>
      </a-form>

      <div class="footer">
        <a-space>
          <a-button @click="cancel">取消</a-button>
          <a-button type="primary" :loading="confirmLoading" @click="confirm">保存</a-button>
        </a-space>
      </div>
    </baseModal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import infoCard from '@/views/device/detail/components/infoCard/index.vue'
import infoItemGroup from '@/views/device/detail/components/infoItemGroup/index.vue'
import { message, type FormInstance } from 'ant-design-vue'
import * as systemApi from '@/api/system'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { Empty } from 'ant-design-vue'
import infoItem from '@/views/device/detail/components/infoItem/index.vue'

const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE

defineOptions({
  name: 'SystemConfigIndex',
})

const formRef = ref<FormInstance>()
const isOpenConfig = ref<boolean>(false)

type FormState = {
  parameterId?: string | null // 系统参数表主键id 新增时不传
  paramCode: string // 参数编码
  paramName: string // 参数名称
  paramValue: string // 参数值
  paramDesc: string // 参数描述
  remark: string // 备注
}

const formState = reactive<FormState>({
  parameterId: undefined,
  paramCode: '',
  paramName: '',
  paramValue: '',
  paramDesc: '',
  remark: '',
})
// 新增参数
const addConfigHandler = () => {
  isOpenConfig.value = true
}

const cancel = () => {
  isOpenConfig.value = false
  formRef.value?.resetFields()
  formState.parameterId = undefined
  formState.paramCode = ''
  formState.paramName = ''
  formState.paramValue = ''
  formState.paramDesc = ''
  formState.remark = ''
}

const confirmLoading = ref<boolean>(false)
const confirm = async () => {
  console.log('11111', formState)
  try {
    confirmLoading.value = true
    await formRef.value?.validate()
    await systemApi.saveSystemConfig({
      parameterId: formState.parameterId ?? undefined,
      paramCode: formState.paramCode,
      paramName: formState.paramName,
      paramValue: formState.paramValue,
      paramDesc: formState.paramDesc,
      remark: formState.remark,
    })
    message.success('保存成功')
    isOpenConfig.value = false
    fetchSystemConfig()
  } catch (error) {
    console.error(error)
  } finally {
    confirmLoading.value = false
  }
}

const systemConfigList = ref<FormState[]>([])
// 查询系统参数列表
const fetchSystemConfig = async () => {
  try {
    const res = await systemApi.querySystemConfig({})
    systemConfigList.value = res.data || []
  } catch (error) {
    console.error(error)
  }
}
fetchSystemConfig()

// 编辑参数
const editParamHandler = (index: number) => {
  isOpenConfig.value = true
  try {
    formState.parameterId = systemConfigList.value[index]?.parameterId
    formState.paramCode = systemConfigList.value[index]?.paramCode
    formState.paramName = systemConfigList.value[index]?.paramName
    formState.paramValue = systemConfigList.value[index]?.paramValue
    formState.paramDesc = systemConfigList.value[index]?.paramDesc
    formState.remark = systemConfigList.value[index]?.remark
    isOpenConfig.value = true
  } catch (error) {
    console.error(error)
  }
}

// 删除参数
const deleteParamHandler = async (parameterId: string) => {
  try {
    await systemApi.deleteSystemConfig({ paramId: parameterId })
    message.success('删除成功')
    fetchSystemConfig()
  } catch (error) {
    console.error(error)
  }
}
</script>

<style scoped lang="less">
.alarmPeriod {
  max-width: 450px;
  max-height: 450px;
  overflow: hidden;

  &-configValue {
    display: flex;
    align-items: center;
    justify-content: space-between;

    &-content {
      display: flex;
      align-items: center;
      width: 100%;
      font-size: 14px;
      &-item {
        width: 30%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &:last-child {
          color: #888;
          width: 70%;
        }
      }
    }

    &-action {
      padding-left: 10px;
      font-size: 12px;
      color: #888;
    }
  }

  .alarmPlan {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    color: #555;
    &-empty {
      padding: 50px 0;
    }

    .alarmPlan-item {
      display: flex;
      align-items: center;
      flex: 1;
      padding: 8px 12px;
      border-radius: 8px;
      border: 1px solid #d9d9d9;
      margin-bottom: 10px;
      justify-content: space-between;
      &:hover {
        border-radius: 8px;
        background: #f5f5f5;
      }
    }

    .alarmPlan-item-contant {
      font-size: 14px;
      flex-grow: 1;
      word-break: break-all;
      line-height: 1.5;
      // 超出一行显示省略号
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: default;
    }
    .alarmPlan-item-action {
      flex-shrink: 0;
      color: #888;
      :deep(.ant-space) {
        cursor: pointer;
        .ant-space-item:hover {
          color: #40a9ff;
        }
      }
    }
  }
}

:deep(.ant-descriptions-item-label) {
  width: 150px;
}
</style>
