<template>
  <div class="flow-add-bg" :class="{'final-flow-add-bg': finalEnd, 'last-flow-add-bg': branchEnd}">
    <div class="line" :class="{'branchEndLine': branchEnd, 'finalEndLine': finalEnd}">
      <el-popover
        v-model="dialogVisible"
        placement="right-start"
      >
        <div class="which-type-bg">
          <div
            class="which-type-block-wrapper"
            @click="handleAddCheckPerson"
          >
            <div class="which-type-block check-person" />
            <div class="which-type-title">
              审批人
            </div>
          </div>
          <div v-if="canAddBranch"
            class="which-type-block-wrapper"
            @click="handleAddCheckBranch"
          >
            <div class="which-type-block check-branch" />
            <div class="which-type-title">
              条件分支
            </div>
          </div>
        </div>
        <div
          slot="reference"
          class="check-flow-add-block-btn"
        >
          <div class="check-flow-add-block-btn-horizontal-line" />
          <div class="check-flow-add-block-btn-vertical-line" />
        </div>
      </el-popover>
    </div>
    <div v-if="finalEnd" class="flow-end-text">流程结束</div>
  </div>
</template>

<script>
export default {
  props: {
    blocks: Array, // 要往上加的blocks
    blockIndex: Number, // 要添加的block的上一个block的index
    branchEnd: Boolean,
    finalEnd: Boolean,
    canAddBranch:{
      type:Boolean,
      default:true
    }
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    handleAddCheckPerson() {
      this.dialogVisible = false;
      this.$emit('handleAddCheckPerson', this.blockIndex, this.blocks);
    },
    handleAddCheckBranch() {
      this.dialogVisible = false;
      this.$emit('handleAddCheckBranch', this.blockIndex, this.blocks);
    },
  },
};
</script>

<style lang="scss" scoped>
  .which-type-bg {
    display: flex;
    justify-content: center;
    padding-top: 28px;
    padding: 28px 12px 32px;
    .which-type-block-wrapper {
      cursor: pointer;
    }
    .which-type-block-wrapper + .which-type-block-wrapper {
      margin-left: 20px;
    }
    .which-type-block {
      width: 80px;
      height: 80px;
    }
    .check-person {
      background-image: url("../../assets/images/page/check-flow/check-persion.png");
      background-repeat: no-repeat;
    }
    .check-branch {
      background-image: url("../../assets/images/page/check-flow/check-branch.png");
      background-repeat: no-repeat;
    }
    .which-type-title {
      font-size: 12px;
      color: #666;
      margin-top: 10px;
      text-align: center;
    }
  }
  .line {
    height: 85px;
    width: 100%;
    background-image: url("../../assets/images/page/check-flow/flow-down.png");
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    .check-flow-add-block-btn {
      background-color: #1d6ced;
      border-radius: 15px;
      margin-top: 25px;
      width: 30px;
      height: 30px;
      z-index: 1;
      cursor: pointer;
      position: relative;
    }
    .check-flow-add-block-btn-horizontal-line {
      position: absolute;
      top: 14px;
      left: 6px;
      width: 18px;
      height: 2px;
      background-color: white;

    }
    .check-flow-add-block-btn-vertical-line {
      position: absolute;
      top: 6px;
      left: 14px;
      width: 2px;
      height: 18px;
      background-color: white;
    }
  }
  .branchEndLine {
    height: 100%;
    background-image: url('../../assets/images/page/check-flow/flow-line.png');
    background-repeat: repeat-y;
  }
  .finalEndLine {
    background-image: url('../../assets/images/page/check-flow/flow-end.png');
  }
  .flow-add-bg {
    height: 85px;
  }
  .final-flow-add-bg {
    height: 115px;
  }
  .last-flow-add-bg {
    flex: 1 0 85px;
  }
  .flow-end-text {
    text-align: center;
    font-size: 14px;
    line-height: 30px;
    color: #999;
  }
</style>
