<template>
  <div class="page-body">
    <div class="head-box">
      <div class="head-box-top">
        <div class="top-call" />
        <div class="top-call"><img src="@/assets/home_images/cisnet_logo_b.png"></div>
        <div class="top-call"><title-menus ref="titleMenus" menu-index="1" style="padding-top: 15px" /></div>
        <div class="top-call"><user-login ref="userLogin" /></div>
        <div class="top-call"><language-setting ref="languageSetting" /></div>
      </div>
    </div>
    <div class="content-box">
      <div style="width: 88%;padding-left: 9%;">
        <div class="showcase">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: this.$store.state.app.currentMenu.url }">{{ this.$store.state.app.currentMenu.name||'' }}</el-breadcrumb-item>
            <el-breadcrumb-item>{{ projectObj.productName }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="info-card" style="margin-top: 20px">
          <el-row :gutter="50">
            <el-col :span="12">
              <el-carousel ref="carousel" :interval="5000" trigger="click" arrow="always" height="350px" @change="changeCarouselItem">
                <el-carousel-item v-for="(item, index) in projectObj.productPicList" :key="'pic_'+index">
                  <el-image
                    fit="contain"
                    :src="item?imgSrcStart+'/productPic/'+item:defaultImgProduct"
                    :preview-src-list="[item?imgSrcStart+'/productPic/'+item:defaultImgProduct]"
                    style="width: 100%;height: 100%;padding: 5px"
                  />
                </el-carousel-item>
              </el-carousel>
            </el-col>
            <el-col :span="12" style="padding: 10px 20px">
              <div class="info-card-title-s">{{ projectObj.productName }}</div>
              <div class="info-card-row-flax"><div class="info-card-label">价格区间：</div><div class="info-card-label" style="color: #F00505">￥{{ projectObj.minPrice||'0' }} -- ￥{{ projectObj.maxPrice||'不限' }}</div></div>
              <div class="info-card-row-flax">
                <div class="info-card-label">产品特点：</div>
                <div style="width: 600px;height: 84px;">
                  <div v-for="(item,index) in projectObj.productFeatureList" :key="'pf_'+index" class="info-card-tag">{{ item }}</div>
                </div>
              </div>
              <div style="margin-top: 16px;padding:10px 0;color:#347BFE;"><span class="underline touch">该产品涉及到的解决方案与服务</span> ></div>
              <div style="padding:10px 0;color:#347BFE;font-size:14px;"><span style="color:#999">供应商：</span><span class="underline touch" title="点击跳转至该供应商黄页..." @click="goToDetails({'id':projectObj.customerId}, '/supplier/details')">{{ projectObj.enterpriseName }}</span> ></div>
              <div style="margin-top: 10px;padding:10px 0;color:#999;font-size:14px;">物流：需在下单后与卖家协商</div>
            </el-col>
          </el-row>
        </div>
        <el-row :gutter="50">
          <el-col :span="12">
            <div v-for="(item, index) in projectObj.productPicList" :key="'pic_m_'+index" class="img-cell">
              <el-image
                class="image touch"
                :class="carouseIndex===index?'active':''"
                :src="item?imgSrcStart+'/productPic/'+item:defaultImgProduct"
                @click="changeImage(index)"
              />
            </div>
          </el-col>
          <el-col :span="12">
            <div class="line-btn" style="padding-top: 45px;">
              <div class="btn-o" style="padding: 10px;width: 74%" @click="inquiry(projectObj, 'product')">询 价</div>
            </div>
          </el-col>
        </el-row>
        <el-divider />
        <div v-if="projectObj.productType<5">
          <div class="info-card-title" style="margin-bottom: 14px"><div class="title-li" /><span>产品属性</span></div>
          <div>
            <div v-if="projectObj.attributeBrand" class="attribute-box">
              <div class="attribute-label">品牌</div>
              <div class="attribute-value">{{ projectObj.attributeBrand||'-' }}</div>
            </div>
            <div v-if="projectObj.attributeConsumptionCurrent" class="attribute-box">
              <div class="attribute-label">消耗电流</div>
              <div class="attribute-value">{{ projectObj.attributeConsumptionCurrent||'-' }}</div>
            </div>
            <div v-if="projectObj.attributeBatchNumber" class="attribute-box">
              <div class="attribute-label">批号</div>
              <div class="attribute-value">{{ projectObj.attributeBatchNumber||'-' }}</div>
            </div>
            <div v-if="projectObj.attributeRatedPower" class="attribute-box">
              <div class="attribute-label">额定功率</div>
              <div class="attribute-value">{{ projectObj.attributeRatedPower||'-' }}</div>
            </div>
            <div v-if="projectObj.attributeModel" class="attribute-box">
              <div class="attribute-label">型号</div>
              <div class="attribute-value">{{ projectObj.attributeModel||'-' }}</div>
            </div>
            <div v-if="projectObj.attributeReactionTime" class="attribute-box">
              <div class="attribute-label">反应时间</div>
              <div class="attribute-value">{{ projectObj.attributeReactionTime||'-' }}</div>
            </div>
            <div v-if="projectObj.attributeWorkingVoltage" class="attribute-box">
              <div class="attribute-label">工作电压</div>
              <div class="attribute-value">{{ projectObj.attributeWorkingVoltage||'-' }}</div>
            </div>
            <div v-if="projectObj.attributeQualityAssurance" class="attribute-box">
              <div class="attribute-label">质量保证</div>
              <div class="attribute-value">{{ projectObj.attributeQualityAssurance||'-' }}</div>
            </div>
            <div v-if="projectObj.attributeEncapsulation" class="attribute-box">
              <div class="attribute-label">封装</div>
              <div class="attribute-value">{{ projectObj.attributeEncapsulation||'-' }}</div>
            </div>
            <div v-if="projectObj.attributeProducingArea" class="attribute-box">
              <div class="attribute-label">产地</div>
              <div class="attribute-value">{{ projectObj.attributeProducingArea||'-' }}</div>
            </div>
            <div v-if="projectObj.attributeNumber" class="attribute-box">
              <div class="attribute-label">数量</div>
              <div class="attribute-value">{{ projectObj.attributeNumber||'-' }}</div>
            </div>
            <div v-if="projectObj.attributeColor" class="attribute-box">
              <div class="attribute-label">颜色</div>
              <div class="attribute-value">{{ projectObj.attributeColor||'-' }}</div>
            </div>
            <div v-if="projectObj.attributeApplicableScenarios" class="attribute-box">
              <div class="attribute-label">适用场景</div>
              <div class="attribute-value">{{ projectObj.attributeApplicableScenarios||'-' }}</div>
            </div>
          </div>
          <el-divider />
        </div>
        <div class="info-card-title"><div class="title-li" /><span>产品描述</span></div>
        <div style="min-height: 30vh" v-html="projectObj.productDescribe" />
        <div class="footnote-text">
          <div class="footnote-title">价格说明：</div>
          <p>价格:商品仅展示价格区间，具体的成交价格可能因商品参加活动等情况发生变化，也可能随着购买数量不同或所选规格不同而发生变化，如用户与商家线下达成协议，以线下协议的结算价格为准。特别提示:商品的具体价格以您与商家联系后协商达成的实际成交价格为准;建议购买前先咨询商家。</p>
        </div>
        <div class="line-btn" style="padding-top: 45px;">
          <div class="btn-o" style="padding: 10px;width: 420px" @click="inquiry(projectObj, 'product')">询 价</div>
        </div>
        <div style="margin-bottom: 20px;padding:20px 0;color:#347BFE;font-size:14px;text-align: center;"><span style="color:#999">供应商：</span><span class="underline touch" title="点击跳转至该供应商黄页..." @click="goToDetails({'id':projectObj.customerId}, '/supplier/details')">{{ projectObj.enterpriseName }}</span> ></div>
      </div>
    </div>
    <home-footer ref="homeFooter" />
    <inquiry-view ref="inquiryView" />
    <el-backtop />
  </div>
</template>
<script>
import default_product from '@/assets/home_images/default_product.png'
import titleMenus from '../components/titleMenusV2'
import userLogin from '../components/userLoginV2'
import languageSetting from '../components/languageSettingV2'
import homeFooter from '../components/homeFooter'
import inquiryView from '../components/inquiryView'
import { HttpReq } from '@/api/common'

export default {
  components: { titleMenus, userLogin, languageSetting, homeFooter, inquiryView },
  dicts: [],
  data() {
    return {
      defaultImgProduct: default_product,
      imgSrcStart: process.env.VUE_APP_BASE_API,
      carouseIndex: 0,
      projectObj: {
        productId: null,
        customerId: null, // 供应商id
        enterpriseName: ' ', // 供应商名称
        productName: '', // 产品名称
        productType: '1', // 产品大类
        productSubType: null, // 产品小类
        minPrice: '', // 价格区间-小
        maxPrice: '', // 价格区间-大
        productFeature: null, // 产品特点
        productFeatureList: [],
        productPic: '', // 产品图片
        productPicList: ['', '', '', '', ''],
        productDescribe: '', // 产品描述（富文本）
        notes: null, // 其他说明
        letterOfCommitment: false, // 交易保障承诺
        attributeBrand: '', // 属性-品牌
        attributeConsumptionCurrent: '', // 属性-消耗电流
        attributeProductName: '', // 属性-产品名称
        attributeRatedPower: '', // 属性-额定功率
        attributeModel: '', // 属性-型号
        attributeReactionTime: '', // 属性-反应时间
        attributeWorkingVoltage: '', // 属性-工作电压
        attributeEncapsulation: '', // 属性-封装
        attributeQualityAssurance: '', // 属性-质量保证
        attributeProducingArea: '', // 属性-产地
        attributeNumber: '', // 属性-数量
        attributeColor: '', // 属性-颜色
        attributeApplicableScenarios: '', // 属性-适用场景
        attributeBatchNumber: '', // 属性-批号
        rank: '1' // 产品品级
      },
      throttle: null, // 节流器
      throttleTime: 300
    }
  },
  mounted() {
    this.$nextTick(() => {
      HttpReq.webClientApi.productDetails({
        productId: this.$route.params.id
      }).then((res) => {
        this.projectObj = res.data
        if (this.projectObj.productPic) {
          this.projectObj.productPicList = this.projectObj.productPic.split(';')
        }
        if (this.projectObj.productFeature) {
          this.projectObj.productFeatureList = this.projectObj.productFeature.split(';')
        }
        document.title = this.projectObj.productName
      })
    })
  },
  methods: {
    onDictReady(dict) {},
    changeCarouselItem(index) {
      this.carouseIndex = index
    },
    changeImage(index) {
      this.$refs.carousel.setActiveItem(index)
    },
    // 点击询价
    inquiry(item, type) {
      this.$refs.inquiryView.initView(item.productId, item.customerId, type)
    },
    // 跳转到详情
    goToDetails(item, path) {
      if (item) {
        this.$router.push({ path: `${path}/${item.id || 123}` })
      } else {
        this.$router.push({ path: `${path}` })
      }
    },
    goTop() {
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-carousel__item:nth-child(n) {background-color: #eee;}
.el-divider {
  background-color: #1961c5;
  opacity: 0.2;
}
.touch {
  cursor:pointer;
}
.underline {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.clear {
  clear: both
}
.ellipsis {
  // 多行溢出省略号
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 6;
  text-overflow: ellipsis;
}
.head-box {
  top: 0;
  background: none repeat scroll 0 0 white;
  z-index: 999;
  box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
  .head-box-top {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .top-call {
      height: 80px;
      padding-top: 15px;
    }
  }
}
.content-box {
  min-height: 70vh;
  margin-top: 94px;
  font-family: Source Han Sans CN;
  user-select: none;
  .box-block {
    width: 100%;
    margin: 12px 0;
    border: 1px solid rgba(0,0,0,0.12);
    box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.12);
    border-radius: 10px;
    .box-title {
      padding-top: 20px;
      padding-left: 10px;
      font-size: 22px;
      font-weight: bold;
    }
    .box-title:hover {
      color: #0457C7
    }
    .content {
      height: 200px;
      padding: 4px 30px 20px 10px;
      font-size: 16px;
      font-weight: 600;
      line-height: 32px;
      color: #666;
    }
  }
  .box-card {
    display: inline-block;
    position: relative;
    margin: 12px;
    padding: 10px 0;
    width: 350px;
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.12);
    box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.12);
    border-radius: 10px;
    .line-text {
      width: 100%;
      text-align: center;
      padding: 5px;
      font-size: 18px;
      font-weight: bolder;
      opacity: 0.85;
    }
    .line-text:hover {
      opacity: 1;
    }
    .float-title {
      width: 344px;
      position: absolute;
      padding: 5px;
      top: 200px;
      left: 2px;
      text-align: center;
      font-weight: 600;
      color: #fff;
      background: rgba(0,0,0,0.6);
      opacity: 0.9;
    }
    .float-title:hover {
      opacity: 1;
    }
    .title {
      width: 305px;
      padding: 2px 20px;
      font-size: 18px;
      color: #333333;
      overflow:hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow:ellipsis;
    }
    .title:hover {
      font-weight: 600;
    }
    .subTitle {
      width: 260px;
      padding: 2px 20px;
      font-size: 15px;
      color: #1961C5;
      overflow:hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow:ellipsis;
    }
    .area {
      padding: 2px 0;
      font-size: 17px;
      color: #666666;
    }
    .date {
      padding: 2px 10px;
      font-size: 17px;
      color: #999999;
    }
    .stamp {
      border-style: none;
      position: absolute;
      z-index: 99;
    }
  }
  .more {
    font-size: 18px;
    font-weight: 600;
    color: #0457C7;
    opacity: 0.7;
  }
  .more:hover {
    opacity: 1;
  }
  .line-title {
    padding: 6px 0;
    position: relative;
    border-bottom: 3px solid #0457C7;
    font-size: 24px;
    color: #333333;
    .title-point {
      width: 8px;
      height: 21px;
      position: absolute;
      top: 9px;
      background: #0457c7;
    }
    .title-text {
      padding-left: 14px;
      font-weight: 600;
    }
    .title-line{
      width: 100%;
      position: absolute;
      bottom: -7px;
      border-bottom: 2px solid #1961C5;
      opacity: 0.35
    }
  }
  .info-card {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 352px;
    border: 1px solid rgba(0,0,0,0.12);
    box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.12);
    border-radius: 10px;
    .info-card-title-s {
      padding: 10px 0;
      font-size: 22px;
      font-weight: bold;
    }
    .info-card-row-flax {
      display: flex;
      padding: 10px 0;
      .info-card-label {
        color: #999;
        font-size: 22px;
      }
      .info-card-tag {
        display: inline-block;
        font-size: 16px;
        background: #EFF6FF;
        color: #1961C5;
        padding: 7px 28px;
        margin-right: 20px;
        margin-bottom: 16px;
      }
    }
    .info-card-line {
      color: #666;
      font-size: 20px;
      padding: 10px 0;
    }
    .info-card-textarea {
      color: #333;
      font-size: 15px;
      line-height: 28px;
      height: 270px;
      overflow: auto;
    }
    .map-box {
      width: 100%;
      height: 160px;
      overflow: hidden;
      margin: 0;
      font-family: "微软雅黑";
      border: 1px solid rgba(0, 0, 0, 0.12);
    }
    h3 {
      font-size: 22px;
      margin: 0;
      color: #1961C5;
    }
  }
  .info-card-title {
    position: relative;
    font-size: 22px;
    font-weight: bold;
    margin: 0;
    color: #1961C5;
    .title-li {
      position: absolute;
      width: 8px;
      height: 20px;
      top: 3px;
      background: #0457C7
    }
    span {
      padding-left: 14px;
    }
  }
  .img-cell {
    padding: 2px;
    width: 20%;
    height: 132px;
    display: inline-block;
    .image {
      width: 100%;
      height: 100%;
      border: 1px solid rgba(0, 0, 0, 0.2);
    }
    .active {
      border: 1px solid rgba(25, 97, 197, 0.9);
    }
  }
  .footnote-text {
    color: #333;
    .footnote-title {
      font-size: 18px;
    }
    p {
      font-size: 14px;
      line-height: 26px;
      color: #666;
    }
  }
  .attribute-box {
    display: inline-block;
    width: 33%;
  }
  .attribute-label {
    display: inline-block;
    width: 34%;
    padding: 10px;
    font-size: 17px;
    color: #999;
  }
  .attribute-value {
    display: inline-block;
    width: 64%;
    padding: 10px;
    font-size: 17px;
    color: #333;
  }
}
.line-btn {
  display: flex;
  justify-content: center;
  font-family: Source Han Sans CN;
  font-weight: 400;
  .btn-o {
    margin: 0 25px;
    width: 360px;
    padding: 6px 10px;
    background: #F7601A;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
    text-align: center;
    border: 1px solid transparent;
    font-size: 22px;
    color: #FFFFFF;
    cursor:pointer;
    user-select: none;
  }
  .btn-o:hover {
    border: 1px solid rgba(30, 144, 255, 0.8);
    color: #1482f0;
  }
  .btn-l {
    margin: 0 25px;
    width: 360px;
    padding: 10px;
    background: #1961C5;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
    text-align: center;
    border: 1px solid transparent;
    font-size: 22px;
    color: #FFFFFF;
    cursor:pointer;
    user-select: none;
  }
  .btn-l:hover {
    border: 1px solid rgba(0,0,0,0.3);
    color: #F7601A;
  }
  .btn-b {
    margin: 0 10px;
    width: 168px;
    padding: 6px;
    background: #EFF6FF;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
    text-align: center;
    font-size: 20px;
    color: #1961C5;
    cursor:pointer;
    user-select: none;
  }
  .btn-b:hover {
    border: 1px solid rgba(30, 144, 255, 0.9);
  }
  .active {
    color: #FFFFFF;
    font-weight: 400;
    background: #1961C5;
  }
}
</style>
