<script name="appResourceInfo" setup>
import { ref, watch } from 'vue'
import store from '@/store'
const {
  netEnvOptions
} = store.dictStore.globalDicts || {}
const props = defineProps({
    data: {
      type: Object,
      default: null
    }
  }),
  formData = ref({}),
  formRef = ref(),
  rules = {
    useGovCloud: [{ required: true, message: '请选择是否使用政务云资源' }],
    cloudsType: [{ required: true, message: '请填写云资源类型' }],
    cloudsFoundationSpecifications: [{ required: true, message: '请填写云资源基础规格' }],
    cloudsNumber: [{ required: true, message: '请填写云资源台数' }],
    cloudsDescription: [{ required: true, message: '请填写云资源台数' }],
    netEnv: [{ required: true, message: '请选择网络环境' }],
    useCommonData: [{ required: true, message: '请选择是否使用公共数据' }],
    dataName: [{ required: true, message: '请输入公共数据名称' }],
    useCommonComponent: [{ required: true, message: '请选择是否使用公共组件' }],
    commonComponents: [{ required: true, message: '请输入公共组件名称' }],
    produceCommonComponent: [{ required: true, message: '请选择是否使用公共组件' }],
    produceCommonComponents: [{ required: true, message: '请填写预计组件名称' }]
  },
  // 校验
  validForm = (callback) => {
    formRef.value.validate(valid => {
      callback(valid)
    })
  },
  // 清空校验
  clearValidate = () => {
    formRef.value.clearValidate()
  }
watch(
  () => props.data,
  val => {
    formData.value = {
      useGovCloud: props.data.useGovCloud,
      cloudsType: props.data.cloudsType,
      cloudsFoundationSpecifications: props.data.cloudsFoundationSpecifications,
      cloudsNumber: props.data.cloudsNumber,
      cloudsDescription: props.data.cloudsDescription,
      netEnv: props.data.netEnv,
      useCommonData: props.data.useCommonData,
      dataName: props.data.dataName,
      useCommonComponent: props.data.useCommonComponent,
      commonComponents: props.data.commonComponents,
      produceCommonComponent: props.data.produceCommonComponent,
      produceCommonComponents: props.data.produceCommonComponents
    }
  },
  { 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="useGovCloud">
          <el-radio-group v-model="formData.useGovCloud">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <template v-if="formData.useGovCloud === 1">
        <el-col :span="12">
          <el-form-item label="云资源类型" prop="cloudsType">
            <el-input
              v-model="formData.cloudsType"
              placeholder="请填写"
              :maxlength="50"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="云资源基础规格" prop="cloudsFoundationSpecifications">
            <el-input
              v-model="formData.cloudsFoundationSpecifications"
              placeholder="请填写"
              :maxlength="50"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="云资源台数" prop="cloudsNumber">
            <el-input
              v-model="formData.cloudsNumber"
              placeholder="请填写"
              maxlength="6"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="云资源用途描述" prop="cloudsDescription">
            <el-input
              v-model="formData.cloudsDescription"
              placeholder="请填写"
              :maxlength="50"
            />
          </el-form-item>
        </el-col>
      </template>
      <el-col :span="24">
        <el-form-item label="网络环境" prop="netEnv">
          <el-radio-group v-model="formData.netEnv">
            <el-radio v-for="(v,k) in netEnvOptions" :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="useCommonData">
          <el-radio-group v-model="formData.useCommonData">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="16">
        <el-form-item v-if="formData.useCommonData === 1" label="数据名称" prop="dataName">
          <el-input
            v-model="formData.dataName"
            placeholder="请填写"
            :maxlength="50"
          />
        </el-form-item>
      </el-col>
      <el-col :span="16">
        <el-form-item label="是否使用公共组件" prop="useCommonComponent">
          <el-radio-group v-model="formData.useCommonComponent">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="16">
        <el-form-item v-if="formData.useCommonComponent === 1" label="使用公共组件名称" prop="commonComponents">
          <el-input
            v-model="formData.commonComponents"
            placeholder="请填写"
            :maxlength="50"
          />
        </el-form-item>
      </el-col>
      <el-col :span="16">
        <el-form-item label="是否产生公共组件" prop="produceCommonComponent">
          <el-radio-group v-model="formData.produceCommonComponent">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="16">
        <el-form-item v-if="formData.produceCommonComponent === 1" label="预计产生组件名称" prop="produceCommonComponents">
          <el-input
            v-model="formData.produceCommonComponents"
            placeholder="请填写"
            :maxlength="50"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

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