<script name="appBasicInfo" setup>
import { watch, ref, getCurrentInstance } from 'vue'
import store from '@/store'
import { applicationList } from '@/http/apis/declareMange'
import { storeToRefs } from 'pinia'

const {
    publisher,
    insuranceLevel,
    applicationType,
    accountAppNameOption,
    domainBrainAccountOptions
  } = store.dictStore.globalDicts || {},
  userInfo = storeToRefs(store.userStore).userInfo || {},
  { proxy } = getCurrentInstance(),
  props = defineProps({
    data: {
      type: Object,
      default: null
    },
    drawerVisible: {
      type: Boolean,
      default: false
    },
    isFirst: {
      type: Number,
      default: undefined
    },
    coreBusiness: {
      type: Array,
      default: () => {
        return []
      }
    }
  }),
  formData = ref({
    coreBusinessList: [{}]
  }),
  formRef = ref(),
  rules = {
    applicationName: [
      { required: true, message: '请填写应用名称' }
    ],
    relatedExistsApplication: [{ required: true, message: '请选择IRS注册应用' }],
    relatedExistsApplicationCode: [{ required: true, message: '请选择IRS应用编码' }],
    applicationType: [{ required: true, message: '请选择应用类型' }],
    publishSide: [{ required: true, message: '请选择发布端' }],
    applicationSummary: [{ required: true, message: '请填写应用简介' }],
    secrecyGrade: [{ required: true, message: '请选择等保级别' }],
    passwordGrade: [{ required: true, message: '请选择密码测评级别' }],
    accountAppName: [{ required: true, message: '请选择' }],
    domainBrainAccount: [{ required: true, message: '请选择' }]
  },
  // 校验
  validForm = (callback) => {
    formRef.value.validate((valid) => {
      callback(valid)
    })
  },
  // 清空校验
  clearValidate = () => {
    formRef.value.clearValidate()
  },
  // 获取irs应用列表
  applicationOptions = ref([]),
  getApplicationOptions = async () => {
    const res = await applicationList({ areaCode: userInfo.value.regionCode })
    applicationOptions.value = res.data
  },
  // 修改关联应用
  changeIrsApp = (data) => {
    formData.value.relatedExistsApplicationCode = data.applicationCode
  },
  // 添加核心业务
  addCore = () => {
    if (props.coreBusiness?.length <= formData.value.coreBusinessList?.length) {
      proxy.$message.warning(`最多添加${props.coreBusiness?.length || 1}个核心业务`)
      return
    }
    formData.value.coreBusinessList.push({})
  },
  // 删除核心业务
  delCore = (index) => {
    formData.value.coreBusinessList.splice(index, 1)
  }

