<template>
  <div>
    <transition name="fade">
      <div class="userloding" v-show="isLoading"></div>
    </transition>

    <Myheader></Myheader>
    <div class="rc-top"></div>
    <div class="rc-max-width--xl rc-main">
      <div class="usersearch">
        <div class="form-search">
          <van-search
            v-model="value"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
            class="rc-keyword"
          >
            <template #action>
              <div @click="onSearch" class="rc-search">搜索</div>
            </template>
          </van-search>
          <div class="ts-stand">
            <span @click="onSearch" class="ts-standard-btn">搜索</span>
          </div>
        </div>
        <div class="rc-max-width--xl rc-title">
          <h2>热门搜索</h2>
          <span class="rc-change" @click="userbatch">换一批</span>
        </div>
        <div class="rc-max-width--xl rc-variety">
          <ul>
            <li
              v-for="(item, index) in searchdata"
              :key="index"
              @click="selectsearch(item, index)"
              :class="activeIndexa == index ? 'active' : 'unactive'"
            >
              {{ item.title }}
            </li>
          </ul>
        </div>
        <div class="usersearch">
          <div class="usercontentshow" ref="usercontent">
            <div class="usercontentshow rc-product">
              <h2>我想搜</h2>
              <div class="rc-productcat ts-scrollable">
                <ol>
                  <li
                    v-for="(item, index) in userproduct"
                    :key="index"
                    @click="selectGoods(item, index)"
                    :class="activeIndex == index ? 'active' : 'unactive'"
                    class="ts-standard-btn"
                    ref="userstandard"
                  >
                    <img :src="item.catimage" alt="" />
                    <span>{{ item.title }}</span>
                  </li>
                </ol>
                <div class="rc-productcat userselect" @click="userselect">
                  <img src="../../assets/image/rc-usericon.png" alt="" />
                  <span @click="usershow()">筛选</span>
                </div>
              </div>
            </div>

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

            <div class="ts-scrollable-container">
              <h2>年龄:</h2>
              <ol class="ts-scrollable">
                <li
                  v-for="(item, index) in catage"
                  :key="index"
                  @click="selectage(item, index)"
                  :class="item.checked ? 'active' : 'unactive'"
                  ref="chosebox1"
                >
                  {{ item.tagName }}
                </li>
              </ol>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="online"></div>
    <!-- rc-main start -->
    <div class="rc-max-width--xl">
      <div class="usersearch">
        <div class="rc-contair">
          <ul class="ts-product-list">
            <li
              v-for="(item, index) in rccontair"
              :key="index"
              class="rc-margin-top--md"
            >
              <div
                class="rc-click rc-margin-bottom--md"
                @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>￥{{ item.ecPrice }}</i>
                </div>
                <strong
                  class="
                    ts-standard-btn ts-standard-btn--two
                    rc-margin-y--md
                    center
                  "
                  @click="userbuy()"
                  >立即购买</strong
                >
              </div>
            </li>
          </ul>
        </div>
        <div class="usershow" v-if="openshow">
          <div class="rc-show"></div>
        </div>
      </div>
      <div v-if="isadrond" class="useronshow">
        <div class="rc-mubu" v-if="isshow" @click="usershow()"></div>
        <div class="rc-bottom rc-full-width" v-if="isshow">
          <div class="usersearch">
            <div class="usercontentshow rc-column" ref="usercontent">
              <div class="usercontentshow rc-product">
                <div class="rc-productcat ts-scrollable">
                  <ol>
                    <li
                      v-for="(item, index) in userproduct"
                      :key="index"
                      @click="selectGoods(item, index)"
                      :class="activeIndex == index ? 'active' : 'unactive'"
                      class="ts-standard-btn"
                      ref="userstandard"
                    >
                      <img :src="item.catimage" alt="" />
                      <span>{{ item.title }}</span>
                    </li>
                  </ol>
                </div>
              </div>

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

              <div class="ts-scrollable-container">
                <h2>年龄:</h2>
                <ol class="ts-scrollable">
                  <li
                    v-for="(item, index) in catage"
                    :key="index"
                    @click="selectage(item, index)"
                    :class="item.checked ? 'active' : 'unactive'"
                    ref="chosebox1"
                  >
                    {{ item.tagName }}
                  </li>
                </ol>
              </div>
              <div class="ts-scrollable-container">
                <h2>功能:</h2>
                <ol class="ts-scrollable">
                  <li
                    v-for="(item, index) in catagea"
                    ref="cgosebox4"
                    :key="index"
                    @click="selectagc(item, index)"
                    :class="item.checked ? 'active' : 'unactive'"
                  >
                    {{ item.tagName }}
                  </li>
                </ol>
              </div>
              <div class="ts-scrollable-container">
                <h2>品种:</h2>
                <ol class="ts-scrollable">
                  <li
                    v-for="(item, index) in catageb"
                    :key="index"
                    @click="selectagd(item, index)"
                    :class="item.checked ? 'active' : 'unactive'"
                    ref="chosebox3"
                  >
                    {{ item.tagName }}
                  </li>
                </ol>
              </div>
              <div class="rc-button">
                <span @click="openclose()">取消</span>
                <em @click="openclose()">确认</em>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-dialog :visible.sync="dialogInfo1" hegight="700px" v-if="!isadrond">
        <div class="usersearch">
          <div class="usercontentshow" ref="usercontent">
            <div class="usercontentshow rc-product">
              <div class="rc-productcat ts-scrollable">
                <ol>
                  <li
                    v-for="(item, index) in userproduct"
                    :key="index"
                    @click="selectGoods(item, index)"
                    :class="activeIndex == index ? 'active' : 'unactive'"
                    class="ts-standard-btn"
                    ref="userstandard"
                  >
                    <img :src="item.catimage" alt="" />
                    <span>{{ item.title }}</span>
                  </li>
                </ol>
              </div>
            </div>
            <div class="ts-scrollable-container">
              <h2>专区:</h2>
              <ol class="ts-scrollable">
                <li
                  v-for="(item, index) in prefecture"
                  :key="index"
                  @click="selectproduct(item, index)"
                  :class="item.checked ? 'active' : 'unactive'"
                >
                  {{ item.tagName }}
                </li>
              </ol>
            </div>

            <div class="ts-scrollable-container">
              <h2>年龄:</h2>
              <ol class="ts-scrollable">
                <li
                  v-for="(item, index) in catage"
                  :key="index"
                  @click="selectage(item, index)"
                  :class="item.checked ? 'active' : 'unactive'"
                  ref="chosebox1"
                >
                  {{ item.tagName }}
                </li>
              </ol>
            </div>
            <div class="ts-scrollable-container">
              <h2>功能:</h2>
              <ol class="ts-scrollable">
                <li
                  v-for="(item, index) in catagea"
                  :key="index"
                  ref="cgosebox4"
                  @click="selectagc(item, index)"
                  :class="item.checked ? 'active' : 'unactive'"
                >
                  {{ item.tagName }}
                </li>
              </ol>
            </div>
            <div class="ts-scrollable-container">
              <h2>品种:</h2>
              <ol class="ts-scrollable">
                <li
                  v-for="(item, index) in catageb"
                  :key="index"
                  @click="selectagd(item, index)"
                  :class="item.checked ? 'active' : 'unactive'"
                  ref="chosebox3"
                >
                  {{ item.tagName }}
                </li>
              </ol>
            </div>
          </div>
        </div>
        <div class="rc-button rc-padding-bottom--md">
          <span @click="openclose()">取消</span>
          <em @click="openclose()">确认</em>
        </div>
      </el-dialog>
    </div>
    <!-- rc-main end -->
  </div>
