<template>
  <div>
    <a-modal class="btn-box" v-model:visible="visible" width="80%" :footer="null" :closable="false" :maskClosable="false"
      :title="titleText">
      <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row>
          <a-col :span="8"><a-form-item label="质检机构名称" name="organizationName">
              <a-input autocomplete="off" :disabled="showLock" v-model:value="formState.organizationName"
                placeholder="请输入" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="统一社会信用代码" name="creditCode">
              <a-input autocomplete="off" :disabled="showLock" v-model:value="formState.creditCode" placeholder="请输入" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="法定代表人" name="legalRepresentative">
              <a-input autocomplete="off" :disabled="showLock" v-model:value="formState.legalRepresentative"
                placeholder="请输入" />
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="联系方式" name="contactInformation"
              :rules="[{ validator: isMobileData, trigger: 'blur' }]">
              <a-input autocomplete="off" :disabled="showLock" v-model:value="formState.contactInformation"
                placeholder="请输入" />
            </a-form-item></a-col>
          <a-col :span="5">
            <a-form-item style="width: 32px;" label="省" name="registeredProvince">
              <a-select class="select-box" @change="provinceChange" :disabled="showLock"
                v-model:value="formState.registeredProvince" style="width: 230px" placeholder="请选择省">
                <a-select-option v-for="item in provinceList" :key="item.id" :value="item.id">
                  {{ item.dictLabel }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="5">
            <a-form-item style="width: 32px;" label="市" name="registeredCity">
              <a-select class="select-box" @change="cityChange" :disabled="showLock"
                v-model:value="formState.registeredCity" style="width: 230px" placeholder="请选择市">
                <a-select-option v-for="item in cityList" :key="item.id" :value="item.id">
                  {{ item.dictLabel }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item style="width: 32px;" label="县" name="registeredArea">
              <a-select class="select-box" :disabled="showLock" v-model:value="formState.registeredArea"
                style="width: 270px" placeholder="请选择县">
                <a-select-option v-for="item in countyList" :key="item.id" :value="item.id">
                  {{ item.dictLabel }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="详细地址" name="registeredAddress">
              <a-input autocomplete="off" :disabled="showLock" v-model:value="formState.registeredAddress"
                placeholder="请输入" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="成立日期">
              <a-date-picker :disabled="showLock" v-model:value="formState['establishmentDate']"
                value-format="YYYY-MM-DD 00:00:00" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="注册资本" name="registeredCapital">
              <a-input class="int-box" @input="onInput" autocomplete="off" :disabled="showLock" placeholder="请输入"
                v-model:value="formState.registeredCapital">
                <template #suffix>万元</template>
              </a-input></a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="8"><a-form-item label="邮箱" :rules="[{ validator: isEmail, trigger: 'blur' }]">
              <a-input autocomplete="off" :disabled="showLock" v-model:value="formState.email" placeholder="请输入" />
            </a-form-item></a-col>
          <a-col :span="8"><a-form-item label="网址" :rules="[{ validator: isInternetUrl, trigger: 'blur' }]">
              <a-input autocomplete="off" :disabled="showLock" v-model:value="formState.website" placeholder="请输入" />
            </a-form-item></a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item label="简介">
              <a-textarea :disabled="showLock" class="text-box" v-model:value="formState.introduction" :rows="8"
                placeholder="请输入" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div class="btn-box">
        <a-button v-if="dataObj.isType !== '3'" style="margin-right: 16px" type="primary" @click="handleOk">保存</a-button>
        <a-button @click="handleCancel">关闭</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import reserveDataApi from '@/api/reserveData.info/reserveDataApi'
import { message } from 'ant-design-vue'
import {
  isEmail,
  isMobileData,
  isInternetUrl,
  isSocialCreditCode
} from '@/utils/validator'
const props = defineProps({
  dataObj: {
    type: Object,
    default: () => { }
  }
})
const isTypeData = ref('')
const showLock = ref(false)
const visible = ref(false)
const titleText = ref('')

const formState = ref({})
const provinceList = ref([]) //省
const cityList = ref([]) //市
const countyList = ref([]) //县

const rules = ref({
  creditCode: [
    { required: true, message: '统一社会信用代码', trigger: 'blur' },
    { validator: isSocialCreditCode, trigger: 'blur' }
  ],
  organizationName: [{ required: true, message: '请输入质检机构名称', trigger: 'blur' }],
  legalRepresentative: [{ required: true, message: '请输入法定代表人', trigger: 'blur' }],
  registeredProvince: [{ required: true, message: '请选择', trigger: 'change' }],
  registeredCity: [{ required: true, message: '请选择', trigger: 'change' }],
  registeredArea: [{ required: true, message: '请选择', trigger: 'change' }],
})

const formRef = ref(null)
const emit = defineEmits(['isVisible'])
// 数字输入框只能输入数字
function onInput(event) {
  // 仅允许数字输入
  formState.value.registeredCapital = event.target.value.replace(/\D/g, '');
}
// 取消按钮
const handleCancel = () => {
  visible.value = false
  emit('isVisible', false)
  formRef.value.resetFields() //resetFields()函数是组件库提供的
  formState.value = {}
  provinceList.value = []
  cityList.value = []
  countyList.value = []
}
// 确定按钮
const handleOk = () => {
  formRef.value
    .validate()
    .then(() => {
      // isTypeData === '1' 新增  2是编辑 3是查看
      if (isTypeData.value === '1') return addData()
      if (isTypeData.value === '2') return editData()
    })
    .catch((error) => {
      message.warning('请填写完善')
      console.log('error', error)
    })
}
// 用于新增提交
const addData = () => {
  reserveDataApi.inspectionOrgAdd(formState.value).then((res) => {
    handleCancel()
  })
}
// 用于修改提交
const editData = () => {
  reserveDataApi.inspectionOrgEdit(formState.value).then((res) => {
    handleCancel()
  })
}
// 用于查看调用
const detailData = (id) => {
  reserveDataApi.inspectionOrgDetail({ id: id }).then((res) => {
    // 查看详情需要回显省市区数据
    getProvince(res.registeredProvince), getCity(res.registeredCity)
    formState.value = { ...res }
  })
}
function getProvince(val) {
  reserveDataApi.inspectionUnit({ parentId: val }).then((res) => {
    //  判断当前选择是否是直辖市 如果是直辖市直接把值赋值给当前市区
    if (val == '1781533422163951618' || val == '1781534088802435074' || val == '1781535316819148802') {
      provinceList.value.forEach(i => {
        if (i.id == val) {
          cityList.value.push({
            id: i.id,
            dictLabel: i.dictLabel
          })
        }
      })
      formState.value.registeredCity = formState.value.registeredProvince
      countyList.value = res
    } else {
      cityList.value = res //赋值给市级
    }
  })
}
function getCity(val) {
  reserveDataApi.inspectionUnit({ parentId: val }).then((res) => {
    countyList.value = res
  })
}
// 省市县接口
function getInspectionUnit(val) {
  reserveDataApi.inspectionUnit({ parentId: val }).then((res) => {
    provinceList.value = []
    provinceList.value = res
  })
}
// 省级change调取市级数据事件
function provinceChange(val) {
  reserveDataApi.inspectionUnit({ parentId: val }).then((res) => {
    formState.value.registeredCity = null
    formState.value.registeredArea = null
    cityList.value = []
    countyList.value = []
    //  判断当前选择是否是直辖市 如果是直辖市直接把值赋值给当前市区
    if (val == '1781533422163951618' || val == '1781534088802435074' || val == '1781535316819148802') {
      provinceList.value.forEach(i => {
        if (i.id == val) {
          cityList.value.push({
            id: i.id,
            dictLabel: i.dictLabel
          })
        }
      })
      formState.value.registeredCity = formState.value.registeredProvince
      countyList.value = res
    } else {
      cityList.value = res //赋值给市级
    }
  })
}
// 市级change调取县级数据事件
function cityChange(val) {
  reserveDataApi.inspectionUnit({ parentId: val }).then((res) => {
    countyList.value = []
    countyList.value = res
    formState.value.registeredArea = null
  })
}
// 监听点击事件更新数据
watch(
  () => props.dataObj,
  async (newValue, oldvalue) => {
    await nextTick()
    titleText.value = newValue.titleText
    visible.value = newValue.visible
    showLock.value = newValue.showLock
    isTypeData.value = newValue.isType
    // isType字段用于查看接口
    if (newValue.isType == '2' || newValue.isType == '3') {
      detailData(newValue.id)
    } else {
      // 用于新增时清空表格数据
      formState.value = {}
      provinceList.value = []
      cityList.value = []
      countyList.value = []
    }
    getInspectionUnit('1781533421287342082')
  },
  { deep: true }
)
</script>
<style lang="less" scoped>
.ant-input {
  width: 90%;
}

/* 针对 a-form-item 的 label 应用样式 */
::v-deep .ant-form-item-label {
  width: 130px;
  text-align: right;
}

::v-deep .ant-form-item-control-input {
  width: 100%;
}

.ant-picker {
  width: 90%;
}

.ant-select {
  width: 90%;
}

.from-input {
  width: 101.4%;
}

.address-box {
  width: 91.6%;
}

.btn-box {
  text-align: center;
}

.int-box {
  width: 90% !important;
}

::v-deep.ant-modal-footer {
  display: none !important;
}
</style>
