<template>
  <ht-sidebar-dialog
    :visible.sync="imageDialog"
    title="预测图"
    :close-on-click-modal="false"
    append-to-body
    class="dialog-body"
    width="100%"
    :before-close="handleClose"
  >
    <div class="process-forecast">
      <el-row
        class="process-forecast_header"
        type="flex"
        justify="space-between"
      >
        <el-col :span="14">
          <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="10" class="header_right">
          <el-radio-group
            v-model="activeName"
            size="mini"
            @change="processRadioChange"
          >
            <el-radio-button label="文字版"></el-radio-button>
            <el-radio-button label="图片版"></el-radio-button>
          </el-radio-group>
        </el-col>
      </el-row>
      <div
        ref="forecastBoxRef"
        class="process-forecast_wrap"
        :class="activeName == '图片版' ? 'process-forecast_pic_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>
    </div>
  </ht-sidebar-dialog>
</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 {
        imageDialog: false,
        activeName: '文字版',
        activeRefs: 'processForecastText',
        forecastWrapHeight: 'calc(100vh - 120px)',
        isGLP: false,
      }
    },

    created() {},
    mounted() {
      this.setCenterPosition()
    },
    methods: {
      showNodePath(instId, data, nodeId, isGLP) {
        this.imageDialog = true
        this.$nextTick(() => {
          this.isGLP = isGLP
          if (isGLP) {
            this.forecastWrapHeight = 'calc(100vh - 72px)'
          } else {
            this.forecastWrapHeight = 'calc(100vh - 120px)'
          }
          if (this.activeName == '文字版') {
            this.$refs.processForecastText.showNodePath(instId, data, nodeId)
            this.activeRefs = 'processForecastText'
          } else {
            this.$refs.processForecastImg.showNodePath(instId, data, nodeId)
            this.activeRefs = 'processForecastImg'
          }
        })
      },
      processRadioChange(v) {
        this.showNodePath(this.instId, this.data, this.nodeId, this.isGLP)
      },
      setCenterPosition() {
        this.$nextTick(() => {
          setTimeout(() => {
            let bodyWidth =
              document.documentElement.clientWidth || document.body.clientWidth
            let boxWidth = this.$refs[this.activeRefs]
              ? this.$refs[this.activeRefs].$el.clientWidth
              : 0
            if (this.$refs.forecastBoxRef) {
              this.$refs.forecastBoxRef.scrollLeft =
                boxWidth / 2 - bodyWidth / 2
            }
          }, 1000)
        })
      },
      handleClose() {
        this.imageDialog = false
      },
    },
  }
</script>
<style lang="scss" scoped>
  $header-block-wh: 12px;
  $process-green-color: #00aa4f;
  $process-gray-color: #999999;
  $process-blue-color: #1890ff;
  ::v-deep .el-dialog .el-dialog__body {
    padding: 10px;
    height: calc(100% - 70px) !important;
  }
  .process-forecast_header {
    padding-top: 24px;
    border-top: 1px solid #ebeef5;
  }
  ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background-color: transparent !important;
    color: $process-green-color;
    box-shadow: none !important;
    border: none;
  }
  .el-radio-button.is-active {
    border: 1px solid #409eff;
  }
  .process-forecast {
    height: 100%;
  }
  ::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;
        height: 100%;
        .header-left_item {
          display: flex;
          align-items: center;
          div {
            width: $header-block-wh;
            height: $header-block-wh;
            margin-left: 5px;
            margin-right: 2px;
          }
          .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: 5px;
      }
    }
  }
  .process-forecast_wrap {
    // display: flex;
    // justify-content: center;
    padding: 20px 0;
    box-sizing: border-box;
    height: calc(100vh - 120px);
    overflow: auto;
    width: 100%;
    // height: 100%;
  }
  .process-forecast_pic_wrap {
    padding-left: 88px;
  }
  .process-forecast_subWrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    // position: relative;
    // transform: translateX(-50%);
  }
  .options {
    max-height: 420px;
    overflow-y: auto;
    .title {
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    ::v-deep table {
      margin-bottom: 10px;
      font-size: 12px;
      border-spacing: 0;
      border-bottom: 1px solid #e7eaec;
      border-left: 1px solid #e7eaec;
      td {
        padding: 8px;
        line-height: 1.42857;
        border-top: 1px solid #e7eaec;
        border-right: 1px solid #e7eaec;
        vertical-align: middle;
      }
      .label {
        width: 80px;
        font-weight: bold;
      }
      .value {
        width: 180px;
      }
      .opinion {
        max-width: 250px;
        min-width: 250px;
        word-wrap: break-word;
      }
    }
  }
  .el-table ::v-deep th.nodePath-header-row {
    background-color: #fafafa;
    font-size: 13px;
  }

  .el-table ::v-deep tr.nodePath-row {
    font-size: 13px;
    color: #606266;
  }

  .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;
    }
  }
</style>