<template>
  <div>
    <a-modal
      v-model:open="props.modalShow"
      title="图斑调整"
      @ok="handleSubmit"
      @cancel="handlerCloseModal"
    >
      <a-form
        ref="formRef"
        :model="formState"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-item label="图斑编号" name="case_no">
          <a-input v-model:value="formState.case_no" disabled />
        </a-form-item>
        <a-form-item label="图斑描述" name="case_description">
          <a-input v-model:value="formState.case_description" disabled />
        </a-form-item>
        <a-form-item label="县区" name="countyid">
          <a-select
            v-model:value="formState.countyid"
            placeholder="请选择"
            :options="data.countyOptions"
            @change="handleCountyChange"
            :field-names="{ label: 'name', value: 'id' }"
          />
        </a-form-item>
        <a-form-item label="乡镇" name="streetid">
          <a-select
            v-model:value="formState.streetid"
            :options="data.streetOptions"
            :field-names="{ label: 'name', value: 'id' }"
            @change="handleStreetChange"
          />
        </a-form-item>
        <a-form-item label="村/社区" name="communityid">
          <a-select
            v-model:value="formState.communityid"
            :options="data.communityOptions"
            :field-names="{ label: 'name', value: 'id' }"
            @change="handleCommunityChange"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal
      v-if="false"
      v-bind="$attrs"
      @register="registerModal"
      title="飞地调整"
      @ok="handleSubmit"
    >
      <a-form
        ref="formRef"
        :model="formState"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-item label="图斑编号" name="case_no">
          <a-input v-model:value="formState.case_no" disabled />
        </a-form-item>
        <a-form-item label="图斑描述" name="case_description">
          <a-input v-model:value="formState.case_description" disabled />
        </a-form-item>
        <a-form-item label="县区" name="countyid">
          <a-select
            v-model:value="formState.countyid"
            placeholder="请选择"
            :options="data.countyOptions"
            @change="handleCountyChange"
            :field-names="{ label: 'name', value: 'id' }"
          />
        </a-form-item>
        <a-form-item label="乡镇" name="streetid">
          <a-select
            v-model:value="formState.streetid"
            :options="data.streetOptions"
            :field-names="{ label: 'name', value: 'id' }"
            @change="handleStreetChange"
          />
        </a-form-item>
        <a-form-item label="村/社区" name="communityid">
          <a-select
            v-model:value="formState.communityid"
            :options="data.communityOptions"
            :field-names="{ label: 'name', value: 'id' }"
            @change="handleCommunityChange"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, onMounted, defineProps, watch } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { useMessage } from '@/hooks/web/useMessage';
  import { updateDroneCaseInfo, getCaseInfoById } from '@/api/keyproblem/keyissuesI/index.ts';
  import { getChildrenTree } from '@/api/demo/system.ts';
  const { createMessage } = useMessage();
  defineOptions({ name: 'AccountModal' });
  const formRef = ref();
  const emit = defineEmits(['success', 'register', 'closeModel']);

  const props = defineProps({
    modalShow: {
      type: Boolean,
      default: false,
      readonly: false,
    },
    record: String,
  });

  getDetail(props.record);
  const labelCol = { span: 4 };
  const wrapperCol = { span: 14 };
  const formState: any = ref({});
  const rules = ref({
    countyid: [{ required: true, message: '县区不能为空', trigger: 'blur' }],
    streetid: [{ required: true, message: '乡镇不能为空', trigger: 'blur' }],
    communityid: [{ required: true, message: '村/社区不能为空', trigger: 'blur' }],
  });
  const data = reactive({
    countyOptions: [],
    streetOptions: [],
    communityOptions: [],
  });

  watch(
    () => props.modalShow,
    () => {
      if (props.modalShow) {
        getDetail(props.record);
      }
    },
  );
  watch(
    () => props.record,
    (newVal, oldVal) => {},
  );
  async function getDetail(id) {
    const data = await getCaseInfoById({
      id: id,
    });
    formState.value = data;
    getParent();
  }
  async function handleCountyChange(value, option) {
    formState.value.countyid = value;
    formState.value.countyname = option.name;
    getOptions(value).then((res) => {
      data.streetOptions = res;
    });
    formState.value.streetid = '';
    formState.value.communityid = '';
  }
  async function handleStreetChange(value, option) {
    formState.value.streetid = value;
    formState.value.streetname = option.name;
    getOptions(value).then((res) => {
      data.communityOptions = res;
    });
    formState.value.communityid = '';
  }
  async function handleCommunityChange(value, option) {
    formState.value.communityid = value;
    formState.value.communityname = option.name;
  }
  async function getOptions(value) {
    const data = await getChildrenTree({
      parentId: value,
    });
    data.forEach((item) => {
      item.id = item.id.toString();
    });
    return data;
  }
  async function getParent() {
    const list = await getChildrenTree({
      parentId: 0,
    });
    // 获取县级数据
    getOptions(list[0].id).then((res) => {
      data.countyOptions = res;
    });
    // 获取乡镇数据
    getOptions(formState.value.countyid).then((res) => {
      data.streetOptions = res;
    });
    // 获取村/社区数据
    getOptions(formState.value.streetid).then((res) => {
      data.communityOptions = res;
    });
  }

  function handlerCloseModal() {
    emit('closeModel');
  }
  async function handleSubmit() {
    try {
      formRef.value
        .validate()
        .then(async () => {
          var querys = {
            id: formState.value.id,
            countyid: formState.value.countyid,
            countyname: formState.value.countyname,
            streetid: formState.value.streetid,
            streetname: formState.value.streetname,
            communityid: formState.value.communityid,
            communityname: formState.value.communityname,
          };
          console.log(querys);
          const data = await updateDroneCaseInfo(querys);
          console.log(data);
          if (data) {
            // closeModal();
            emit('closeModel');
            emit('success');
            return createMessage.success(data);
          } else {
            return createMessage.error(data);
          }
        })
        .catch((error: ValidateErrorEntity<FormState>) => {
          console.log('error', error);
        });
    } finally {
    }
  }
  onMounted(() => {
    getParent();
  });
</script>
