<template>
  <div class="container">
    <div class="img">
      <van-swipe :autoplay="3000" >
        <van-swipe-item v-for="(item,index) in  carousel" :key="index">
          <img :src="item"  />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="list">
      <div class="left">
        <img :src="storeInfo.logo" alt="" />
      </div>
      <div class="right">
        <h3>{{storeInfo.name}}</h3>
        <p>{{storeInfo.summaryTitle}}</p>
      </div>
    </div>
    <van-cell-group class="gn">
      <van-cell title="专柜信息" is-link value="详细信息" @click="handleEdit" />
      <van-cell title="访问专柜首页" is-link value="详细信息" @click="handleCounterHome" />
      <van-cell title="专柜收款码" is-link value="详细信息" @click="getChargeCode" />
      <van-cell title="推送门店信息" is-link value="详细信息" @click="handlePushInfo" />
    </van-cell-group>
  </div>
</template>

<script>
import { getStoreDetail } from "@/api/sidebar/voucher";
import { quillEditor } from "vue-quill-editor"
import "quill/dist/quill.core.css"
import "quill/dist/quill.snow.css"
import "quill/dist/quill.bubble.css"
export default {
  data() {
    return {
      info: 1,
      oyStallCode: '',
      storeInfo: {
        logo: './img/counter.png',
        name: 'only专柜',
        summaryTitle: 'ONLY是丹麦著名的国际时装公司BESTSELLER拥有的众多著名品牌之一',       
      },
      carousel:['./img/cswiper.png','./img/cswiper.png','./img/cswiper.png','./img/cswiper.png']
    }
  },
  mounted() { 
    this.oyStallCode = sessionStorage.getItem('oyStallCode') 
    this.getAgentAuth()
    this.getDetail()
  },
  methods: {
    getDetail() {
      let params = {
        oyStallCode: this.oyStallCode
      }
      getStoreDetail(params).then(res => {
        if(res.data.stallInfo != null) {
          this.info = 2
          console.log(res,'res');
          this.carousel = res.data.carousel
          this.storeInfo = res.data.stallInfo
        }else {
          this.info = 1
        }
      })
    },
    handleEdit() {
      this.$router.push("counterEdit")
    },
    getChargeCode() {
      if(this.info == 1) {
        this.$router.push('pushStoreInfo')
      }else {
        this.$router.push("chargeCode")
      }     
    },
    handleCounterHome() {
      if(this.info == 1) {
        this.$router.push('pushStoreInfo')
      }else {
        this.$router.push("counterHome")
      }     
    },
    handlePushInfo() { 
      if(this.info == 1) {
        this.$router.push('pushStoreInfo')
      }else {
        let url = `http://oysales.oywanhao.com:8087/counterPageHome?oyStallCode=${this.oyStallCode}` 
        wx.invoke("shareToExternalContact", {
          title: '专柜首页', // 消息的标题
          desc: '专柜首页详情', // 消息的描述
          link: url, // 消息链接
          imgUrl: '' // 消息封面
          },function(res) {
            if (res.err_msg == "shareToExternalContact:ok") {
              this.$router.push({ path: "counterInfo" })      
            }else {
              console.log(res.err_msg,'错误信息')            
            }
          })
        }
      }     
    }
  }
</script>

<style  scoped>
.gn >>> .van-cell__title{
    font-size:14px;
    font-weight:bold;
    color:rgba(45,71,106,1);
}
.gn {
    margin-top: 12px;
    width: 100%;
}
.container {
  background: #f8f8f8;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  min-height: 100%;
}
.img {
  width: 100%;
  height: 200px;
  background-color: #fff;
}
.img img {
  width: 100%;
  height: 200px;
}
.img >>> .van-swipe {
  height: 200px;
}
.list {
  height: 80px;
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(238, 238, 238, 1);
  box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
  border-radius: 2px;
  z-index: 100;
}
.list3 {
  border-bottom: none;
  margin-bottom: 0;
}
.left,
.right {
  height: 80px;
}
.left {
    width: 30%;
    display: flex;
    justify-content: center;
}
.left img {
  width: 80px;
}
.right {
  width: 70%;
  padding: 16px 0 0 10px;
  background-color: #fff;

}
h3 {
  font-size: 14px;
  font-weight: bold;
  color: rgba(45, 71, 106, 1);
}
p {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(45, 71, 106, 0.8);
}
</style>