<template>
  <div class="process-forecast">
    <!-- v-if="showPage" -->
    <div>
      <div class="flow-chart-dialog_top" style="width: 100%">
        <div class="btn-group" style="width: calc(100% - 30px)">
          <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"
                >
                  <el-button-group size="samll">
                    <el-button
                      :class="{ 'active-text': activeName == '文字版' }"
                      @click="changeBtn('wzb')"
                    >
                      <span>A</span>
                    </el-button>
                    <el-button
                      :class="{ 'active-text': activeName == '图片版' }"
                      style="margin-left: 1px"
                      @click="changeBtn('tpb')"
                      icon="el-icon-picture-outline"
                    ></el-button>
                  </el-button-group>
                  <!-- <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="without-block"
                      style="width: 14px; height: 14px"
                    ></div>
                    <span class="text">未经过</span>
                  </div> -->
                </div>
              </div>
            </el-col>
            <el-col :span="9" class="header_right"></el-col>
          </el-row>
        </div>
      </div>

      <div
        ref="forecastBoxRef"
        class="process-forecast_wrap"
        :style="{
          height: Number(height) > 0 ? height + 'px' : '100%',
          width: Number(width) > 0 ? width + 'px' : '100%',
        }"
      >
        <div class="process-forecast_subWrap" @click="fns()">
          <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>
  </div>
</template>
<script>
  import ProcessForecastText from './componentPage/forecastText/processForecastText.vue'
  import ProcessForecastImg from './componentPage/forecastImg/processForecastImg.vue'
  export default {
    name: 'HtProcessForecast',
    components: { ProcessForecastText, ProcessForecastImg },
    inject: ['instId', 'data', 'nodeId', 'headerData'],
    props: {
      // data: {
      //   type: Object,
      //   default: () => {
      //     return {}
      //   },
      // },
      // instId: {
      //   type: String,
      //   default: '',
      // },
      // nodeId: {
      //   type: String,
      //   default: '',
      // },
      // headerData: {
      //   type: Object,
      //   default: () => {
      //     return {}
      //   },
      // },
      customClass: {
        type: String,
        default: '',
      },
      width: { type: Number | String, default: 0 },
      showType: {
        default: 1, //显示图片2||文字1
      },
      height: {
        type: Number | String,
        default: 0,
      },
    },
    data() {
      return {
        activeName: '文字版',
        countNum: 0,
        forecastWrapHeight: 'calc(100vh - 310px)',
        isGLP: false,
        showFlowChart: false,
        // headerData: {},
        // data: {},
        // nodeId: '',
        // instId: '',
      }
    },
    watch: {
      showType: {
        handler(val) {
          if (val == 1) {
            this.activeName = '文字版'
          } else {
            this.activeName = '图片版'
          }
        },
        immediate: true,
      },

      // listData: {
      //   handler(val) {
      //
      //     this.headerData = val.headerData
      //     this.instId = val.instId
      //     this.nodeId = val.nodeId
      //     this.data = val.data
      //   },
      //   immediate: true,
      // },
    },
    computed: {
      customClassDialog() {
        return this.customClass + ' flow-chart-dialog'
      },
    },

    created() {
      this.countNum = 0
    },
    mounted() {
      if (this.instId) {
        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 == '文字版') {
            if (this.$refs.processForecastText) {
              this.$refs.processForecastText.showNodePath(instId, data, nodeId)
            }
            if (this.countNum < 2) {
              this.setCenterPosition()
            }
          } else {
            this.$refs.processForecastImg.showNodePath(instId, data, nodeId)
          }
        })
      },
      // processRadioChange(v) {
      //   this.showNodePath(this.instId, this.data, this.nodeId, this.isGLP)
      // },
      changeBtn(v) {
        if (!this.instId) {
          this.$message({
            message: '查看审批预测需要先保留该流程，是否确认保存',
            type: 'warning',
          })
          return
        }
        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.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)
        })
      },
      fns() {
        if (!this.instId) {
          this.$message({
            message: '查看审批预测需要先保留该流程，是否确认保存',
            type: 'warning',
          })
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
  $header-block-wh: 15px;
  $process-green-color: #51b43a;
  $process-gray-color: #dbdbdb;
  $process-blue-color: #0080fe;
  .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;
  }
  .process-forecast {
    height: calc(#{$vh} - 360.55px);
    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;
        .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;
          }
        }
      }
      .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(#{$vh} - 310px);
    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: #939daf;
          font-weight: bold;
          &:hover {
            color: #409eff;
          }
        }
      }
    }
  }
</style>