<template>
  <!-- 新增 -->
  <a-modal
    :width="600"
    :maskClosable="false"
    :visible="visible"
    :confirm-loading="loading"
    :forceRender="true"
    title="移动到"
    :body-style="{ paddingBottom: '8px', height: '500px', overflowY: 'auto' }"
    @update:visible="updateVisible"
    @ok="save"
    @close="updateVisible(false)"
  >
    <div class="move-box">
      <a-directory-tree
        v-model:expandedKeys="expandedKeys"
        v-model:selectedKeys="selectedKeys"
        :tree-data="treeData"
        @select="selectNode"
        :fieldNames="{ children: 'children', title: 'categoryName', key: 'businessCategoryId', value: 'businessCategoryId' }"
      >
        <template #icon>
          <folder-filled style="color: orange; font-size: 20px" />
        </template>
      </a-directory-tree>
    </div>
  </a-modal>
</template>

<script setup name="ModelMove">
import { onMounted, ref } from 'vue';
import { message } from 'ant-design-vue';
import { FlowModelApi } from '../api/FlowModelApi';
import { BusinessCategoryApi } from '../../../app/list/api/BusinessCategoryApi';

const props = defineProps({
  visible: Boolean,
  // 当前行数据
  data: Object,
  // 分类id
  businessCategoryId: String
});

const emits = defineEmits(['done', 'update:visible']);

const loading = ref(false);
// 表单数据
const form = ref({
  formModelIds: []
});

// 左侧树列表
const treeData = ref([]);

// 展开行列表
const expandedKeys = ref([]);

// 选中列表
const selectedKeys = ref([]);

onMounted(() => {
  if (props.data) {
    getDetail();
    getTreeData();
  }
});

// 获取详情
const getDetail = () => {
  FlowModelApi.detail({ modelId: props.data.modelId }).then(res => {
    form.value = Object.assign({}, res.data);
    selectedKeys.value = [res.data.businessCategoryId];
  });
};

// 获取树列表
const getTreeData = () => {
  loading.value = true;
  BusinessCategoryApi.list()
    .then(res => {
      treeData.value = res;
    })
    .finally(() => (loading.value = false));
};

// 树选中
const selectNode = (selectedKeys, metadata) => {
  form.value.businessCategoryId = selectedKeys[0];
};

// 更改弹框或抽屉状态
const updateVisible = value => {
  emits('update:visible', value);
};

// 点击确定
const save = () => {
  // 修改加载框为正在加载
  loading.value = true;
  FlowModelApi.edit(form.value)
    .then(result => {
      // 移除加载框
      loading.value = false;

      // 提示添加成功
      message.success(result.message);
      form.value = {};
      // 关闭弹框，通过控制visible的值，传递给父组件
      updateVisible(false);

      // 触发父组件done事件
      emits('done');
    })
    .catch(() => {
      loading.value = false;
    });
};
</script>

<style scoped lang="less">
.move-box {
  width: 100%;
  height: 100%;
}
@import url('@/styles/commonTree.less');
:deep(.ant-tree.ant-tree-directory .ant-tree-treenode:hover::before) {
  background: #e9edf2 !important;
}
:deep(.ant-tree.ant-tree-directory .ant-tree-treenode-selected::before) {
  background: #e9edf2 !important;
}
:deep(.ant-tree-switcher) {
  display: none;
}
</style>
