<template>
  <div class="content">
    <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>

    <div style="background-color:#F8F8F8 ; padding-bottom: 19rem">
      <!--有三级菜单-->
      <el-row v-show="showSecond">
        <el-col v-if="$i18n.locale  === 'cn'" :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">
          <div class="grid-content"></div>
        </el-col>
        <el-col v-if="$i18n.locale  === 'cn'" v-show="width" :md="6" :lg="6" :xl="4">
          <div class="left_lab" ref="lab">
            <div class="lab" v-if="navList">
              <div v-for="(nav,index) in navList" class="lab_div">
                <div v-if="index === showIndex&& nav" class="lab_list lab_select" @click="navClick(nav,index)">
                  <div class="lab_img">
                    <img src="@/assets/school_profile/eji_icon_xz.png" alt="">
                  </div>
                  <div class="lab_title">
                    {{ nav.title }}
                  </div>
                </div>
                <div v-if="index !== showIndex&& nav" class="lab_list" @click="navClick(nav,index)">
                  <div class="lab_img">
                    <img src="@/assets/school_profile/eji_icon_xz.png" alt="">
                  </div>
                  <div class="lab_title">
                    {{ nav.title }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>


        <el-col v-if="$i18n.locale  === 'en'" :xs="2" :sm="2" :md="2" :lg="2" :xl="3">
          <div class="grid-content"></div>
        </el-col>

        <el-col v-if="$i18n.locale  === 'en'" v-show="width" :md="6" :lg="6" :xl="5">
          <div class="left_lab english" ref="lab">
            <div class="lab">
              <div v-for="(nav,index) in navList" class="lab_div">
                <div v-if="index === showIndex" class="lab_list lab_select" @click="navClick(nav,index)">
                  <div class="lab_img">
                    <img src="@/assets/school_profile/eji_icon_xz.png" alt="">
                  </div>
                  <div class="lab_title">
                    {{ nav.englishTitle }}
                  </div>
                </div>
                <div v-if="index !== showIndex" class="lab_list" @click="navClick(nav,index)">
                  <div class="lab_img">
                    <img src="@/assets/school_profile/eji_icon_xz.png" alt="">
                  </div>
                  <div class="lab_title">
                    {{ nav.englishTitle }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>


        <!--<el-col v-if="$i18n.locale  === 'cn'" :xs="20" :sm="20" :md="15" :lg="14" :xl="12">-->
        <el-col :xs="20" :sm="20" :md="15" :lg="14" :xl="12">
          <el-row>
            <el-col>
              <div class="tab">
                <router-link style="color: #1956BC; font-size: 16px;" to="/home">{{ $t('message.home') }}</router-link>
                <span> > </span>
                <span>
                <!--<router-link to="">-->
                <span v-if="$i18n.locale  === 'cn'">{{ crumbs.one.title }}</span>
                <span v-if="$i18n.locale  === 'en'">{{ crumbs.one.englishTitle }}</span>
                  <!--</router-link>-->
                </span>
                <span> > </span>
                <span>
                  <span v-if="$i18n.locale  === 'cn'">{{ crumbs.two.title }}</span>
                  <span v-if="$i18n.locale  === 'en'">{{ crumbs.two.englishTitle }}</span>
                </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-row>
      <!--无三级菜单-->
      <el-row v-show="!showSecond">
        <el-col :xs="2" :sm="2" :md="2" :lg="4" :xl="5">
          <div class="grid-content"></div>
        </el-col>
        <el-col :xs="20" :sm="20" :md="20" :lg="16" :xl="14">
          <el-row>
            <el-col>
              <div class="tab">
                <router-link style="color: #1956BC; font-size: 16px;" to="/">{{ $t('message.home') }}</router-link>
                <span> > </span>
                <span>
                <!--<router-link to="">-->
                  <span v-if="$i18n.locale  === 'cn'">{{ crumbs.one.title }}</span>
                  <span v-if="$i18n.locale  === 'en'">{{ crumbs.one.englishTitle }}</span>
                  <!--</router-link>-->
                </span>
                <span> > </span>
                <span>
                <!--<router-link to="">-->
                  <span v-if="$i18n.locale  === 'cn'">{{ crumbs.two.title }}</span>
                  <span v-if="$i18n.locale  === 'en'">{{ crumbs.two.englishTitle }}</span>
                  <!--</router-link>-->
                </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="2" :lg="4" :xl="5">
          <div class="grid-content"></div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

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

export default {
  name: "index",
  components: {
    Introduction,
    List,
    DireData,
    Details,
    FileList,
    DireDataTow,
    SimpleList
  },
  data() {
    return {
      width: document.documentElement.clientWidth > 992,
      secondId: null,
      navId: null,
      dreDataType: "",
      listDataType: 0,
      navList: [],
      showIndex: 0,
      showSecond: true,
      contextData: {},
      type: 2,
      bgImage: null,
      crumbs: {
        "two": {
          "title": "学院领导",
        },
        "one": {
          "title": "学院概况",
        }
      },
      detailsData: {}
    }
  },
  watch: {
    $route(to, from) {
      console.log("我被触发了")
      this.showIndex = 0
      let arcId = this.$route.params && this.$route.query.id
      this.navId = this.$route.params && this.$route.params.navId;
      let id = this.$route.params && this.$route.params.secondId
      this.type = this.$route.query && this.$route.query.type
      if (this.type == 3 || this.type == 1 || this.type == 2) {
        this.secondId = id
        this.getCrumbs();
        this.showSecond = false
        let info = getParentNode(this.secondId);
        console.log("获取到info", info)
        if (arcId != undefined) {
          console.log("getContext")
          this.getContext(arcId)
        } else {
          console.log("getContent")
          this.getContent(info.second)
        }
        return
      } else {
        console.log(this.navId, "this.navId")
        if (undefined == this.navId) {
          this.getNodes()
        }
      }
      this.showSecond = true
      if (arcId != undefined) {
        this.getContext(arcId)
      }
      try {
        this.$refs.lab.style.height = this.navList.length * 8 + 10 + 'rem'
      } catch (e) {
      }
      if (this.secondId == id && this.navList) {
        for (let i = 0; i < this.navList.length; i++) {
          if (this.navId == this.navList[i].encodeId) {
            this.showIndex = i
            this.getContent(this.navList[i])
          }
        }
      } else {
        this.navList = []
        this.secondId = id
        this.getNav()
      }
    }
  },
  created() {
    setLanguage(this)
    this.showIndex = 0
    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
    console.log(this.type, "this.type")
    setTimeout(() => {
      this.getNav()
    }, 200);
    //this.getNav()
    this.getCrumbs();
  },
  methods: {
    /**
     * 获得面包屑导航
     */
    getCrumbs() {
      crumbs(this.secondId).then(res => {
        this.crumbs = res.data
      })
    },
    /**
     * 获得内容
     * @param arcId
     */
    getContext(arcId) {
      article(arcId).then(res => {
        this.detailsData = res.data.data
        this.type = null
      })
    },
    /**
     *  获得菜单下的信息
     */
    getNav() {
      this.getCrumbs();
      if (this.type == 3 || this.type == 1 || this.type == 2) {
        console.log("进入二级")
        this.showSecond = false
        let info = null
        info = getParentNode(this.secondId);
        if (info == null) {
          location.reload();
        }
        let arcId = null

        arcId = this.$route.query && this.$route.query.id
        console.log(arcId)
        if (arcId != undefined) {
          this.getContext(arcId)
        } else {
          console.log("获取二级列表")
          this.getContent(info.second)
        }
        return
      }
      this.showSecond = true
      this.getNodes()
    },

    /**
     * 获得节点信息
     */
    async getNodes() {
      this.navList = []
      // await getNode({id: this.secondId}).then(res => {
      //   this.navList = res.data
      //   try {
      //     setTimeout(() => {
      //       this.$refs.lab.style.height = this.navList.length * 8 + 10 + 'rem'
      //     }, 100);
      //   } catch (e) {
      //     console.log(e)
      //   }
      //   // if (!this.navList){
      //   //   return
      //   // }
      //   for (let i = 0; i < this.navList.length; i++) {
      //     if (this.navId == this.navList[i].encodeId) {
      //       this.showIndex = i
      //     }
      //   }
      //   let arcId = this.$route.query && this.$route.query.id
      //   if (arcId != undefined) {
      //     this.getContext(arcId)
      //   } else {
      //     console.log("测试,我被触发了!")
      //     if (this.navId == undefined) {
      //       this.getContent(this.navList[0])
      //     } else {
      //       this.getContent(this.navList[this.showIndex])
      //     }
      //   }
      // })
      let res = await getNode({id: this.secondId})
      // todo 延时异步问题
      setTimeout(() => {
        this.$refs.lab.style.height = res.data.length * 8 + 10 + 'rem'
      }, 100);
      this.navList = res.data
      // if (!this.navList){
      //   return
      // }
      for (let i = 0; i < this.navList.length; i++) {
        if (this.navId == this.navList[i].encodeId) {
          this.showIndex = i
        }
      }
      let arcId = this.$route.query && this.$route.query.id
      if (arcId != undefined) {
        this.getContext(arcId)
      } else {
        console.log("测试,我被触发了!")
        if (this.navId == undefined) {
          this.getContent(this.navList[0])
        } else {
          this.getContent(this.navList[this.showIndex])
        }
      }
    },
    /**
     * 获取三级菜单
     * @param menu
     */
    getContent(menu) {
      console.log("getContent内部,menu:", menu)
      console.log(menu)
      if (menu == undefined) {
        return
      }
      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 = 10
          this.listDataType = 1
        }
      } else {
        data = {
          id: menu.encodeId,
        }
      }
      getNode(data).then(res => {
        console.log(res, "res值")
        console.log(this.type);
        if (null == res.data && null == res.rows) {
          this.contextData = null
          console.log("将值设为null", this.contextData)
          this.type = 0
          return
        }
        if (this.type === 2 || this.type === 4) {
          this.contextData = {
            data: res.rows,
            total: res.total,
            pageNum: data.pageNum,
            pageSize: data.pageSize,
            navId: menu.encodeId,
            secondId: this.secondId,
          }
        } else if (this.type == 1) {
          this.contextData = res.data
        } else if (this.type == 3) {
          if (res.additional == "") {
            this.dreDataType = "1"
          } else {
            console.log(this.dreDataType, "this.organizationType")
            this.dreDataType = res.additional
          }
          this.contextData = handleTree(res.data, "id", "pid", null, null)
          console.log(this.contextData, "this.contextData")
        }
      })
    },


    /**
     * 菜单点击,路由切换
     * @param nav
     * @param index
     */
    navClick(nav, index) {
      //if (index != this.showIndex) {
      this.showIndex = index
      this.type = nav.type
      this.$router.push("/pc/" + this.secondId + "/" + nav.encodeId + "?lang=" + sessionStorage.getItem("lang"));
      //this.getContent(nav)
      //}
    }
  },
}
</script>

<style scoped lang="scss">
.content {
  background-color: #F8F8F8 !important;
}

.english {
  margin: 0 !important;
  width: 80% !important;

  .lab {
    width: 100% !important;
  }

  .lab_list {
    width: 100% !important;
  }
}

.context {
  background-color: #ffffff;
}

.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: 20rem;
    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: 19rem;
      height: 8rem;
      clear: left;
      line-height: 8rem;

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

        img {
          width: 100%;
        }
      }

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

    .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;
  font-size: 1.6rem;

  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>
