<template>
  <el-dialog
    title="查看流程"
    :visible.sync="visible"
    width="60%"
    v-dialogDrag
    :before-close="cancel"
  >
    <div class="dia-box">
      <div class="super-flow-box">
        <super-flow
          ref="superFlow"
          :node-list="nodeList"
          :link-list="linkList"
          :origin="origin"
          :draggable="false"
          :linkAddable="false"
          :linkEditable="false"
        >
          <template v-slot:node="{ meta }">
            <div v-if="meta.prop === 'cc'" :class="meta.desc === currentNodeName ? `flow-node flow-node-current` : `flow-node flow-node-${meta.prop}`">
              <header class="ellipsis">
                <svg-icon icon-class="yhgl" />
                {{ meta.name }}
              </header>
              <section>
                {{ meta.desc }}
              </section>
            </div>
            <div v-else :class="`flow-node flow-node-${meta.prop}`">
              <section :class="meta.name === currentNodeName ? 'current-end': '' ">
                {{ meta.name }}
              </section>
            </div>
          </template>
        </super-flow>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: () => false
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      nodeList: [],
      linkList: [],
      origin: [700, 220],
      currentNodeName: '',
      reverse: true,
      activities: [
        {
          content: "活动按期开始",
          timestamp: "2018-04-15"
        },
        {
          content: "通过审核",
          timestamp: "2018-04-13"
        },
        {
          content: "创建成功",
          timestamp: "2018-04-11"
        }
      ]
    };
  },
  methods: {
    cancel() {
      this.$emit("cancel");
    }
  }
};
</script>

<style lang="scss" scoped>
.dia-box {
  height: 550px;
  .super-flow-box {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-color: #f5f5f5;
    .super-flow {
      overflow: auto;
      .super-flow__node {
        .flow-node {
          > header {
            font-size: 14px;
            height: 25px;
            line-height: 25px;
            padding: 0 12px;
            color: #ffffff;
          }

          > section {
            text-align: center;
            line-height: 20px;
            overflow: hidden;
            height: 52px;
            padding: 9px 12px;
            word-break: break-all;
          }

          &.flow-node-start {
            > header {
              background-color: #55abfc;
            }
          }

          &.flow-node-cc {
            > header {
              background-color: #30b95c;
            }
          }
          &.flow-node-current {
            > header {
              background-color: #F56C6C;
            }
          }

          &.flow-node-end {
            > header {
              height: 32px;

              background-color: rgb(0, 0, 0);
            }
            > section {
              height: 32px;
              &.current-end{
                background-color: #F56C6C;
                color: #fff;
              }
            }
          }
        }
      }
    }
  }
}
</style>
