<template>
  <div class="process-forecast">
    <el-dialog
      width="60%"
      title="审批预测"
      :visible.sync="showFlowChart"
      :close-on-click-modal="false"
      append-to-body
      lock-scroll
      :custom-class="customClassDialog"
      top="5vh"
    >
      <template #title>
        <el-tabs v-model="tabActiveName" @tab-click="handleClick">
          <el-tab-pane label="流程图" name="flowChart"></el-tab-pane>
          <el-tab-pane label="预测图" name="forecast"></el-tab-pane>
        </el-tabs>
      </template>
      <div v-show="tabActiveName === 'forecast'">
        <div class="flow-chart-dialog_top" style="width: 100%; float: left">
          <div class="btn-group" style="width: calc(100% - 30px); float: left">
            <el-row class="process-forecast_header" style="line-height: 32px">
              <el-col :span="15">
                <div class="flow-chart-dialog_top_title">
                  <!-- <div style="float: left; line-height: 32px">审批预测</div> -->
                  <div
                    class="header_left"
                    style="font-size: 14px; line-height: 32px"
                  >
                    <div class="header-left_item">
                      <div
                        class="without-block"
                        style="width: 14px; height: 14px"
                      ></div>
                      <span class="text">未开始</span>
                    </div>
                    <div class="header-left_item">
                      <div
                        class="approval-block"
                        style="width: 14px; height: 14px"
                      ></div>
                      <span class="text">当前节点</span>
                    </div>
                    <div class="header-left_item">
                      <div
                        class="completed-block"
                        style="width: 14px; height: 14px"
                      ></div>
                      <span class="text">已办节点</span>
                    </div>
                    <div class="header-left_item">
                      <div
                        class="peo-block"
                        style="width: 14px; height: 14px"
                      ></div>
                      <span class="text">人工终止</span>
                    </div>
                    <div class="header-left_item">
                      <div
                        class="gua-block"
                        style="width: 14px; height: 14px"
                      ></div>
                      <span class="text">挂起</span>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="9" class="header_right">
                <el-button-group size="samll">
                  <el-button
                    :class="{ 'active-text': activeName == '文字版' }"
                    @click="changeBtn('wzb')"
                  >
                    文字版
                  </el-button>
                  <el-button
                    :class="{ 'active-text': activeName == '图片版' }"
                    style="margin-left: 1px"
                    @click="changeBtn('tpb')"
                  >
                    图片版
                  </el-button>
                </el-button-group>
              </el-col>
            </el-row>
          </div>
        </div>

        <div ref="forecastBoxRef" class="process-forecast_wrap">
          <div class="process-forecast_subWrap">
            <template v-if="activeName == '文字版'">
              <ProcessForecastText
                ref="processForecastText"
                :header-data="headerData"
              ></ProcessForecastText>
            </template>
            <template v-else>
              <ProcessForecastImg
                ref="processForecastImg"
                :header-data="headerData"
              ></ProcessForecastImg>
            </template>
          </div>
        </div>
      </div>
      <ht-flow-chart
        v-show="tabActiveName === 'flowChart'"
        :inst-id="instId"
        :def-id="defId"
        :bpmn-inst-id="bpmnInstId"
        :dialog="false"
        :key="instId"
      ></ht-flow-chart>
    </el-dialog>
  </div>
