<script name="projectCollectionEnterManageInfo" setup>
import { onMounted, reactive, ref, watch } from 'vue'
import OrgTree from '@/components/orgTree/index.vue'
import store from '@/store'
import { getTreeParams } from '@/utils/getIsShowRegionTree'
import { districtList } from '@/http/apis/commonApi'

const props = defineProps({
    detail: {
      type: Object
    }
  }),
  { baseProjConsClassOptions } = store.dictStore.globalDicts || {},
  // 行政区划
  areaOptions = ref([]),
  formRef = ref(),
  formData = ref({}),
  // 手机号码校验
  checkTelPhone = (rule, value, callback) => {
    if (value === '') {
      return callback(new Error('请输入正确的手机号'))
    } else {
      const regIdCard =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if (regIdCard.test(value)) {
        callback()
      } else {
        return callback(new Error('请输入正确的手机号'))
      }
    }
  },
  rules = {
    areaCode: [{ required: true, message: '请选择行政区划', trigger: 'change' }],
    buildOrg: [{ required: true, message: '请选择建设单位', trigger: 'change' }],
    responsibleMan: [{ required: true, message: '请填写项目负责人', trigger: 'blur' }],
    responsibleManMobile: [
      { required: true, message: '请填写项目负责人手机号', trigger: 'blur' },
      { validator: checkTelPhone, trigger: 'blur' }
    ],
    contactName: [{ required: true, message: '请填写项目联系人', trigger: 'blur' }],
    contactPhone: [
      { required: true, message: '请填写项目联系人手机号', trigger: 'blur' },
      { validator: checkTelPhone, trigger: 'blur' }
    ],
    higherSuperOrg: [{ required: true, message: '请选择上级业务主管部门', trigger: 'change' }],
    superOrg: [{ required: true, message: '请选择本级业务主管部门', trigger: 'change' }],
    constructionOrg: [{ required: true, message: '请选择建设单位', trigger: 'change' }],
    buildLevel: [{ required: true, message: '请选择建设层级', trigger: 'change' }]
  },
  // 单位选择
  orgProps = reactive({
    field: undefined,
    unitVisible: false,
    data: undefined,
    title: undefined,
    type: undefined,
    params: undefined
  }),
  showOrgTree = (field) => {
    orgProps.field = field
    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[`${field}Code`] ? [{
      key: formData.value[`${field}Code`],
      title: formData.value[field]
    }] : []
  },
  closeOrg = () => {
    orgProps.unitVisible = false
  },
  getOrgData = (data) => {
    formData.value[`${orgProps.field}Code`] = data?.[0].key || undefined
    formData.value[orgProps.field] = data?.[0].title || undefined
  }
defineExpose({ formRef, formData })
watch(() => props.detail, val => {
  if (val) {
    formData.value = {
      areaCode: ['330500', val.areaCode],
      responsibleMan: val.responsibleMan,
      responsibleManMobile: val.responsibleManMobile,
      contactName: val.contactName,
      contactPhone: val.contactPhone,
      higherSuperOrg: val.higherSuperOrg,
      superOrg: val.superOrg,
      constructionOrg: val.constructionOrg,
      constructionOrgCreditCode: val.constructionOrgCreditCode,
      buildLevel: val.buildLevel,
      buildOrg: val.buildOrg,
      buildOrgCode: val.buildOrgCode
    }
  }
})

onMounted(async () => {
  areaOptions.value = [(await districtList(getTreeParams({ 'SUPER_ADMIN': false, 'REGION_MANAGER': false }))).data]
})
</script>

<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="rules"
    label-position="top"
    label-suffix=":"
    scroll-to-error
  >
    <el-row :gutter="40">
      <el-col :span="8">
        <el-form-item label="行政区划" prop="areaCode">
          <el-cascader
            v-model="formData.areaCode"
            class="w-full"
            :props="{label:'name',value:'regionCode'}"
            :options="areaOptions"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="项目负责人" prop="responsibleMan">
          <el-input v-model="formData.responsibleMan" maxlength="50" placeholder="请填写" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="项目负责人手机号" prop="responsibleManMobile">
          <el-input v-model="formData.responsibleManMobile" maxlength="11" placeholder="请填写" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="项目联系人" prop="contactName">
          <el-input v-model="formData.contactName" maxlength="50" placeholder="请填写" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="项目联系人手机号" prop="contactPhone">
          <el-input v-model="formData.contactPhone" maxlength="11" placeholder="请填写" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="上级业务主管部门" prop="higherSuperOrg">
          <el-input
            v-model="formData.higherSuperOrg"
            placeholder="请选择"
            readonly
            @click="showOrgTree('higherSuperOrg')"
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="本级业务主管部门" prop="superOrg">
          <el-input
            v-model="formData.superOrg"
            placeholder="请选择"
            readonly
            @click="showOrgTree('superOrg')"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="建设单位" prop="buildOrg">
          <el-input
            v-model="formData.buildOrg"
            placeholder="请选择"
            readonly
            @click="showOrgTree('buildOrg')"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="建设单位统一信用代码" prop="constructionOrgCreditCode">
          <el-input v-model="formData.constructionOrgCreditCode" maxlength="50" placeholder="请填写" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="建设层级" prop="buildLevel">
          <el-select
            v-model="formData.buildLevel"
            placeholder="请选择"
            class="w-full"
          >
            <el-option
              v-for="(value, key) in baseProjConsClassOptions"
              :key="key"
              :label="value"
              :value="key*1"
            />
          </el-select>
        </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"
  />

</template>
