<template>
  <div class="guns-layout-content">
    <div class="guns-layout">
      <div class="guns-layout-content-application">
        <div class="content-mian">
          <div class="content-mian-header">
            <div class="header-content">
              <div class="header-content-left">
                <a-space :size="20">
                  <a-input
                    v-model:value="where.searchText"
                    allowClear
                    placeholder="名称、编码(回车搜索)"
                    @pressEnter="reload"
                    class="search-input"
                  >
                    <template #prefix>
                      <icon-font iconClass="icon-opt-search"></icon-font>
                    </template>
                  </a-input>
                </a-space>
              </div>
              <div class="header-content-right">
                <a-space>
                  <a-button type="primary" class="border-radius" @click="openAddEdit()" v-if="!props.readable"
                    ><plus-outlined />新建</a-button
                  >
                  <a-button class="border-radius" @click="businessAssociation" v-if="!props.readable">业务关联</a-button>
                </a-space>
              </div>
            </div>
          </div>
          <div class="content-mian-body">
            <div class="table-content">
              <div :key="i" v-for="(category, i) in categoryDatas" class="cate-item">
                <div class="cate-item-title">{{ category.categoryName }}</div>
                <a-row type="flex" :gutter="16">
                  <a-col class="card-out" v-for="(data, k) in category.modelList" :key="k" @click="modelClick(data)">
                    <a-tooltip :content="data.modelName">
                      <div class="card-in">
                        <div class="card-in-header">
                          <img :src="activeIconSrc(data)" width="36" style="height: 36px" />
                          <div>
                            <div class="first-edit">
                              <span
                                class="first-name"
                                :class="{ 'w-full': readable }"
                                :title="data.currentVersion ? data.modelName + '(' + data.currentVersion + ')' : data.modelName"
                              >
                                <span> {{ data.modelName }}</span>
                                <span v-if="data.currentVersion">{{ `(${data.currentVersion})` }}</span>
                              </span>
                              <a-space v-if="!readable">
                                <i class="iconfont icon-opt-fuzhi action-btn" title="复制" @click.stop="copyClick(data)"></i>
                                <i class="iconfont icon-opt-shanchu action-btn" title="删除" @click.stop="remove(data)"></i>
                                <a-dropdown v-model:visible="data.showMore" :trigger="['click']" placement="bottom">
                                  <template #overlay>
                                    <a-menu>
                                      <a-menu-item @click.stop="moveFile(data)">
                                        <i class="iconfont icon-opt-liuchengqianyi"></i>
                                        <span>文件迁移</span>
                                      </a-menu-item>
                                    </a-menu>
                                  </template>
                                  <more-outlined @click.stop style="color: #898e91" />
                                </a-dropdown>
                              </a-space>
                            </div>
                            <div class="first-time">{{ data.createTime }}</div>
                          </div>
                        </div>
                        <div class="card-in-line" v-if="!readable"></div>
                        <div class="card-in-btn" v-if="!readable">
                          <div class="btn-item" @click.stop="modelClick(data)">
                            <i class="iconfont icon-opt-liuchengsheji"></i> 流程设计
                          </div>
                          <div class="btn-item" @click.stop="openAddEdit(data)"><i class="iconfont icon-opt-bianji"></i> 内容修改</div>
                          <div class="btn-item" @click.stop="flowPower(data)">
                            <icon-font iconClass="icon-menu-liuchengquanxian" color="#60666b"></icon-font>
                            <span>流程权限</span>
                          </div>
                        </div>
                      </div>
                    </a-tooltip>
                  </a-col>
                </a-row>
              </div>

              <a-empty v-show="categoryDatas && categoryDatas.length == 0" style="margin-top: 20%"></a-empty>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增编辑弹框 -->
    <ModelAddEdit
      v-model:visible="showEdit"
      v-if="showEdit"
      :data="current"
      :iconList="iconList"
      @done="reload"
      :businessCategoryId="where.businessCategoryId"
    />
    <!-- 移动 -->
    <ModelMove v-model:visible="showMove" v-if="showMove" :data="current" @done="reload" :businessCategoryId="where.businessCategoryId" />
  </div>
</template>

<script setup name="WorkflowModelList">
import ModelAddEdit from './model-add-edit.vue';
import ModelMove from './model-move.vue';
import { message, Modal } from 'ant-design-vue/es';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { FlowModelApi } from '../api/FlowModelApi';
import { getflowIcon } from '@/utils/common/util';
import { onMounted, computed, ref, createVNode } from 'vue';
import { useRouter } from 'vue-router';
import { API_BASE_PREFIX } from '@/config/setting';
import { FlowTaskApi } from '../../task/list/api/FlowTaskApi';

const props = defineProps({
  // 是否禁用
  readable: {
    type: Boolean,
    default: false
  }
});

const router = useRouter();

// 搜索条件
const where = ref({
  searchText: '',
  businessCategoryId: null
});

// 当前行数据
const current = ref(null);
// 是否显示新增编辑弹框
const showEdit = ref(false);
// 是否显示移动弹框
const showMove = ref(false);

// 分类列表
const categoryDatas = ref([]);

// 图标列表
const iconList = ref([]);

// 预览地址
const filePreviewUrl = ref(`${API_BASE_PREFIX}/sysFileInfo/public/preview?fileId=`);

/**
 * 图标
 */
