<script name="appBasicInfo" setup>
import { watch, ref } from 'vue'
import store from '@/store'
import { fileFormatVerification, handleFileSuccess, handleFilePreview, fileTypes, fileDesc } from '@/utils/uploadAction.js'
import { applicationList, piotTasks } from '@/http/apis/declareMange'
import { storeToRefs } from 'pinia'

const {
    accountAppNameOption,
    constructionLevel,
    applicationType,
    businessField,
    publisher,
    useScope,
    digitalModifySystem,
    domainBrainAccountOptions
  } = store.dictStore.globalDicts || {},
  uploadUrl = store.dictStore.uploadUrl,
  userInfo = storeToRefs(store.userStore).userInfo || {},
  props = defineProps({
    data: {
      type: Object,
      default: null
    },
    drawerVisible: {
      type: Boolean,
      default: false
    },
    isInnovateWholeProvinceShare: {
      type: Boolean,
      default: false
    }
  }),
  formData = ref({
    experimentsFile: []
  }),
  formRef = ref(),
  rules = {
    isFirst: [{ required: true, message: '请选择是否为首次建设' }],
    applicationName: [
      { required: true, message: '请填写应用名称' }
    ],

    relatedExistsApplication: [{ required: true, message: '请选择IRS注册应用' }],
    relatedExistsApplicationCode: [{ required: true, message: '请选择IRS应用编码' }],
    pilotTasksName: [{ required: true, message: '请选择试点任务名称' }],
    pilotTasksCode: [{ required: true, message: '请选择试点任务编号' }],
    importantTaskName: [{ required: true, message: '所属重大应用名称' }],
    importantTaskCode: [{ required: true, message: '所属重大应用编码' }],
    subSceneApplicationName: [{ required: true, message: '所属子场景应用名称' }],
    experimentsFile: [{ required: true, message: '请上传试点文件' }],

    applicationType: [{ required: true, message: '请选择应用类型' }],
    buildLevel: [{ required: true, message: '请选择建设层级', trigger: 'change' }],
    isUniteBuild: [{ required: true, message: '请选择是否为统建应用' }],
    unionBuildKind: [{ required: true, message: '请选择统建类型' }],
    isDigitalModification: [{ required: true, message: '请选择是否为数改系统' }],
    digitalModification: [{ required: true, message: '请选择数改系统' }],
    bizDomain: [{ required: true, message: '请选择业务领域' }],
    publishSide: [{ required: true, message: '请选择发布端' }],
    isAccountAppName: [{ required: true, message: '请选择是否S2一本账名称' }],
    accountAppName: [{ required: true, message: '请选择S2一本账名称' }],
    domainBrainAccount: [{ required: true, message: '请选择领域“大脑”一本账' }],
    isBizCooperate: [{ required: true, message: '请选择是否为业务协同' }],
    bizCooperateInfo: [{ required: true, message: '请填写业务协同描述' }],
    usesRangeRemark: [{ required: true, message: '请选择使用范围' }],
    applicationSummary: [{ required: true, message: '请填写应用简介' }],
    applicationRemark: [{ required: true, message: '请填写应用备注' }],
    applicationEstimateFile: [{ 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
  },
  // 获取试点任务列表
  piotTasksOptions = ref([]),
  getPiotTasksOptions = async () => {
    const res = await piotTasks()
    piotTasksOptions.value = res.data
  },
  // 修改关联应用
  changeIrsApp = (data) => {
    formData.value.relatedExistsApplicationCode = data.applicationCode
  },
  // 修改试点任务
  changePilotTask = (data) => {
    formData.value.pilotTasksCode = data.taskCode
    formData.value.importantTaskName = data.importantTaskName
    formData.value.importantTaskCode = data.importantTaskCode
    formData.value.subSceneApplicationName = data.subSceneApplicationName
  },
  // 修改是否初次建设
  changeIsFirst = () => {
    if (formData.value.isFirst === 1) {
      formData.value.relatedExistsApplication = undefined
      formData.value.relatedExistsApplicationCode = undefined
    } else {
      formData.value.applicationName = undefined
    }
  }
watch(
  () => props.drawerVisible,
  val => {
    if (val) {
      formData.value = {
        ...props.data,
        isFirst: props.data.isFirst || undefined
      }
      getApplicationOptions()
      getPiotTasksOptions()
    }
  },
  { immediate: 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 v-if="!props.isInnovateWholeProvinceShare" :span="12">
        <el-form-item label="是否初次建设" prop="isFirst" @change="changeIsFirst">
          <el-radio-group v-model="formData.isFirst">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <template v-if="formData.isFirst===2||props.isInnovateWholeProvinceShare">
        <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>
          </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>
      <template v-if="props.isInnovateWholeProvinceShare">
        <el-col :span="12">
          <el-form-item label="试点任务名称" prop="pilotTasksName">
            <el-select
              v-model="formData.pilotTasksName"
              class="w-full"
              placeholder="请选择"
              value-key="taskCode"
              @change="changePilotTask"
            >
              <el-option
                v-for="(item, index) in piotTasksOptions"
                :key="index"
                :label="item.taskName"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="试点任务编号" prop="pilotTasksCode">
            <el-input v-model="formData.pilotTasksCode" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属重大应用名称" prop="importantTaskName">
            <el-input v-model="formData.importantTaskName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属重大应用编码" prop="importantTaskCode">
            <el-input v-model="formData.importantTaskCode" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属子场景应用名称" prop="subSceneApplicationName">
            <el-input v-model="formData.subSceneApplicationName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="试点文件" prop="experimentsFile">
            <el-upload
              ref="preliminaryPlanRef"
              v-model:file-list="formData.experimentsFile"
              class="upload-demo"
              :action="uploadUrl"
              multiple
              :on-success="res => handleFileSuccess(res, formData.experimentsFile, true)"
              :before-upload="file=>fileFormatVerification(file, {types: fileTypes})"
              :accept="fileTypes.map(i=>`.${i}`).join(',')"
              :limit="1"
              :on-preview="handleFilePreview"
            >
              <el-button plain type="primary">选择文件</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  支持{{ fileDesc }}文件
                </div>
              </template>
            </el-upload>
          </el-form-item>
        </el-col>
      </template>
      <el-col v-if="formData.isFirst===1&&!props.isInnovateWholeProvinceShare" :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="24">
        <el-form-item label="建设层级" prop="buildLevel">
          <el-radio-group v-model="formData.buildLevel">
            <el-radio
              v-for="(item, index) in constructionLevel"
              :key="index"
              :label="index*1"
            >{{ item }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="是否统建应用" prop="isUniteBuild">
          <el-radio-group v-model="formData.isUniteBuild">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item v-if="formData.isUniteBuild===1" label="统建类型" prop="unionBuildKind">
          <el-radio-group v-model="formData.unionBuildKind">
            <el-radio :label="1">全省统建</el-radio>
            <el-radio :label="2">全市统建</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="是否数改系统" prop="isDigitalModification">
          <el-radio-group v-model="formData.isDigitalModification">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item v-if="formData.isDigitalModification===1" label="数改系统" prop="digitalModification">
          <el-select
            v-model="formData.digitalModification"
            multiple
            collapse-tags
            collapse-tags-tooltip
            placeholder="请选择"
            class="w-full"
          >
            <el-option
              v-for="(v, k) in digitalModifySystem"
              :key="k"
              :label="v"
              :value="k"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="业务领域" prop="bizDomain">
          <el-select v-model="formData.bizDomain" placeholder="请选择" class="w-full">
            <el-option
              v-for="(item, index) in businessField"
              :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="12">
        <el-form-item label="是否S2一本账名称" prop="isAccountAppName">
          <el-radio-group v-model="formData.isAccountAppName">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item v-if="formData.isAccountAppName === 1" label="S2一本账名称" prop="accountAppName">
          <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="16">
        <el-form-item v-if="formData.isAccountAppName === 1 && formData.isDigitalModification===1" label="领域“大脑”一本账" prop="domainBrainAccount">
          <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="12">
        <el-form-item label="是否业务协同" prop="isBizCooperate">
          <el-radio-group v-model="formData.isBizCooperate">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item
          v-if="formData.isBizCooperate === 1"
          label="业务协同描述"
          prop="bizCooperateInfo"
        ><el-input
          v-model="formData.bizCooperateInfo"
          :autosize="{ minRows: 2, maxRows: 4 }"
          maxlength="2000"
          type="textarea"
          placeholder="请填写"
        /> </el-form-item>
      </el-col>
      <el-col :span="16">
        <el-form-item label="使用范围" prop="usesRangeRemark">
          <el-cascader
            v-model="formData.usesRangeRemark"
            :options="useScope"
            class="w-full"
          />
        </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="24">
        <el-form-item
          label="应用备注"
          prop="applicationRemark"
        ><el-input
          v-model="formData.applicationRemark"
          :autosize="{ minRows: 2, maxRows: 4 }"
          maxlength="2000"
          type="textarea"
          placeholder="请填写"
        /> </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item
          label="应用总投资测算明细"
          prop="applicationEstimateFile"
        >
          <el-upload
            v-model:file-list="formData.applicationEstimateFile"
            class="upload-demo"
            :action="uploadUrl"
            multiple
            :on-success="res => handleFileSuccess(res, formData.applicationEstimateFile, false)"
            :before-upload="file=>fileFormatVerification(file, {types: fileTypes})"
            :accept="fileTypes.map(i=>`.${i}`).join(',')"
            :limit="10"
            :on-preview="handleFilePreview"
          >
            <el-button plain type="primary">选择文件</el-button>
            <template #tip>
              <div class="el-upload__tip">
                支持{{ fileDesc }}文件
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

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