<template>
  <div>
    <a-button @click="createProcessHandle(null)" type="primary" icon="plus" class="ml-4">新建流程</a-button>
    <a-button @click="createFormGroupHandle" icon="plus" class="ml-4">新建分组</a-button>

    <div :key="listKey">
    <div v-for="item in formGroupList" :key="item.id" class="group ml-4">
      <a-card :title="item.name + '(' + item.items.length + ')'">
        <div slot="extra">
          <a-dropdown :trigger="['click']">
            <a-button @click.stop type="link">
              <a-icon type="setting" /> 编辑分组
              <a-icon type="down" />
            </a-button>
            <a-menu slot="overlay" @click="handleSelect($event.key, item)">
              <a-menu-item key="updateName">
                <a-icon type="edit" />
                修改名称
              </a-menu-item>
              <a-menu-item key="deleteGroup">
                <a-icon type="delete" />
                删除分组
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>

        <div v-if="item.items.length === 0" class="empty-group">
          <a-button type="link" @click="createProcessHandle(item)">
            <a-icon type="plus" />
            创建新流程
          </a-button>
        </div>
        <div v-else>
          <div
            v-for="item_ in item.items"
            :key="item_.templateId"
            class="group-item"
          >
            <div>
              <span>{{ item_.templateName }}</span>
              <span class="ml-4">最后更新时间：{{ item_.updateTime }}</span>
            </div>
            <div class="ml-auto">
              <a-button type="link" @click="handleEditTemplate(item_.templateId)">编辑</a-button>
            </div>
          </div>
        </div>
      </a-card>
    </div>
    </div>

    <FormGroupModal ref="formGroupModalRef" :title="formGroupModalTitle" @change="loadFormGroupList" />
  </div>
</template>

<script>
import FormGroupModal from './FormGroupModal.vue';
import { deleteAction, getAction } from '@api/manage'

export default {
  name: 'Designer',
  components: {
    FormGroupModal
  },
  data() {
    return {
      formGroupList: [],
      formGroupModalTitle: '创建分组',
      listKey: 0, // 用来强制重建列表
    };
  },
  mounted() {
    this.loadFormGroupList();
  },
  methods: {
    loadFormGroupList() {
      getAction('/workflow/group').then(res => {
        if(res.success) {
          // 给每个分组生成新引用
          this.formGroupList = res.result.map(group => ({
            ...group,
            items: [...group.items]
          }));
          // 改变 key 强制重新渲染整个列表
          this.listKey += 1;
        } else {
          this.$message.error("获取流程列表失败！")
        }
      });
    },
    handleSelect(key, data) {
      if (key === 'updateName') {
        this.formGroupModalTitle = '编辑分组';
        this.$refs.formGroupModalRef.openModal({ id: data.id, name: data.name });
      }
      if (key === 'deleteGroup') {
        this.$confirm({
          title: '警告',
          content: `删除分组并不会删除表单，表单将会被转移到 “其他” 分组，确定要删除分组 [${data.name}]?`,
          onOk: () => {
            deleteAction('/workflow/group',{ id: data.id }).then(() => {
              this.$message.success('删除成功');
              this.loadFormGroupList();
            });
          }
        });
      }
    },
    createProcessHandle(data) {
      if (data) {
        this.$router.push(`/workFlow/designer/create?groupId=${data.id}`);
      } else {
        this.$router.push('/workFlow/designer/create');
      }
    },
    createFormGroupHandle() {
      this.$refs.formGroupModalRef.openModal({});
    },
    handleEditTemplate(templateId) {
      this.$router.push(`/workFlow/designer/create?templateId=${templateId}`);
    }
  }
};
</script>

<style scoped>
.group {
  margin-top: 12px;
}
.group-item {
  display: flex;
  align-items: center;
  padding: 8px;
  margin-top: 8px;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
}
.empty-group {
  text-align: center;
  padding: 12px 0;
}
.ml-auto {
  margin-left: auto;
}
.ml-4 {
  margin-left: 16px;
}
</style>
