<script name="projectCollectionEnterBasicInfo" setup>
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { districtList, getOrganizationByCode } from '@/http/apis/commonApi'
import OrgTree from '@/components/orgTree/index.vue'
import UserDialog from '@/pages/projectCollection/projectCollectionEnter/components/userDialog.vue'
import { storeToRefs } from 'pinia'
import store from '@/store'
import LineOrgDialog from '@/pages/projectCollection/projectCollectionEnter/components/lineOrgDialog.vue'
import { templateTypePage } from '@/http/apis/performanceEvaluation/indicatorTemplate'
const { projectOpeOptions } =
store.dictStore.globalDicts || {}
const props = defineProps({
    detail: {
      type: Object
    },
    dictionaryList: {
      type: Array,
      default: () => []
    }
  }),
  userInfo = storeToRefs(store.userStore).userInfo || {},
  formRef = ref(),
  formData = ref({
    baseProjIsConfidentiality: '01',
    // baseProjSetProg: '07',
    push: true
    // baseProjType: '04'
  }),
  userValidator = (rule, value, callback) => {
    if (!value) callback()
    if (formData.value.baseProjPrincipal === formData.value.baseProjContacts && formData.value.baseProjPrincipalCall === formData.value.baseProjContactsCall) {
      callback('项目负责人与项目联系人不能相同')
    } else {
      callback()
    }
  },
  currentRules = computed(() => {
    if (formData.value.baseProjIsConfidentiality === '02') {
      return {
        baseProjIsConfidentiality: [{ required: true, message: '请选择是否涉密项目' }],
        baseProjName: [{ required: true, message: '请填写项目名称', trigger: 'blur' }]
      }
    } else {
      return {
        push: [{ required: true, message: '请选择是否归集省里', type: Boolean }],
        baseProjIsConfidentiality: [{ required: true, message: '请选择是否涉密项目' }],
        baseProjName: [{ required: true, message: '请填写项目名称' }],
        baseProjType: [{ required: true, message: '请选择项目类型' }],
        baseArea: [{ required: true, message: '请选择所属区划' }],
        baseConstructionType: [{ required: true, message: '请选择内容类别' }],
        baseProjSetProg: [{ required: true, message: '请选择项目状态' }],
        baseProvManDeprtType: [{ required: true, message: '请选择上级主管单位类型' }],
        baseProvManDeprt: [{ required: true, message: '请选择上级主管单位' }],
        baseManDeprt: [{ required: true, message: '请选择本级主管单位' }],
        baseManDepartUsci: [{ required: true, message: '请填写本级主管单位统一社会信用代码' }],
        baseBuildDeprt: [{ required: true, message: '请填写建设单位' }],
        baseBuildDepartUsci: [{ required: true, message: '请填写建设单位统一信用代码' }],
        baseProjPrincipal: [{ required: true, message: '请选择项目负责人' }, { validator: userValidator }],
        baseProjPrincipalCall: [{ required: true, message: '请选择项目负责人' }],
        baseProjContacts: [{ required: true, message: '请选择项目联系人' }, { validator: userValidator }],
        baseProjContactsCall: [{ required: true, message: '请选择联系人手机号码' }],
        systemPosition: [{ required: true, message: '请填写系统定位' }],
        templateType: [{ required: true, message: '请选择绩效评价类型' }]
      }
    }
  }),
  isDisabledCreditCode = ref({}),
  getCode = async (name, code) => {
    const res = await getOrganizationByCode(code || userInfo.value.empPosUnitCode)
    isDisabledCreditCode.value[name] = !!res.data.unifiedSocialCreditCode
    formData.value[name] = res.data.unifiedSocialCreditCode || formData.value[name]
  },
  regionTree = ref([]),
  // 单位选择
  orgProps = reactive({
    field: undefined,
    unitVisible: false,
    data: undefined,
    title: undefined,
    type: undefined,
    params: undefined
  }),
  showOrgTree = (fieldName) => {
    orgProps.fieldName = fieldName
    orgProps.unitVisible = true
    orgProps.title = '选择单位'
    orgProps.type = 'UNIT'
    orgProps.showCheckbox = true
    orgProps.defaultProps = {
      children: 'children',
      label: 'title',
      value: 'key',
      isLeaf: 'isLeaf'
    }
    orgProps.params = {
      onlyUnit: true
    }
    orgProps.data = formData.value[`${fieldName}Ding`] ? [{
      key: formData.value[`${fieldName}Ding`],
      title: formData.value[fieldName]
    }] : []
    console.log(orgProps.data)
  },
  closeOrg = () => {
    orgProps.unitVisible = false
  },
  getOrgData = (data) => {
    formData.value[orgProps.fieldName + 'Ding'] = data?.[0].key || undefined
    formData.value[orgProps.fieldName] = data?.[0].title || undefined
    if (orgProps.fieldName === 'baseManDeprt' || orgProps.fieldName === 'baseBuildDeprt') { getCode(orgProps.fieldName === 'baseManDeprt' ? 'baseManDepartUsci' : 'baseBuildDepartUsci', formData.value[orgProps.fieldName + 'Ding']) }
  },
  // 选择负责人、联系人
  userDialogData = reactive({
    visible: false,
    params: {}
  }),
  filedName = ref(),
  filedPhone = ref(),
  showUserDialog = (name, phone) => {
    userDialogData.visible = true
    filedName.value = name
    filedPhone.value = phone
  },
  getUserData = (data) => {
    formData.value[filedName.value] = data.name
    formData.value[filedPhone.value] = data.phoneNo
  },
  // 上级主管单位类型
  changeBaseProvManDeprtType = (val, data) => {
    formData.value.baseProvManDeprtDing = ''
    formData.value.baseProvManDeprt = ''
  },
  lineOrgDialogData = reactive({
    visible: false,
    data: undefined
  }),
  showLineDialog = () => {
    lineOrgDialogData.visible = true
    lineOrgDialogData.data = {
      businessStripCode: formData.value.baseProvManDeprtDing
    }
  },
  getBaseProvManDeprt = (data) => {
    formData.value.baseProvManDeprtDing = data.businessStripCode
    formData.value.baseProvManDeprt = data.businessStripName
    lineOrgDialogData.visible = false
  },
  emits = defineEmits(['getBasicInfoData']),
  templateTypeListData = ref(),
  getTemplateTypeList = async () => {
    const res = await templateTypePage({
      pageNumber: 1,
      pageSize: 10000
    })
    templateTypeListData.value = res?.data?.records || []
  }
