<script lang="ts" setup>
import { ref, reactive, onMounted, watch, nextTick, unref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus'
// import { useGlobalEvent } from './globalEvent'
// const { infoData, setInfoData } = useGlobalEvent()
const ruleFormRef = ref<FormInstance>()

const emit = defineEmits(['onInit','getInfo']);
const props = defineProps({
  infoObj:Object
})
const title = ref('端口信息')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
]
const ruleForm = ref({
  prot: null, // 端口
  domain: '', //域名
  urlLink: '', //url连接
  assetType: '', //资产类型
  name: '', // 资产名称
  assetTagSet: '', //	资产标签
  organizationName: '', // 单位
  name1: '', // 责任人
  name2: '', // 责任人联系方式
  deptId: null, //部门id
  isAccessControl: true, // 是否访问控制
  provinceCity: '', // 省市
  feature: {
    isInformationSystem: true, //是否信息系统
    hasWebInterface: true, //是否有WEB界面
    isOwn: true, //是否自有属性
    extraNetAccessible: true, // 是否外网可访问
    isSecurityProtect: true, // 是否等保
    remark: '', // 备注
  }
})
const rules = reactive<FormRules>({
  assetType : [
    { required: true, message: '请选择资产类型', trigger: 'change' }
  ],
  deptId: [
    { required: true, message: '请选择部门', trigger: 'change' }
  ],
})
const isAdd = ref(false)
const info = ref({
  isAdd: false
})
const submitBtn = () => {
  submitForm(ruleFormRef.value)
}
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      isAdd.value = false
      emit('getInfo', info.value, isAdd.value)
      console.log(ruleForm.value, '-----------')
      // console.log('submit!',infoData)

    } else {
      isAdd.value = true
      emit('getInfo', info.value, isAdd.value)
      console.log('error submit!', fields)
    }
  })
}
defineExpose({ submitBtn })
</script>
<template>
  <div class="right flex-one">
    <div class="right-title">{{ruleForm.prot}}</div>
    <div class="right-form">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="80px"
        :label-position="'top'"
      >
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="域名" prop="domain">
            <el-input v-model="ruleForm.domain" placeholder="请输入域名" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="URL" prop="urlLink">
            <el-input v-model="ruleForm.urlLink" placeholder="请输入URL" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="资产标签">
            <el-select v-model="ruleForm.assetTagSet" placeholder="请选择" clearable>
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="资产名称">
            <el-input v-model="ruleForm.name" placeholder="请输入" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="资产类型" prop="assetType">
            <el-select v-model="ruleForm.assetType" placeholder="请选择资产类型">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="资产所在省市">
            <el-input v-model="ruleForm.provinceCity" placeholder="请输入资产所在省市" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="所在单位">
            <el-input v-model="ruleForm.organizationName" placeholder="请输入所在单位" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="所属部门" prop="deptId">
            <el-input v-model="ruleForm.deptId" placeholder="请输入登录密码" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="责任人">
            <el-select v-model="ruleForm.name1" placeholder="请选择" clearable>
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="责任人联系方式">
            <el-input v-model="ruleForm.name2" placeholder="请输入责任人联系方式" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="from-item-bg new-form-item margin-bottom24">
            <el-form-item label="是否备案" class="flex-one new-form-item-input">
              <el-radio-group v-model="ruleForm.isRecord">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input
              v-model="ruleForm.feature.remark"
              maxlength="200"
              :autosize="{ minRows: 4, maxRows: 4 }"
              placeholder="请输入备注"
              show-word-limit
              type="textarea"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" >
          <div class="from-item-bg new-form-item margin-bottom24">
            <el-form-item label="资产自有属性" class="flex-one new-form-item-input">
              <el-radio-group v-model="ruleForm.feature.isOwn">
                <el-radio :label="true">自有</el-radio>
                <el-radio :label="false">客户</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6" >
          <div class="from-item-bg new-form-item">
            <el-form-item label="是否外网可访问" class="flex-one new-form-item-input">
              <el-radio-group v-model="ruleForm.feature.extraNetAccessible">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6" >
          <div class="from-item-bg new-form-item">
            <el-form-item label="是否等保" class="flex-one new-form-item-input">
              <el-radio-group v-model="ruleForm.feature.isSecurityProtect">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6" >
          <div class="from-item-bg new-form-item">
            <el-form-item label="是否系统信息" class="flex-one new-form-item-input">
              <el-radio-group v-model="ruleForm.feature.isInformationSystem">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6" >
          <div class="from-item-bg new-form-item">
            <el-form-item label="是否有web界面" class="flex-one new-form-item-input">
              <el-radio-group v-model="ruleForm.feature.hasWebInterface">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      </el-form>
    </div>
  </div>
</template>
<style lang="scss" scoped>
@import '../../../style/addView.scss';
</style>