<template>
  <a-modal
    centered
    class="productInfoDetail-modal"
    :footer="null"
    :maskClosable="false"
    title="产品详情"
    v-model="isShow"
    @cancel="isShow=false"
    :width="800">
    <!-- 产品详情 -->
    <div>
      <a-descriptions bordered size="small" :column="2">
        <a-descriptions-item label="产品名称：">{{ detailsData&&detailsData.name || '--' }}</a-descriptions-item>
        <a-descriptions-item label="产品编码：">{{ detailsData&&detailsData.code || '--' }}</a-descriptions-item>
        <a-descriptions-item label="原厂编码：">{{ detailsData&&detailsData.origCode || '--' }}</a-descriptions-item>
        <a-descriptions-item label="产品品牌：">{{ detailsData&&detailsData.productBrandName || '--' }}</a-descriptions-item>
        <a-descriptions-item label="产品分类：">{{ productTypeName || '--' }}</a-descriptions-item>
        <a-descriptions-item label="其他编码：">{{ detailsData&&detailsData.otherCode || '--' }}</a-descriptions-item>
        <a-descriptions-item label="包装数：">
          {{ detailsData&&detailsData.packQty || '--' }}
          {{ detailsData&&detailsData.unit || '--' }}/
          {{ detailsData&&detailsData.packQtyUnit || '--' }}
        </a-descriptions-item>
        <a-descriptions-item label="箭冠产品：">{{ detailsData&&detailsData.arrowFalgDictValue || '--' }}</a-descriptions-item>
        <a-descriptions-item label="条形码：" :span="2">{{ detailsData&&detailsData.qrCode || '--' }}</a-descriptions-item>
        <a-descriptions-item label="出库仓库：">{{ detailsData&&detailsData.outWarehouseName || '--' }}</a-descriptions-item>
        <a-descriptions-item label="退货仓库：">{{ detailsData&&detailsData.returnWarehouseName || '--' }}</a-descriptions-item>
        <a-descriptions-item label="产品图片：" :span="2">
          <div style="display: flex;">
            <p class="pic-box" v-for="(item,index) in fileList" :key="index">
              <img :src="item.imageUrl" title="点击查看大图" class="productPic" @click="getPreview(item.imageUrl)" />
            </p>
          </div>
          <span v-if="fileList.length == 0">--</span>
        </a-descriptions-item>
        <a-descriptions-item label="单位：">{{ detailsData&&detailsData.unit || '--' }}</a-descriptions-item>
        <a-descriptions-item label="产品尺寸：">{{ detailsData&&detailsData.size || '--' }}</a-descriptions-item>
        <a-descriptions-item label="产品内盒尺寸：">{{ detailsData&&detailsData.boxSize || '--' }}</a-descriptions-item>
        <a-descriptions-item label="产品重量：">{{ detailsData&&detailsData.weight || '--' }}</a-descriptions-item>
        <a-descriptions-item label="颜色：" span="2">{{ detailsData&&detailsData.color || '--' }}</a-descriptions-item>
        <a-descriptions-item label="产品说明：" span="2">
          <div v-html="detailsData.description" v-if="detailsData&&detailsData.description" style="overflow-y: scroll;height: 300px;"></div>
          <div v-else>--</div>
        </a-descriptions-item>
        <a-descriptions-item label="其他说明：" span="2">
          <div v-html="detailsData.otherDesc" v-if="detailsData&&detailsData.otherDesc"></div>
          <div v-else>--</div>
        </a-descriptions-item>
      </a-descriptions>
      <div class="btn-cont"><a-button id="product-management-detail-modal-back" @click="isShow = false">返回列表</a-button></div>
    </div>
    <a-modal :visible="previewVisible" :footer="null" centered :maskClosable="false" @cancel="previewVisible=false">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </a-modal>
</template>

<script>
import { productSnDetail } from '@/api/product'
export default {
  name: 'ProductInfoDetailModal',
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    itemSn: {
      type: [Number, String],
      default: ''
    }
  },
  computed: {
    productTypeName () {
      const productTypeName2 = this.detailsData && this.detailsData.productTypeName2 ? this.detailsData.productTypeName2 : ''
      const productTypeName3 = this.detailsData && this.detailsData.productTypeName3 ? ' > ' + this.detailsData.productTypeName3 : ''
      return productTypeName2 + productTypeName3
    }
  },
  data () {
    return {
      isShow: this.openModal, //  是否打开弹框
      detailsData: null, //  详情数据
      previewVisible: false,
      previewImage: '',
      fileList: []
    }
  },
  methods: {
    //  获取详情
    getDetail () {
      productSnDetail({ sn: this.itemSn }).then(res => {
        if (res.status == 200) {
          this.detailsData = res.data
          if (res.data && res.data.productPicList && res.data.productPicList.length > 0) {
            this.fileList = res.data.productPicList
          } else {
            this.fileList = []
          }
        } else {
          this.detailsData = null
        }
      })
    },
    // 查看大图
    getPreview (url) {
      this.previewImage = url
      this.previewVisible = true
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
        this.detailsData = null
      }
    },
    itemSn (newValue, oldValue) {
      if (this.isShow && newValue) {
        this.getDetail()
      }
    }
  }
}
</script>

<style lang="less">
  .productInfoDetail-modal{
    .ant-modal-body {
      padding: 40px 40px 24px;
    }
    .pic-box{
      width: 100px;
      height: 100px;
      margin-right: 10px;
      display: inline-flex;
      align-items: center;
      border: 1px dashed #d9d9d9;
      border-radius: 4px;
      padding: 3px;
      .productPic{
        cursor: pointer;
        max-width: 100%;
        max-height: 100%;
        display: block;
        margin: 0 auto;
      }
    }
    .btn-cont {
      text-align: center;
      margin: 35px 0 10px;
    }
    .ant-descriptions-item-label.ant-descriptions-item-colon{
      width: 130px;
    }
    .ant-descriptions-item-content{
      max-width: 229px;
    }
  }
</style>