defineExpose({ formRef, formData })
onMounted(async () => {
  getTemplateTypeList()
  const res = await districtList({ regionCode: 330500, regionLevel: 2 })
  regionTree.value = res.data
})
watch(() => props.detail, val => {
  if (val) {
    formData.value = {
      ...val.baseinfo,
      baseProjIsConfidentiality: '01',
      // baseProjSetProg: '07',
      baseProvManDeprtType: val.baseinfo?.baseProvManDeprtType + '' || '',
      baseConstructionType: val.baseinfo?.baseConstructionType?.split('；') || []
    }
  }
})
watch(() => formData.value.baseProjIsConfidentiality, val => {
  formRef.value.clearValidate()
})
watch(() => formData.value, val => {
  emits('getBasicInfoData', formData.value)
}, { deep: true })

</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 prop="push" label="项目是否归集省里" class="flex-form-item">
          <el-switch v-model="formData['push']" class="mr-8" />
          <el-tooltip
            class="box-item"
            content="选择是的情况下，会将项目信息推送至省里进行归集；选择否的情况下，不会将项目信息推至省里。"
            placement="top"
          >
            <div class="flex items-center">
              <el-icon class="cursor-pointer"><QuestionFilled /></el-icon>
            </div>
          </el-tooltip>
        </el-form-item>
      </el-col>
      <el-col v-if="false" :span="8">
        <el-form-item label="是否涉密项目" prop="baseProjIsConfidentiality">
          <el-select
            v-model="formData.baseProjIsConfidentiality"
            placeholder="请选择"
            class="w-full"
          >
            <el-option
              v-for="(item,index) in dictionaryList?.filter(i => i.type === 'CLASSIFIED')"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="项目名称" prop="baseProjName">
          <el-input v-model="formData.baseProjName" maxlength="50" placeholder="请填写" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="项目类型" prop="baseProjType">
          <el-select
            v-model="formData.baseProjType"
            placeholder="请选择"
            class="w-full"
          >
            <el-option
              v-for="(v,k) in projectOpeOptions"
              :key="k"
              :label="v"
              :value="k"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col v-if="false" :span="8">
        <el-form-item label="所属区划" prop="baseArea">
          <el-select v-model="formData.baseArea" value-key="baseAreaCode" class="w-full">
            <el-option
              v-for="(item,index) in regionTree?.children"
              :key="index"
              :label="item.name==='市本级'?'丽水市':item.name"
              :value="{baseAreaCode:item.regionCode,baseAreaName:item.name==='市本级'?'丽水市':item.name}"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="内容类别" prop="baseConstructionType">
          <el-checkbox-group v-model="formData.baseConstructionType">
            <el-checkbox v-for="(item,index) in dictionaryList?.filter(i => i.type === 'CONTENT_TYPE')" :key="index" :label="item.value">{{ item.label }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="项目状态" prop="baseProjSetProg">
          <el-select
            v-model="formData.baseProjSetProg"
            placeholder="请选择"
            class="w-full"
          >
            <el-option
              v-for="(item,index) in dictionaryList?.filter(i => i.type === 'PROJECT_STATUS')"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="上级主管单位类型" prop="baseProvManDeprtType">
          <el-radio-group v-model="formData.baseProvManDeprtType" @change="changeBaseProvManDeprtType">
            <el-radio label="1">省级</el-radio>
            <el-radio label="2">非省级</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="上级主管单位" prop="baseProvManDeprt">
          <el-input
            v-if="formData.baseProvManDeprtType==='2'"
            v-model="formData.baseProvManDeprt"
            placeholder="请选择"
            readonly
            @click="showOrgTree('baseProvManDeprt')"
          />
          <el-input
            v-else
            v-model="formData.baseProvManDeprt"
            placeholder="请选择"
            readonly
            @click="showLineDialog"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="本级主管单位" prop="baseManDeprt">
          <el-input
            v-model="formData.baseManDeprt"
            placeholder="请选择"
            readonly
            @click="showOrgTree('baseManDeprt',)"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="本级主管单位统一社会信用代码" prop="baseManDepartUsci">
          <el-input v-model="formData.baseManDepartUsci" placeholder="请填写" :disabled="isDisabledCreditCode['baseManDepartUsci']" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="建设单位" prop="baseBuildDeprt">
          <el-input
            v-model="formData.baseBuildDeprt"
            placeholder="请选择"
            readonly
            @click="showOrgTree('baseBuildDeprt',)"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="建设单位统一信用代码" prop="baseBuildDepartUsci">
          <el-input v-model="formData.baseBuildDepartUsci" placeholder="请填写" :disabled="isDisabledCreditCode['baseBuildDepartUsci']" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="项目负责人" prop="baseProjPrincipal">
          <el-input
            v-model="formData.baseProjPrincipal"
            readonly
            placeholder="请选择，温馨提示：项目负责人请填写领导信息"
            @click="showUserDialog('baseProjPrincipal','baseProjPrincipalCall')"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="负责人手机号码" prop="baseProjPrincipalCall">
          <el-input
            v-model="formData.baseProjPrincipalCall"
            readonly
            placeholder="请选择"
            @click="showUserDialog('baseProjPrincipal','baseProjPrincipalCall')"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="项目联系人" prop="baseProjContacts">
          <el-input
            v-model="formData.baseProjContacts"
            readonly
            placeholder="请选择"
            @click="showUserDialog('baseProjContacts','baseProjContactsCall')"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="联系人手机号码" prop="baseProjContactsCall">
          <el-input
            v-model="formData.baseProjContactsCall"
            readonly
            placeholder="请选择"
            @click="showUserDialog('baseProjContacts','baseProjContactsCall')"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="系统定位" prop="systemPosition">
          <el-input
            v-model="formData.systemPosition"
            type="textarea"
            show-word-limit
            placeholder="请填写"
            :maxlength="2000"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="绩效评价类型" prop="templateType">
          <el-radio-group v-model="formData.templateType">
            <el-radio
              v-for="(v,k) in templateTypeListData"
              :key="k"
              :label="v.id"
            >
              {{ v.name }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <org-tree
    :visible="orgProps.unitVisible"
    :show-checkbox="false"
    :default-data="orgProps.data"
    :title="orgProps.title"
    :type="orgProps.type"
    :default-props="orgProps.defaultProps"
    :params="orgProps.params"
    @close="closeOrg"
    @get-select-unit="getOrgData"
  />
  <user-dialog
    :visible="userDialogData.visible"
    :params="userDialogData.params"
    @close="userDialogData.visible=false"
    @get-user-data="getUserData"
  />
  <line-org-dialog
    :visible="lineOrgDialogData.visible"
    :data="lineOrgDialogData.data"
    @close="lineOrgDialogData.visible=false"
    @get-base-prov-man-deprt="getBaseProvManDeprt"
  />
</template>
