<template>
  <div>
    <div class="breadcrumb">
      <Breadcrumb :list="breadcrumbList" />
    </div>
    <Family />
  </div>
</template>

<script>
import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb";
import Family from "@/views/dataBoard/cpts/family";
export default {
  name: "dissatisfiedPersonnelDetail",
  components: {
    Breadcrumb,
    Family,
  },
  data() {
    return {
      breadcrumbList: [
        {
          path: "/dataBoard/overview/index",
          name: "概览",
        },
        {
          path: "/homeDetails/index",
          name: "",
        },
        {
          path: "",
          name: "",
        },
      ],
    };
  },
  // watch: {
  //   "$route.query.name"() {
  //     this.breadcrumbList[1].name = this.$route.query.name2;
  //   },
  //   "$route.query.name2"() {
  //     this.breadcrumbList[2].name = this.$route.query.name;
  //   },
  // },
  activated() {
    // console.log(this.$route.query);
    const { name, name2, id, buId, type } = this.$route.query;
    this.breadcrumbList[1].name = name2;
    this.breadcrumbList[2].name = name;
    const url = type === "building" ? `/homeDetails/index?id=${id}&buId=${buId}&typeB=${type}` : `/homeDetails/index?id=${buId}&buId=${buId}&typeB=${type}`;
    this.breadcrumbList[1].path = url;
  },
};
</script>

<style scoped lang="scss">
.sub-title {
  background: url("@/assets/images/manyidu/icon_fk.png") no-repeat left center;
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  line-height: 22px;
  padding-left: 26px;
  margin-bottom: 20px;
}
.breadcrumb {
  margin-bottom: 25px;
}
</style>
