<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="usercontentshow" ref="usercontent">
          <div class="rc-product ts-scrollable-container">
            <div class="rc-productcat ts-scrollable">
              <div
                class="rc-cat"
                v-for="(item, index) in userproduct"
                :key="index"
                ref="userclicks"
                @click="selectGoods(item, index)"
                :class="activeIndex == index ? 'active' : 'unactive'"
              >
                <img :src="item.catimage" alt="" />
                <span>{{ item.title }}</span>
              </div>
            </div>
          </div>
          <div class="online rc-md-up"></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'"
                ref="chosebox"
              >
                {{ item.tagName }}
              </li>
            </ol>
          </div>
          <div class="online rc-md-up"></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="online rc-md-up"></div>
          <div class="ts-scrollable-container">
            <h2>功能:</h2>
            <ol class="ts-scrollable">
              <li
                v-for="(item, index) in catagea"
                :key="index"
                @click="selectagc(item, index)"
                :class="item.checked ? 'active' : 'unactive'"
                ref="cgosebox4"
              >
                {{ item.tagName }}
              </li>
            </ol>
          </div>
          <div class="online rc-md-up"></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="online rc-md-up"></div>
        </div>
      </div>
    </div>
    <!-- rc-main end -->
    <div class="online bold"></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>
    <!-- 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.tagName }}</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'"
                ref="chosebox"
              >
                {{ item.tagName }}
              </li>
            </ol>
          </div>

          <div class="ts-scrollable-container rc-margin-y--md">
            <h2>年龄:</h2>
            <ol class="ts-scrollable">
              <li
                v-for="(item, index) in catage"
                :key="index"
                @click="selectage(item, index)"
                :class="activeIndexc == index ? 'active' : 'unactive'"
                ref="chosebox1"
              >
                {{ item.tagName }}
              </li>
            </ol>
          </div>
          <div class="ts-scrollable-container rc-margin-y--md">
            <h2>功能:</h2>
            <ol class="ts-scrollable">
              <li
                v-for="(item, index) in catagea"
                :key="index"
                @click="selectagc(item, index)"
                :class="activeIndexd == index ? 'active' : 'unactive'"
                ref="cgosebox4"
              >
                {{ 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="activeIndexe == index ? 'active' : 'unactive'"
                ref="chosebox3"
              >
                {{ item.tagName }}
              </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)"
              ref="usercliak"
              :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'"
                ref="chosebox"
              >
                {{ item.tagName }}
              </li>
            </ol>
          </div>

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

          <div class="ts-scrollable-container">
            <h2>品种:</h2>
            <ol>
              <li
                v-for="(item, index) in catageb"
                :key="index"
                @click="selectagd(item, index)"
                :class="activeIndexe == index ? 'active' : 'unactive'"
                ref="chosebox3"
              >
                {{ item.tagName }}
              </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,
  biaome,
  biaomessage,
  searchchanpin,
} from "../../ajax/getData";
export default {
  data() {
    return {
      value: "",
      isLoading: true,
      userstype: [],
      activeIndex: "0",
      allacindex: 0,
      userishwo: true,
      userishwo1: true,
      userishwo2: true,
      userishwo3: true,
      userishwo4: true,
      userserachlist: [
        {
          categoryName: "", //专区
          tagUsedAge: "", //年龄
          tagFunction: "", //功能
          tagBreed: "", //品种
        },
      ],
      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.userst();
    this.activeIndex = stype;
    if (stype !== "" && stype !== undefined) {
      this.onmessage(stype);
    } else {
      this.usetmessage();
    }
  },
  methods: {
    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;
          });
        }
        console.log(pinzhong);
        //  debugger
      });
      this.userdoglisgt = this.userstype.filter((item) => item.petType == "1");
    },

    async usetmessage() {
      this.isLoading = true;
      let data = await biaome(this.activeIndex1, "", 1, 10);
      if (data) {
        this.rccontair = data;
        this.isLoading = false;
      }
    },
    async onmessage(stype) {
      this.isLoading = true;
      let data = await biaomessage(stype, "", 1, 10);
      if (data) {
        this.rccontair = data;
        this.isLoading = false;
      }
    },

    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;
        });
      }
    },

    selectGoods(item, index) {
      this.activeIndex1 = index;
      this.activeIndex = index;
      this.allacindex = index;
      this.usersearch(this.userserachlist, this.activeIndex1);

      // for (let i = 0; i < this.userserachlist.length; i++) {
      //   if (!this.userserachlist.includes(petType)) {
      //     this.userserachlist.push(petType);
      //   }
      // }
      this.userserachlist = [
        {
          categoryName: "", //专区
          tagUsedAge: "", //年龄
          tagFunction: "", //功能
          tagBreed: "", //品种
        },
      ];
      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) {
      this.activeIndex1 = index;
    },
    userselect() {
      this.$nextTick(() => {
        this.ifadroind();
      });
    },
    usershow() {
      this.$nextTick(() => {
        this.isshow = false;
        // dom元素更新后执行，因此这里能正确打印更改之后的值
        this.$refs.usercontent.style.display = "block  ";
      });
    },

    selectsearch(item, index) {
      this.activeIndexa = index;
    },
    selectage(item, index) {
      let tagUsedAge = {};
      this.activeIndexc = index;
      this.userishwo1 = !this.userishwo1;
      console.log(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";
      }

      // for (let i = 0; i < this.userserachlist.length; i++) {
      //   if (!this.userserachlist.includes(tagUsedAge)) {
      //     this.userserachlist.push(tagUsedAge);
      //   }
      // }
      this.usersearch(this.userserachlist, this.activeIndex1);
    },
    selectagc(item, index) {
      // let tagFunction = {};
      this.activeIndexd = index;
      this.userishwo2 = !this.userishwo2;
      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 = "";
      }
      // if (this.userishwo2 == false) {
      //   tagFunction = {
      //     petType: this.allacindex,
      //     tagFunction: item.tagName,
      //   };
      // } else {
      //   console.log("这是false");
      //   tagFunction = {
      //     petType: this.allacindex,
      //   };
      // }
      // for (let i = 0; i < this.userserachlist.length; i++) {
      //   if (!this.userserachlist.includes(tagFunction)) {
      //     this.userserachlist.push(tagFunction);
      //   }
      // }
      this.usersearch(this.userserachlist, this.activeIndex1);
    },
    selectagd(item, index) {
      let tagBreed = {};
      this.activeIndexe = index;
      this.userishwo3 = !this.userishwo3;
      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 = "";
      }

      // this.$refs.chosebox3[index].className = "unactive";
      // for (let i = 0; i < this.userserachlist.length; i++) {
      //   if (!this.userserachlist.includes(tagBreed)) {
      //     this.userserachlist.push(tagBreed);
      //   }
      // }
      this.usersearch(this.userserachlist, this.activeIndex1);
    },
    selectproduct(item, index) {
      this.activeIndexb = index;
      //  console.log(this.userishwo=!this.userishwo)
      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 = "";
      }
      // if (this.userishwo == false) {
      //   console.log("====");
      //   categoryName = {
      //     petType: this.allacindex,
      //     categoryName: item.tagName,
      //   };
      // } else {
      //   categoryName = {
      //     petType: this.allacindex,
      //   };
      // }
      // this.$refs.chosebox[index].className = "unactive";
      // for (let i = 0; i < this.userserachlist.length; i++) {
      //   if (!this.userserachlist.includes(categoryName)) {
      //     this.userserachlist.push(categoryName);
      //   }
      // }

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

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

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