<template>
  <div class="mobile">
    <el-row>
      <el-col :span="24">
        <!--首页图片-->
        <div class="top">
          <span v-if="bgImage != null">
            <img :src="bgImage" alt="">
          </span>
          <span v-if="bgImage == null">
            <img src="@/assets/school_profile/bj123.png" alt="">
          </span>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <!--<el-col :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">-->
      <!--  <div class="grid-content"></div>-->
      <!--</el-col>-->
      <el-col :span="22" :offset="1">
        <el-row>
          <el-col>
            <div class="tab">
              <router-link to="/">首页</router-link>
              <span> > </span>
              <router-link to="">{{ crumbs.one.title }}</router-link>
              <span> > </span>
              <span style="color: #1956BC;font-size: 1.4rem">{{ crumbs.two.title }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <Introduction :introduction="contextData" v-if="type === 1"/>
            <List :list="contextData" v-if="type === 2 && listDataType == 0"/>
            <SimpleList :list="contextData" v-if="type === 2 && listDataType == 1"/>
            <FileList :value="contextData" v-if="type === 4"/>
            <DireData :value="contextData" v-if="type === 3 && dreDataType == '1'"/>
            <DireDataTow :value="contextData" v-if="type === 3 && dreDataType == '2'"/>
            <Details :value="detailsData" v-if="type == null"/>
          </el-col>
        </el-row>


      </el-col>
      <!--<el-col :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">-->
      <!--  <div class="grid-content"></div>-->
      <!--</el-col>-->
    </el-row>
  </div>
</template>

<script>
import {getNode, crumbs, article} from "@/api";
import Introduction from '@/views/content/components/Introduction.vue'
import List from '@/views/content/components/list.vue'
import SimpleList from '@/views/content/components/simple_list.vue'
import DireData from '@/views/content/components/dire_data.vue'
import DireDataTow from '@/views/content/components/dire_data_tow.vue'
import Details from '@/views/content/components/details.vue'
import FileList from '@/views/content/components/file_list.vue'
import {handleTree} from "@/utils/ebts";
import {getParentNode, setLanguage, getNodeMenu} from "@/utils/sist";

export default {
  name: "index",
  components: {
    Introduction,
    List,
    DireData,
    Details,
    FileList,
    DireDataTow,
    SimpleList,
  },
  data() {
    return {
      width: document.documentElement.clientWidth,
      navId: null,
      dreDataType: "1",
      listDataType: 0,
      navList: [],
      showIndex: 0,
      contextData: {},
      type: 0,
      bgImage: null,
      crumbs: {
        "two": {
          "title": "学院领导",
        },
        "one": {
          "title": "学院概况",
        }
      },
      menuData: {},
      detailsData: {}
    }
  },
  watch: {
    // $route(to, from) {
    //   console.log(to, "路由跳转")
    //   this.secondId = this.$route.params && this.$route.params.secondId;
    //   this.navId = this.$route.params && this.$route.params.navId;
    //   let arcId = this.$route.query && this.$route.query.id
    //   this.type = this.$route.query && this.$route.query.type
    //   this.getCrumbs()
    //   if (this.type != null&&this.type!=0){
    //     console.log(111,this.navId)
    //     let info = getNodeMenu(this.navId);
    //     if (arcId != undefined) {
    //       this.getContext(arcId)
    //     } else {
    //       this.getContent(info)
    //     }
    //     return
    //   }
    //   if (arcId != undefined) {
    //     this.getContext(arcId)
    //   } else {
    //     this.menuData = getParentNode(this.navId)
    //     console.log(this.menuData, "menuData")
    //     this.getContent(this.menuData.three)
    //   }
    // }
    $route(to, from) {
      console.log(to, "路由跳转")
      this.secondId = this.$route.params && this.$route.params.secondId;
      this.navId = this.$route.params && this.$route.params.navId;
      let arcId = this.$route.query && this.$route.query.id
      this.type = this.$route.query && this.$route.query.type
      this.getCrumbs()
      if (this.type != null && this.type != 0) {
        //当三级菜单id没有是,使用二级
        if (arcId != undefined) {
          console.log("getContext")
          this.getContext(arcId)
          return;
        }
        let info = null;
        if (this.navId == null) {
          console.log("1")
          info = getParentNode(this.secondId);
          this.getContent(info.second)

        } else {
          console.log("2")
          info = getParentNode(this.navId)
          this.getContent(info.three)
        }
      }
    }
  },
  created() {
    setLanguage(this)
    this.secondId = this.$route.params && this.$route.params.secondId;
    this.navId = this.$route.params && this.$route.params.navId;
    this.type = this.$route.query && this.$route.query.type
    setTimeout(() => {
      this.init()
    }, 200);
  },
  methods: {
    init() {
      let arcId = this.$route.params && this.$route.query.id
      this.getCrumbs()
      if (this.type != null && this.type != 0) {
        //当三级菜单id没有是,使用二级
        if (arcId != undefined) {
          console.log("getContext")
          this.getContext(arcId)
          return;
        }
        let info = null;
        if (this.navId == null) {
          console.log("1")
          info = getParentNode(this.secondId);
          this.getContent(info.second)
        } else {
          console.log("2")
          info = getParentNode(this.navId)
          this.getContent(info.three)
        }
        //this.showSecond = false
        // let info = null
        // info = getParentNode(this.secondId);
        // if (info == null) {
        //   location.reload();
        // }
        // let arcId = this.$route.query && this.$route.query.id
        // if (arcId != undefined) {
        //   this.getContext(arcId)
        // } else {
        //   this.getContent(this.menuData.three)
        // }
        // return
      }
      // let arcId = this.$route.params && this.$route.query.id
      // if (arcId != undefined) {
      //   this.getContext(arcId)
      // } else {
      //   console.log(this.menuData, "menuData")
      //   this.getContent(this.menuData.three)
      // }
    },
    /**
     * 获得面包屑导航
     */
    getCrumbs() {
      crumbs(this.secondId).then(res => {
        this.crumbs = res.data
      })
    },

    getContext(arcId) {
      article(arcId).then(res => {
        console.log(res);
        this.detailsData = res.data.data
        this.type = null
      })
    },
    getContent(menu) {
      console.log(menu)
      // let menu = this.menuData.three
      this.type = menu.type
      this.contextData = null
      this.bgImage = menu.link
      let data = null
      if (this.type === 2 || this.type === 4) {
        data = {
          id: menu.encodeId,
          pageNum: 1,
          pageSize: 5
        }
        this.listDataType = 0
        if (this.type === 4||menu.isSimple == 1) {
          data.pageSize = 20
          this.listDataType = 1
        }
      } else {
        data = {
          id: menu.encodeId,
        }
      }
      getNode(data).then(res => {
        if (this.type === 2 || this.type === 4) {
          this.contextData = {
            data: res.rows,
            total: res.total,
            pageNum: data.pageNum,
            pageSize: data.pageSize,
            navId: this.navId,
            secondId: this.secondId,
          }
        } else if (this.type == 1) {
          this.contextData = res.data
        } else if (this.type == 3) {
          if (res.additional == "") {
            this.dreDataType = "1"
          } else {
            this.dreDataType = res.additional
          }
          this.contextData = handleTree(res.data, "id", "pid", null, null)
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
.top {
  img {
    width: 100%;
  }
}

.left_lab {
  margin-left: 4rem;
  width: 22rem;
  height: 48rem;
  background: #1956BC;
  border-radius: 0rem 0rem 2rem 0rem;
  position: relative;

  .lab {
    font-size: 1.6rem;
    position: absolute;
    left: 4.8rem;
    top: 5rem;
    width: 19rem;
    margin-bottom: 3rem;
    background: #FFFFFF;
    box-shadow: 0rem 0.2rem 0.4rem 0rem rgba(6, 42, 102, 0.67);
    border-radius: 0rem 0rem 2.5rem 2rem;

    .lab_list:last-child {
      border: none;
    }

    .lab_div {
      border-bottom: 0.1rem solid #94BCFF !important;
      //margin-left: 1rem;
      width: 100%;
    }

    .lab_div:last-child {
      border-bottom: none !important;
      padding-bottom: 1.5rem;
    }

    .lab_list {
      cursor: pointer;
      text-align: center;
      width: 18rem;
      height: 8rem;
      clear: left;
      line-height: 8rem;

      .lab_img {
        margin-top: .2rem;
        float: left;
        width: 1.4rem;
        height: 1.4rem;
        display: none;
        margin-left: 4rem;

        img {
          width: 100%;
        }
      }

      .lab_title {
        color: #1956BC;
        float: left;
        margin-left: 6rem;
      }
    }

    .lab_select {
      background: #94BCFF;

      .lab_img {
        display: block;
      }

      .lab_title {
        color: #FFFFFF;
        margin-left: .4rem;
      }
    }
  }
}

.tab {
  margin-left: 1.9rem;
  margin-top: 1.5rem;
  font-weight: 400;

  a {
    text-decoration: none;
    font-size: 1.4rem !important;
    color: #3C3C3C;
  }
}

@media screen and (max-width: 980px) {
  .left_lab {
    margin-left: 3rem;
    width: 16.5rem;
    height: 36rem;

    border-radius: 0rem 0rem 1rem 0rem;

    .lab {
      left: 3.6rem;
      top: 3.75rem;
      width: 14.25rem;
      margin-bottom: 2.25rem;
      border-radius: 0rem 0rem 1.2rem 1rem;

      .lab_list {
        margin-left: .75rem;
        width: 13.5rem;
        height: 6rem;
        line-height: 6rem;

        .lab_img {
          margin-top: .1rem;
          width: 1.05rem;
          height: 1.05rem;
          display: none;
          margin-left: 3rem;
        }

        .lab_title {
          margin-left: 1.5rem;
        }
      }

    }
  }
}
</style>
