<template>
  <div class="setting-container">
    <el-form ref="mapFormRef" :model="form" :rules="rules" label-width="170px" class="premium-setting-form">
      <el-form-item label="高德地图Key：" prop="apiKey">
        <el-input v-model="form.apiKey" placeholder="请输入高德地图Key" class="config-input" style="width: 800px" />
        <div class="form-tip">对接高德地图所需的平台Key</div>
      </el-form-item>

      <el-form-item label="高德地图安全密钥：" prop="apiSecret">
        <el-input v-model="form.apiSecret" type="password" show-password placeholder="请输入高德地图安全密钥" class="config-input" style="width: 800px" />
        <div class="form-tip">高德地图对应的安全密钥（Secret）</div>
      </el-form-item>

      <el-form-item class="action-item">
        <el-button type="primary" class="save-btn" :loading="loading" @click="submitForm">保存修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { getMapSetting, updateMapSetting } from '@/api/system/mapSetting';
import { MapSettingForm } from '@/api/system/mapSetting/types';
import { ref, onMounted, getCurrentInstance, ComponentInternalInstance } from 'vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const loading = ref(false);
const mapFormRef = ref<any>();

const form = ref<MapSettingForm>({
  id: 1,
  apiKey: '',
  apiSecret: ''
});

const rules = {
  apiKey: [{ required: true, message: "Key 不能为空", trigger: "blur" }],
  apiSecret: [{ required: true, message: "Secret 不能为空", trigger: "blur" }]
};

const loadData = async () => {
  try {
    const res = await getMapSetting(1);
    if (res.code === 200) {
      form.value = { ...res.data };
    }
  } catch (err) {}
};

const submitForm = () => {
  mapFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      loading.value = true;
      try {
        await updateMapSetting(form.value);
        proxy?.$modal.msgSuccess("保存成功");
        loadData();
      } finally {
        loading.value = false;
      }
    }
  });
};

onMounted(() => {
  loadData();
});
</script>

<style scoped lang="scss">
.setting-container {
  padding-top: 10px;
}

  .premium-setting-form {
    max-width: 1200px;
    
    :deep(.el-form-item__content) {
      width: 850px;
    }

    :deep(.el-form-item__label) {
      font-weight: 500;
      color: #4e5969;
      padding-right: 24px;
      line-height: 32px;
    }

    .config-input {
      width: 100% !important;
      border: 1px solid transparent; // 预留样式确认位

      :deep(.el-input__wrapper) {
        width: 100%;
        box-shadow: 0 0 0 1px #e5e6eb inset;
        padding: 4px 12px;
        border-radius: 6px;

        &.is-focus {
          box-shadow: 0 0 0 1px #409eff inset;
        }
      }
      
      :deep(.el-input__inner) {
        width: 100%;
      }
    }

  .form-tip {
    font-size: 13px;
    color: #86909c;
    margin-top: 8px;
    line-height: 1.4;
    display: block;
    width: 100%;
  }

  .action-item {
    margin-top: 40px;
  }

  .save-btn {
    padding: 12px 32px;
    height: auto;
    font-size: 15px;
    font-weight: 500;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(64, 158, 255, 0.2);
  }
}
</style>
