<template>
  <p-modal
    :title="title"
    :visible="visible"
    :enlargeable="enlargeable"
    :width="width"
    :maskClosable="maskClosable"
    :destroyOnClose="destroyOnClose"
    :draggable="draggable"
    :footer="null"
    @ok="handleOk"
    @cancel="visible = false"
    @enlargeChange="enlargeChange"
  >
    <p-spin tip="Loading..." :spinning="spinning">
      <div class="spin-content">
        <item-detail :detailData="detailData"></item-detail>
      </div>
    </p-spin>
  </p-modal>
</template>

<script>
import { queryItem } from '../../api/basedata/goods'
import itemDetail from './components/itemDetail.vue'
export default {
  components: { itemDetail },
  props: {
    title: {
      // 弹窗标题
      type: String,
      default: '商品详情'
    },
    destroyOnClose: {
      // 关闭时销毁 Modal 里的子元素
      type: Boolean,
      default: true
    },
    maskClosable: {
      // 点击蒙层是否允许关闭
      type: Boolean,
      default: false
    },
    width: {
      // 弹窗宽度 string | number
      type: String || Number,
      default: '70%'
    },
    enlargeable: {
      // 是否可最大化
      type: Boolean,
      default: true
    },
    draggable: {
      // 是否可以拖拽
      type: Boolean,
      default: true
    },
    itemId: {
      // 商品id
      type: String,
      default: ''
    }
  },
  watch: {
    itemId(newVal) {
      // 监听商品ID
      this.detailItemId = newVal
      this.spinning = true
      this.queryData()
    }
  },
  data() {
    return {
      visible: false, // 是否显示弹窗
      detailItemId: '', // 商品Id
      spinning: true, // 默认加载方式
      detailData: null // 详情数据
    }
  },

  created() {
    this.detailItemId = this.itemId
    this.queryData()
  },
  methods: {
    open() {
      this.visible = true
      this.spinning = true
      this.queryData()
    },
    close() {
      this.visible = false
    },
    queryData() {
      // 详情数据
      if (!this.detailItemId) return
      let params = {
        itemId: this.detailItemId
      }
      queryItem(params).then(res => {
        this.spinning = false
        if (res.success) {
          this.detailData = res.data
        } else {
          this.$exception(res)
        }
      })
    },
    handleOk(e) {
      this.visible = false
    },
    enlargeChange(isEnlarge) {
      console.log(isEnlarge)
    }
  }
}
</script>

<style></style>
