<template>
  <div class="form-left isSelected">
    <a-tabs v-model:activeKey="activeKey" class="devops-tabs">
      <a-tab-pane forceRender key="1" tab="组件"> </a-tab-pane>
      <a-tab-pane forceRender key="2" tab="模板"> </a-tab-pane>
    </a-tabs>
    <div class="form-left-content">
      <!-- 组件 -->
      <template v-if="activeKey == '1'">
        <div v-for="(item, index) in leftComponentList" :key="index">
          <div class="collapse-header">
            {{ item.categoryName }}
          </div>
          <draggable
            v-model="item.formComponentList"
            v-bind="{ group: { name: 'form-draggable', pull: 'clone', put: false }, sort: false, animation: 180, ghostClass: 'moving' }"
            :force-fallback="true"
            :sort="false"
            item-key="componentId"
            ghost-class="draggable-ghost"
            :clone="clone"
            :component-data="{ name: 'list' }"
          >
            <template #item="{ element }">
              <div class="source-componet-item" @click="itemClick(element)">
                <i class="iformfont" :class="element.componentIcon"></i>
                <span class="source-componet-item-name" :title="element.componentName">{{ element.componentName }}</span>
              </div>
            </template>
          </draggable>
        </div>
      </template>
      <!-- 模板 -->
      <template v-if="activeKey == '2'">
        <div class="left-template-content">
          <div
            class="left-template-content-item"
            v-for="(tItem, tIndex) in formTemplateList"
            :key="tIndex"
            @click="formTemplateClick(tItem)"
          >
            <div class="left-template-content-item-image">
              <a-image class="left-template-content-item-image-img" :preview="false" :src="LogoImg" />
            </div>
            <div class="left-template-content-item-name">{{ tItem.templateName }}</div>
          </div>
        </div>
      </template>
    </div>

    <a-empty v-show="showEmpty" class="empty"></a-empty>
  </div>
</template>

<script setup name="FormLeft">
import { computed, onMounted, ref, watch } from 'vue';
import draggable from 'vuedraggable';
import { FormDesignApi } from '../api/FormDesignApi';
import { generateKey } from '../utils/index';
import { API_BASE_PREFIX } from '@/config/setting';
import LogoImg from '@/assets/images/form-template.svg';

const props = defineProps({
  setGlobalConfigState: Function,
  // 设备类型
  equipmentType: {
    type: String,
    default: '1'
  }
});

const emits = defineEmits(['addItem', 'addAttrs', 'handleSetSelectItem', 'componentNameListChange', 'formTemplateClick']);

// 左侧选择组件列表
const leftComponentList = ref([]);

// 全部组件列表
const allComponentList = ref([]);

// 组件名称列表
const componentNameList = ref([]);

// tab选中
const activeKey = ref('1');

// 表单模板列表
const formTemplateList = ref([]);

// 文件预览接口
const filePreviewUrl = ref(`${API_BASE_PREFIX}/sysFileInfo/public/preview?fileId=`);

// 是否显示空
const showEmpty = computed(() => {
  if (activeKey.value == '1' && leftComponentList.value.length == 0) {
    return true;
  } else if (activeKey.value == '2' && formTemplateList.value.length == 0) {
    return true;
  }
  return false;
});

onMounted(() => {
  getFormComponentList();
  getFormTemplateList();
});

// 获取表单组件列表
const getFormComponentList = () => {
  FormDesignApi.formComponentList().then(res => {
    allComponentList.value = res.data;
    leftComponentList.value = res.data.pcFormComponent;
    getComponentNameList();
  });
};

// 获取组件默认名称列表
const getComponentNameList = () => {
  let arr = [];
  if (leftComponentList.value?.length > 0) {
    arr = leftComponentList.value.map(item => item.formComponentList.map(fItem => fItem.componentName)).flat();
  }
  componentNameList.value = arr;
  emits('componentNameListChange', arr);
};

// 获取表单模板列表
const getFormTemplateList = () => {
  FormDesignApi.formTemplateList().then(res => {
    formTemplateList.value = res;
  });
};

// 单个点击
const itemClick = element => {
  emits('addItem', element);
};

// 克隆数据
const clone = obj => {
  let item = JSON.parse(JSON.stringify(obj));
  item.itemLabelName = item.componentName;
  props.setGlobalConfigState(item);
  let setKey = generateKey(item);
  Promise.all([setKey]).then(() => {
    emits('handleSetSelectItem', item);
  });
  return item;
};

// 获取移动端可拖拽组件列表
const getMobileComponentTypeList = () => {
  let arr = [];
  allComponentList.value.mobileFormComponent.forEach(item => {
    arr = arr.concat(item.formComponentList.map(cItem => cItem.componentCode));
  });
  return arr;
};

// 表单模板点击
const formTemplateClick = tItem => {
  emits('formTemplateClick', tItem);
};

watch(
  () => props.equipmentType,
  val => {
    if (val == '1') {
      leftComponentList.value = allComponentList.value.pcFormComponent;
    } else {
      leftComponentList.value = allComponentList.value.mobileFormComponent;
    }
    getComponentNameList();
  }
);

defineExpose({
  componentNameList,
  getMobileComponentTypeList
});
</script>

<style scoped lang="less">
.empty {
  color: #aaa;
  height: 150px;
  top: -10%;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  z-index: 100;
}
:deep(.ant-tabs-nav) {
  margin: 0;
  padding-left: 10px;
}
:deep(.ant-image) {
  width: 100% !important;
  height: 100% !important;
}
</style>
