<template>
  <div style="background: #f5f5f5">
    <div class="autoBox box1" style="position: relative">
      <el-breadcrumb separator="/" style="float: left; margin-left: 15px">
        <el-breadcrumb-item :to="{ path: 'home' }">{{
          $t("common.Home")
        }}</el-breadcrumb-item>
        <el-breadcrumb-item
          ><span
            @click="screenIndex = 'introduc'"
            style="font-weight: 700; cursor: pointer; color: #303133"
            >{{ $t("common.NationalregionalCommissions") }}</span
          ></el-breadcrumb-item
        >
        <el-breadcrumb-item>{{ $t(Screens) }}</el-breadcrumb-item>
        <el-breadcrumb-item
          v-if="
            screenIndex == 'workspace' ||
            screenIndex == 'application' ||
            screenIndex == 'allInformation'
          "
          >{{ $t("common.RegionalWorkspace") }}</el-breadcrumb-item
        >
        <el-breadcrumb-item v-if="screenIndex == 'comments'">{{
          $t("common.opinionsSuggestions")
        }}</el-breadcrumb-item>

        <el-breadcrumb-item
          v-if="
            screenIndex == 'submitComment' || screenIndex == 'receiveComment'
          "
          >{{ $t("common.detail") }}</el-breadcrumb-item
        >

        <el-breadcrumb-item v-if="screenIndex == 'noticeList'">{{
          $t("common.Notice")
        }}</el-breadcrumb-item>
      </el-breadcrumb>

      <el-breadcrumb
        separator="/"
        style="float: right; margin: 0px 15px 15px 0"
      >
        <span
          class="cursor"
          :class="screenIndex == item.value ? 'screen1' : 'screen2'"
          @click="realTimeInfoScreen(item, index)"
          v-for="(item, index) in realTimeInfoScreens"
        >
          &nbsp;&nbsp;{{ $t(item.lable) }} &nbsp;&nbsp;
        </span>
      </el-breadcrumb>
    </div>
    <!-- 委员会公文列表 -->
    <CommitteeOfficialDocumentList
      v-if="screenIndex == 'documentList'"
      @applicationType="toApplicationType"
    ></CommitteeOfficialDocumentList>
    <!-- 委员会通知公告列表详情 -->
    <CommitteeNoticeListDetail
      v-if="screenIndex == 'noticeDetail'"
      :category="category"
      :detailID="detailId"
      @applicationType="toApplicationType"
      @noticeDetail="toNoticeDetail"
    ></CommitteeNoticeListDetail>
    <!-- 委员会通知公告列表 -->
    <CommitteeNoticeList
      v-if="screenIndex == 'noticeList'"
      @applicationType="toApplicationType"
    ></CommitteeNoticeList>
    <!-- 委员会建议与意见详情提交 -->
    <CommitteeCommentsAndSuggestionsDetailSubmit
      v-if="screenIndex == 'submitComment'"
      :detailID="detailId"
      :category="category"
      @applicationType="toApplicationType"
      @commentDetail="toCommentDetail"
    ></CommitteeCommentsAndSuggestionsDetailSubmit>
    <!-- 委员会建议与意见详情接收 -->
    <CommitteeCommentsAndSuggestionsDetail
      v-if="screenIndex == 'receiveComment'"
      :detailID="detailId"
      :category="category"
      @applicationType="toApplicationType"
      @commentDetail="toCommentDetail"
    ></CommitteeCommentsAndSuggestionsDetail>
    <!-- 委员会建议与意见 -->
    <CommitteeCommentsAndSuggestions
      v-if="screenIndex == 'comments'"
      @applicationType="toApplicationType"
    ></CommitteeCommentsAndSuggestions>
    <!-- 委员会全部资料列表 -->
    <CommitteeInformationList
      v-if="screenIndex == 'allInformation'"
      @applicationType="toApplicationType"
    ></CommitteeInformationList>
    <!--互动留言 -->
    <Interacivemessage
      v-if="screenIndex == 'interactive'"
      @applicationType="toApplicationType"
    ></Interacivemessage>
    <!--    创建申请-->
    <Submitapplication
      v-if="screenIndex == 'submitapplication'"
      :flag="flag"
      @applicationType="toApplicationType"
    >
    </Submitapplication>
    <!--   成功--->
    <Submitapplicasuccess
      v-if="screenIndex == 'submitapplicasuccess'"
      :detailids="detailids"
      :successObj="successObj"
      :flag="flag"
      @applicationType="toApplicationType"
    >
    </Submitapplicasuccess>
    <!--      带审批详情-->
    <Approvaldetail
      v-if="screenIndex == 'approvaldetail'"
      :detailids="detailids"
      :flag="flag"
      :logo="logo"
      @applicationType="toApplicationType"
    >
    </Approvaldetail>
    <!--    撤回详情-->
    <Withdrawdetail
      v-if="screenIndex == 'withdrawdetail'"
      :detailids="detailids"
      :reserveone_s="reserveone_s"
      :flag="flag"
      :logo="logo"
      @applicationType="toApplicationType"
    >
    </Withdrawdetail>
    <!--    审批完成详情-->
    <Approvalfinish
      v-if="screenIndex == 'approvalfinish'"
      :detailids="detailids"
      :flag="flag"
      :logo="logo"
      @applicationType="toApplicationType"
    >
    </Approvalfinish>
    <!--    不通过详情-->
    <Nopassdetail
      v-if="screenIndex == 'nopassdetail'"
      :detailids="detailids"
      :flag="flag"
      :logo="logo"
      @applicationType="toApplicationType"
    >
    </Nopassdetail>
    <Approvals
      v-if="screenIndex == 'approvals'"
      :detailids="detailids"
      :logo="logo"
      @applicationType="toApplicationType"
    >
    </Approvals>
    <!-- 委员会申请列表 -->
    <CommitteeApplicationList
      v-if="screenIndex == 'application'"
      :isDistinguish="distinguish"
      :logo="logo"
      @applicationType="toApplicationType"
    ></CommitteeApplicationList>
    <!-- 委员会工作空间 -->
    <CommitteeWorkSpace
      v-if="screenIndex == 'workspace'"
      @applicationType="toApplicationType"
    ></CommitteeWorkSpace>

    <NationaIntroductionCommissions
      @showWorkSpace="toShowWorkSpace"
      v-if="screenIndex == 'introduc'"
    ></NationaIntroductionCommissions>
    <!-- 委员会简介 -->
    <NationaIntroductionCommitteeLayout
      v-if="screenIndex == 'layout'"
    ></NationaIntroductionCommitteeLayout
    ><!-- 委员会布局 -->
    <NationaIntroductionCommitteeActivities
      v-if="screenIndex == 'activities'"
    ></NationaIntroductionCommitteeActivities
    ><!-- 委员会活动 -->
    <CommitteeInformation
		    @showWorkSpace="toShowWorkSpace"
      v-if="screenIndex == 'information'"
    ></CommitteeInformation>
    <!-- 委员会资料 -->
  </div>
