<!--
   * @Descrip: 产品明细
 * @Author: your name
 * @Date: 2019-10-15 14:30:00
 * @LastEditTime: 2019-10-29 09:40:27
 * @LastEditors: Please set LastEditors
   -->
<template>
  <h-view id="detailed" class="public-style" title="产品查询">
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn">
        <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
        <span>产品明细</span>
      </div>
    </h-header>
    <Tab :tabNums="tabNum" @getTabNum="getTabNum"/>
    <!-- 基本信息 -->
    <h-content v-if="tabNum === 0">
      <list-item :item-height="44" class="second-part">
        <item>
          <div slot="name" class="font-color">经销商</div>
          <span slot="content"> {{ baseInfo.agent_bp_name }} </span>
        </item>
        <item>
          <div slot="name" class="font-color">主机厂</div>
          <span slot="content"> {{ baseInfo.factory_bp_name }} </span>
        </item>
      </list-item>
      <div class="equipment-list">经销商信息</div>
      <list-item :item-height="44" class="second-part">
        <item>
          <div slot="name" class="font-color">经销商所在省份</div>
          <span slot="content"> {{ baseInfo.province_name }} </span>
        </item>
        <item>
          <div slot="name" class="font-color">经销商地址</div>
          <span slot="content"> {{ baseInfo.business_address }} </span>
        </item>
        <item>
          <div slot="name" class="font-color">电话号码</div>
          <span slot="content"> {{ baseInfo.phone }} </span>
        </item>
      </list-item>
      <div class="equipment-list">产品信息</div>
      <list-item :item-height="44" class="second-part">
        <item>
          <div slot="name" class="font-color">参数项</div>
          <span slot="content"> {{ baseInfo.product_code }} </span>
        </item>
        <item>
          <div slot="name" class="font-color">产品线</div>
          <span slot="content"> {{ baseInfo.division_n }} </span>
        </item>
        <item>
          <div slot="name" class="font-color">产品名称</div>
          <span slot="content"> {{ baseInfo.product_name }} </span>
        </item>
        <item>
          <div slot="name" class="font-color">产品参考价</div>
          <span slot="content"> {{ baseInfo.plan_price }} </span>
        </item>
        <item>
          <div slot="name" class="font-color">价格有效期</div>
          <span slot="content"> {{ baseInfo.price_date_to | dateFormat }} </span>
        </item>
      </list-item>
    </h-content>
    <!-- 商品详情 -->
    <h-content v-if="tabNum === 1">
      <list-item :item-height="44" class="second-part">
        <item>
          <div slot="name" class="font-color">经销商</div>
          <span slot="content"> {{ detailInfo.agent_bp_name }} </span>
        </item>
        <item>
          <div slot="name" class="font-color">主机厂</div>
          <span slot="content"> {{ detailInfo.factory_bp_name }} </span>
        </item>
      </list-item>
      <div v-for="item in picLists" :key="item.product_attachment_id" class="proPic">

        <img :src="item.url" alt="">
      </div>
    </h-content>
    <!-- 产品配置 -->
    <h-content v-if="tabNum === 2">
      <list-item :item-height="44" class="second-part">
        <item>
          <div slot="name" class="font-color">经销商</div>
          <span slot="content"> {{ confgInfo.agent_bp_name }} </span>
        </item>
        <item>
          <div slot="name" class="font-color">主机厂</div>
          <span slot="content"> {{ confgInfo.factory_bp_name }} </span>
        </item>
        <div class="table-wrap" v-html="confgInfo.product_properties"/>
      </list-item>
    </h-content>
    <bottom-tab class="footer-button">
      <tab-button
        :class="{bgcolor: bgc_flag}" class="butt"
        @click.native="goTrial(baseInfo.plan_price,baseInfo.price_date_to)"><img
        src="@/assets/productQuery/trial.png" alt=""> 试算
      </tab-button>
      <tab-button class="collect butt" @click.native="collect"><img :src="src" alt="">{{ text }}</tab-button>
    </bottom-tab>
    <div v-if="collect_flag" class="show-collect">
      <img src="@/assets/productQuery/success.png" alt="">
      <p>{{ show_text }}</p>
    </div>
  </h-view>
</template>

<script>
import Tab from './tab'

