<template>
  <el-drawer
    :visible.sync="dialogFormVisible"
    size="60%"
    :title="title"
    top="1%"
    :with-header="true"
    @close="close"
  >
    <order-state-log :order-id="order_id"/>
  </el-drawer>
</template>

<script>
import OrderStateLog from './OrderStateLog'

export default {
  name: 'OrderStateLogDrawer',
  components: { OrderStateLog },
  data() {
    return {
      dialogFormVisible: false,
      title: '',
      order_id: ''
    }
  },

  watch: {
    order_id: {
      immediate: true,
      handler(order_id) {
        this.order_id = order_id;
      },
    },
  },
  methods: {
    showEdit(row) {
      this.dialogFormVisible = true
      this.order_id = row.order_id
      console.info("-----------------")
    },
    close() {
      this.dialogFormVisible = false
    }
  },
  created() {
    this.$nextTick(() => {
      // Do something after the component is created
    })
  },
}
</script>

<style lang="scss" scoped>
$base: '.order-state-log';
#{$base}-container {
  ::v-deep .el-table {
    .el-button.is-text {
      width: 36px;
    }
  }
}
</style>
