<template>
  <div
    class="process-forecast"
    v-cloak
    :style="{
      '--outHeight': `${outHeight}px`,
    }"
  >
    <div
      v-if="showPage"
      style="background: #fff; height: 100%; position: relative"
    >
      <van-collapse v-model="activeNames">
        <van-collapse-item title="流程状态" name="1">
          <div class="flow-chart-dialog_top">
            <div class="btn-group">
              <div class="process-forecast_header" style="line-height: 32px">
                <div>
                  <div class="flow-chart-dialog_top_title">
                    <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>
                </div>
              </div>
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>

      <div
        class="fixedIcon"
        :class="[activeNames.length > 0 ? 'tops' : 'topsTwo']"
      >
        <el-button-group size="samll">
          <el-button
            :class="{ 'active-text': activeName == '文字版' }"
            @click="changeBtn('wzb')"
            icon="icon-yucetu-wenzi"
            class="elButtom"
          ></el-button>
          <el-button
            :class="{ 'active-text': activeName == '图片版' }"
            style="margin-left: 1px"
            @click="changeBtn('tpb')"
            icon="icon-yucetu-tupian"
            class="elButtom"
          ></el-button>
        </el-button-group>
      </div>
      <div
        ref="forecastBoxRef"
        class="process-forecast_wrap atPage"
        :class="[activeNames.length > 0 ? 'heights' : 'heightsTwo']"
      >
        <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>
    <van-popup
      v-model="showFlowChart"
      round
      :close-on-click-overlay="false"
      safe-area-inset-bottom
      position="bottom"
      :style="{ height: '68%' }"
      class="van-popup"
    >
      <van-nav-bar
        :title="$store.state.process.processName"
        left-text="返回"
        @click-left="handleClickLeft"
        class="popup_header_fixed"
      />
      <div class="popup_header_margin" ref="header_margin">
        <van-collapse v-model="activeNames">
          <van-collapse-item title="流程状态" name="1">
            <div class="flow-chart-dialog_top">
              <div class="">
                <div class="process-forecast_header" style="line-height: 32px">
                  <div>
                    <div class="flow-chart-dialog_top_title">
                      <div
                        class="header_left"
                        style="font-size: 12px; 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>
                  </div>
                </div>
              </div>
            </div>
          </van-collapse-item>
        </van-collapse>

        <div
          class="fixedIcon"
          :class="[activeNames.length > 0 ? 'tops' : 'topsTwo']"
        >
          <el-button-group size="samll">
            <el-button
              :class="{ 'active-text': activeName == '文字版' }"
              @click="changeBtn('wzb')"
              icon="icon-yucetu-wenzi"
              class="elButtom"
            >
              <!-- <span style="border-bottom: 2px solid">A</span> -->
            </el-button>
            <el-button
              :class="{ 'active-text': activeName == '图片版' }"
              style="margin-left: 1px"
              @click="changeBtn('tpb')"
              icon="icon-yucetu-tupian"
              class="elButtom"
            ></el-button>
          </el-button-group>
        </div>
        <div
          ref="forecastBoxRef"
          class="process-forecast_wrap"
          :class="[activeNames.length > 0 ? 'heights' : 'heightsTwo']"
        >
          <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>
    </van-popup>
  </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: '',
      },
      headerData: {
        type: Object,
        default: () => {
          return {}
        },
      },
      customClass: {
        type: String,
        default: '',
      },
      showPage: {
        type: Boolean,
        default: false,
      },
      outHeight: Number,
    },
    data() {
      return {
        activeNames: [],
        activeName: '文字版',
        countNum: 0,
        forecastWrapHeight: 'calc(100vh - 310px)',
        isGLP: false,
        showFlowChart: false,
      }
    },
    computed: {
      customClassDialog() {
        return this.customClass + ' flow-chart-dialog'
      },
    },

    created() {
      this.countNum = 0
    },
    mounted() {
      this.activeName == '文字版'
      this.activeNames = []
      if (this.instId || this.nodeId) {
        this.showNodePath(
          this.instId,
          this.data,
          this.nodeId ? this.nodeId : this.headerData.nodeId,
          false
        ) //父组件调用子组件方法
      }
    },
    methods: {
      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.$nextTick(() => {
              console.log(
                this.$refs.processForecastText,
                '   this.$refs.processForecastText'
              )
              if (this.$refs.processForecastText) {
                this.$refs.processForecastText.showNodePath(
                  instId,
                  data,
                  nodeId
                )
              }
            })
            if (this.countNum < 2) {
              this.setCenterPosition()
            }
          } else {
            this.$nextTick(() => {
              this.$refs.processForecastImg.showNodePath(instId, data, nodeId)
            })
          }
        })
      },

      changeBtn(v) {
        if (v == 'wzb') {
          this.activeName = '文字版'
        } else {
          this.activeName = '图片版'
        }
        this.showNodePath(this.instId, this.data, this.nodeId, this.isGLP)
      },
      handleOpen(instId, data, nodeId, isGLP) {
        this.showFlowChart = true
        this.activeNames = []
        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
            if (this.$refs.forecastBoxRef) {
              this.$refs.forecastBoxRef.scrollLeft =
                boxWidth / 2 - bodyWidth / 2
            }

            console.log(
              this.$refs.processForecastText,
              'this.forecastTextRef------'
            )
          }, 1000)
        })
      },
      handleClickLeft() {
        this.$emit('update:showPage', false)
        this.showFlowChart = false
      },
    },
  }
