<!--
 * @Author: tengmingxue 1473375109@qq.com
 * @Date: 2023-08-15 16:19:10
 * @LastEditors: tengmingxue 1473375109@qq.com
 * @LastEditTime: 2023-09-25 15:05:22
 * @FilePath: \xld-gis-admin\src\views\resource\map\MapSourceModal.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <BasicModal width="1200px" v-bind="$attrs" @register="registerModal" @cancel="handleCancel" :title="getTitle"
    @ok="handleSubmit">
    <div style="height: 60vh" class="res-form-container">
      <a-tabs v-model:activeKey="activeKey" class="res-a-tabs">
        <a-tab-pane key="1" tab="地图资源信息">
          <source-detail ref="refSourceDetail" @RtnMain="RtnMain" @closeModal="closeModal" :formData="formData"
            :isUpdate="isUpdate" :isView="isView" :flowName="flowName"></source-detail>
        </a-tab-pane>
        <a-tab-pane key="2" tab="流程信息" force-render :disabled="!formData || !formData.bussid">
          <FlowStep :flowTitle="flowName" :flowCode="'20220523001'" :formData="formData"></FlowStep>
        </a-tab-pane>
      </a-tabs>
    </div>
  </BasicModal>
</template>
<script lang="ts">
import { defineComponent, ref, computed, unref, reactive, onMounted } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { BasicTree } from '/@/components/Tree';
import { PlusOutlined } from '@ant-design/icons-vue';
import SourceDetail from './SourceDetail.vue';
import FlowStep from '../flowStep/index.vue'

export default defineComponent({
  name: 'AccountModal',
  components: {
    BasicModal,
    BasicForm,
    BasicTree,
    PlusOutlined,
    SourceDetail,
    FlowStep,
    VNodes: (_, { attrs }) => {
      return attrs.vnodes;
    },
  },
  emits: ['success', 'register'],
  setup(_, { emit }) {
    const activeKey = ref('1')
    const refSourceDetail = ref(null)
    let formData = ref(null)
    let isUpdate = ref(true)
    let isView = ref(false)
    const flowName = ref('地图资源上传')
    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
      setModalProps({ confirmLoading: false });
      isUpdate.value = !!data?.isUpdate;
      isView.value = !!data?.isView;
      if (isUpdate.value || isView.value) formData.value = data.record;
      if (!isUpdate.value) formData.value = null;
      activeKey.value = '1';
    });
    const getTitle = computed(() => {
      if (isUpdate.value && !isView.value) {
        return '编辑地图资源'
      } else if (isView.value) {
        return '查看地图资源'
      } else {
        return '新增地图资源'
      }
    });

    async function handleSubmit() {
      refSourceDetail.value.submitForm();
    }
    const RtnMain = (status) => {
      emit('success')
    }

    function handleCancel() {
      if (refSourceDetail.value) {
        refSourceDetail.value.resetForm();
        closeModal();
      }
    }

    onMounted(() => { });
    return {
      handleCancel,
      closeModal,
      activeKey,
      flowName,
      registerModal,
      handleSubmit,
      getTitle,
      refSourceDetail,
      isUpdate,
      isView,
      formData,
      RtnMain,
    };
  },
});
</script>
<style scoped lang="less">
:deep(.vben-basic-tree) {
  width: 100% !important;
}

:deep(.is-unflod) {
  display: none !important;
}

:deep(.is-flod) {
  display: none !important;
}

:deep(.res-form-container) {
  .res-a-tabs {
    margin-top: 61px !important;
  }
}
</style>
  