<template>
  <el-dialog custom-class="case-dialog" title="" :visible="value" :close-on-click-modal="false" :close-on-press-escape="false" top="20px" :show-close="showClose" @close="handleClose">
    <div slot="title">
      <el-button v-if="type" @click="type = ''" round icon="el-icon-back">返回</el-button>
    </div>
    <product v-if="!type" @select="handleProdSelect"></product>
    <case v-else  @select="handleCaseSelect"></case>
  </el-dialog>
  <!-- <div class="popup">
    <div class="popup-container">
      <i v-if="showClose" class="el-icon-close icon-close" @click="handleCaseSelect"></i>
      <product v-if="!type" @select="handleProdSelect"></product>
      <case v-else  @select="handleCaseSelect"></case>
    </div>
    <div class="overlay"></div>
  </div> -->
</template>
<script>
import Product from './product.vue'
import Case from './case.vue'
export default {
  components: { Product, Case },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    showClose: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      type: '',
      dialogVisible: true
    }
  },
  watch: {
    value(val) {
      this.dialogVisible = val
    }
  },
  methods: {
    handleClose() {
      this.type = ''
      this.$emit('input', false)
    },
    handleProdSelect(val) {
      this.type = val
    },
    handleCaseSelect() {
      this.type = ''
      this.$emit('input', false)
    }
  }
}
</script>
<style scoped>
::v-deep .case-dialog{
  width:95%;
  max-width:1160px;
  margin-bottom:20px;
}
::v-deep .el-dialog__body{
  padding:0 20px 20px;
}
</style>
