<template>
  <div>
    <el-dialog
      v-if="showFlowChart && !isMobile"
      width="80%"
      title="流程图"
      :visible.sync="showFlowChart"
      :close-on-click-modal="false"
      append-to-body
      :custom-class="customClass"
    >
      <el-tabs
        v-if="subInstList.length > 1"
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          v-for="sub in subInstList"
          :key="sub.id"
          :label="sub.subject"
          :name="sub.id"
        >
          <FlowChartMain
            v-if="clickTabs.indexOf(sub.id) > -1"
            :name="sub.id"
            :inst-id="sub.id"
            :custom-class="customClass"
            :is-sub="true"
          />
        </el-tab-pane>
      </el-tabs>
      <FlowChartMain
        v-else
        name="sub"
        :inst-id="subInstId"
        :def-id="subDefId"
        :custom-class="customClass"
        :is-sub="true"
      />
    </el-dialog>
    <van-popup
      v-if="showFlowChart && isMobile"
      v-model="showFlowChart"
      round
      :close-on-click-overlay="false"
      safe-area-inset-bottom
      position="bottom"
      style="height: 60%"
    >
      <div class="popup_sign subInstListS">
        <van-nav-bar
          v-if="subInstList.length > 1"
          :title="subFlowChartLName"
          left-text="关闭"
          class="popup_header_fixed subInstListS_some"
          @click-left="showFlowChart = false"
        />
        <van-nav-bar
          v-else
          left-text="关闭"
          class="popup_header_fixed  subInstListS_some"
          :class="subInstList.length < 2 ? 'subInstList' : ''"
          @click-left="showFlowChart = false"
        >
          <template slot="title">
            <div>
              {{ subFlowChartLName }}
            </div>
            <div class="twoTit">流程编号：{{ subInstId || subDefId }}</div>
          </template>
        </van-nav-bar>

        <van-tabs
          v-if="subInstList.length > 1"
          v-model="activeName"
          class="tabs"
          @click="handleClick"
        >
          <van-tab
            v-for="sub in subInstList"
            :key="sub.id"
            :title="sub.subject"
            :name="sub.id"
          >
            <span v-if="instId" class="lcbh">流程编号:{{ sub.id }}</span>
            <FlowChartMain
              v-if="clickTabs.indexOf(sub.id) > -1"
              :name="sub.id"
              :inst-id="sub.id"
              :custom-class="customClass"
            />
          </van-tab>
        </van-tabs>
        <FlowChartMain
          v-else
          name="sub"
          :inst-id="subInstId"
          :def-id="subDefId"
          :custom-class="customClass"
          class="FlowChartMain"
        />
      </div>
    </van-popup>
  </div>
</template>

<script>
  import mobileMode from '@/mixins/mobileMode.js'
  import popupMode from '@/mixins/popupMode.js'
  export default {
    name: 'SubChart',
    mixins: [mobileMode, popupMode('showFlowChart')],
    props: {
      defId: {
        type: String,
        default: '',
      },
      instId: {
        type: String,
        default: '',
      },
      bpmnInstId: {
        type: String,
        default: '',
      },
      customClass: {
        type: String,
        default: '',
      },
      subFlowChartLName: {
        type: String,
        default: '',
      },
    },
    components: { FlowChartMain: () => import('./ChartMain.vue') },
    data() {
      return {
        showFlowChart: false,
        subInstList: [],
        activeName: '',
        clickTabs: [],
        subNodeId: '',
        subDefId: '',
        subInstId: '',
      }
    },
    methods: {
      handleClick() {
        this.clickTabs.push(this.activeName)
      },
      handleOpen(subNodeId) {
        this.subNodeId = subNodeId
        if (this.instId) {
          this.$requestConfig
            .getSubInstanceList(this.instId, this.subNodeId)
            .then((resp) => {
              if (resp.length > 0) {
                this.activeName = resp[0].id
                if (resp.length == 1) {
                  this.subInstId = resp[0].id
                }
                this.clickTabs.push(this.activeName)
                this.subInstList = resp

                this.showFlowChart = true
              } else {
                this.getSubDefId()
              }
            })
        } else {
          this.getSubDefId()
        }
      },
      getSubDefId() {
        this.$requestConfig
          .getSubDefId(this.defId, this.instId, this.subNodeId)
          .then((resp) => {
            this.subDefId = resp.value
            this.showFlowChart = true
          })
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import './flowChart.scss';
  div ::v-deep.el-dialog__body {
    padding: 10px 30px 20px 30px;
  }
  .popup_sign {
    .title {
      padding-top: 44px;
    }
  }

  .subInstListS {
    .subInstListS_some {
      border-bottom: 12px solid #f6f6f6;
    }

    .subInstList {
      padding: 11px 0;
    }
    ::v-deep .FlowChartMain {
      .title {
        padding-left: 16px !important;
        padding-right: 16px !important;
      }
    }
    ::v-deep .title {
      padding-top: 88px !important;
    }
    .tabs {
      padding: 60px 16px 0 !important;
      .lcbh {
      }
      ::v-deep .title {
        padding-top: 14px !important;
      }
    }
  }
  ::v-deep .flow-chart {
    min-height: auto !important;
    max-height: auto !important;
  }
  ::v-deep .van-tabs {
    margin: 0px !important;
    padding: 0 !important;
    .van-tabs__nav {
      // padding-bottom: 0px;
      overflow-x: auto;
    }
    .van-tab__pane {
      padding-top: 2px;
    }
    .van-tabs__line {
      background: #409eff;
    }
    .van-tabs__content {
      margin-top: 14px !important;
    }
    .van-tab__text {
      white-space: nowrap;
    }
    ::-webkit-scrollbar {
      /*隐藏滚轮*/
      display: none;
    }
  }
</style>