watch(
  () => props.drawerVisible,
  val => {
    if (val) {
      formData.value = {
        ...props.data,
        coreBusinessList: props.data.coreBusinessList?.length ? props.data.coreBusinessList : [{}]
      }
      getApplicationOptions()
    }
  },
  { immediate: true }
)
watch(
  () => props.data,
  val => {
    formData.value = {
      ...props.data,
      coreBusinessList: props.data.coreBusinessList?.length ? props.data.coreBusinessList : [{}]
    }
  },
  { 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">
      <template v-if="(props.isFirst===0&&userInfo.regionCode==='331123')||userInfo.regionCode!=='331123'">
        <el-col :span="12">
          <el-form-item label="关联IRS已注册应用" prop="relatedExistsApplication">
            <el-select
              v-model="formData.relatedExistsApplication"
              class="w-full"
              placeholder="请选择"
              value-key="applicationCode"
              @change="changeIrsApp"
            >
              <el-option
                v-for="(item, index) in applicationOptions"
                :key="index"
                :label="item.applicationName"
                :value="{applicationCode:item.applicationCode,applicationName:item.applicationName}"
              />
            </el-select>
            <p class="text-12 text-danger" style="line-height: 1.4">温馨提示：首次建设项目请先去IRS平台注册后再关联应用</p>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="IRS应用编码" prop="relatedExistsApplicationCode">
            <el-input v-model="formData.relatedExistsApplicationCode" disabled />
          </el-form-item>
        </el-col>
      </template>
      <el-col v-else :span="12">
        <el-form-item label="应用名称" prop="applicationName">
          <el-input
            v-model="formData.applicationName"
            placeholder="请填写"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="应用类型" prop="applicationType">
          <el-select v-model="formData.applicationType" placeholder="请选择" class="w-full">
            <el-option
              v-for="(item, index) in applicationType"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="发布端" prop="publishSide">
          <el-select v-model="formData.publishSide" placeholder="请选择" class="w-full">
            <el-option
              v-for="(item, index) in publisher"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item
          label="应用简介"
          prop="applicationSummary"
        ><el-input
          v-model="formData.applicationSummary"
          :autosize="{ minRows: 2, maxRows: 4 }"
          maxlength="2000"
          type="textarea"
          placeholder="请填写"
        /> </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="一本账重大应用名称">
          <el-select
            v-model="formData.accountAppName"
            placeholder="请选择"
            class="w-full"
            clearable
          >
            <el-option
              v-for="(item, index) in accountAppNameOption"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="领域“大脑”一本账">
          <el-select v-model="formData.domainBrainAccount" placeholder="请选择" class="w-full">
            <el-option
              v-for="(item, index) in domainBrainAccountOptions"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <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>
      <div
        v-for="(item,index) in formData.coreBusinessList"
        :key="index"
        class="py-24 pr-60 mb-16 relative"
        style="background: rgb(245, 248, 250);"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="核心业务" :prop="`coreBusinessList[${index}].coreBusiness`" :rules="[{required:true,message:'请选择'}]">
              <el-select v-model="formData.coreBusinessList[index].coreBusiness" placeholder="请选择核心业务" class="w-full">
                <el-option
                  v-for="(row,key) in props.coreBusiness"
                  :key="key"
                  :label="row.matterName"
                  :value="row.matterName"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分值" :prop="`coreBusinessList[${index}].score`" :rules="[{required:true,message:'请输入'}]">
              <el-input-number
                v-model="formData.coreBusinessList[index].score"
                class="input-amount f"
                placeholder="请填写"
                :min="0.01"
                :max="10"
                :precision="2"
                :controls="false"
                @mousewheel.prevent
              >
                <template #suffix>分</template>
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务指标名称" :prop="`coreBusinessList[${index}].businessIndicatorName`" :rules="[{required:true,message:'请输入'}]">
              <el-input v-model="formData.coreBusinessList[index].businessIndicatorName" :maxlength="50" placeholder="请填写" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务指标描述" :prop="`coreBusinessList[${index}].businessIndicatorDescription`" :rules="[{required:true,message:'请输入'}]">
              <el-input v-model="formData.coreBusinessList[index].businessIndicatorDescription" :maxlength="50" placeholder="请填写" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="指标设计依据"
              :prop="`coreBusinessList[${index}].indexDesignBasis`"
              style="margin-bottom: 0"
              :rules="[{required:true,message:'请输入'}]"
            >
              <el-input v-model="formData.coreBusinessList[index].indexDesignBasis" :maxlength="50" placeholder="请填写" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="指标计算方法"
              :prop="`coreBusinessList[${index}].indexCalculationMethod`"
              style="margin-bottom: 0"
              :rules="[{required:true,message:'请输入'}]"
            >
              <el-input v-model="formData.coreBusinessList[index].indexCalculationMethod" :maxlength="50" placeholder="请填写" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-button
          v-if="formData.coreBusinessList?.length>1"
          type="danger"
          link
          plain
          class="absolute top-10 right-8"
          @click="delCore(index)"
        >删除</el-button>
      </div>
      <p>
        <el-button
          type="primary"
          size="small"
          icon="Plus"
          plain
          class="ml-80 block"
          @click="addCore"
        >添加核心业务</el-button>
      </p>
    </el-row>
  </el-form>
</template>

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