<template>
  <div class="process-forecast">
    <el-row class="process-forecast_header" type="flex" justify="space-between">
      <el-col :span="6">
        <div class="header_left">
          <div class="header-left_item">
            <div class="approval-block"></div>
            <span class="text">审批中</span>
          </div>
          <div class="header-left_item">
            <div class="completed-block"></div>
            <span class="text">已完成</span>
          </div>
          <div class="header-left_item">
            <div class="without-block"></div>
            <span class="text">未经过</span>
          </div>
        </div>
      </el-col>
      <el-col :span="4" class="header_right">
        <!-- <el-radio-group
          v-model="activeName"
          size="small"
          @change="processRadioChange"
        >
          <el-radio-button label="文字版" style="box-shadow: none!important;"></el-radio-button>
          <el-radio-button label="图片版"></el-radio-button>
        </el-radio-group> -->
        <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
      ref="forecastBoxRef"
      class="process-forecast_wrap"
      :style="{ height: forecastWrapHeight }"
    >
      <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>
    <el-dialog
      fullscreen
      width="100%"
      title="审批预测"
      :visible.sync="showFlowChart"
      :close-on-click-modal="false"
      :show-close="false"
      append-to-body
      :custom-class="customClassDialog"
    >
      <div>
        <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="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="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-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>
          <i
            v-if="!$route.query.needClear"
            class="el-icon-close"
            @click="showFlowChart = false"
          ></i>
        </div>

        <div
          ref="forecastBoxRef"
          class="process-forecast_wrap"
          :style="{ height: '90vh' }"
        >
          <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>
    </el-dialog>
  </div>
</template>
<script>
  import ProcessForecastText from './components/forecastText/processForecastText.vue'
  import ProcessForecastImg from './components/forecastImg/processForecastImg.vue'
  export default {
    name: 'ProcessForecast',
    components: { ProcessForecastText, ProcessForecastImg },
    props: {
      data: {
        type: Object,
        default: () => {
          return {}
        },
      },
      instId: {
        type: String,
        default: '',
      },
      nodeId: {
        type: String,
        default: '',
      },
      headerData: {
        type: Object,
        default: () => {
          return {}
        },
      },
    },
    data() {
      return {
        activeName: '文字版',
        countNum: 0,
        forecastWrapHeight: 'calc(100vh - 310px)',
        isGLP: false,
        showFlowChart: false,
      }
    },
    computed: {
      customClassDialog() {
        return this.customClass + ' flow-chart-dialog'
      },
    },

    created() {
      this.countNum = 0
    },
    mounted() {},
    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.$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 (v == 'wzb') {
          this.activeName = '文字版'
        } else {
          this.activeName = '图片版'
        }
        this.showNodePath(this.instId, this.data, this.nodeId, this.isGLP)
      },
      handleOpen() {
        this.showFlowChart = true
        this.showNodePath(this.instId)
      },
      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
            console.log(
              this.$refs.processForecastText,
              'this.forecastTextRef------'
            )
          }, 1000)
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  $header-block-wh: 15px;
  $process-green-color: #00aa4f;
  $process-gray-color: #999999;
  $process-blue-color: #1890ff;
  .active-text {
    color: $process-green-color;
    border-color: $process-green-color;
  }
  ::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;
          }
        }
      }
      .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(100vh - 310px);
    width: 100%;
  }
  .process-forecast_subWrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .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;
        border-bottom: 1px solid $base-border-color;
        padding: 0px 20px 16px 20px;
        .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>
