<template>
  <div class="security-policy">
    <el-form
      ref="form"
      :model="formData"
      :rules="formRule"
      size="default"
      label-position="left"
      label-width="95px"
    >
      <el-row :gutter="24">
        <el-col :span="8">
          <div class="security-policy-box">
            <Minheader
              :is-preser="true"
              :is-statuser="true"
              @preserForm="submitForm"
            >
              <template #header>
                <div class="status flex-wrap">
                  <div class="manageTitle">验证码策略</div>
                </div>
              </template>
            </Minheader>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item
                  label="验证码长度"
                  prop="verification_code_length"
                >
                  <el-input
                    v-model="formData.verification_code_length"
                    placeholder="请输入验证码长度"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="验证码类型" prop="verification_code_type">
                  <el-select
                    style="width: 100%"
                    v-model="formData.verification_code_type"
                    class="input-shadow"
                    filterable
                    default-first-option
                    clearable
                    placeholder="请选择"
                  >
                    <el-option :value="1" label="仅数字" />
                    <el-option :value="2" label="数字英文" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="大小写选择" prop="verification_code_Aa">
                  <el-select
                    style="width: 100%"
                    v-model="formData.verification_code_Aa"
                    class="input-shadow"
                    filterable
                    default-first-option
                    clearable
                    placeholder="请选择"
                  >
                    <el-option :value="true" label="英文区分大小写" />
                    <el-option :value="false" label="英文不区分大小写" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否开启" prop="verification_code">
                  <el-radio-group v-model="formData.verification_code">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="security-policy-box">
            <Minheader
              :is-preser="true"
              :is-statuser="true"
              @preserForm="submitForm"
            >
              <template #header>
                <div class="status flex-wrap">
                  <div class="manageTitle">密码策略</div>
                </div>
              </template>
            </Minheader>
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item
                  label="密码规则"
                  prop="pwd_cons"
                  label-width="70px"
                >
                  <el-input
                    v-model="formData.pwd_cons"
                    placeholder="请输入密码规则（正则表达式）"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="security-policy-box">
            <Minheader
              :is-preser="true"
              :is-statuser="true"
              @preserForm="submitForm"
            >
              <template #header>
                <div class="status flex-wrap">
                  <div class="manageTitle">多点登录</div>
                </div>
              </template>
            </Minheader>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="是否开启" prop="user_officer_multi">
                  <el-radio-group v-model="formData.user_officer_multi">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { Query, modifyData } from '@/api/webApi'
import Minheader from '@/components/minheader/index.vue'
import { ElMessage, FormInstance } from 'element-plus'

const form = ref<FormInstance | null>(null)
const formData = reactive({
  verification_code_length: null,
  verification_code_type: null,
  verification_code_Aa: true,
  verification_code: null,
  pwd_cons: null,
  user_officer_multi: true,
})
const verificationCodeEnable = computed(() =>
  Boolean(formData.verification_code)
)
const formRule = {
  verification_code_length: [
    {
      required: verificationCodeEnable,
      message: '请输入验证码长度',
      trigger: 'blur',
    },
  ],
  verification_code_type: [
    {
      required: verificationCodeEnable,
      message: '请选择验证码类型',
      trigger: 'blur',
    },
  ],
  verification_code_Aa: [
    {
      required: verificationCodeEnable,
      message: '请选择验证码大小写',
      trigger: 'blur',
    },
  ],
  verification_code: [
    { required: true, message: '请选择是否开启验证码', trigger: 'blur' },
  ],
  // pwd_cons: [{ required: true, message: '请输入密码规则（正则表达式）', trigger: 'blur' }],
  user_officer_multi: [
    { required: true, message: '请选择是否开启多点登录', trigger: 'blur' },
  ],
}

const submitForm = () => {
  form.value?.validate(valid => {
    if (valid) {
      setSecurityPolicy()
    }
  })
}

const getSecurityPolicy = async () => {
  try {
    const {
      code,
      returnData: { listValues },
      message,
    } = await Query({
      id: DATACONTENT_ID.securityPolicy,
      dataContent: [],
    })
    if (String(code) !== '0') {
      throw new Error(message ?? '失败')
    }
    if (!listValues.length) {
      throw new Error('未查询到策略信息')
    }
    const data = listValues[0]
    Object.assign(formData, data)
  } catch (error) {
    console.error(error)
  }
}

const setSecurityPolicy = async () => {
  try {
    const dataContent = {
      ...formData,
      event: 2,
    }
    const { code, message } = await modifyData({
      serviceId: SERVICE_ID.securityPolicy,
      dataContent,
    })
    if (String(code) !== '0') {
      throw new Error(message ?? '失败')
    }
    ElMessage.success('操作成功')
    getSecurityPolicy()
  } catch (error) {
    console.error(error)
  }
}

onMounted(() => {
  getSecurityPolicy()
})
</script>

<style lang="scss" scoped>
.security-policy {
  height: 100%;
  .security-policy-box {
    width: 100%;
    height: 240px;
    background: #fafcff;
    padding: 24px;
  }
}
::v-deep .el-form-item__label {
  width: 90px;
}
</style>
