<!--
 * @Author: Jason Liu
 * @Date: 2022-06-09 16:26:32
 * @Desc: 
-->
<template>
  <div>
    <div
      :class="[
        'card_nodes',
        nodeData.status,
        nodeData.loading ? 'twinkling' : '',
      ]"
      :style="nodeStyle"
    >
      <span>
        <template v-if="nodeData.status == 'running'">
          <a-icon type="sync" spin />
        </template>
        <template v-else-if="nodeData.status == 'success'">
          <a-icon type="check-circle" />
        </template>
        <template v-else-if="nodeData.status == 'failed'">
          <a-icon type="close-circle" />
        </template>
        <template v-else-if="nodeData.scheduleType && nodeData.winningJobId">
          <svg-icon class="icon_controls" :type="nodeData.scheduleType" />
        </template>
        <template v-else>
          <svg-icon
            class="icon_controls"
            v-if="nodeData.type"
            :type="nodeData.type"
          />
        </template>
        {{ nodeData.name }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "card",
  inject: ["getGraph", "getNode"],
  props: {
    value: {
      type: Object,
      required: false,
      default: () => {
        return {
          name: undefined,
          type: undefined,
          status: undefined,
        };
      },
    },
  },
  data() {
    return {
      nodeData: this.value,
      nodeStyle: { width: "160px", height: "36px" },
    };
  },
  mounted() {
    const node = this.getNode();
    this.nodeData = node.getData();
    let current = node.size();
    this.nodeStyle = {
      width: `${current.width}px`,
      height: `${current.height}px`,
    };
    // 监听数据改变事件
    node.on("change:data", ({ current }) => {
      this.nodeData = current;
    });
    node.on("change:size", ({ cell, current, previous, options }) => {
      //this.nodeData = current;change:size
      this.nodeStyle = {
        width: `${current.width}px`,
        height: `${current.height}px`,
      };
    });
  },
  methods: {},
};
</script>
<style lang="less">
.card_nodes {
  background: #eff4ff;
  width: 160px;
  font-size: 12px;
  font-weight: 500;
  line-height: 24px;
  border: 1px solid #5f95ff;
  border-radius: 8px;
  color: #262626;
  padding: 5px 10px;
  overflow: hidden;
  .icon_controls {
    margin-top: 5px;
    float: left;
  }
  &.default {
    box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
  }

  &.running {
    .anticon {
      color: #5f95ff;
    }
  }

  &.success {
    border: 1px solid #52c41a;
    .anticon {
      color: #52c41a;
    }
  }
  &.failed {
    border: 1px solid #ff4d4f;
    .anticon {
      color: #ff4d4f;
    }
  }
}
</style>
