<template>
  <div class="nav_leftSix">
    <div class="nav_left" :class="tree ? 'border_right':''">
      <el-tooltip class="item" effect="dark" content="结构树" placement="right">
        <img class="nor" v-if="!tree" @click="treeOn" src="@/assets/jiegoushu_nor.png">
        <img class="pre" v-else @click="treeOff" src="@/assets/jiegoushu_pre.png">
      </el-tooltip>
    </div>
    <div class="nav_left" :class="warehouse ? 'border_right':''">
      <el-tooltip class="item" effect="dark" content="构件库" placement="right">
        <img class="nor" v-if="!warehouse" @click="warehouseOn" src="@/assets/goujianku_nor.png">
        <img class="pre" v-if="warehouse" @click="warehouseOff" src="@/assets/goujianku_pre.png">
      </el-tooltip>
    </div>
    <div style="hegiht:1px;width:59px;margin-top: 22px;border-bottom: solid 1px #e6e8ec;"></div>
    <div class="nav_left" style="margin-top: 22px;" :class="viewpoint ? 'border_right':''">
      <el-tooltip class="item" effect="dark" content="视点" placement="right">
        <img class="nor" v-if="!viewpoint" @click="viewpointOn" src="@/assets/shidian_nor.png">
        <img class="pre" v-if="viewpoint" @click="viewpointOff" src="@/assets/shidian_pre.png">
      </el-tooltip>
    </div>
    <div class="nav_left" :class="WebMark ? 'border_right':''">
      <el-tooltip class="item" effect="dark" content="标记" placement="right">
        <img class="nor" v-if="!WebMark" @click="WebMarkOn" src="@/assets/biaoji_nor.png">
        <img class="pre" v-if="WebMark" @click="WebMarkOff" src="@/assets/biaoji_pre.png">
      </el-tooltip>
    </div>
    <div class="nav_left" :class="basicInfo ? 'border_right':''">
      <el-tooltip class="item" effect="dark" content="属性" placement="right">
        <img class="nor" v-if="!basicInfo" @click="basicInfoOn" src="@/assets/shuxing_nor.png">
        <img class="pre" v-if="basicInfo" @click="basicInfoOff" src="@/assets/shuxing_pre.png">
      </el-tooltip>
    </div>
    <div class="nav_left" :class="modelManage ? 'border_right':''">
      <el-tooltip class="item" effect="dark" content="模型管理" placement="right">
        <img
          class="nor"
          v-if="!modelManage"
          @click="modelManageOn"
          src="@/assets/moxingguanli_nor.png"
        >
        <img
          class="pre"
          v-if="modelManage"
          @click="modelManageOff"
          src="@/assets/moxingguanli_pre.png"
        >
      </el-tooltip>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WebSidebar',
  data() {
    return {
      tree: false,
      warehouse: false,
      viewpoint: false,
      WebMark: false,
      basicInfo: false,
      modelManage: false
    };
  },
  watch: {},
  methods: {
    treeOn() {
      // 结构树
      this.tree = true;
      this.$emit('treeSwitch', true);
      // this.$eventHub.$emit("bus-treeSearch");
    },
    treeOff() {
      this.tree = false;
      this.$emit('treeSwitch', false);
    },
    treeChangeColor(val) {
      this.tree = val;
    },
    warehouseOn() {
      // 构件库
      this.warehouse = true;
      this.$emit('warehouseSwitch', true);
    },
    warehouseOff() {
      // 构件库
      this.warehouse = false;
      this.$emit('warehouseSwitch', false);
    },
    warehouseChangeColor(val) {
      this.warehouse = val;
    },
    viewpointOn() {
      // 视点
      this.WebMarkOff();
      this.basicInfoOff();
      this.viewpoint = true;
      this.$emit('viewpointSwitch', true);
      this.$eventHub.$emit('bus-viewpointSwitch', 'a391ed0c-c017-4008-8751-5d43a66ec1d5');
    },
    viewpointOff() {
      // 视点
      this.viewpoint = false;
      this.$emit('viewpointSwitch', false);
    },
    viewpointChangeColor(val) {
      this.viewpoint = val;
    },
    WebMarkOn() {
      // 标记
      this.viewpointOff();
      this.basicInfoOff();
      this.WebMark = true;
      this.$emit('WebMarkSwitch', true);
    },
    WebMarkOff() {
      // 标记
      this.WebMark = false;
      this.$emit('WebMarkSwitch', false);
    },
    WebMarkChangeColor(val) {
      this.WebMark = val;
    },
    basicInfoOn() {
      // 基本信息
      this.WebMarkOff();
      this.viewpointOff();
      this.basicInfo = true;
      this.$emit('basicInfoSwitch', true);
    },
    basicInfoOff() {
      // 基本信息
      this.basicInfo = false;
      this.$emit('basicInfoSwitch', false);
    },
    basicInfoChangeColor(val) {
      // console.log('===========basi val', val);
      if (val === 'fromViewModel') {
        this.basicInfoOn();
        this.$emit('basicInfoSwitch', true);
      }
      this.basicInfo = val;
    },
    // 模型管理
    modelManageOn() {
      this.treeOff();
      this.warehouseOff();
      this.WebMarkOff();
      this.viewpointOff();
      this.basicInfoOff();
      this.modelManage = true;
      this.$emit('modelManageSwitch', true);
    },
    imgChange(val) {
      // 截图时关掉其他组件
      if (val === false) {
        this.treeOff();
        this.warehouseOff();
        this.viewpointOff();
        this.basicInfoOff();
        this.WebMarkOff();
      } else if (val === true) {
        this.treeOn();
        this.WebMarkOn();
      }
    },
    // 模型管理
    modelManageOff() {
      this.$eventHub.$emit('bus-conversionViewSwitch', false);
      this.modelManage = false;
      this.$emit('modelManageSwitch', false);
    },
    modelManageChangeColor(val) {
      this.modelManage = val;
    },
  },
  computed: {},
  created: function() {
    const pro = window.location.search.indexOf('from=mbp') !== -1;
    if (pro) {
      this.WebMarkOn();
    }
    // this.$eventHub.$on('bus-img', this.imgChange);
    this.$eventHub.$on('bus-treeSwitch', this.treeChangeColor);
    this.$eventHub.$on('bus-warehouseSwitch', this.warehouseChangeColor);
    this.$eventHub.$on('bus-viewpointSwitch', this.viewpointChangeColor);
    this.$eventHub.$on('bus-WebMarkSwitch', this.WebMarkChangeColor);
    this.$eventHub.$on('bus-basicInfoSwitch', this.basicInfoChangeColor);
    this.$eventHub.$on('bus-modelManageSwitch', this.modelManageChangeColor);
  },
  beforeMount: function() { },
  mounted: function() { },
  beforeDestroy: function() { },
  destroyed: function() { },
  directives: {}
};
</script>
