<template>
  <div class="flow-block-bg" :class="{'autoHeight': last}">
    <div class="block" @click="$emit('clickBlock', block)">
      <div
        class="block-title"
        @mouseenter="showDeleteBtn = true"
        @mouseleave="showDeleteBtn = false"
      >
        <div class="block-title-left">
          <img src="../../assets/images/page/check-flow/flow-person.png">
          {{ title }}
        </div>
        <div
          class="block-delete"
          @click.stop="handleDelete"
        >
          <img
            class="visible"
            width="10"
            height="10"
            src="../../assets/images/page/check-flow/flow-cancel.png"
          >
        </div>
      </div>
      <div
        class="block-content"
      >
        {{ contentTitle }}
        <img src="../../assets/images/page/check-flow/flow-arrow.png">
      </div>
    </div>
    <flow-Add
      :branchEnd="block.onBranch && last"
      :finalEnd="!block.onBranch && last"
      :canAddBranch="!block.onBranch"
      @handleAddCheckBranch="handleAddCheckBranch"
      @handleAddCheckPerson="handleAddCheckPerson"
    />
  </div>
</template>
<script>
import flowAdd from './flow-add';

export default {
  components: { flowAdd },
  props: ['title', 'contentTitle', 'block', 'last', 'blockIndex'], // block 是用于删除时，识别哪个block
  data() {
    return {
      showDeleteBtn: false,
    };
  },
  methods: {
    handleAddCheckPerson() {
      this.$emit('handleAddCheckPerson', this.blockIndex);
    },
    handleAddCheckBranch() {
      this.$emit('handleAddCheckBranch', this.blockIndex);
    },
    handleDelete() {
      this.$emit('deleteBlock', this.block);
    },
  },
};
</script>
<style lang="scss" scoped>
  .autoHeight {
    flex-grow: 1;
  }
	.flow-block-bg {
		width: 220px;
    display: flex;
    flex-direction: column;
	}

	.visible {
		display: block;
	}
	.invisible {
		display: none;
	}
	.block {
		width: 220px;
		border-radius: 5px;
		box-shadow: 0 1px 1px #ccc;
    border: 1px solid #ccc;
    cursor: pointer;
		.block-title {
			background-color: #f5a623;
			padding: 0 8px;
			height: 22px;
			line-height: 22px;
			font-size: 12px;
			color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.block-delete {
				width: 16px;
				height: 16px;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
			}
			.block-title-left {
				display: flex;
				align-items: center;
			}
			img {
				margin-right: 4px;
			}
		}
		.block-content {
			min-height: 58px;
			padding: 0 14px;
			font-size: 14px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
</style>
