<template>
  <div>
    <div class="newProductDetail-modal">
      <!-- 产品详情 -->
      <h4>{{ (detailsData && detailsData.name) || '--' }}</h4>
      <div class="productHead">
        <div class="productInfo">
          <a-descriptions bordered :column="2" size="small">
            <a-descriptions-item label="产品品牌：">{{ (detailsData && detailsData.productBrandName) || '--' }}</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.size) || '--' }}</a-descriptions-item>
            <a-descriptions-item label="重量：">{{ (detailsData && detailsData.weight) || '--' }}</a-descriptions-item>
            <a-descriptions-item label="计量单位：">{{ (detailsData && detailsData.unit) || '--' }}</a-descriptions-item>
          </a-descriptions>
          <div class="productDetail">
            <h4>产品介绍</h4>
            <div class="productDesc">
              <div v-if="detailsData && detailsData.description" v-html="detailsData.description"></div>
              <span v-else>暂无产品介绍</span>
            </div>
          </div>
        </div>
        <div class="productImg" v-if="detailsData && detailsData.productPicList && detailsData.productPicList.length>0">
          <a-carousel arrows dots-class="slick-dots slick-thumb">
            <a slot="customPaging" slot-scope="props">
              <img :src="detailsData.productPicList[props.i].imageUrl" />
            </a>
            <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px;zIndex: 1"><a-icon type="left-circle" style="color: #314659;" /></div>
            <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px"><a-icon type="right-circle" style="color: #314659;" /></div>
            <div v-for="(item, index) in detailsData.productPicList" :key="index">
              <img-zoom :src="item.imageUrl" width="100%" height="100%" :bigsrc="item.imageUrl" :configs="configs"></img-zoom>
            </div>
          </a-carousel>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
// 组件
import imgZoom from 'vue2.0-zoom'
// 接口
import { productSnDetail } from '@/api/product.js'
export default {
  name: 'ViewProduct',
  mixins: [commonMixin],
  components: { imgZoom },
  computed: {
    productTypeName () {
      const productTypeName1 = this.detailsData && this.detailsData.productTypeName1 ? this.detailsData.productTypeName1 : ''
      const productTypeName2 = this.detailsData && this.detailsData.productTypeName2 ? ' > ' + this.detailsData.productTypeName2 : ''
      const productTypeName3 = this.detailsData && this.detailsData.productTypeName3 ? ' > ' + this.detailsData.productTypeName3 : ''
      return productTypeName1 + productTypeName2 + productTypeName3
    }
  },
  data () {
    return {
      itemId: null,
      detailsData: null, //  详情数据
      prevPageInfo: null,
      configs: {
        width: 600,
        height: 350,
        maskWidth: 80,
        maskHeight: 80,
        maskColor: 'red',
        maskOpacity: 0.2
      }
    }
  },
  methods: {
    //  获取详情
    getDetail () {
      this.detailsData = null
      productSnDetail({ sn: this.itemId }).then(res => {
        if (res.status == 200) {
          this.detailsData = res.data
        } else {
          this.detailsData = null
        }
      })
    },
    // 返回
    goBack () {
      this.$router.push({ path: this.prevPageInfo && this.prevPageInfo.path, query: { closeLastOldTab: true } })
    }
  },
  mounted () {
    if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
      this.itemId = this.$route.params.sn
      this.getDetail()
    }
  },
  activated () {
    this.itemId = this.$route.params.sn
    this.getDetail()
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.prevPageInfo = from
    })
  }
}
</script>

<style lang="less">
#_magnifier_layer{
  left: 500px!important;
}
/* For demo */
.ant-carousel .slick-slide {
  text-align: center;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ant-carousel .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  opacity: 0.3;
}
.ant-carousel .custom-slick-arrow:before {
  display: none;
}
.ant-carousel .custom-slick-arrow:hover {
  opacity: 0.5;
}
.ant-carousel .slick-slide img {
  width: 100%;
  max-height: 100%;
}

.ant-carousel{
  border: 1px solid #e8e8e8;
}
.ant-carousel .slick-dots {
  height: auto;
}
.ant-carousel .slick-slide img {
  border: 5px solid #fff;
  display: block;
  margin: auto;
  max-width: 90%;
}
.ant-carousel .slick-thumb {
  bottom: -40px;
}
.ant-carousel .slick-thumb li {
  width: 40px;
  height: 35px;
}
.ant-carousel .slick-thumb li img {
  width: 100%;
  height: 100%;
  filter: grayscale(100%);
}
.ant-carousel .slick-thumb li.slick-active img {
  filter: grayscale(0%);
}
.newProductDetail-back {
  margin-bottom: 10px;
}
.newProductDetail-modal {
  background-color: #fff;
  padding: 15px 15px 55px;
  h4 {
    font-size: 18px;
  }
  .productHead {
    display: flex;
    .productImg {
      width: 240px;
    }
    .productInfo {
      flex-grow: 1;
      margin-right: 10px;
    }
    .sycxImg {
      margin-top: 10px;
      p {
        font-size: 14px;
        padding: 5px 10px;
        background-color: #dcf1ff;
      }
      img {
        width: 100px;
      }
    }
  }
  .productDetail {
    border: 1px solid #eee;
    margin-top: 10px;
    h4 {
      font-size: 14px;
      padding: 5px 10px;
      background-color: #dcf1ff;
    }
    .productDesc {
      padding: 15px;
      overflow: auto;
    }
  }
  .ant-descriptions-item-label.ant-descriptions-item-colon {
    width: 120px;
  }
  .btn-cont {
    text-align: center;
    margin: 35px 0 10px;
  }
}
</style>
