<template>
  <div class="check-flow-bg" :class="{'autoHeight': thisBlocks.length > 0}">
    <template v-for="(block, idx) in thisBlocks">
      <div
        v-if="block.type === 1"
        :key="block.id"
        class="branch-bg"
        :class="{'autoHeight': idx === thisBlocks.length - 1}"
      >
        <div class="branch-top">
          <div class="check-flow-branch-add-btn" @click="addBranch(block)">
            添加条件
          </div>
        </div>
        <div class="branch-bottom">
          <div
            v-for="(item, index) in block.subBlocks"
            :key="item.id"
            class="branch-block"
            :style="{marginLeft: (index > 0) ? '80px' : 0}"
          >
            <div class="branch-block-top-line" />
            <div class="branch-block-middle" @click="$emit('clickBlock', item.blocks[0], index)">
              <div
                class="block-delete"
                @mouseenter="item.showDeleteBtn = true"
                @mouseleave="item.showDeleteBtn = false"
              >
                <img
                  class="visible"
                  width="10"
                  height="10"
                  src="../../assets/images/page/check-flow/flow-cancel.png"
                  @click.stop="handleDeleteBlock(item, block.subBlocks, idx)"
                >
              </div>
              <div class="branch-block-middle-title">
                {{ item.blocks[0].desc }}
              </div>
              <div class="branch-block-middle-content" v-html="item.blocks[0].content">
              </div>
            </div>
            <flow-add
              :blocks="item.blocks"
              :branchEnd="item.blocks.length === 1"
              :blockIndex="0"
              :canAddBranch=false
              @handleAddCheckBranch="handleAddCheckBranchFromBranch"
              @handleAddCheckPerson="handleAddCheckPersonFromBranch"
            >
            </flow-add>
            <check-flow
              :blocks="item.blocks"
              @clickBlock="e => $emit('clickBlock', e)"
            />
          </div>
        </div>
        <div class="branch-bottom-close-block"></div>
        <flow-add
          :blocks="blocks"
          :branchEnd="block.onBranch && idx === thisBlocks.length - 1"
          :finalEnd="!block.onBranch && idx === thisBlocks.length - 1"
          :blockIndex="block.onBranch ? idx + 1 : idx"
          @handleAddCheckBranch="handleAddCheckBranchFromLastBranch"
          @handleAddCheckPerson="handleAddCheckPersonFromLastBranch">
        </flow-add>
      </div>
      <flow-block
        v-else
        :key="block.id"
        :block="block"
        :title="block.desc"
        :last="idx === thisBlocks.length - 1"
        :blockIndex="getBlockIndex(block, idx)"
        :content-title="block.content"
        @clickBlock="e => $emit('clickBlock', e)"
        @handleAddCheckBranch="handleAddCheckBranchFromBlock"
        @handleAddCheckPerson="handleAddCheckPersonFromBlock"
        @deleteBlock="handleDeleteBlock"
      >
      </flow-block>
    </template>
  </div>
</template>

<script>
import flowBlock from './flow-block';
import flowAdd from './flow-add';
import { getUuid } from '../../utils';