export default {
  name: 'ProDetailed',
  components: {
    Tab,
  },
  data () {
    return {
      text: '',
      tabNum: 0,
      picLists: [],
      baseInfo: {},
      show_text: '',
      confgInfo: {},
      detailInfo: {},
      bgc_flag: true,
      collect_flag: false,
    }
  },
  computed: {},
  watch: {},
  beforeRouteEnter (to, from, next) {
    if (from.name === 'ProductList' || from.name === 'MyProductList') {
      next(vm => {
        vm.tabNum = 0
        vm.product_id = vm.$route.params.product_id
        vm.bp_id = vm.$route.params.bp_id
        vm.baseMsg()
        vm.detailMsg()
        vm.confgMsg()
      })
    }
    next()
  },
  created () {

  },
  activated () {
    if (window.sessionStorage.getItem('collect_status') === 'Y') {
      this.src = require('@/assets/productQuery/coll-success.png')
      this.text = '取消收藏'
    } else {
      this.src = require('@/assets/productQuery/collect.png')
      this.text = '收藏'
    }
  },
  methods:
      {
        getTabNum (i) {
          console.log(i)
          this.tabNum = i
        },
        // 收藏
        collect () {
          if (window.sessionStorage.getItem('collect_status') === 'Y') {
            let vm = this
            let url = $config.basePath + 'delete_collection'
            let param = {
              master: {
                product_id: vm.product_id,
                user_phone: window.localStorage.user_phone,
                bp_id: vm.bp_id,
              },
            }
            vm.hlsPopup.showLoading('请稍后')
            vm.$post(url, param).then(function (res) {
              vm.hlsPopup.hideLoading()
              if (res.result === 'S') {
                window.sessionStorage.setItem('collect_status', 'N')
                vm.show_text = '取消成功'
                vm.collect_flag = true
                vm.src = require('@/assets/productQuery/collect.png')
                setTimeout(() => {
                  vm.text = '收藏'
                  vm.collect_flag = false
                }, 1500)
              }
            })
          } else {
            this.show_text = '收藏成功'
            this.collect_flag = true
            let vm = this
            let url = $config.basePath + 'save_collection'
            let param = {
              master: {
                product_id: vm.product_id,
                user_phone: window.localStorage.user_phone,
                bp_id: vm.bp_id,
              },
            }
            vm.hlsPopup.showLoading('请稍后')
            vm.$post(url, param).then(function (res) {
              vm.hlsPopup.hideLoading()
              if (res.result === 'S') {
                window.sessionStorage.setItem('collect_status', 'Y')
                vm.src = require('@/assets/productQuery/coll-success.png')
                setTimeout(() => {
                  vm.text = '取消收藏'
                  vm.collect_flag = false
                }, 1500)
              } else {
                hlsPopup.showLongCenter(res.message)
              }
            })
          }
        },
        // 基本信息查询
        baseMsg () {
          let vm = this
          let url = $config.basePath + 'prd_product_info'
          let param = {
            product_id: vm.$route.params.product_id,
            bp_id: vm.bp_id,
          }
          vm.hlsPopup.showLoading('数据加载中')
          vm.$post(url, param).then(function (res) {
            vm.hlsPopup.hideLoading()
            if (res.result === 'S') {
              vm.baseInfo = res.info
            } else {
              hlsPopup.showLongCenter(res.message)
            }
          })
        },
        // 详情查询
        detailMsg () {
          let vm = this
          let url = $config.basePath + 'prd_product_detial'
          let param = {
            product_id: vm.$route.params.product_id,
          }
          vm.hlsPopup.showLoading('数据加载中')
          vm.$post(url, param).then(function (res) {
            vm.hlsPopup.hideLoading()
            if (res.result === 'S') {
              vm.detailInfo = res.info
              res.lists.forEach(item => {
                item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token
              })
              vm.picLists = res.lists
            } else {
              hlsPopup.showLongCenter(res.message)
            }
          })
        },
        // 配置查询
        confgMsg () {
          let vm = this
          let url = $config.basePath + 'prd_product_conf'
          let param = {
            product_id: vm.$route.params.product_id,
          }
          vm.hlsPopup.showLoading('数据加载中')
          vm.$post(url, param).then(function (res) {
            vm.hlsPopup.hideLoading()
            if (res.result === 'S') {
              vm.confgInfo = res.info
            } else {
              hlsPopup.showLongCenter(res.message)
            }
          })
        },
        // 试算price:产品参考价,date:有效日期
        goTrial (price, date) {
          this.$router.push({
            name: 'FinancingTrial',
            params: {
              plan_price: price,
              price_date_to: date,
            },
          })
        },
      },
}
</script>
<style lang='less'>
  #detailed {
    .h-header-btn {
      img {
        width: 16px;
        height: 16px;
        margin-left: 4px;
      }

      span {
        font-family: PingFangSC-Semibold;
        margin-left: 16px;
        font-size: 17px;
        letter-spacing: 0.61px;
        line-height: 24px;
      }
    }

    .second-part {
      .font-color {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #656464;
        letter-spacing: 0;
      }

      span {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: rgba(56, 63, 69, 0.60);
        letter-spacing: 0;
      }
    }

    .equipment-list {
      height: 40px;
      line-height: 40px;
      background-color: #fafafa;
      color: #00469c;
      font-size: 15px;
      margin-left: 16px;
      position: relative;
      margin-top: -10px;
    }

    .equipment-list::before {
      content: "";
      display: block;
      width: 4px;
      height: 20px;
      background-color: #00469c;
      position: absolute;
      left: -15px;
      top: 10px;
    }

    .footer-button {
      .butt {
        width: 48%;
        margin-left: 3px;
        border: 1px solid #00469C;
        border-radius: 4px;
      }

      img {
        height: 19px;
        width: 19px;
        //margin-top: 2px;
        margin-right: 3px;
      }

      .collect {
        color: #00469C;
      }
    }

    .bgcolor {
      background: #00469C;
      border: 1px solid #00469C;
      border-radius: 4px;
      font-family: PingFangSC-Semibold;
      color: #FFFFFF;
    }

    .show-collect {
      width: 240px;
      height: 100px;
      opacity: 0.7;
      background: #383F45;
      border-radius: 4px;
      position: fixed;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      margin: auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      p {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #FFFFFF;
        margin-left: 8px;
      }

      img {
        width: 16px;
        height: 16px;
        margin-left: -4px;
      }
    }

    .proPic {
      width: 100%;

      img {
        width: 94%;
        margin-left: 10px
      }
    }
    .table-wrap{
      table {
        margin: 10px;
        background-color: #fff !important;
        td{
          border:1px solid #ccc;
          text-align: center;
          vertical-align: middle;
          span{
            color:#000 !important;
          }
        }
      }
    }
  }
</style>