<template>
  <el-drawer
    title="工艺流程图"
    size="85%"
    :append-to-body="true"
    :visible.sync="visible"
    :wrapper-closable="false"
    :before-close="() => $emit('on-close')"
  >
    <ProcessEditBar :is-edit="isEdit" @on-edit="isEdit=true" @on-cancel="isEdit=false" @on-submit="handleSubmit()" />
    <ProcessChart v-show="!isEdit" @on-detail="handleDetail" />
    <ProcessTable v-if="isEdit" :process-flow-id="processFlowId" @on-detail="handleDetail" />
    <el-drawer
      title="节点详情"
      size="20%"
      :append-to-body="true"
      :before-close="()=>innerDrawer=false"
      :visible.sync="innerDrawer"
    >
      <ProcessNodePanel />
    </el-drawer>
  </el-drawer>
</template>

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