<script setup lang="ts" name="setting_debugManage">
import { getDebugPwd, getDebugUrl, saveDebugPwd, saveDebugUrl } from '#/api'

const url = ref('')
const pwd = ref('')

onMounted(async () => {
  const [res1, res2] = await Promise.all([getDebugUrl(), getDebugPwd()])
  url.value = res1.urls.join('\n')
  pwd.value = res2
})

const save = () => {
  Promise.all([
    saveDebugUrl({ urls: url.value.replaceAll('\n', ',') }),
    saveDebugPwd({ pwd: pwd.value }),
  ]).then(() => {
    ElMessage.success('保存成功')
  })
}
</script>
<template>
  <section class="page g-container">
    <div class="content">
      <div class="label">调试URL</div>
      <el-input
        v-model="url"
        type="textarea"
        :autosize="{ minRows: 10, maxRows: 20 }"
        placeholder="请输入调试 URL"
      />
      <div class="label">调试密码</div>
      <el-input
        v-model="pwd"
        type="password"
        show-password
        placeholder="请输入调试密码"
      />
      <div class="btn-box">
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </div>
  </section>
</template>
<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  background: #fff;

  .content {
    width: 400px;
    padding: 20px;

    .label {
      margin: 16px;
      font-size: 16px;
    }

    .btn-box {
      margin-top: 20px;
      text-align: center;
    }
  }
}
</style>
