<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-07-04 10:36:19
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-07-08 13:55:21
 * @FilePath: \Robot-Al-Platform-Web\src\renderer\src\views\Design\Settings\permission.vue
 * @Description: 权限设置
 3、完善交互效果
-->
<template>
  <div class="settings_permission_wrap">
    <el-form
      style="max-width: 472px"
      :model="formData"
      label-width="auto"
      label-position="top"
      size="default"
    >
      <div>
        <div class="el-form-item--label-top">
          <div class="el-form-item__label">
            <span>权限导入导出</span>
          </div>
        </div>
        <div class="flex">
          <el-form-item label="" class="mr-[8px]">
            <DSButton :type="formData?.import ? 'primary' : ''" @click="handleImport">
              保存
            </DSButton>
          </el-form-item>
          <el-form-item label="">
            <DSButton :type="formData?.export ? 'primary' : ''" @click="handleExport">
              导出
            </DSButton>
          </el-form-item>
        </div>
      </div>
      <el-form-item label="">
        <span>{{ formData.encryption ? '开启' : '关闭' }}加密</span>
        <el-switch v-model="formData.encryption" class="pl-[12px]" />
      </el-form-item>
      <div v-if="formData.encryption">
        <el-form-item label="修改管理员密码">
          <DSButton @click="handleUpdatePassword">修改密码</DSButton>
        </el-form-item>
        <el-form-item label="技术员权限">
          <el-switch v-model="formData.technicianPermission" />
        </el-form-item>

        <el-form-item label="技术员密码">
          <el-input
            v-model="formData.technicianPassword"
            placeholder="请输入密码"
            type="password"
            show-password
          />
        </el-form-item>
        <el-form-item label="技术员权限配置">
          <DSButton @click="() => (showPermissionDialog = true)">配置</DSButton>
        </el-form-item>
        <el-form-item label="操作员权限">
          <el-switch v-model="formData.operatorPermission" />
        </el-form-item>

        <el-form-item label="操作员密码">
          <el-input
            v-model="formData.operatorPassword"
            placeholder="请输入密码"
            type="password"
            show-password
          />
        </el-form-item>
        <el-form-item label="操作员使能">
          <el-switch v-model="formData.operatorEnabled" />
        </el-form-item>
      </div>
    </el-form>
    <!-- 修改管理员密码 -->
    <DSDialog
      v-model="showTechnicianPswDialog"
      width="520"
      @close="showTechnicianPswDialog = false"
      class="settings-dialog ds-dialog"
      title="设置管理员密码"
    >
      <div class="p-[24px]">
        <el-form
          ref="updatePswFormRef"
          style="max-width: 472px"
          :model="updatePswFromData"
          label-width="auto"
          label-position="top"
          size="default"
          :rules="pswFormRules"
        >
          <el-form-item label="设置密码" prop="pass">
            <el-input v-model="updatePswFromData.pass" type="password" autocomplete="off" />
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input v-model="updatePswFromData.checkPass" type="password" autocomplete="off" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer mr-[24px] pb-[24px] pt-[16px]  flex justify-end">
          <DSButton type="info" @click="resetPswFromData(updatePswFormRef)" class="mr-[8px]"
            >重置</DSButton
          >
          <DSButton type="primary" @click="submitUpdatePswForm(updatePswFormRef)" class=""
            >确定</DSButton
          >
        </div>
      </template>
    </DSDialog>
    <!-- //TODO 配置操作员权限 -->
    <DSDialog
      v-model="showPermissionDialog"
      width="520"
      @close="showPermissionDialog = false"
      class="settings-dialog ds-dialog"
      title="权限分配"
    >
      <div class="p-[24px]">
        <el-form
          style="max-width: 472px"
          :model="permissionFromData"
          label-width="auto"
          label-position="top"
          size="default"
        >
          <el-form-item label="选择开放给技术员的工具权限" prop="pass">
            <el-checkbox label="所有权限"></el-checkbox>
            <el-checkbox-group v-model="permissionFromData.permission">
              <el-checkbox
                v-for="v in ['权限1', '权限2', '权限3', '权限4', '权限5']"
                :key="v"
                :label="v"
                :value="v"
              >
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer mr-[24px] pb-[24px] pt-[16px] flex justify-end">
          <DSButton type="info" @click="() => showPermissionDialog = false" class="mr-[8px]">取消</DSButton>
          <DSButton type="primary" @click="submitPermission()" class="">确定</DSButton>
        </div>
      </template>
    </DSDialog>
  </div>
</template>

<script setup lang="ts">
import { DSButton } from '@/components/Button'
import { DSDialog } from '@/components/Dialog'
const formData = reactive({
  import: false, // 导入权限
  export: false, // 导出权限
  encryption: false, // 关闭加密权限
  technicianPermission: false, // 技术员权限
  technicianPassword: '', // 技术员密码
  operatorPermission: false, // 操作员权限
  operatorPassword: '', // 操作员密码
  operatorEnabled: true
})

const showTechnicianPswDialog = ref<boolean>(false) // 技术员密码弹窗

const updatePswFormRef = ref<FormInstance>() // 技术员密码表单
const updatePswFromData = reactive({
  pass: '',
  checkPass: ''
})

const showPermissionDialog = ref<boolean>(false) // 操作员权限弹窗
const permissionFromData = reactive({
  permission: []
})

/**管理员重置密码 */
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (updatePswFromData.checkPass !== '') {
      if (!updatePswFormRef.value) return
      updatePswFormRef.value.validateField('checkPass')
    }
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== updatePswFromData.pass) {
    callback(new Error('两次密码不一致'))
  } else {
    callback()
  }
}

const pswFormRules = reactive<FormRules<typeof updatePswFromData>>({
  pass: [{ validator: validatePass, trigger: 'blur' }],
  checkPass: [{ validator: validatePass2, trigger: 'blur' }]
})

const handleUpdatePassword = () => {
  console.log('Technician Config')
  showTechnicianPswDialog.value = true
}

const submitUpdatePswForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
    }
  })
}

const resetPswFromData = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

/**导入、导出 */

const handleImport = () => {
  console.log('Import')
  formData.import = !formData.import
}

const handleExport = () => {
  console.log('Export')
  formData.export = !formData.export
}
</script>
