<template>
<div>
  <Myheader></Myheader>
  
<div class="rc-top"></div>
<div class="online"></div>
	<div class="rc-main">
		<div class="usersearch">
			<div class="usercontentshow" ref="usercontent">
				<div class="rc-product">
					<div class="rc-productcat ts-scrollable">
						<div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoods(item, index)" :class="activeIndex == index ? 'active' : 'unactive'" >
							<img :src="item.catimage" alt="" />
							<span>{{ item.title }}</span>
						</div>
					</div>
				</div>

				<div class="rc-age">
					<h2>专区:</h2>
					<ol class="ts-scrollable">
						<li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
							{{ item.title }}
						</li>
					</ol>
				</div>

				<div class="rc-age">
					<h2>年龄:</h2>
					<ol class="ts-scrollable">
						<li v-for="(item, index) in catage" :key="index"  @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
							{{ item.title }}
						</li>
					</ol>
				</div>
				
				<div class="rc-age">
					<h2>功能:</h2>
					<ol class="ts-scrollable">
						<li v-for="(item, index) in catagea" :key="index"  @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
							{{ item.title }}
						</li>
					</ol>
				</div>

				<div class="rc-age">
					<h2>品种:</h2>
					<ol class="ts-scrollable">
						<li v-for="(item, index) in catageb" :key="index"  @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
							{{ item.title }}
						</li>
					</ol>
				</div>
			</div>
		</div>
	</div>
	<!-- rc-main end -->
	<div class="online"></div>
	<!-- rc-main start -->
	<div class="rc-main">
		<div class="usersearch">
			<div class="rc-contair">
				<ul>
					<li v-for="(item,index) in rccontair" :key="index">
						<div class="rc-click" @click="selectproduce(item)">
							<div class="rc-rccontair">
								<img :src=item.picture alt="">   
							</div>
						</div>
						<div class="rc-column">
							<div class="rc-click" @click="selectproduce(item)">
								<span>{{item.categoryName}}</span>
								<i>0.001{{item.price}}</i>
							</div>
							<strong @click="userbuy()">立即购买</strong>
						</div>
					</li>
				</ul>
			</div>
			<div class="usershow" v-if="openshow">
				<div class="rc-show"></div>
			</div>
		</div>
	</div>
	<!-- rc-main end -->
	
	
  <div v-if="isadrond">
    <div class="rc-mubu" v-if="isshow" @click="usershow()"></div>
     <div class="rc-bottom"  v-if="isshow">
  <div class="rc-bottoma" >
        <div class="rc-productcat ts-scrollable">
          <div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoodsa(item, index)" :class="activeIndex1 == index ? 'active' : 'unactive'" >
            <img :src="item.catimage" alt="" />
            <span>{{ item.title }}</span>
          </div>
       
        </div>
    <div class="rc-prefecture">
        <h2>专区:</h2>
        <ol class="ts-scrollable">
          <li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
            {{ item.title }}
          </li>
        </ol>
      </div>

        <div class="rc-age">
        <h2>年龄:</h2>
        <ol class="ts-scrollable">
          <li v-for="(item, index) in catage" :key="index"  @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
            {{ item.title }}
          </li>
        </ol>
      </div>
       <div class="rc-age">
        <h2>功能:</h2>
        <ol class="ts-scrollable">
          <li v-for="(item, index) in catagea" :key="index"  @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
            {{ item.title }}
          </li>
        </ol>
      </div>

       <div class="rc-age">
        <h2>品种:</h2>
        <ol class="ts-scrollable">
          <li v-for="(item, index) in catageb" :key="index"  @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
            {{ item.title }}
          </li>
        </ol>
      </div>
  </div>
   <div class="rc-footer">

     <span @click="usershow()">取消</span>
     <em @click="usershow()">确定</em>
   </div>

  </div>
  </div>

    <el-dialog
    :visible.sync="dialogInfo1"
    hegight="700px"
  
    v-if="!isadrond"
  >
      
     <div class="rc-bottom">
  <div class="rc-bottoma" >
        <div class="rc-productcat ts-scrollable">
          <div class="rc-cat" v-for="(item, index) in userproduct" :key="index" @click="selectGoodsa(item, index)" :class="activeIndex1 == index ? 'active' : 'unactive'" >
            <img :src="item.name" alt="" />
            <span>{{ item.title }}</span>
          </div>
       
        </div>
    <div class="rc-prefecture">
        <h2>专区:</h2>
        <ol>
          <li v-for="(item, index) in prefecture" :key="index" @click="selectproduct(item, index)" :class="activeIndexb == index ? 'active' : 'unactive'" >
            {{ item.title }}
          </li>
        </ol>
      </div>

        <div class="rc-age">
        <h2>年龄:</h2>
        <ol>
          <li v-for="(item, index) in catage" :key="index"  @click="selectage(item, index)" :class="activeIndexc == index ? 'active' : 'unactive'">
            {{ item.title }}
          </li>
        </ol>
      </div>
       <div class="rc-age">
        <h2>功能:</h2>
        <ol>
          <li v-for="(item, index) in catagea" :key="index"  @click="selectagc(item, index)" :class="activeIndexd == index ? 'active' : 'unactive'">
            {{ item.title }}
          </li>
        </ol>
      </div>

       <div class="rc-age">
        <h2>品种:</h2>
        <ol>
          <li v-for="(item, index) in catageb" :key="index"  @click="selectagd(item, index)" :class="activeIndexe == index ? 'active' : 'unactive'">
            {{ item.title }}
          </li>
        </ol>
      </div>
  </div>
  </div>

   <div class="rc-button">
     <span @click="openclose()">取消</span>
     <em>确认</em>
   </div>
  </el-dialog>
  </div>