</template>
<script>
import NationaIntroductionCommissions from "@/views/NationalregionalCommissions/NationaIntroductionCommissions"; // 委员会简介
import NationaIntroductionCommitteeLayout from "@/views/NationalregionalCommissions/NationaIntroductionCommitteeLayout"; //  委员会布局
import NationaIntroductionCommitteeActivities from "@/views/NationalregionalCommissions/NationaIntroductionCommitteeActivities"; // 委员会活动
import CommitteeInformation from "@/views/NationalregionalCommissions/CommitteeInformation"; // 委员会资料
import CommitteeWorkSpace from "@/views/NationalregionalCommissions/CommitteeWorkSpace"; // 委员会工作空间
import CommitteeApplicationList from "@/views/NationalregionalCommissions/CommitteeApplicationList"; // 委员会申请列表
import CommitteeInformationList from "@/views/NationalregionalCommissions/CommitteeInformationList"; // 委员会全部资料
import CommitteeCommentsAndSuggestions from "@/views/NationalregionalCommissions/CommitteeCommentsAndSuggestions"; // 委员会建议与意见
import CommitteeCommentsAndSuggestionsDetail from "@/views/NationalregionalCommissions/CommitteeCommentsAndSuggestionsDetail"; // 委员会建议与意见详情接收
import CommitteeCommentsAndSuggestionsDetailSubmit from "@/views/NationalregionalCommissions/CommitteeCommentsAndSuggestionsDetailSubmit"; // 委员会建议与意见详情提交
import Interacivemessage from "@/views/interactivemsg/Interacivemessage"; // 互动留言
import Submitapplication from "@/views/NationalregionalCommissions/Submitapplication"; // 创建申请
import Submitapplicasuccess from "@/views/NationalregionalCommissions/Submitapplicasuccess"; // 创建申请
import Approvaldetail from "@/views/NationalregionalCommissions/Approvaldetail"; // 待审批详情
import Withdrawdetail from "@/views/NationalregionalCommissions/Withdrawdetail"; // 待审批详情
import Nopassdetail from "@/views/NationalregionalCommissions/Nopassdetail"; // 待审批详情
import Approvalfinish from "@/views/NationalregionalCommissions/Approvalfinish"; // 待审批详情
import CommitteeNoticeList from "@/views/NationalregionalCommissions/CommitteeNoticeList"; // 委员会通知公告列表
import CommitteeNoticeListDetail from "@/views/NationalregionalCommissions/CommitteeNoticeListDetail"; // 委员会通知公告列表详情
import CommitteeOfficialDocumentList from "@/views/NationalregionalCommissions/CommitteeOfficialDocumentList"; // 委员会公文列表
import Approvals from "@/views/NationalregionalCommissions/Approvals";
export default {
  name: "NationalregionalCommissions",
  components: {
    NationaIntroductionCommissions,
    NationaIntroductionCommitteeLayout,
    NationaIntroductionCommitteeActivities,
    CommitteeWorkSpace,
    CommitteeApplicationList,
    CommitteeInformationList,
    CommitteeCommentsAndSuggestions,
    CommitteeCommentsAndSuggestionsDetail,
    CommitteeCommentsAndSuggestionsDetailSubmit,
    Interacivemessage,
    Submitapplication,
    Submitapplicasuccess,
    Approvaldetail,
    CommitteeNoticeList,
    CommitteeNoticeListDetail,
    CommitteeOfficialDocumentList,
    CommitteeInformation,
    Withdrawdetail,
    Approvalfinish,
    Nopassdetail,
    Approvals,
  },
  data() {
    return {
      screenIndex: this.$route.query.key ? this.$route.query.key : "introduc",
      Screens: this.$route.params.lable
        ? this.$route.params.lable
        : "common.BriefintroductiontotheCommittee",
      realTimeInfoScreens: [
        {
          lable: "common.introduction",
          value: "introduc",
        },
        {
          lable: "common.Committeelayout",
          value: "layout",
        },
        {
          lable: "common.Committeeactivities",
          value: "activities",
        },
        // {
        //   lable: "common.committeeInformation",
        //   value: "information",
        // },
      ],
      text: null,
      distinguish: null,
      detailId: "",
      detailids: undefined,
      category: "",
      successObj: undefined,
      reserveone_s: undefined,
      flag: undefined,
      logo: undefined,
    };
  },
  mounted() {
    // this.controlWorkspace()
  },
  watch: {
    "this.$route.params.key"() {
      this.text = "2121";
    },
  },
  methods: {
    realTimeInfoScreen(i, index) {
      this.screenIndex = i.value;
      this.Screens = i.lable;
    },
    toShowWorkSpace(data) {
      this.screenIndex = data;
    },
    toApplicationType(data) {
      this.screenIndex = data.name;
      this.distinguish = data.type;
      this.detailId = data.id;
      this.category = data.category || "";
      this.successObj = data.successObj;
      this.detailids = data.detailids;
      this.reserveone_s = data.reserveone_s;
      this.flag = data.flag;
      this.logo = data.logo;
    },
    toCommentDetail(data) {
      this.screenIndex = data;
      console.log(data);
    },
    toNoticeDetail(data) {
      this.screenIndex = data;
    },
    toSubmitapplication(data) {
      console.log("hahah");
      this.screenIndex = data;
    },
  },
  computed: {},
};
</script>
  <style scoped>
.box1 {
  margin-top: 10px;
  background: #fff;
  /* height: 500px; */
  padding: 24px 0;
  position: absolute;
}
.crumbs {
  margin-left: 20px;
}
.screen1 {
  background: linear-gradient(180deg, #3280e2 0%, #144e97 100%);
  border-radius: 20px 20px 20px 20px;
  padding: 8px 12px;
  color: #f0f3f8;
  margin-left: 10px;
}
.screen2 {
  font-size: 14px;
  background: linear-gradient(180deg, #b4d5ff 0%, #4f81bf 100%);
  border-radius: 20px;
  padding: 8px 12px;
  color: #165099;
  margin-left: 10px;
}
</style>
