<!--
审批详情
@Author: linqian
@Date: 2021-07-12 14:24
-->
<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="审批表单" name="first">
        <basic-form :applyOrdNo="applyOrdNo" type="detail"></basic-form>
        <h3 class="dg-words-title-second" style="margin-bottom: 5px;">审批意见</h3>
        <!-- 审批意见 -->
        <comments-table class="b-mt-1" :applyOrdNo="applyOrdNo"></comments-table>
      </el-tab-pane>
      <el-tab-pane label="流程图" name="second">
        <flow-chart :key="chartKey" :applyOrdNo="applyOrdNo"></flow-chart>
      </el-tab-pane>
      <el-tab-pane label="流程状态" name="third">
        <process-status :applyOrdNo="applyOrdNo"></process-status>
      </el-tab-pane>
    </el-tabs>
    <div v-footer>
      <dg-button @click="handleCancel">关闭</dg-button>
    </div>
  </div>
</template>

<script>
import flowChart from './flow-chart/index';
import processStatus from './process-status';
import basicForm from './basic-form.vue';
import commentsTable from './comments-table';
export default {
  props: {
    applyOrdNo: [String]
  },
  components: {
    flowChart,
    processStatus,
    basicForm,
    commentsTable
  },
  data() {
    return {
      activeName: 'first',
      chartKey: 0
    };
  },
  computed: {},
  methods: {
    handleClick(tab) {
      if (tab.name == 'second' && this.chartKey == 0) {
        this.chartKey++;
      }
    },
    handleCancel() {
      this.$emit("close");
    }
  },
  created() {},
  mounted() {}
};
</script>

<style lang='scss'>
</style>