<script name="appSafeInfo" setup>
import { ref, watch } from 'vue'
import store from '@/store'
const {
  insuranceLevel
} = store.dictStore.globalDicts || {}
const props = defineProps({
    data: {
      type: Object,
      default: null
    }
  }),
  formData = ref({}),
  formRef = ref(),
  rules = {
    secrecyGrade: [{ required: true, message: '请选择等保级别' }],
    passwordGrade: [{ required: true, message: '密码测评级别' }],
    nationalItSpec: [{ required: true, message: '请选择是否符合相关规范' }]
  },
  // 校验
  validForm = (callback) => {
    formRef.value.validate(valid => {
      callback(valid)
    })
  },
  // 清空校验
  clearValidate = () => {
    formRef.value.clearValidate()
  }
watch(
  () => props.data,
  val => {
    formData.value = {
      secrecyGrade: props.data.secrecyGrade,
      passwordGrade: props.data.passwordGrade,
      nationalItSpec: props.data.nationalItSpec
    }
  },
  { immediate: true, deep: true }
)
defineExpose({ validForm, formData, clearValidate })
</script>

<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="rules"
    label-position="right"
    label-width="180px"
    label-suffix=":"
    scroll-to-error
  >
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="等保级别" prop="secrecyGrade">
          <el-radio-group v-model="formData.secrecyGrade">
            <el-radio v-for="(v,k) in insuranceLevel" :key="k" :label="k*1">{{ v }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="密码测评级别" prop="passwordGrade">
          <el-radio-group v-model="formData.passwordGrade">
            <el-radio v-for="(v,k) in insuranceLevel" :key="k" :label="k*1">{{ v }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="是否符合国家信息技术应用创新相关规范" prop="nationalItSpec">
          <el-radio-group v-model="formData.nationalItSpec">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<style lang="less">
.el-upload-list{
  width: 100%;
}
</style>
