<template>
  <div class="productHead">
    <div class="head">
      <div class="store">
        <img :src="collectData.shopLogo" alt="" @click="toStore(collectData.shopId)">
        <div class="desc">
          <p class="storeName">{{ collectData.shopName }}</p>
          <div class="sales">
            <span class="species">商品种类：<span>{{ collectData.classifyNumber }}</span></span>
            <span class="sold">已售：<span>{{ collectData.number }}</span></span>
          </div>
        </div>
        <div v-show="hasService" class="service">
          <div class="item">
            <icon-svg style="font-size: 30px;" icon-class="shop-service" />
            <span class="fs12">微信客服</span>
          </div>
          <canvas ref="headQrcode" class="qrcode"></canvas>
        </div>
      </div>
      <div class="search">
        <div class="searchSelect">
          <el-dropdown trigger="click" @command="searchCommand">
            <span class="el-dropdown-link">
              {{ searchVal }}
              <i class="el-icon-arrow-down cur-poi el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="宝贝">宝贝</el-dropdown-item>
              <el-dropdown-item command="店铺">店铺</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="searchRight">
          <input v-model="keyword" type="text" maxlength="20" placeholder="请输入搜索商品" @keyup.enter="searchPro">
        </div>
        <span class="btn cur-poi" @click="searchPro"><i class="icon el-icon-search"></i></span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'

import QRCode from 'qrcode'
import {
  getServiceURL
} from '@/api/product.js'
export default {
  name: 'ProductHead',
  data() {
    return {
      searchVal: '宝贝',
      keyword: '',
      hasService: false
    }
  },
  watch: {
    'collectData.shopId': {
      handler(nVal, oVal) {
        if (nVal !== oVal) {
          this.hasService = false // 初始化微信客服框
          this.getSercvice(this.collectData.shopId)
        }
      },
      deep: true
    }
  },
  computed: {
    ...mapGetters([
      'collectData'
    ])
  },
  mounted() {
    this.getSercvice(this.collectData.shopId)
  },
  methods: {
    ...mapMutations({
      setSearchObj: 'SET_SEARCHOBJ'
    }),
    searchCommand(command) {
      this.searchVal = command
    },
    // 搜索商品
    searchPro() {
      this.setSearchObj({
        keyword: this.keyword,
        searchVal: this.searchVal
      })
      if (this.$route.name !== 'search') {
        this.$router.push({
          path: '/activity/search'
        })
      }
    },
    // 跳转到店铺
    toStore(id) {
      this.$router.push({
        path: '/store', query: { shopId: id }
      })
    },
    async getSercvice(shopid) {
      const shopids = JSON.parse(sessionStorage.getItem('service_shopds')) || []
      const serviceUrl = JSON.parse(sessionStorage.getItem('service_url')) || []
      let url = null
      const index = shopids.indexOf(shopid)
      if (index === -1) { // 没用该店铺客服
        const response = await getServiceURL({ id: shopid })
        const res = response.data
        url = res.data.url
        if (!url) { return }
        // 缓存处理
        shopids.push(shopid)
        serviceUrl.push(url)
        this.hasService = true
        sessionStorage.setItem('service_shopds', JSON.stringify(shopids))
        sessionStorage.setItem('service_url', JSON.stringify(serviceUrl))
      } else {
        this.hasService = true
        url = serviceUrl[index]
      }
      if (!url) { return }
      QRCode.toCanvas(this.$refs.headQrcode, url, (error) => {
        console.log(error)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.productHead {
	width: 100%;
	background-color: #fff;
	height: 80px;
	margin-bottom: 20px;
	display: flex;
	justify-content: center;

	.head {
		width: 1250px;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.store {
			display: flex;

			img {
				width: 60px;
				height: 60px;
				margin-right: 10px;
				border: 1px solid #F3F4F5;
				cursor: pointer;
			}

			.desc {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 5px 0;

				.storeName {
					font-size: 18px;
					color: #333;
				}

				.sales {
					font-size: 12px;

					.species,
					.sold {
						color: #999;
						margin-right: 15px;

						span {
							color: #333;
						}
					}
				}
			}

			.service {
				width: 58px;
				height: 58px;
				color: #C5AA7B;
				background-color: #FAF8F5;
				// overflow: hidden;
				cursor: pointer;

				&:hover {
					.qrcode {
						display: block;
					}
				}

				.item {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					span {
						margin-top: 6px;
					}
				}

				.qrcode {
					width: 100px !important;
					height: 100px !important;
					display: none;
					z-index: 999;
				}
			}
		}

		.search {
			width: 394px;
			height: 39px;
			border: 2px solid #F3F4F5;
			display: flex;

			.searchSelect {
				width: 82px;
				height: 30px;
				margin-top: 2px;
				border-right: 1px solid #CCCCCC;
				text-align: center;
				line-height: 30px;

				.el-dropdown {
					color: #C5AA7B;
				}
			}

			.searchRight {
				flex: 1;

				input {
					padding-left: 15px;
					font-size: 14px;
					color: #333;
					line-height: 35px;
				}
			}

			.btn {
				font-size: 20px;
				line-height: 35px;
				padding-right: 15px;
			}
		}
	}
}
</style>
