<template>
  <div>
    <a-page-header :ghost="false" :backIcon="false" class="newProductDetail-back">
      <!-- 自定义的二级文字标题 -->
      <template slot="subTitle">
        <a id="newProductDetail-back-btn" href="javascript:;" @click="goBack">
          <a-icon type="left" />
          返回
        </a>
      </template>
    </a-page-header>
    <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.productMsg">
          <a-carousel arrows>
            <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px;zIndex: 1"><a-icon type="left-circle" /></div>
            <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px"><a-icon type="right-circle" /></div>
            <div><img :src="detailsData.productMsg" /></div>
          </a-carousel>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { productDetail } from '@/api/product.js'
export default {
  name: 'ProductInfoDetail',
  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
    }
  },
  methods: {
    //  获取详情
    getDetail () {
      this.detailsData = null
      productDetail({ 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 () {
    // 如果是新页签打开或者进入新的子页（例：存在列表第2条数据编辑页页签时再打开第4条数据的编辑页），则重置当前页面  (当前产品详情页的上级页分别有 上下线产品列表、箭冠产品列表和采购新增编辑页。因此处判断是否为子页是通过上级页路由路径是否有'/list'，故需单独处理)
    if ((this.$store.state.app.isNewTab || !this.$store.state.app.isNewSubTab) || (this.prevPageInfo && (this.prevPageInfo.name == 'purchaseOrderEdit' || this.prevPageInfo.name == 'purchaseOrderAdd'))) {
      this.itemId = this.$route.params.sn
      this.getDetail()
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.prevPageInfo = from
    })
  }
}
</script>

<style lang="less">
/* For demo */
.ant-carousel .slick-slide {
  text-align: center;
  overflow: hidden;
  border: 1px solid #eee;
  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%;
}
.newProductDetail-back {
  margin-bottom: 10px;
}
.newProductDetail-modal {
  background-color: #fff;
  padding: 15px;
  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;
    }
  }
  .ant-descriptions-item-label.ant-descriptions-item-colon {
    width: 120px;
  }
  .btn-cont {
    text-align: center;
    margin: 35px 0 10px;
  }
}
</style>
