<template>
  <div class="custom-content-charts-item-box" :class="{ double: chartMode === 'double' }">
    <!-- 每一项组件的渲染 -->
    <div
      class="item-box"
      v-for="(item, index) in menuOptions"
      :key="index"
      draggable
      @dragstart="dragStartHandle($event, item)"
      @dragend="dragendHandle"
      @dblclick="dblclickHandle(item)"
      @click="clickHandle(item)"
    >
      <div class="list-header">
        <span class="list-header-text">
          {{ item.title }}
        </span>
      </div>
      <div class="list-center custom-flex-center" draggable="true">
        <img v-if="item?.fileId" class="list-img" :src="filePreviewUrl + item.image" alt="图表图片" />
        <img v-else class="list-img" v-lazy="item.image" alt="图表图片" />
      </div>
      <div class="list-bottom">
        <span class="list-bottom-text">
          {{ item.title }}
        </span>
      </div>
      <!-- 工具栏 -->
      <div v-if="isShowTools(item)" class="list-tools" @click="deleteHandle(item, index)">
          <delete-outlined />删除
      </div>
    </div>
  </div>
</template>

<script setup name="ChartsItemBox">
import { computed, ref } from 'vue';
import { API_BASE_PREFIX } from '@/config/setting';
import { useChartEditStore } from '@/store/modules/chart/chartEditStore';
import { useChartLayoutStore } from '@/store/modules/chart/chartLayoutStore';
import { usePackagesStore } from '@/store/modules/chart/packagesStore';
import {
  componentInstall,
  loadingStart,
  loadingFinish,
  loadingError,
  createComponent,
  fetchChartComponent
} from '../../utils/chart-util';
import { omit } from 'lodash-es';
import { message, Modal } from 'ant-design-vue';

const chartEditStore = useChartEditStore();
const chartLayoutStore = useChartLayoutStore();

defineProps({
  menuOptions: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['deletePhoto']);

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

// 组件展示状态
const chartMode = computed(() => {
  return chartLayoutStore.getChartType;
});

const componentList = computed(() => {
  return chartEditStore.getComponentList;
});

// 判断工具栏展示
const isShowTools = item => {
  return !item.disabled && item.package === 'photos' && item.category === 'private';
};

// 拖拽处理
const dragStartHandle = (e, item) => {
  if (item.key == 'Gannt' && componentList.value.find(item => item.key == 'Gannt')) {
    message.warn('同一个页面甘特图只能存在一个');
    return;
  }
  // 动态注册图表组件
  componentInstall(item.chartKey, fetchChartComponent(item));
  // 将配置项绑定到拖拽属性上
  e?.dataTransfer?.setData('ChartData', JSON.stringify(omit(item, ['image'])));
  // 修改状态
  chartEditStore.setEditCanvas('isCreate', true);
};

// 拖拽结束
const dragendHandle = () => {
  chartEditStore.setEditCanvas('isCreate', false);
};

// 双击添加
const dblclickHandle = async item => {
  if (item.key == 'Gannt' && componentList.value.find(item => item.key == 'Gannt')) {
    message.warn('同一个页面甘特图只能存在一个');
    return;
  }
  try {
    loadingStart();
    // 动态注册图表组件
    componentInstall(item.chartKey, fetchChartComponent(item));
    // 创建新图表组件
    let newComponent = await createComponent(item);
    if (item.redirectComponent) {
      item.dataset && (newComponent.option.dataset = item.dataset)
      newComponent.chartConfig.title = item.title
      newComponent.chartConfig.chartFrame = item.chartFrame;
      if (item?.fileId) {
        newComponent.option.fileId = true;
      }
    }
    
    // 添加
    chartEditStore.addComponentList(newComponent, false, true);
    // 选中
    chartEditStore.setTargetSelectChart(newComponent.id);
    loadingFinish();
  } catch (error) {
    loadingError();
    message.warning(`图表正在研发中, 敬请期待...`);
  }
};

// 单击事件
const clickHandle = item => {
  item?.configEvents?.addHandle(item);
};

const deleteHandle = (item, index) => {
  Modal.confirm({
    title: '提示',
    content: '是否删除此图片？',
    maskClosable: true,
    onOk: () => {
      const packagesStore = usePackagesStore();
      emit('deletePhoto', item, index);
      packagesStore.deletePhotos(item, index);
    }
  });
};
</script>

<style scoped lang="less">
.custom-content-charts-item-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 9px;
  padding: 10px;
  margin-bottom: 10px;
  overflow-y: scroll;

  .item-box {
    position: relative;
    margin: 0;
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0);
    background-color: #f2f3f5;
    transition: all 0.4s;
    &:hover {
      border-color: #e3e3e4;
      .list-img {
        transform: scale(1.1);
      }
      .list-tools {
        opacity: 1;
      }
    }
    .list-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 2px 15px;
      background-color: #e5e6eb;
      &-text {
        font-size: 12px;
        margin-left: 8px;
      }
    }
    .list-center {
      margin: 6px 0;
      height: 100px;
      .list-img {
        height: 100px;
        max-width: 140px;
        border-radius: 6px;
        transition: all 0.4s;
      }
    }
    .list-bottom {
      display: none;
      .list-bottom-text {
        font-size: 12px;
        padding-left: 5px;
      }
    }
    .list-tools {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      bottom: 0;
      left: 0;
      margin: 0 4px 2px;
      height: 26px;
      width: calc(100% - 8px);
      opacity: 0;
      color: #fff;
      border-radius: 6px;
      backdrop-filter: blur(20px);
      background-color: rgba(255, 255, 255, 0.15);
      &:hover {
        background-color: rgba(232, 128, 128, 0.7);
      }
    }
  }

  /* 缩小展示 */
  &.double {
    .list-header {
      padding: 2px 5px;
      .list-header-text {
        display: none;
      }
      .list-header-control-btn {
        transform: scale(0.7);
      }
    }
    .item-box {
      width: 46%;
    }
    .list-center {
      height: 50px;
      padding-bottom: 0px;
      .list-img {
        height: 50px;
        width: auto;
      }
    }
    .list-bottom {
      display: block;
    }
  }
}

.custom-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
