<script name="projectCollectionEnterBasicInfo" setup>
import { onMounted, ref, watch } from 'vue'
import { applicationList } from '@/http/apis/declareMange'
import store from '@/store'
import { storeToRefs } from 'pinia'
import { useRoute } from 'vue-router'

const userInfo = storeToRefs(store.userStore).userInfo,
  route = useRoute(),
  props = defineProps({
    detail: {
      type: Object
    },
    basicInfoData: {
      type: Object
    }
  }),
  {
    accountAppNameOption,
    domainBrainAccountOptions
  } = store.dictStore.globalDicts || {},
  formRef = ref(),
  currentRules = ref(),
  formData = ref({
    applications: []
  }),
  column = [
    {
      label: '序号',
      type: 'index',
      width: 60
    },
    {
      label: '关联IRS应用名称',
      slot: 'application',
      key: 'application'
    },
    {
      label: 'IRS应用编码',
      slot: 'applicationCode',
      key: 'applicationCode'
    },
    {
      label: '一本账重大应用名称',
      slot: 'baseAccountAppName',
      key: 'baseAccountAppName'
    },
    {
      label: '"领域大脑"一本账名称',
      slot: 'baseBrainName',
      key: 'baseBrainName'
    },
    {
      label: '操作',
      slot: 'action',
      key: 'action'
    }
  ],
  add = () => {
    formData.value.applications.push({
      application: undefined
    })
  },
  del = (index) => {
    formData.value.applications.splice(index, 1)
  },
  appList = ref([])
defineExpose({ formRef, formData })
watch(() => props.basicInfoData, val => {
  if (val?.baseProjIsConfidentiality === '02' || val?.baseProjSetProg === '00') {
    currentRules.value = {}
  } else {
    currentRules.value = {
      applications: [{ required: true, message: '请至少关联一个应用' }]
    }
  }
  formRef.value?.clearValidate()
}, { deep: true, immediate: true })
onMounted(async () => {
  if (!route.query.id) {
    const res = await applicationList({ areaCode: userInfo.value.regionCode })
    appList.value = res.data
  }
})
watch(() => props.detail, async val => {
  if (val) {
    const res = await applicationList({ areaCode: userInfo.value.regionCode })
    appList.value = res.data
    formData.value = {
      applications: val.apply.baseProjSysCode?.split('；')?.map((i, k) => {
        return {
          application: appList.value?.find(j => j.applicationCode === i) || { applicationCode: i, applicationName: val.apply?.baseProjSys?.split('；')[k] || '' },
          baseAccountAppName: val.apply?.baseAccountAppName?.split('；')[k] || '',
          baseBrainName: val.apply?.baseBrainName?.split('；')[k] || ''
        }
      }) || []
    }
  }
})

</script>

<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="currentRules"
    label-position="top"
    label-suffix=":"
    scroll-to-error
    :validate-on-rule-change="false"
  >
    <el-row :gutter="40">
      <el-col :span="24">
        <el-form-item
          v-if="basicInfoData?.baseConstructionType?.includes('01')&&!(basicInfoData?.baseProjType==='01'&&(basicInfoData?.baseProjSetProg==='01'||basicInfoData?.baseProjSetProg==='02'))"
          key="applications1"
          label="关联IRS应用名称"
          prop="applications"
        >
          <p class="text-right w-full mb-8">
            <el-button type="primary" @click="add">添加关联应用</el-button>
          </p>
          <table-list
            :pagination="false"
            style="width: 100%"
            :column="column"
            :data="formData.applications"
            :empty-temp="false"
          >
            <template #application="{scope}">
              <el-form-item v-if="scope.$index>=0" :prop="`applications[${scope.$index}].application`" :rules="[{required:true,message:' '}]">
                <el-select
                  v-model="formData.applications[scope.$index].application"
                  class="w-full"
                  placeholder="请选择"
                  value-key="applicationCode"
                  filterable
                >
                  <el-option
                    v-for="(item, index) in appList"
                    :key="index"
                    :label="item.applicationName"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </template>
            <template #applicationCode="{scope}">
              <el-form-item>
                <el-input disabled :model-value="scope.row.application?.applicationCode" />
              </el-form-item>
            </template>
            <template #baseAccountAppName="{scope}">
              <el-form-item
                v-if="scope.$index>=0"
                :prop="`applications[${scope.$index}].baseAccountAppName`"
              >
                <el-select v-model="scope.row.baseAccountAppName">
                  <el-option
                    v-for="(item,index) in accountAppNameOption"
                    :key="index"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </template>
            <template #baseBrainName="{scope}">
              <el-form-item
                v-if="scope.$index>=0"
                :prop="`applications[${scope.$index}].baseBrainName`"
              >
                <el-select v-model="scope.row.baseBrainName">
                  <el-option
                    v-for="(item,index) in domainBrainAccountOptions"
                    :key="index"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </template>
            <template #action="{scope}">
              <a class="text-danger" @click="del(scope.$index)">删除</a>
            </template>
          </table-list>
        </el-form-item>
        <el-form-item v-else key="applications2" label="关联IRS应用名称">
          <p class="text-right w-full mb-8">
            <el-button type="primary" @click="add">添加关联应用</el-button>
          </p>
          <table-list
            :pagination="false"
            style="width: 100%"
            :column="column"
            :data="formData.applications"
            :empty-temp="false"
          >
            <template #application="{scope}">
              <el-form-item v-if="scope.$index>=0" :prop="`applications[${scope.$index}].application`" :rules="[{required:true,message:' '}]">
                <el-select
                  v-model="formData.applications[scope.$index].application"
                  class="w-full"
                  placeholder="请选择"
                  value-key="applicationCode"
                  filterable
                >
                  <el-option
                    v-for="(item, index) in appList"
                    :key="index"
                    :label="item.applicationName"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </template>
            <template #applicationCode="{scope}">
              <el-form-item>
                <el-input disabled :model-value="scope.row.application?.applicationCode" />
              </el-form-item>
            </template>
            <template #baseAccountAppName="{scope}">
              <el-form-item
                v-if="scope.$index>=0"
                :prop="`applications[${scope.$index}].baseAccountAppName`"
              >
                <el-select v-model="scope.row.baseAccountAppName">
                  <el-option
                    v-for="(item,index) in accountAppNameOption"
                    :key="index"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </template>
            <template #baseBrainName="{scope}">
              <el-form-item
                v-if="scope.$index>=0"
                :prop="`applications[${scope.$index}].baseBrainName`"
              >
                <el-select v-model="scope.row.baseBrainName">
                  <el-option
                    v-for="(item,index) in domainBrainAccountOptions"
                    :key="index"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </template>
            <template #action="{scope}">
              <a class="text-danger" @click="del(scope.$index)">删除</a>
            </template>
          </table-list>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