const activeIconSrc = computed(() => {
  return data => {
    if (data?.modelIconType == 1) {
      if (data.modelIconFileId) {
        return filePreviewUrl.value + data.modelIconFileId;
      }
    } else {
      const icon = iconList.value.find(t => t.name_suffix == data.modelIcon);
      return icon ? icon.url : '';
    }
  };
});

//获取图标列表
const reloadIcon = () => {
  iconList.value = getflowIcon();
};

onMounted(() => {
  reloadIcon();
  if (props.readable) {
    reload();
  }
});

// 获取模型列表
const getModelList = () => {
  let result;
  if (props.readable) {
    result = FlowTaskApi.getUserModelList({ ...where.value });
  } else {
    result = FlowModelApi.modelList({ ...where.value });
  }
  result.then(res => {
    res.data.forEach(item => {
      item?.modelList?.length &&
        item.modelList.forEach(model => {
          model.showMore = false;
        });
    });
    categoryDatas.value = res.data;
  });
};

// 点击搜索
const reload = () => {
  getModelList();
};

// 新增编辑点击
const openAddEdit = record => {
  current.value = record;
  showEdit.value = true;
};

// 删除单个
const remove = record => {
  Modal.confirm({
    title: '提示',
    content: '确定要删除选中数据吗?',
    icon: createVNode(ExclamationCircleOutlined),
    maskClosable: true,
    onOk: async () => {
      const res = await FlowModelApi.delete({ modelId: record.modelId });
      message.success(res.message);
      reload();
    }
  });
};

// 模型点击
const modelClick = record => {
  if (props.readable) {
    router.push({
      path: '/mid/workflow/task/start',
      query: { definitionId: record.latestDefinitionId }
    });
  } else {
    router.push({
      path: '/mid/workflow/design',
      query: { definitionId: record.latestDefinitionId, modelId: record.modelId }
    });
  }
};

// 复制
const copyClick = record => {
  FlowModelApi.copy({ modelId: record.modelId }).then(res => {
    message.success(res.message);
    reload();
  });
};

// 文件迁移
const moveFile = record => {
  record.showMore = false;
  current.value = record;
  showMove.value = true;
};

// 业务关联
const businessAssociation = () => {
  router.push('/mid/workflow/association');
};

const flowPower = record => {
  router.push({
    path: '/mid/workflow/power',
    query: { modelId: record.modelId }
  });
};

defineExpose({
  reload,
  where
});
</script>

<style scoped lang="less">
.guns-layout-content {
  padding-top: 15px;
}
.content-mian-body {
  height: calc(100% - 62px);
}
.table-content {
  overflow-x: hidden;
  overflow-y: auto;
}
.header-content {
  margin-bottom: 20px !important;
}
.cate-item {
  width: 100%;
  height: auto;
  .cate-item-title {
    font-size: 18px;
    margin-bottom: 16px;
    color: #1b2c45;
    font-weight: 600;
  }
}

.card-out {
  width: 397px;
  margin-bottom: 24px;
  cursor: pointer;

  .card-in {
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid rgba(197, 207, 209, 0.4);
    box-shadow: 0 0 2px rgba(197, 207, 209, 0.4);
    cursor: pointer;

    .card-in-header {
      height: 44px;
      display: flex;
      align-items: center;
      flex-direction: row;
      img {
        flex: 0 0 auto;
        height: 100%;
        border-radius: 8px;
      }

      & > div:nth-child(1) {
        flex: 0 0 44px;
      }

      & > div:nth-child(2) {
        flex: 0 1 100%;
        margin-left: 8px;
        text-overflow: ellipsis;
        overflow: hidden;

        & > div {
          width: 100%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .first-edit {
          font-size: 14px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;

          & > .first-name {
            color: #43505e;
            font-weight: 500;
            font-size: 16px;
            max-width: 80%;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          & > .w-full {
            max-width: 100% !important;
          }
        }
        .first-time {
          color: #898e91;
          font-size: 14px;
          font-weight: 400;
        }
        .action-btn {
          font-size: 18px;
          color: #898e91;
        }
      }
    }
    .card-in-line {
      width: 100%;
      height: 1px;
      margin: 9px 0px;
      background-color: rgba(197, 207, 209, 0.4);
    }
    .card-in-btn {
      height: 20px;
      display: flex;
      align-items: center;
      & > div {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #898e91;
        font-size: 12px !important;
        .iconfont {
          margin-right: 4px;
        }
      }
      & > .btn-item {
        .iconfont {
          font-size: 18px;
        }
      }
      & > .btn-item:nth-child(1) {
        justify-content: left;
      }
    }

    &:hover {
      border: 1px solid var(--primary-color);
      box-shadow: 0 0 4px #ddd;
    }
  }
  &:hover {
    .edit-filled {
      display: block;
    }
    .edlete-filled {
      display: block;
    }
  }
}
.ant-dropdown-link {
  color: #999999;
}
.icon-menu-peizhi {
  margin-left: 5px;
  font-size: 16px;
  cursor: pointer;
  padding: 5px;
  &:hover {
    background: #e9f3f8;
  }
}
:deep(.ant-dropdown-menu-item) {
  width: 240px !important;
  padding: 9px 20px;
  .iconfont {
    margin-right: 8px;
    font-size: 17px;
    color: #aaa;
  }
}
:deep(.ant-dropdown-menu-title-content) {
  display: flex;
  align-items: center;
}
.menu-model {
  padding: 10px 0;
  border-radius: 5px;
}
.content-mian-header {
  margin-top: 8px;
}
</style>