</template>
<script>
  import ProcessForecastText from './components/forecastText/processForecastText.vue'
  import ProcessForecastImg from './components/forecastImg/processForecastImg.vue'
  export default {
    name: 'HtProcessForecast',
    components: { ProcessForecastText, ProcessForecastImg },
    props: {
      data: {
        type: Object,
        default: () => {
          return {}
        },
      },
      instId: {
        type: String,
        default: '',
      },
      nodeId: {
        type: String,
        default: '',
      },
      defId: {
        type: String,
        default: '',
      },
      headerData: {
        type: Object,
        default: () => {
          return {}
        },
      },
      customClass: {
        type: String,
        default: '',
      },
      bpmnInstId: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        tabActiveName: 'flowChart',
        activeName: '文字版',
        countNum: 0,
        forecastWrapHeight: 'calc(100vh - 310px)',
        isGLP: false,
        showFlowChart: false,
      }
    },
    computed: {
      customClassDialog() {
        return this.customClass + ' flow-chart-dialog'
      },
      proInstId() {
        return this.$route.query.instId
      },
    },

    created() {
      this.countNum = 0
    },
    mounted() {},
    methods: {
      handleClick() {},
      showNodePath(instId, data, nodeId, isGLP) {
        this.$nextTick(() => {
          this.isGLP = isGLP
          if (isGLP) {
            this.forecastWrapHeight = 'calc(100vh - 210px)'
          } else {
            this.forecastWrapHeight = 'calc(100vh - 310px)'
          }
          this.countNum++
          if (this.activeName == '文字版') {
            this.$refs.processForecastText.showNodePath(instId, data, nodeId)
            if (this.countNum < 2) {
              this.setCenterPosition()
            }
          } else {
            this.$refs.processForecastImg.showNodePath(instId, data, nodeId)
          }
        })
      },
      changeBtn(v) {
        if (v == 'wzb') {
          this.activeName = '文字版'
        } else {
          this.activeName = '图片版'
        }

        this.showNodePath(
          this.instId ? this.instId : this.proInstId,
          this.data,
          this.nodeId,
          this.isGLP
        )
      },
      handleOpen(instId, data, nodeId, isGLP, activeName = 'forecast') {
        this.tabActiveName = activeName
        this.showFlowChart = true
        this.showNodePath(instId, data, nodeId, isGLP)
      },
      setCenterPosition() {
        this.$nextTick(() => {
          setTimeout(() => {
            let bodyWidth =
              document.documentElement.clientWidth || document.body.clientWidth
            let boxWidth = this.$refs.processForecastText.$el.clientWidth
            this.$refs.forecastBoxRef.scrollLeft = boxWidth / 2 - bodyWidth / 2
          }, 1000)
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  $header-block-wh: 15px;
  $process-green-color: #51b43a;
  $process-gray-color: #dbdbdb;
  $process-blue-color: #0080fe;
  $process-peo-color: #c1ad9a;
  $process-gua-color: #866ad6;
  .active-text {
    color: var(--themeColor);
    border-color: var(--themeColor);
  }
  ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background-color: transparent !important;
    color: $process-green-color;
    box-shadow: none !important;
  }
  ::v-deep .process-forecast {
    ul,
    li {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    div,
    i,
    span,
    li,
    ul {
      box-sizing: border-box;
    }

    &_header {
      .header_left {
        display: flex;
        align-items: center;
        .header-left_item {
          display: flex;
          align-items: center;
          div {
            width: $header-block-wh;
            height: $header-block-wh;
            margin-left: 20px;
            margin-right: 10px;
          }
          .approval-block {
            background-color: $process-blue-color;
          }
          .completed-block {
            background-color: $process-green-color;
          }
          .without-block {
            background-color: $process-gray-color;
          }
          .peo-block {
            background-color: $process-peo-color;
          }
          .gua-block {
            background-color: $process-gua-color;
          }
        }
      }
      .header_right {
        text-align: right;
        box-sizing: border-box;
        padding-right: 20px;
      }
    }
  }
  .process-forecast_wrap {
    // display: flex;
    // justify-content: center;
    padding: 20px 0;
    box-sizing: border-box;
    overflow: auto;
    height: calc(65vh + 30px);
    width: 100%;
  }
  .process-forecast_subWrap {
    width: calc(98% - 20px);
    height: 98%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    overflow-y: auto;
  }

  .branch-box {
    display: flex;
    align-items: center;
    border: 1px solid red;
    .one-half-line {
      width: 15px;
      height: 2px;
      background: #999;
    }
    .one-line {
      display: inline-block;
      width: 15px;
      height: 2px;
      background: #999;
      position: relative;
      &::after {
        content: '';
        display: block;
        position: absolute;
        right: -2px;
        top: -4px;
        border-top: 5px solid transparent;

        border-bottom: 5px solid transparent;
        border-left: 10px solid #999;
      }
    }
    .temp {
      border: 1px solid blue;
    }
  }

  ::v-deep .flow-chart-dialog {
    &.is-fullscreen {
      overflow: hidden;
    }
    // .el-dialog__header {
    //   display: none;
    // }
    .el-dialog__body {
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 0;
      overflow: hidden;
      border-top: 0px;
      .flow-chart-dialog_top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .flow-chart-dialog_top_title {
          margin-right: 20px;
          font-size: 18px;
          color: #303133;
        }
        .el-icon-close {
          margin-left: 15px;
          cursor: pointer;
          font-size: 24px;
          color: $base-menu-color;
          font-weight: bold;
          &:hover {
            color: $base-color-default;
          }
        }
      }
    }
  }
</style>