<script setup name="DensetuArea">
import { ref, toRefs, reactive, getCurrentInstance, proxyRefs, onMounted } from 'vue'
import { Lock } from '@element-plus/icons-vue'
import { changeRoute } from '@/utils/switchRoute'
import { useRouter } from 'vue-router'
import { showClientParams, saveClientParams } from '@/api/classification/densetuArea.js'

const router = useRouter()
const { proxy } = getCurrentInstance()
const projectId = ref('')
const form = ref({
    "id": null,
    "projectid": null,
    "keylocation": null, // 密钥存放位置 1:缓存 2:文件
    "encdeclocation": null // 加解密计算位置 0：客户端  1：服务端
})
const currentForm = ref({
    "keylocation": null, // 密钥存放位置 1:缓存 2:文件
    "encdeclocation": null // 加解密计算位置 0：客户端  1：服务端
})
const edit = ref(false)


onMounted(()=>{
  sessionStorage.setItem('projectId', 'fda50ea9-b7fa-4fe4-b368-eebeffded6b6')
  projectId.value = sessionStorage.getItem('projectId')
  console.log('projectId',projectId.value)
  showClientParamsMethod()
})

/**
* 获取客户端参数
*
* 从服务器获取配置，并将结果设置到表单中
*/
function showClientParamsMethod() {
    console.log('获取配置')
  showClientParams(projectId.value).then((res) => {
    form.value.id = res.data.id ? res.data.id : null
    form.value.projectid = projectId.value
    form.value.keylocation = res.data.keylocation ? res.data.keylocation : '1'
    form.value.encdeclocation = res.data.encdeclocation ? res.data.encdeclocation : '0'
    currentForm.value.keylocation = res.data.keylocation ? res.data.keylocation : '1'
    currentForm.value.encdeclocation = res.data.encdeclocation ? res.data.encdeclocation : '0'
  })
}

/**
* 保存客户端参数的处理函数
*/
function handlerSaveClientParams() {
    saveClientParams(form.value).then((res) => {
    console.log('保存配置',res)
    showClientParamsMethod()
  })
}

/**
* 处理取消事件
*
* 当用户点击取消按钮时，调用此函数。
* 该函数将编辑状态重置为 false，并将表单中的 keylocation 和 encdeclocation 字段
* 更新为当前表单的对应字段值。
*/
function handlerCancle() {
    edit.value = false
    form.value.keylocation = currentForm.value.keylocation
    form.value.encdeclocation = currentForm.value.encdeclocation
}

function pageProjectManage() {

  changeRoute()

  router.push({
    path: '/project/Project'
  })
}
defineExpose({
  // handleRedInk,
  // handleVoid
})

</script>
<template>
  <div class="app-container scroller">
    <PageTitle  backProject @handleBackProject="pageProjectManage">
      <template #title>
        客户端密管
      </template>

    </PageTitle>

    <div class="app-container__body">
      <div class="flex-container content-container">
        <div class="secondtitle">
            <el-icon :size="30" color="#2c9ef7"><Lock /></el-icon>
            <span>客户端密管</span>
        </div>
        <div class="thirdtitle">
            <span></span>
            <span>客户端密管设置区域：</span>
        </div>
        <el-form :model="form" label-width="auto" style="max-width: 600px;margin-left: 100px;margin-top: 30px;">
            <el-form-item label="密钥存放位置">
                <el-select v-model="form.keylocation" placeholder="请选择密钥存放位置" :disabled="!edit">
                    <el-option label="缓存" value="1" />
                    <el-option label="文件" value="2" />
                </el-select>
            </el-form-item>
            <el-form-item label="加解密计算位置">
                <el-select v-model="form.encdeclocation" placeholder="请选择加解密计算位置" :disabled="!edit">
                    <el-option label="客户端" value="0" />
                    <el-option label="服务端" value="1" />
                </el-select>
            </el-form-item>
            <el-form-item label=" ">
                <el-button 
                    type="primary" 
                    v-if="!edit"
                    @click="edit = true">
                    编辑
                </el-button>
                <el-button 
                    type="primary" 
                    v-if="edit"
                    @click="edit = true">
                    取消
                </el-button>
                <el-button 
                    type="primary" 
                    v-if="edit"
                    @click="handlerSaveClientParams">
                    保存配置
                </el-button>
            </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.secondtitle {
    display: flex;
    align-items: center;
    color: #2c9ef7;
    font-size: 16px;
}
.thirdtitle {
    display: flex;
    align-items: center;
    color: #2c9ef7;
    font-weight: bolder;
    font-size: 18px;
    margin-top: 30px;
}
.thirdtitle > span:nth-child(1) {
    display: inline-block;
    width: 5px;
    height: 20px;
    font-weight: bolder;
    margin-right: 5px;
    background-color: #2c9ef7;
}
</style>

