<template>
  <BasicModal  :maskClosable="false" @register="registerModal" v-bind="$attrs" title="新增断面" @ok="handleSubmit">
    <div>
      <a-form
        :rules="rules"
        :model="dataCenter.formState"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 14 }"
        ref="formRef"
      >
        <a-form-item label="断面名称：" name="pid_name">
          <a-input v-model:value="dataCenter.formState.pid_name" />
        </a-form-item>
        <a-form-item label="所属流域" name="basin">
          <a-select v-model:value="dataCenter.formState.basin" placeholder="请选择所属流域">
            <a-select-option
              v-for="(item, index) in dataCenter.basinList"
              :key="index"
              :value="item.basin"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
      </a-form>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { getSponner, subSchemeAddPid } from '/@/api/swHome/index';
  import { useMessage } from '/@/hooks/web/useMessage';
const { createMessage } = useMessage();
const emits = defineEmits(['success'])//这里暴露父组件自定义的方法
let dataCenter = reactive({
  formState: {
    pid_name: '',
    basin: '',
  },
  basinList: [],
});
const rules = {
  pid_name: [{ required: true, message: '请输入断面名称', trigger: 'blur' }],
  basin: [{ required: true, message: '请选择所属流域', trigger: 'blur' }],
};
const formRef = ref();
onMounted(() => {
  getBasinList();
});
const [registerModal, { closeModal, setModalProps }] = useModalInner(async () => {
  dataCenter.formState = {
    pid_name: '',
    basin: '',
  }
});
// 获取流域点号
function getBasinList() {
  getSponner({ colume_id: 'basin' }).then((res) => {
    console.log(res);
    dataCenter.basinList = res.data;
  });
}
// 点击确定
async function handleSubmit() {
  formRef.value.validate().then(() => {
    // console.log('values');
    subSchemeAddPid(dataCenter.formState).then(res => {
      if(res.code == 200){
        closeModal()
        createMessage.success(res.msg);
        emits('success', res)
      }
      
    })
  });
}
</script>