<template>
  <BasicModal v-bind="$attrs" @register="registerModal" okText="提交" :title="title" :closeFunc="handleCloseFunc" @ok="handleSubmit" width="50%">
    <div class="pt-4" :style="{ height: isDetail ? 'auto' : '300px' }" v-for="(item, index) in czDw" :key="index +'czdw'">
      <!-- <BasicForm @register="registerForm"/> -->
      <czfillingFrom :ref="(el) => childRef(el, index)" upload=" " :data="item" :isRead="isDetail"></czfillingFrom>
    </div>
    <div v-show="isDetail && !isHistory">
      <a-divider orientation="left">历史记录</a-divider>
      <a-table :columns="historyColumns" :data-source="czwcHisList" :pagination="false" bordered size="middle">
        <!--操作栏-->
        <template #action="{ record }">
          <a-button type="link" @click="toDetail(record)">查看</a-button>
        </template>
      </a-table>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, nextTick } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { updateZyjhCzwc, findSzdzg, findJsdzg, queryCzwc } from '../api';
  import { useUserStore } from '/@/store/modules/user';
  import { historyColumns } from '../data';
  import czfillingFrom from './czfillingFrom.vue';
  // Emits声明

  const userStore: any = useUserStore();
  const jszgId = ref<any>({ realname: '' });
  const emit = defineEmits(['register', 'success']);
  const bm = ref();
  const czDw = ref<any>([]);
  const czdwBzd = ref<any>([]);

  //设置标题
  const title = ref('处置完成填报');
  const isDetail = ref(false);
  const isHistory = ref(false);

  const res1 =  ref({})
  const values = ref<any>({});
  //表单赋值
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //重置表单

    
    setModalProps({ confirmLoading: false, showCancelBtn: data?.showFooter, showOkBtn: data?.showFooter });
    if (data?.isDetail) {
      isDetail.value = data?.isDetail;
    }

    bm.value = data.record.wrdkbm;
    if (userStore.userInfo.userType == 'S') bm.value = '';
    jszgId.value = await findSzdzg({ wrdkbm: bm.value });
    const res = { szdzgbm: jszgId?.value?.realname };
    res1.value = await queryCzwc({ id: data.record.id });
    czwcHisList.value = res1.value.zyjhHisList;

    //表单赋值
    values.value = data.record
    czDw.value = []
    czdwBzd.value = []

    let arr = res1.value.czwcList
    for (let i = 0; i < arr.length; i++) {
      const element = arr[i];
      addDw(element, data.record, i)
    }

  });

  const childRef = (el, index) => {
    if (!el) return
    czdwBzd.value[index] = el;
  };

  // addDw()

  function addDw(element, data, i) {
    czDw.value.push({ jsdRealname: data.jsdRealname.split(",")[i], jsdzgbm: data.jsdzgbm.split(",")[i], szdRealname: data.szdRealname, szdzgbm: data.szdzgbm, ...element});
    nextTick(() => {
      callChildMethod(czdwBzd.value, czdwBzd.value.length - 1);
    });
  }

  const callChildMethod = (item, index) => {
    item[index].getFormValueBz();
  };

  const czwcList = ref([])
  //表单提交事件
  async function handleSubmit() {
    czwcList.value = []
    for (let i = 0; i < czdwBzd.value.length; i++) {
      const element = czdwBzd.value[i];
      let obj = await element.getFormValueBz()
      czwcList.value.push(obj)
    }
    try {
      values.value.id = res1.value.id;
      values.value.wrdkid = res1.value.wrdkid;
      values.value.flag = 1;
      values.value.czwcList = czwcList.value;

      // console.log(values.value)

      // return
      
      setModalProps({ confirmLoading: true });
      //提交表单

      await updateZyjhCzwc(values.value);
      //关闭弹窗
      closeModal();
      emit('success');
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
  function handleCloseFunc() {
    if (isDetail.value && isHistory.value) {
      isHistory.value = false;
      czDw.value = res1.value.czwcList
      title.value = '处置完成填报';
      return false;
    }
    return true;
  }
  const czwcHisList = ref([]);
  const toDetail = (record) => {
    isHistory.value = true;
    title.value = '详情';
    czDw.value = JSON.parse(record.his).czwcList
  };
</script>

<style lang="less" scoped>
  :deep(.ant-input-number) {
    width: 100%;
  }
</style>
