<template>
  <div :class="$style.container">
    <ProcessEditBar :is-edit="isEdit" @on-back="goback" @on-edit="isEdit=true" @on-cancel="isEdit=false" @on-submit="handleSubmit()" />
    <ProcessChart v-if="!isEdit" :process-flow-id="processFlowId" @on-detail="handleDetail" />
    <ProcessTable v-else :process-flow-id="processFlowId" @on-detail="handleDetail" @on-save-success="handleSuccess" />
    <el-drawer
      title="节点详情"
      size="20%"
      :append-to-body="true"
      :before-close="()=>innerDrawer=false"
      :visible.sync="innerDrawer"
    >
      <ProcessNodePanel />
    </el-drawer>
  </div>
</template>

<script>
import ProcessChart from '@/views/art/process/process-chart'
import ProcessTable from '@/views/art/process/process-table'
import ProcessNodePanel from '@/views/art/process/process-node-panel'
import ProcessEditBar from '@/views/art/process/process-edit-bar'
export default {
  name: 'ProcessDrawer',
  components: { ProcessChart, ProcessTable, ProcessNodePanel, ProcessEditBar },
  props: {
  },
  data() {
    return {
      innerDrawer: false,
      isEdit: false,
      processFlowId: ''
    }
  },
  created() {
    this.processFlowId = this.$route.query.id
  },
  methods: {
    handleDetail() {
      this.innerDrawer = true
    },
    handleSubmit() {
      console.log('保存成功')
      this.isEdit = false
    },
    handleSuccess() {
      this.isEdit = false
    },
    goback() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss" module>
.container {
  .input {
    display: flex;
    margin: 8px 16px 8px 4px;
    align-items: center;
    .select {
      width: 100%;
    }
  }
  .select {
    width: 100%;
  }
}
</style>
