<template>
  <div>
    <swipe :msg="src" ref="aa"></swipe>
    <button @click="change3">多图轮播</button>
    <button @click="change2">圆角</button>
    <button @click="change1">颜色直角</button>
    <button @click="change5">删除分页</button>
    <button @click="change4">图片直圆角</button>
    <button @click="tabChange4">改变tab图片</button>
    <button @click="tabChange5">改变tab标题</button>
    <button @click="tabChange3">改变tab</button>
    <tab :msg="tabBarImg" ref="bb"></tab>

    <!-- <list></list> -->
  </div>
</template>

<script>
import swipe from "../../moudel/swipe/index.vue";
import tab from "../../moudel/tab/tab.vue";
import list from "../../moudel/list/list.vue";

export default {
  data () {
    return {
      src: [
        {
          img: "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
        },
        {
          img: "https://ts3.cn.mm.bing.net/th?id=OIP-C.4TuOo-Fd0Q9Xt2PhrZwdnQHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.15&pid=3.1&rm=2",
        },
        {
          img: "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
        },
      ],
      tabBarImg: [
        {
          path: "/home",
          normal: require("../../assets/首页.png"),
          // icon: require('./../assets/images/ahome.png'),
          title: "首页",
        },
        {
          path: "/chat",
          normal: require("../../assets/列表.png"),
          // icon: require('./../assets/images/ahead.png'),
          title: "列表",
        },

        {
          path: "/login",
          normal: require("../../assets/我的.png"),
          // icon: require('./../assets/images/ahead.png'),
          title: "我的",
        },
      ],
    };
  },
  components: {
    swipe,
    tab,
    list,
  },
  methods: {
    //改变tab图片
    tabChange4 () {
      this.tabBarImg = [
        {
          path: "/home",
          normal: require("../../assets/蝴蝶结.png"),
          // icon: require('./../assets/images/ahome.png'),
          title: "首页",
        },
        {
          path: "/chat",
          normal: require("../../assets/列表.png"),
          // icon: require('./../assets/images/ahead.png'),
          title: "列表",
        },

        {
          path: "/login",
          normal: require("../../assets/蝴蝶结.png"),
          // icon: require('./../assets/images/ahead.png'),
          title: "我的",
        },
        {
          path: "/login",
          normal: require("../../assets/我的.png"),
          // icon: require('./../assets/images/ahead.png'),
          title: "我的",
        },
      ];
    },

    tabChange5 () {
      this.tabBarImg = [
        {
          path: "/home",
          normal: require("../../assets/首页.png"),
          // icon: require('./../assets/images/ahome.png'),
          title: "啦啦啦啦啦",
        },
        {
          path: "/chat",
          normal: require("../../assets/列表.png"),
          // icon: require('./../assets/images/ahead.png'),
          title: "啦啦啦啦啦",
        },
        {
          path: "/login",
          normal: require("../../assets/我的.png"),
          // icon: require('./../assets/images/ahead.png'),
          title: "啦啦啦啦啦",
        },
      ];
    },

    tabChange3 () {
      let a = this.$refs.bb.$refs.tabs.querySelectorAll("div");
      a.forEach((element) => {
        element.style.background = "hotpink";
        element.style.color = "white";
      });
    },

    change3 () {
      console.log(111);
      let src = [
        {
          img: "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
        },
        {
          img: "https://ts3.cn.mm.bing.net/th?id=OIP-C.4TuOo-Fd0Q9Xt2PhrZwdnQHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.15&pid=3.1&rm=2",
        },
        {
          img: "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
        },
        {
          img: "https://ts3.cn.mm.bing.net/th?id=OIP-C.4TuOo-Fd0Q9Xt2PhrZwdnQHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.15&pid=3.1&rm=2",
        },
        {
          img: "https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
        },
      ];
      this.src = src;
    },
    change2 () {
      let a = this.$refs.aa.$refs.swiper.querySelectorAll("span");
      a.forEach((element) => {
        element.style.borderRadius = "50px";
      });
    },
    change1 () {
      let a = this.$refs.aa.$refs.swiper.querySelectorAll("span");
      a.forEach((element) => {
        element.style.width = "12px";
        element.style.background = "hotpink";
        element.style.borderRadius = "1px";
      });
    },
    change5 () {
      let a = this.$refs.aa.$refs.swiper.querySelectorAll("span");
      a.forEach((element) => {
        element.style.display = "none";
      });
    },
    change4 () {
      console.log(this.$refs.aa.$refs.swip);
      let a = this.$refs.aa.$refs.swip.querySelectorAll("img");
      a.forEach((element) => {
        element.style.borderRadius = "12px";
      });
    },
  },
};
</script>
