<template>
  <a-drawer
    :zIndex="zIndex"
    placement="right"
    :visible="visible"
    :width="width"
    :get-container="false"
    :wrap-style="{ position: 'absolute' }"
    @close="onClose"
    wrapClassName="shopingCat-drawer jg-drawer-wrap">
    <div slot="title">
      <strong>{{ title }}</strong>
      <span style="color: #ed1c24;;margin-left:10px;font-size: 12px;" v-if="purchaseTargetType&&(purchaseTargetType=='DEALER_UP'||purchaseTargetType=='DEALER_SUPPLIER')">注意：仅可添加本供应商有权限的产品</span>
      <span style="color: #ed1c24;;margin-left:10px;font-size: 12px;" v-else-if="purchaseTargetType&&purchaseTargetType=='SUPPLIER_SYS'">注意：仅可添加本供应商有经销权且总部已上线的非轮胎产品</span>
    </div>
    <shopingCat ref="shopingCat" :purchaseType="purchaseTargetType" 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: 100
    },
    paramsData: {
      type: Object
    },
    purchaseTargetType: {
      type: String,
      default: null
    }
  },
  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>
