<template>
  <van-popup
    v-model="dialogVisible"
    position="bottom"
    class="ibps-fullscreen-popup"
    @opened="getFormData"
  >
    <div class="ibps-fixed-top">
      <van-nav-bar
        title="审批历史"
        fixed
        class="ibps-nav-bar__z"
        @click-left="closeDialog"
      >
        <template #left>
          <van-icon name="cross" class="ibps-nav-bar__close-icon" />
        </template>
      </van-nav-bar>
      <approval-history
        v-if="dialogVisible"
        ref="approvalHistory"
        v-bind="$props"
      />
    </div>
  </van-popup>
</template>
<script>
import ApprovalHistory from './index'

export default {
  components: {
    ApprovalHistory
  },
  props: {
    visible: Boolean,
    taskId: String,
    instId: String,
    nodeId: String,
    bizKey: String,
    type: {
      type: String,
      default: 'default'
    },
    width: {
      type: String,
      default: '80%'
    }
  },
  data() {
    return {
      dialogVisible: false,
      active: -1,
      opinions: []
    }
  },
  watch: {
    visible: {
      handler: function(val, oldVal) {
        this.dialogVisible = this.visible
      },
      immediate: true
    }
  },
  methods: {
    getFormData() {
      this.$nextTick(() => {
        if (this.type === 'node') {
          this.$refs.approvalHistory.getNodeFormData()
        } else {
          this.$refs.approvalHistory.getFormData()
        }
      })
    },
    closeDialog() {
      this.$emit('close', false)
    }
  }
}
</script>
<style lang="scss">
  .approval-history-dialog{
    .el-dialog__body{
      height:  calc(90vh - 110px) !important;
    }
    .el-card__body{
      padding-top:5px;
    }
  }
  .ibps-nav-bar__z{
    z-index: 3;
  }

</style>
