<template>
  <div
    :class="{'pathCard':true,'borderB':data.BeginTime&&!data.EndTime,'borderY':!data.EndTime&&!data.HasError&&data.HasRetry,'borderR':!data.EndTime&&data.HasError}"
    @click="cardClick">
    <div class="path-title">
      <i v-if="!data.BeginTime" class="iconfont icon-iconfontgengduo" style="color:#89969f"></i>
      <i v-else-if="data.BeginTime&&!data.EndTime" class="iconfont icon-conduct" style="color:#409eff"></i>
      <i v-else class="el-icon-success" style="color:#67C23A"></i>
      {{title}}
      <i v-if="data.HasError" class="iconfont icon-Error pos" style="color:#ff7c77"></i>
      <i v-else-if="data.HasRetry" class="iconfont icon-trouble pos" style="color:#fcc636"></i>
    </div>
    <div class="path-content">
      <slot></slot>
      <p v-if="!isCustomize">耗时: {{data.TakeTime||'--'}}</p>
      <p v-if="!isCustomize">开始时间: {{data.BeginTime||'--'}}</p>
      <p v-if="!isCustomize">结束时间: {{data.EndTime||'--'}}</p>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: '提示'
    },
    data: {
      type: Object,
      default: {}
    },
    isCustomize: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  },
  methods: {
    cardClick() {
      this.$emit('click', this.data, this.title);
    }
  }
};
</script>
<style lang="less" scoped>
.pathCard {
  width: 296px;
  height: 144px;
  border: 1px solid transparent;
  box-shadow: 0 2px 11px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  cursor: pointer;
  &.borderY {
    border-color: #fcc636;
  }
  &.borderR {
    border-color: #ff7c77;
  }
  &.borderB {
    border-color: #409eff;
  }
  .path-title {
    position: relative;
    background-color: #f3f5f6;
    font-size: 14px;
    padding: 5px 10px;
    i {
      margin-right: 5px;
      &.pos {
        position: absolute;
        top: -1px;
        right: 18px;
        font-size: 24px;
        line-height: 1;
      }
    }
  }
  .path-content {
    font-size: 12px;
    padding: 4px 10px 0;
    color: #acb5bb;
  }
}
</style>
