<template>
  <div v-if="inst" class="flow-card-box" :class="[hoverable ? 'flow-card-box-hoverable' : null]">
    <div class="header">
      <div class="name font-bold">{{ inst.processName }}</div>
      <div class="status">
        <a-tag
          v-if="inst.instanceState == STATUS_LIST[0].value"
          color="blue"
          size="small"
        >
          {{ STATUS_LIST[0].name }}
        </a-tag>
        <a-tag
          v-else-if="inst.instanceState == STATUS_LIST[1].value"
          color="green"
          size="small"
        >
          {{ STATUS_LIST[1].name }}
        </a-tag>
        <a-tag
          v-else-if="inst.instanceState == STATUS_LIST[2].value"
          color="red"
          size="small"
        >
          {{ STATUS_LIST[2].name }}
        </a-tag>
        <a-tag
          v-else-if="inst.instanceState == STATUS_LIST[3].value"
          color="orange"
          size="small"
        >
          {{ STATUS_LIST[3].name }}
        </a-tag>
        <a-tag
          v-else-if="inst.instanceState == STATUS_LIST[4].value"
          color="orange"
          size="small"
        >
          {{ STATUS_LIST[4].name }}
        </a-tag>
        <a-tag
          v-else-if="inst.instanceState == STATUS_LIST[5].value"
          color="red"
          size="small"
        >
          {{ STATUS_LIST[5].name }}
        </a-tag>
      </div>
    </div>

    <div class="summary-list">
      <div
        v-for="(value, label) in inst.summary"
        :key="label"
        class="summary-item"
      >
        <div class="label">{{ label }}：</div>
        <div class="value">{{ value }}</div>
      </div>
    </div>

    <div class="footer">
      <div class="initiator">
        <FlowNodeAvatar :size="20" :user-id="inst.startUser.id" />
      </div>
      <div class="start-time">
        提交于 {{ formatStartTime(inst.startTime) }}
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import FlowNodeAvatar from './flowNodeAvatar.vue';
import { STATUS_LIST } from '@/views/workFlow/common/flowConstant';

export default {
  name: 'FlowCard',
  components: {
    FlowNodeAvatar
  },
  props: {
    flowInstance: {
      type: Object,
      default: null
    },
    flowInstanceId: {
      type: String,
      default: null
    },
    // clickable: {
    //   type: Boolean,
    //   default: false
    // },
    hoverable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      inst: null,
      STATUS_LIST,
      // flowDetailVisible: false
    };
  },
  watch: {
    flowInstance: {
      handler(newVal) {
        if (!this.flowInstanceId) {
          this.inst = newVal || {};
        }
      },
      deep: true,
      immediate: true
    },
    flowInstanceId: {
      immediate: true,
      handler(id) {
        if (id) {
          // 若需使用 flowInstanceId 拉取详情，按需补充接口逻辑
        }
      }
    }
  },
  methods: {
    // onCardClick() {
    //   if (this.clickable) {
    //     this.flowDetailVisible = true;
    //   }
    // },
    formatStartTime(time) {
      return moment(time).format('YYYY-MM-DD HH:mm:ss');
    }
  }
};
</script>

<style scoped lang="less">
@import '../variables.module.less';

.flow-card-box {
  user-select: none;
  border-radius: @BorderRadius;
  overflow: hidden;
  border: 1px solid #e9ebef;
  padding: 10px 12px;
  cursor: pointer;
  transition: box-shadow 0.2s cubic-bezier(0, 0, 1, 1);

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .name {
      font-size: 14px;
    }
  }

  .summary-list {
    margin-top: 10px;

    .summary-item {
      display: flex;
      min-height: 20px;

      .label {
        color: #9ba5b3;
        overflow: hidden;
        white-space: nowrap;
        flex-shrink: 0;
      }

      .value {
        color: #232730;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .footer {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;

    .initiator {
      display: flex;
      align-items: center;
    }

    .start-time {
      color: #86909c;
    }
  }
}

.flow-card-box-hoverable {
  &:hover {
    box-shadow: 4px 4px 12px rgb(229, 230, 235);
  }
}
</style>

<style lang="less">
.flow-card-detail-drawer {
  .arco-drawer-body {
    padding: 0;
  }
}
</style>