</template>

<script>
import Myheader from "~/components/header.vue";
import { biaome, userstype, searchchanpin } from "../../ajax/getData";
export default {
  data() {
    return {
      value: "",
      isLoading: true,

      userserachlist: [
        {
          categoryName: "", //专区
          tagUsedAge: "", //年龄
          tagFunction: "", //功能
          tagBreed: "", //品种
        },
      ],
      userstype: [],
      activeIndex: "-1",
      activeIndex1: 0,
      activeIndexa: "-1",
      // userpeolist:[
      //   {
      //        categoryName:'', //专区
      //         tagUsedAge:'',//年龄
      //         tagFunction:'',//功能
      //         tagBreed:'', //品种
      // }
      // ],
      allsearch: false,
      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"),
        },
      ],
      usercatlist: [],
      userdoglisgt: [],
    };
  },
  components: {
    Myheader,
  },
  mounted() {
    this.usetmessage();
    this.userst();
  },
  methods: {
    //换一批
    userbatch() {
      this.allsearch = !this.allsearch;
      if (this.allsearch == false) {
        this.searchdata = [
          {
            title: "法国斗牛犬",
            ordernum: "7",
          },
          {
            title: "老年",
            ordernum: "8",
          },
          {
            title: "布偶",
            ordernum: "9",
          },
          {
            title: "柴犬",
            ordernum: "10",
          },
        ];
        this.activeIndexa = 0;
      } else {
        this.searchdata = [
          {
            title: "猫罐头",
            ordernum: "1",
          },

          {
            title: "犬罐头",
            ordernum: "2",
          },
          {
            title: "布偶猫",
            ordernum: "3",
          },
          {
            title: "博美犬",
            ordernum: "4",
          },
        ];
        this.activeIndexa = 0;
      }
    },

    async usersearch(stype, usertype) {
      let data = await searchchanpin(stype, usertype, 1, 10);
      if (data) {
        this.rccontair = data;
      }
    },
    async userst() {
      this.isLoading = true;
      let pinzhong = [];
      let zhuanqu = [];
      let age = [];
      let gonneg = [];
      let data = await userstype();
      if (data) {
        this.userstype = data;
        this.isLoading = false;
      }
      this.usercatlist = this.userstype.filter((item) => item.petType == "0");
      this.usercatlist.map((element) => {
        if (element.name == "品种") {
          pinzhong.push(element);
          this.catageb = pinzhong;
          this.catageb.forEach((element) => {
            element.checked = false;
          });
        }
        if (element.name == "功能") {
          gonneg.push(element);
          this.catagea = gonneg;
          this.catagea.forEach((element) => {
            element.checked = false;
          });
        }
        if (element.name == "年龄") {
          age.push(element);
          this.catage = age;
          this.catage.forEach((element) => {
            element.checked = false;
          });
        }
        if (element.name == "专区") {
          zhuanqu.push(element);
          this.prefecture = zhuanqu;
          this.prefecture.forEach((element) => {
            element.checked = false;
          });
        }
      });

      this.userdoglisgt = this.userstype.filter((item) => item.petType == "1");
    },

    async usetmessage() {
      this.isLoading = true;
      this.$nextTick(() => {
        this.$refs.userstandard[0].style.margin = 0 + "px";
      });
      let data = await biaome(this.activeIndex1, this.value, 1, 10);
      if (data) {
        this.rccontair = data;
        this.isLoading = false;
      }
      this.userproduct.forEach((element) => {
        element.checked = false;
      });
    },
    selectproduce(item) {
      this.$router.push({
        path: "/productdetails/producted",
        query: {
          stype: 1,
          productCode: item.productList[0].productCode,
        },
      });
    },
    userbuy() {
      this.$router.push({
        path: "/myorder/userrecord",
        query: {
          stype: 1,
        },
      });
    },
    openclose() {
      this.dialogInfo1 = false;
      this.isshow = false;
    },
    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(e) {
      this.usetmessage(this.activeIndex1, this.value);
    },
    selectGoods(item, index) {
      this.activeIndex1 = index;
      this.usersearch(this.userserachlist, this.activeIndex1);
      let pinzhong = [];
      let zhuanqu = [];
      let age = [];
      let gonneg = [];
      if (this.activeIndex1 == 0) {
        this.usercatlist.map((element) => {
          if (element.name == "品种") {
            pinzhong.push(element);

            this.catageb = pinzhong;
          }
          if (element.name == "功能") {
            gonneg.push(element);
            this.catagea = gonneg;
          }
          if (element.name == "年龄") {
            age.push(element);
            this.catage = age;
          }
          if (element.name == "专区") {
            zhuanqu.push(element);
            this.prefecture = zhuanqu;
          }
        });
      } else if (this.activeIndex1 == 1) {
        this.userdoglisgt.map((element) => {
          if (element.name == "品种") {
            pinzhong.push(element);
            this.catageb = pinzhong;
            this.catageb.forEach((element) => {
              element.checked = false;
            });
          }
          if (element.name == "功能") {
            gonneg.push(element);
            this.catagea = gonneg;
            this.catagea.forEach((element) => {
              element.checked = false;
            });
          }
          if (element.name == "年龄") {
            age.push(element);
            this.catage = age;
            this.catage.forEach((element) => {
              element.checked = false;
            });
          }
          if (element.name == "专区") {
            zhuanqu.push(element);
            this.prefecture = zhuanqu;
            this.prefecture.forEach((element) => {
              element.checked = false;
            });
          }
        });
      }

      this.activeIndex = index;
    },
    selectGoodsa(item, index) {
      let pinzhong = [];
      let zhuanqu = [];
      let age = [];
      let gonneg = [];
      this.activeIndex1 = index;
      if (this.activeIndex1 == 0) {
        this.usercatlist.map((element) => {
          if (element.name == "品种") {
            pinzhong.push(element);
            this.catageb = pinzhong;
          }
          if (element.name == "功能") {
            gonneg.push(element);
            this.catagea = gonneg;
          }
          if (element.name == "年龄") {
            age.push(element);
            this.catage = age;
          }
          if (element.name == "专区") {
            zhuanqu.push(element);
            this.prefecture = gonneg;
          }
        });
      } else if (this.activeIndex1 == 1) {
        this.userdoglisgt.map((element) => {
          if (element.name == "品种") {
            pinzhong.push(element);
            this.catageb = pinzhong;
          }
          if (element.name == "功能") {
            gonneg.push(element);
            this.catagea = gonneg;
          }
          if (element.name == "年龄") {
            age.push(element);
            this.catage = age;
          }
          if (element.name == "专区") {
            zhuanqu.push(element);
            this.prefecture = gonneg;
          }
        });
      }
    },
    userselect() {
      this.$nextTick(() => {
        this.ifadroind();
      });
    },
    usershow() {
      this.$nextTick(() => {
        this.isshow = false;
        // dom元素更新后执行，因此这里能正确打印更改之后的值
        // this.$refs.usercontent.style.display='block  ';
      });
    },

    selectsearch(item, index) {
      this.value = item.title;
      this.activeIndexa = index;
      this.usetmessage(item.title);
    },
    selectage(item, index) {
      // debugger;
      // this.userishwo1 = !this.userishwo1;
      let tagUsedAge = {};
      // this.userishwo1 = !this.userishwo1;
      if (item.checked == false) {
        item.checked = true;
        this.userserachlist[0].tagUsedAge = item.tagName;
        this.$refs.chosebox1[index].className = "active";
      } else {
        this.userserachlist[0].tagUsedAge = "";
        item.checked = false;
        this.$refs.chosebox1[index].className = "unactive";
      }
      // if (this.userishwo1 == false) {
      //   tagUsedAge = {
      //     petType: this.activeIndex1,
      //     tagUsedAge: item.tagName,
      //   };
      // } else {
      //   tagUsedAge = {
      //     petType: this.activeIndex1,
      //   };
      // }
      // for (let i = 0; i < this.userserachlist.length; i++) {
      //   if (!this.userserachlist.includes(tagUsedAge)) {
      //     this.userserachlist.push(tagUsedAge);
      //   }
      // }
      this.usersearch(this.userserachlist, this.activeIndex1);
      this.activeIndexc = index;
    },
    selectagc(item, index) {
      // let tagFunction = {
      //   petType: this.activeIndex1,
      //   tagFunction: item.tagName,
      // };
      if (item.checked == false) {
        item.checked = true;
        this.$refs.cgosebox4[index].className = "active";
        this.userserachlist[0].tagFunction = item.tagName;
      } else {
        item.checked = false;
        this.$refs.cgosebox4[index].className = "unactive";
        this.userserachlist[0].tagFunction = "";
      }

      // for (let i = 0; i < this.userserachlist.length; i++) {
      //   if (!this.userserachlist.includes(tagFunction)) {
      //     this.userserachlist.push(tagFunction);
      //   }
      // }
      this.usersearch(this.userserachlist, this.activeIndex1);
      this.activeIndexd = index;
    },
    selectagd(item, index) {
      let tagBreed = {};
      if (item.checked == false) {
        item.checked = true;
        this.$refs.chosebox3[index].className = "active";
        this.userserachlist[0].tagBreed = item.tagName;
      } else {
        item.checked = false;
        this.$refs.chosebox3[index].className = "unactive";
        this.userserachlist[0].tagBreed = "";
      }
      // if (this.userishwo3 == false) {
      //   tagBreed = {
      //     petType: this.activeIndex1,
      //     tagBreed: item.tagName,
      //   };
      // } else {
      //   tagBreed = {
      //     petType: this.activeIndex1,
      //   };
      // }
      // for (let i = 0; i < this.userserachlist.length; i++) {
      //   if (!this.userserachlist.includes(tagBreed)) {
      //     this.userserachlist.push(tagBreed);
      //   }
      // }
      this.usersearch(this.userserachlist, this.activeIndex1);
      this.activeIndexe = index;
    },
    selectproduct(item, index) {
      this.activeIndexb = index;
      if (item.checked == false) {
        item.checked = true;
        this.$refs.chosebox[index].className = "active";
        this.userserachlist[0].categoryName = item.tagName;
      } else {
        item.checked = false;
        this.$refs.chosebox[index].className = "unactive";
        this.userserachlist[0].categoryName = "";
      }
      // this.userishwo = !this.userishwo;
      // if (this.userishwo == false) {
      //   categoryName = {
      //     petType: this.activeIndex1,
      //     categoryName: item.tagName,
      //   };
      // } else {
      //   categoryName = {
      //     petType: this.activeIndex1,
      //   };
      // }
      console.log(this.userserachlist[0].categoryName);
      // for (let i = 0; i < this.userserachlist.length; i++) {
      //   if (!this.userserachlist.includes(categoryName)) {
      //     this.userserachlist.push(categoryName);
      //   }
      //   console.log(this.userserachlist);
      // }

      this.usersearch(this.userserachlist, this.activeIndex1);
    },

    //弹框的显示隐藏
  },
};
</script>

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