<template>
  <div>
    <cpt-bread
      @tap="clickBreadItem"
      v-if="breadList.length > 1"
      :bread-list="breadList"
    />
    <personnel />
  </div>
</template>

<script>
import cptBread from "@/views/dataBoard/renfang/cpts/bread";
import personnel from "@/views/dataBoard/cpts/personnel";

export default {
  name: "resident",

  components: {
    cptBread,
    personnel,
  },

  data() {
    return {
      breadList: [
        {
          path: "/dataBoard/overview/index",
          meta: {
            title: "概览",
          },
        },
        {
          path: "/homeDetails/index",
          meta: {
            title: "居民画像",
          },
        },
        {
          path: "/dataBoard/overview/familyPortrait",
          meta: {
            title: "居民画像",
          },
        },
        {
          meta: {
            title: "居民画像",
          },
        },
      ],
    };
  },
  watch: {
    "$route.query"(newVal, oldVal) {
      this.breadList[1]["meta"]["title"] = newVal.name2;
      this.breadList[2]["meta"]["title"] = newVal.name;
      this.breadList[3]["meta"]["title"] = newVal.user_name;
    },
  },
  activated(){
      const data = this.$route.query;
      this.breadList[1]["meta"]["title"] = data.name2;
      this.breadList[2]["meta"]["title"] = data.name;
      this.breadList[3]["meta"]["title"] = data.user_name;
  },
  mounted() {
      const data = this.$route.query;
      this.breadList[1]["meta"]["title"] = data.name2;
      this.breadList[2]["meta"]["title"] = data.name;
      this.breadList[3]["meta"]["title"] = data.user_name;
  },
  methods: {
    getParams(params) {
      let paramStr = "";
      Object.keys(params).forEach((item) => {
        if (paramStr === "") {
          paramStr = `${item}=${params[item]}`;
        } else {
          paramStr = `${paramStr}&${item}=${params[item]}`;
        }
      });
      return paramStr;
    },
    clickBreadItem({ item }) {
      this.$router.push(item.path + "?" + this.getParams(this.$route.query));
    },
  },
};
</script>

<style
  lang="scss"
  src="@/assets/scss/dataBoard/renfang/index.scss"
  scoped
></style>