</script>
<style lang="scss" scoped>
  $header-block-wh: 15px;
  $process-green-color: #51b43a;
  $process-gray-color: #dbdbdb;
  $process-blue-color: #409eff;
  $process-peo-color: #c1ad9a;
  $process-gua-color: #866ad6;
  .process-forecast {
    height: calc(#{$vh} - var(--outHeight));
  }

  .process-forecast_header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .active-text {
    color: $process-blue-color;
    background: #ffffff !important;
  }
  ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background-color: transparent !important;
    color: $process-green-color;
    box-shadow: none !important;
  }
  .process-forecast {
    background: #fff;
    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;
        flex-wrap: wrap;
        // justify-content: space-between;
        .header-left_item {
          display: flex;
          align-items: center;

          div {
            width: $header-block-wh;
            height: $header-block-wh;
            margin-left: 0;
            margin-right: 10px;

            border-radius: 4px 4px 4px 4px;
          }
          .text {
            margin-right: 16px;
            white-space: nowrap;
            font-size: 12px;
            color: #333333;
          }
          .approval-block {
            background-color: $process-blue-color;
          }
          .completed-block {
            background-color: $process-green-color;
          }
          .peo-block {
            background-color: $process-peo-color;
          }
          .gua-block {
            background-color: $process-gua-color;
          }
          .without-block {
            background-color: $process-gray-color;
          }
        }
      }
      .header_right {
        text-align: right;
        box-sizing: border-box;
        padding-right: 20px;
      }
    }
  }
  .process-forecast_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 16px;
    box-sizing: border-box;

    height: calc(100% - 113.89px);
    width: calc(100% - 32px);
  }
  .process-forecast_subWrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    ::v-deep {
      .box {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        width: fit-content;
        margin: 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__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: #939daf;
          font-weight: bold;
          &:hover {
            color: #409eff;
          }
        }
      }
    }
  }
  .el-button-group {
    width: 36px;

    height: 70px;
    line-height: 70px;
    background: #f4f4f4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 16px 16px 16px 16px;

    span,
    ::v-deep .el-icon-picture-outline {
      font-size: 17px !important;
    }
    .el-button {
      width: 32px;
      height: 32px;

      border-radius: 50%;
      background: #f4f4f4;
      display: flex;
      justify-content: center;
      align-items: center;
      border: none;
      padding: 0;
    }
  }
  [v-cloak] {
    display: none;
  }
  .van-popup {
    ::v-deep {
      .van-nav-bar__left {
        .van-nav-bar__text {
          color: #8c8c8c;
        }
      }
      .van-nav-bar__title {
        font-weight: bold;
      }
      .van-nav-bar__right {
        .van-nav-bar__text {
          color: #409eff;
        }
      }
    }
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .popup_header {
      &_margin {
        flex: 1;
        position: relative;
        overflow: auto;
      }
      &_fixed {
        z-index: 10;

        width: 100%;
        height: 44px;
        background: #fff;
        border-radius: 12px 12px 0px 0px;
      }
    }
  }
  .btn-group {
    width: calc(100% - 0px);
  }
  ::v-deep .elButtom {
    i {
      font-size: 17px;
      font-weight: 600;
    }
  }
  ::v-deep {
    .van-collapse {
      .van-cell::after {
        border: none !important;
      }
    }
    .van-collapse-item__content {
      padding-top: 0;
    }
    [class*='van-hairline']::after {
      border: none !important;
    }
  }

  .fixedIcon {
    position: absolute;
    right: 20px;
    transition: all 0.4s;
    z-index: 3;
  }

  ::v-deep .van-field__error-message {
    text-align: right;
  }
  .tops {
    top: 128px;
  }
  .topsTwo {
    top: 46px;
  }
  .heights {
    height: calc(100% - 148px);
    margin-bottom: 148px;
  }
  .heightsTwo {
    height: calc(100% - 66px);
    margin-bottom: 66px;
  }
  .atPage {
    overflow: auto;
  }
</style>