</template>

<script>
import Myheader from '~/components/header.vue' 
  import { userstype,biaomessa,biaomessage } from "../../ajax/getData";
export default {
  data() {
    return {
      value: "",
      activeIndex:0,
      activeIndex1:0,
      activeIndexa:'-1',
      dialogInfo1:false,
      activeIndexb:'-1',
       activeIndexc:'-1',
       activeIndexd:'-1',
       activeIndexe:'-1',
       activeIndexf:'-1',
       isadrond:true,
       isshow:false,
       openshow:false,
       direction:'btt',
      searchdata: [
        {
          title: "猫罐头",
          ordernum: "1",
        },

        {
          title: "犬罐头",
          ordernum: "2",
        },
        {
          title: "布偶猫",
          ordernum: "3",
        },
        {
          title: "博美犬",
          ordernum: "4",
        },
      ],

      userproduct: [
        {
          title: "猫产品",
          ordernum: "1",
          catimage: require("../../assets/image/rc-cat.png"),
        },

        {
          title: "犬产品",
          ordernum: "2",
          catimage: require("../../assets/image/rc-dog.png"),
        },
      ],

            catproduct: [
        {
          title: "猫产品",
          ordernum: "1",
          catimage: require("../../assets/image/rc-cat.png"),
        },

        {
          title: "犬产品",
          ordernum: "2",
          catimage: require("../../assets/image/rc-dog.png"),
        },
      ],

      prefecture: [
        {
          title: "猫湿粮",
          ordernum: "2",
          catimage: require("../../assets/image/rc-dog.png"),
        },
        {
          title: "品种猫粮",
          ordernum: "2",
          catimage: require("../../assets/image/rc-dog.png"),
        },
        {
          title: "营养猫粮",
          ordernum: "2",
          catimage: require("../../assets/image/rc-dog.png"),
        },
        {
          title: "功能猫粮",
          ordernum: "2",
          catimage: require("../../assets/image/rc-dog.png"),
        },
      ],
      catage: [
        {
          title: "<4月龄",
          ordernum: "1",
        },
        {
          title: "4-12月龄",
          ordernum: "2",
        },
        {
          title: "1-7岁",
          ordernum: "3",
        },
        {
          title: ">7岁",
          ordernum: "4",
        },
      ],
          catagea: [
        {
          title: "绝育呵护",
          ordernum: "1",
        },
        {
          title: "口腔呵护",
          ordernum: "2",
        },
        {
          title: "美毛呵护",
          ordernum: "3",
        },
        {
          title: "去毛球",
          ordernum: "4",
        },
      ],
          catageb: [
        {
          title: "英短",
          ordernum: "1",
        },
        {
          title: "美短",
          ordernum: "2",
        },
        {
          title: "布偶",
          ordernum: "3",
        },
        {
          title: "暹罗",
          ordernum: "4",
        },
      ],

            rccontair: [
        {
          title: "皇家英国短毛猫全价湿粮",
          price:'￥123.45',
          ordernum: 1,

          catimage: require("../../assets/image/rc-cat.png"),
        },

        {
          title: "皇家英国短毛猫全价湿粮",
           price:'￥123.45',
          ordernum: "2",
          catimage: require("../../assets/image/rc-dog.png"),
        },
           {
          title: "皇家英国短毛猫全价湿粮",
           price:'￥123.45',
          ordernum: "2",
          catimage: require("../../assets/image/rc-dog.png"),
        },
            {
          title: "皇家英国短毛猫全价湿粮",
           price:'￥123.45',
          ordernum: "2",
          catimage: require("../../assets/image/rc-dog.png"),
        },
             {
          title: "皇家英国短毛猫全价湿粮",
           price:'￥123.45',
          ordernum: "2",
          catimage: require("../../assets/image/rc-dog.png"),
        },
      ],
    };
  },
    components: {
    Myheader,
  },
  mounted(){

        let stype=this.$route.query.stype;
        this.activeIndex=stype;
     console.log(stype);
     if(stype!==''&&stype!==undefined){
       this.onmessage(stype)
     }else{
    this.usetmessage();
     }


  },
  methods: {
            async usetmessage() {
      let data = await biaomessa();
      if(data){
        this.rccontair=data;
      }
      console.log( this.rccontair);
    },
              async onmessage(stype) {
      let data = await biaomessage(stype);
      if(data){
        this.rccontair=data;
      }
      console.log( this.rccontair);
    },




    userbuy(){
      this.$router.push({
        path: "/myorder/userrecord",
        query: {
          stype: 1,
        },
      });
    },
    openclose(){
this.dialogInfo1=false;
    },
    selectproduce(){
              this.$router.push({
        path: "/productdetails/producted",
        query: {
          stype: 1,
        },
      });
    },
          ifadroind(){
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
 
    if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
      console.log("当前是电脑打开")
       this.$nextTick(() => {
    
        this.isadrond=false;
         this.dialogInfo1=true;
          this.isadrond=false;
            this.isshow=false;
      
        })
      
        
    }else{
        console.log("当前是手机打开")
           this.$nextTick(() => {
    
        this.isadrond=true;
        this.isshow=true;
           this.$refs.usercontent.style.display='none  ';
    this.dialogInfo1=false;
      
        })

   
}
  },
    //搜索
    onSearch() {},
       selectGoods(item, index) {
         
             this.activeIndex=index;
             console.log('----');
    },
     selectGoodsa(item, index) {
         
             this.activeIndex1=index;
             console.log('----');
    },
    userselect(){
    this.$nextTick(() => {
    
       this.ifadroind();
      console.log( this.$refs.usercontent)
      
        })
    },
    usershow(){
        this.$nextTick(() => {
      this.isshow=false;
            // dom元素更新后执行，因此这里能正确打印更改之后的值
            this.$refs.usercontent.style.display='block  ';
        })
    },

       selectsearch(item, index) {
         
             this.activeIndexa=index;
    },
        selectage(item, index) {
             this.activeIndexc=index;
    },
        selectagc(item, index) {
             this.activeIndexd=index;
    },
        selectagd(item, index) {
             this.activeIndexe=index;
    },
    selectproduct(item, index){
          this.activeIndexb=index;
    },
           selectage(item, index) {
             this.activeIndexc=index;
    },
           selectage(item, index) {
             this.activeIndexc=index;
    },
    //弹框的显示隐藏
  },
    

};
</script>

<style lang="less" scoped >
	@import url("../../assets/css/global.less");
@import url("../../assets/css/product-list.less");
</style>