export default {
  name: 'CheckFlow',
  components: { flowBlock, flowAdd },
  /* blocks为当前层级的所有框：type为0是审核人，1是条件，2是条件内容框；
				另外，每个block都有content除了分支框本身，分支框下的条件框有id */
  props: ['blocks'],
  data() {
    return {};
  },
  computed: {
    thisBlocks() {
      return this.blocks.filter(itm => itm.type !== 2)
    }
  },
  methods: {
    getBlockIndex(block, idx){
      if(block.branchSameNodeId != null){
        return idx;
      }
      return block.onBranch ? idx + 1 : idx;
    },
    handleAddCheckPersonFromBranch(blockIdx, blocks) {
      this.addCheckPerson(blockIdx, blocks);
    },
    handleAddCheckPersonFromBlock(blockIdx) {
      this.addCheckPerson(blockIdx, this.blocks);
    },
    handleAddCheckBranchFromBranch(blockIdx, blocks) {
      this.addCheckBranch(blockIdx, blocks);
    },
    handleAddCheckBranchFromBlock(blockIdx) {
      this.addCheckBranch(blockIdx, this.blocks);
    },
    handleAddCheckBranchFromLastBranch(blockIdx) {
      this.addCheckBranch(blockIdx, this.blocks);
    },
    handleAddCheckPersonFromLastBranch(blockIdx) {
      this.addCheckPerson(blockIdx, this.blocks);
    },
    handleDeleteBlock(block, blocks, idx) {
      this.$confirm('此节点删除后，系统中已经在流程中的单据按照原审核流进行流转，新产生的单据按照新的审核流进行流转，保存后生效。', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 从这个block开始，往后的所有跟它有祖辈关系的block都要删掉
        if (blocks) { // 这是要删除分支
          if (blocks.length === 2) { // 如果子分支数量等于2，删除1个，剩另一个毫无意义，则干脆把整个分支主框都删掉
            if (this.blocks.some(itm => itm.type === 2)) { // 说明本flow是一个分支flow，最上面有一个条件框，所以要i+1
              this.blocks.splice(idx + 1, 1);
            } else {
              this.blocks.splice(idx, 1);
            }
          } else {
            const index = blocks.findIndex(item => item.id === block.id);
            blocks.splice(index, 1);
          }
        } else {
          const index = this.blocks.findIndex(item => item.id === block.id);
          this.blocks.splice(index, 1);
        }
      })
    },
    addCheckPerson(blockIdx, blocks) {
      const last = blocks.slice(-1)[0];
      const element = {
        id: getUuid(),
        type: 0,
        content: '',
        desc: '',
        deptAuditEnabled: 0,
        stepType: 'NORMAL',
        onBranch: last.onBranch,
      };
      blocks.splice(blockIdx + 1, 0, element);
    },
    addCheckBranch(blockIdx, blocks) {
      const last = blocks.slice(-1)[0];
      const element = {
        type: 1,
        id: getUuid(),
        onBranch: last.onBranch,
        subBlocks: [
          {
            id: getUuid(),
            showDeleteBtn: false,
            blocks: [
              {
                id: getUuid(),
                type: 2,
                desc: '',
                deptAuditEnabled: 0,
                content: '',
                onBranch: true,
              },
            ],
          },
          {
            id: getUuid(),
            showDeleteBtn: false,
            blocks: [
              {
                id: getUuid(),
                type: 2,
                desc: '',
                deptAuditEnabled: 0,
                content: '',
                onBranch: true,
              },
            ],
          },
        ],
      };
      blocks.splice(blockIdx + 1, 0, element);
    },
    addBranch(block) { // 点击添加条件
      block.subBlocks.push({
        id: getUuid(),
        showDeleteBtn: false,
        blocks: [
          {
            id: getUuid(),
            type: 2,
            desc: '',
            deptAuditEnabled: 0,
            content: '',
            onBranch: true
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
	.visible {
		display: block;
	}
	.invisible {
		/*display: none;*/
	}
  .autoHeight {
    flex-grow: 1;
  }
	.check-flow-bg {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
  .branch-bg {
    display: flex;
    flex-direction: column;
  }
	.branch-top {
		display: flex;
		align-items: center;
		margin: 0 110px;
		height: 2px;
		background-color: #ccc;
		.check-flow-branch-add-btn {
			z-index: 1;
			margin: 0 auto;
			background-color: white;
			width: 70px;
			height: 28px;
			border-radius: 3px;
			border: 1px solid #1d6ced;
			line-height: 28px;
			font-size: 12px;
			text-align: center;
			color: #1d6ced;
			cursor: pointer;
		}
	}
	.branch-block {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}
	.branch-block-top-line {
		margin-top: -1px;
		height: 21px;
		width: 2px;
		background-color: #ccc;
	}
	.branch-bottom {
		display: flex;
	}
	.branch-block-middle {
		border-radius: 5px;
		box-shadow: 0 1px 1px #ccc;
		border: 1px solid #ccc;
		width: 220px;
		min-height: 75px;
		padding: 14px;
		position: relative;
		cursor: pointer;
	}
	.branch-block-middle-title {
		font-size: 12px;
		color: #1d6ced;
	}
	.branch-block-middle-content {
		margin-top: 14px;
		color: #333;
		font-size: 14px;
	}
	.block-delete {
		position: absolute;
		top: 3px;
		right: 8px;
		width: 16px;
		height: 16px;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}
  .branch-bottom-close-block {
    display: flex;
		align-items: center;
		margin: 0 110px;
		height: 2px;
		background-color: #ccc;
  }
</style>
