<!-- eslint-disable vue/no-static-inline-styles -->
<template>
  <div class="custom-node">
    <!-- :style="{
      background: getStyleFun(appProperty.status).color,
    }" -->
    <img class="app-icon" v-if="appProperty.iconUrl" :src="appProperty.iconUrl" alt="" />
    <div class="app-icon app-text" v-else>{{ appProperty?.name.split('')[0] }}</div>
    <div class="app-info">
      <div class="app-name" :title="appProperty.name">{{ appProperty.name }}</div>
      <div class="app-tag">{{ appProperty.type }}</div>
    </div>
    <div class="app-status">
      <div class="round" :style="{ background: getStyleFun(appProperty.status).color }"></div>
      <div class="text">{{ getStyleFun(appProperty.status).title }}</div>
    </div>
    <!-- <div>
        <span @click="attributeFun">属性</span>
        <span @click="paramFun">参数</span>
      </div> -->
  </div>
</template>

<script lang="ts" setup>
import { inject, onMounted, reactive } from 'vue';

const appProperty = reactive({
  name: '',
  iconUrl: '',
  type: '',
  status: '',
});

const getNode: any = inject('getNode');

// const attributeFun = () => {
//   setNodeAttribute(appProperty);
// };

// const paramFun = () => {
//   emits('param', appProperty);
// };

const getStyleFun = (flag: any) => {
  const styles: any = {
    active: {
      color: '#409eff',
      title: '进行中',
    },
    waiting_for_user: {
      color: '#409eff',
      title: '待确认',
    },
    finished: {
      color: '#67c23a',
      title: '已完成',
    },
    pending: {
      color: '#909399',
      title: '未开始',
    },
  };

  if (styles[flag]) {
    return styles[flag];
  } else {
    return {
      color: '#f56c6c',
      title: '异常',
    };
  }
};

// const getStyleFun = (flag: any) => {
//   const styles: any = {
//     active: {
//       color: '#ddf1ff',
//       title: '进行中',
//     },
//     waiting_for_user: {
//       color: '#ddf1ff',
//       title: '待操作',
//     },
//     finished: {
//       color: '#e8ffdc',
//       title: '已完成',
//     },
//     pending: {
//       color: '',
//       title: '未开始',
//     },
//   };

//   if (styles[flag]) {
//     return styles[flag];
//   } else {
//     return {
//       color: '#ffd7d8',
//       title: '异常',
//     };
//   }
// };

onMounted(() => {
  if (getNode) {
    const node = getNode();
    const data = node.getData();
    if (data?.label) {
      appProperty.name = data.label;
      appProperty.iconUrl = data.iconUrl;
      appProperty.type = data.type;
      appProperty.status = data.flowNodeInfo?.nodeStatus || 'pending';
    }
  }
});
</script>
<style lang="scss">
.custom-node {
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 8px;
  box-shadow:
    0 -2px 4px 0 rgba(209, 209, 209, 50%),
    2px 2px 4px 0 rgba(217, 217, 217, 50%);
  cursor: pointer;
  border-radius: 4px;
  .app-icon {
    width: 36px;
    height: 36px;
    margin-right: 8px;
    background-color: #f2f2f2;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    flex-shrink: 0;
  }
  .app-info {
    display: flex;
    flex-direction: column;
    width: 100px;
  }
  .app-status {
    width: 60px;
    display: flex;
    align-items: center;

    .round {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #191919;
      margin-right: 5px;
    }

    .text {
      font-size: 12px;
    }
  }
  .app-name {
    font-size: 14px;
    font-weight: 500;
    color: #191919;
    width: 83px;
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏溢出的内容 */
    text-overflow: ellipsis; /* 显示省略号 */
  }
  .app-tag {
    font-size: 12px;
    color: #595959;
  }
}
</style>
