<template>
  <a-drawer
    :zIndex="zIndex"
    placement="right"
    :visible="visible"
    :width="width"
    :get-container="false"
    :wrap-style="{ position: 'absolute' }"
    @close="onClose"
    wrapClassName="shopingCat-drawer">
     <div slot="title">
       <strong>{{title}}</strong>
       <span style="color:red;margin-left:10px;">注意：仅可添加本供应商有经销权且总部已上线的产品</span>
     </div>
     <shopingCat ref="shopingCat" modes="modals" @ok="handleok"></shopingCat>
  </a-drawer>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
import shopingCat from '@/views/shoppingCarManagement/shoppingCar/list.vue'
export default {
  name:"shopingCatModal",
  mixins: [commonMixin],
  components: {
    shopingCat
  },
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    width: {
      type: [String, Number],
      default: '70%'
    },
    zIndex: {
      type: Number,
      default: 1050
    },
    paramsData: {
      type: Object
    }
  },
  watch: {
    showModal (newValue, oldValue) {
      this.visible = newValue
      if (newValue) {
         setTimeout(()=>{
           this.$refs.shopingCat.pageInit(this.paramsData)
         },500)
      }
    },
  },
  data () {
    return {
      visible: this.showModal,
      title: '购物车',
    }
  },
  methods: {
    onClose () {
      this.$emit('close')
    },
    handleok () {
      this.$emit('ok')
    },
  }
}
</script>

<style lang="less">
.shopingCat-drawer {
  .ant-drawer-header{
    padding: 13px 20px;
  }
  .ant-drawer-body {
    padding: 0 5px;
    height: calc(100% - 50px);
    display: flex;
    flex-direction: column;
    overflow: auto;
    > div {
      height: 100%;
    }
  }
}
</style>
