<template>
  <el-dialog
    :title="topTitle"
    :visible.sync="show"
    width="70%"
    :close-on-click-modal="false"
    :before-close="handleClose" append-to-body>

    <goods-edit ref="editContent" :key="generation" @success="onChangeDone"/>

  </el-dialog>
</template>

<script>

  export default {
    props: {
      show: Boolean,
      id: [String, Number],
    },
    data() {
      return {
        generation: 0,
      }
    },
    components: {
      'goods-edit': () => import('./goods_edit.vue')
    },
    computed: {
      topTitle() {
        return this.id?"编辑商品":"新增商品"
      }
    },
    watch: {
      show(n, o) {
        if(n) {
          this.generation = this.generation + 1
          this.$nextTick(() => {
            this.$refs['editContent'].reload(this.id)
          })
        }
      }
    },
    methods: {
      onChangeDone() {
        this.$emit('success')
      },
      handleClose() {
        this.$emit('close')
      }
    }
  }

</script>

<style scoped>



</style>
