<template>
  <el-container class="fullheight">
    <el-aside width="130px" v-if="!$route.meta.single">
      <el-card shadow="never">
        <div slot="header" class="clearfix">
          <b class="aside_top_title">{{ currentMenu.name }}</b>
        </div>
        <el-menu
          :default-active="activeMenuIndex"
          unique-opened
          active-text-color="#409EFF"
        >
          <template v-for="menu in menus">
            <el-menu-item
              v-if="!menu.children || menu.children.length == 0"
              :key="menu.id"
              :index="menu.id"
              @click.native="handleSelect(menu)"
              >{{ menu.name }}</el-menu-item
            >
            <el-submenu v-else :key="menu.id" :index="menu.alias">
              <template slot="title">{{ menu.name }}</template>
              <template v-if="menu.children && menu.children.length > 0">
                <el-menu-item
                  v-for="item in menu.children"
                  :key="item.id"
                  :index="item.id"
                  @click.native="handleSelect(item)"
                  >{{ item.name }}</el-menu-item
                >
              </template>
            </el-submenu>
          </template>
        </el-menu>
      </el-card>
    </el-aside>
    <el-container>
      <el-header style="height:auto">
        <!--<div v-for="(item,index) in tagTypes">
            <label class="el-form-item__label">{{item.name}}</label>
          </div>-->
        <!--<el-form :model="selectMap">
              <el-form-item v-for="(item,index) in tagTypes" :label="item.name">
                <el-checkbox-group v-model="selectMap[item.id]" @change="groupSelect">
                  <el-checkbox size="mini" label="全部"></el-checkbox>
                  <el-checkbox size="mini" v-for="tag in tagMap[item.id]" :label="tag.name" @change="tagSelect" name=""></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>-->
        <el-row>
          <el-col :span="18">
            <div
              v-for="(item, index) in tagTypes"
              style="padding-left: 15px; padding-bottom: 10px"
              class="tagList"
              :key="index"
            >
              <div style="padding-right: 10px">
                <el-tag type="info" size="medium">{{ item.name }}</el-tag>
              </div>
              <el-button
                :type="selectAllStatus[item.id] ? 'primary' : 'default'"
                size="medium"
                round
                style="padding: 3px 15px"
                @click="selectAll(item.id)"
                >全部</el-button
              >
              <div style="padding-left: 10px" v-for="tag in tagMap[item.id]">
                <el-tag
                  :type="tagStatus[tag.id] ? '' : 'info'"
                  @click="tagClick(tag.id, item.id)"
                  size="medium"
                  style="cursor: pointer"
                  >{{ tag.name }}</el-tag
                >
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <el-input
              placeholder="请输入关键词"
              v-model="searchWord"
              @change="search"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="search"
              ></el-button>
            </el-input>
          </el-col>
        </el-row>
      </el-header>
      <el-main class="tab-container">
        <el-row>
          <el-tabs
            v-model="activeTab"
            @tab-click="tabClick"
            class="fullheight"
            v-if="tabs.length > 0"
          >
            <el-tab-pane
              v-for="tab in tabs"
              :key="tab.id"
              :label="tab.name"
              :name="tab.id"
            >
              <app-main :apps="apps" :pageResult="pageResult"></app-main>
            </el-tab-pane>
          </el-tabs>
          <app-main :apps="apps" :pageResult="pageResult" v-else></app-main>
        </el-row>
      </el-main>
    </el-container>
  </el-container>
  <!-- <el-dialog
      title="搜索结果"
      :visible.sync="searchDialogVisible"
      :fullscreen="true"
      @closed="searchDialogClose"
    >
      <app-main :apps="searchResultApps" :pageResult="pageResult"></app-main>
    </el-dialog> -->
</template>

<script>
import portal from '@/api/portal.js'
import appMain from '@/components/appCenter/AppMain.vue'
import {mapState} from 'vuex'
import req from '@/request.js'
export default {
  name: 'app-center',
  components: {
    appMain
  },
  data() {
    return {
      apps: [],
      pageResult: {
        page: 1,
        pageSize: 24,
        total: 0
      },
      menus: [],
      activeMenuIndex: '',
      activeTab: '',
      tabs: [],
      tagTypes: [],
      selectAllStatus: {},
      tagMap: {},
      tagStatus: {},
      currentMenuId: '',
      searchWord: '',
      searchDialogVisible: false,
      searchResultApps: []
    }
  },
  computed: mapState({
    currentMenu: state => state.menu.currentMenu
  }),
  mounted() {
    portal.getSubMenus('app_menu', resp => {
      this.menus = resp.data.value
      this.selectFirstOne()
    })
    this.loadTags()
  },
  methods: {
    //加载应用数据
    loadData(menuId) {
      let param = {
        menuId: menuId
      }
      portal.getSysAppList(param).then(data => {
        this.apps = data
        this.currentMenuId = menuId
      })
    },
    handleSelect(data) {
      this.$set(this, 'tabs', data.children)
      if (this.tabs.length <= 0) {
        this.loadData(data.id)
        return
      }
      this.loadData(this.tabs[0].id)
      this.activeTab = this.tabs[0].id
    },
    tabClick(tab) {
      this.loadData(tab.name)
    },
    getFirstMenu(menus, index) {
      if (menus[0].children && menus[0].children.length > 0 && index < 2) {
        index++
        return this.getFirstMenu(menus[0].children)
      } else {
        return menus[0]
      }
    },
    getFirstValidMenu(menus, menuIds) {
      if (menus) {
        for (let i = 0; i < menus.length; i++) {
          if (
            menuIds.includes(menus[i].id) &&
            menus[i].path.split('.').length > 4
          ) {
            return menus[i]
          }
        }
        for (let j = 0; j < menus.length; j++) {
          let menu = this.getFirstValidMenu(menus[j].children, menuIds)
          if (menu) {
            return menu
          }
        }
      }
    },
    selectFirstOne() {
      //获取有存在应用的菜单
      req.get('${portal}/portal/sysApp/v1/validMenu').then(resp => {
        if (resp && resp.data && resp.data.length > 0) {
          let menu = this.getFirstValidMenu(this.menus, resp.data)
          if (!menu) {
            menu = this.getFirstMenu(this.menus, 1)
          }
          this.activeMenuIndex = menu.id
          this.handleSelect(menu)
        } else {
          if (this.menus && this.menus.length > 0) {
            let menu = this.getFirstMenu(this.menus, 1)
            this.activeMenuIndex = menu.id
            this.handleSelect(menu)
          }
        }
      })
    },
    //加载标签
    loadTags() {
      portal.getAppTagTypes().then(resp => {
        this.tagTypes = resp.data
        resp.data.forEach(item => {
          this.selectAllStatus[item.id] = false
          this.tagMap[item.id] = []
          let querys = [
            {
              property: 'type_id_',
              value: item.id,
              group: 'main',
              operation: 'EQUAL',
              relation: 'AND'
            }
          ]
          let filter = {querys: querys}
          req
            .post(window.context.portal + '/portal/sysTag/v1/query', filter)
            .then(resp => {
              this.tagMap[item.id] = resp.data.rows
              resp.data.rows.forEach(tag => {
                this.tagStatus[tag.id] = false
              })
              this.$forceUpdate()
            })
        })
      })
    },
    selectAll(typeId) {
      this.selectAllStatus[typeId] = !this.selectAllStatus[typeId]
      let tags = this.tagMap[typeId]
      let allToSelect = false //全选
      for (let i = 0; i < tags.length; i++) {
        if (this.tagStatus[tags[i].id] != true) {
          allToSelect = true
        }
      }
      if (allToSelect) {
        //全选
        for (let i = 0; i < tags.length; i++) {
          this.tagStatus[tags[i].id] = true
        }
      } else {
        //全不选
        for (let i = 0; i < tags.length; i++) {
          this.tagStatus[tags[i].id] = false
        }
      }
      this.reloadData()
      this.$forceUpdate()
    },
    tagClick(tagId, typeId) {
      this.tagStatus[tagId] = !this.tagStatus[tagId]
      //全部选中时，设置全选按钮
      let tags = this.tagMap[typeId]
      let isSelectAll = true
      for (let i = 0; i < tags.length; i++) {
        if (!this.tagStatus[tags[i].id]) {
          isSelectAll = false
          break
        }
      }
      this.selectAllStatus[typeId] = isSelectAll
      this.reloadData()
      this.$forceUpdate()
    },
    ////重新加载数据
    reloadData() {
      let param = []
      this.tagTypes.forEach(type => {
        let selectTagIds = []
        let tagList = this.tagMap[type.id]
        for (let i = 0; i < tagList.length; i++) {
          if (this.tagStatus[tagList[i].id]) {
            selectTagIds.push(tagList[i].id)
          }
        }
        //querys.push({properties:"TAG_ID_",value:selectTagIds.join(","),group:group,operation:"IN",relation:"AND"});
        if (selectTagIds.length != 0) {
          param.push({typeId: type.id, tagIds: selectTagIds.join(',')})
        }
      })
      req
        .post(
          '${portal}/portal/sysApp/v1/queryByTagIds/' + this.currentMenuId,
          param
        )
        .then(resp => {
          this.apps = resp.data
          this.searchWord = ''
          this.$forceUpdate()
        })
    },
    search() {
      if (!this.searchWord) {
        this.$message({type: 'warning', message: '请输入关键词'})
        return
      }
      let querys = [
        {
          property: 'name',
          value: this.searchWord,
          group: 'search',
          operation: 'LIKE',
          relation: 'AND'
        }
      ]
      let queryFilter = {querys}
      this.$loading()
      req
        .post('${portal}/portal/sysApp/v1/queryByFilter', queryFilter)
        .then(resp => {
          this.apps.splice(0)
          Object.keys(this.selectAllStatus).forEach(key => {
            this.$set(this.selectAllStatus, key, false)
          })
          Object.keys(this.tagStatus).forEach(key => {
            this.$set(this.tagStatus, key, false)
          })
          if (resp.data && resp.data.length > 0) {
            resp.data.forEach(item => {
              this.apps.push(item)
            })
            //this.searchDialogVisible = true;
          } else {
            this.$message({type: 'warning', message: '未查询到结果'})
          }
          this.$loading().close()
        })
    },
    searchDialogClose() {
      this.searchResultApps.splice(0)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.aside_top_title {
  font-size: 14px;
  color: #303133;
}
// .el-main {
//   padding-top: 0px;
// }
.el-card {
  background-color: transparent;
}

.el-card ::v-deep .el-card__header {
  height: 48px;
  border-bottom: 1.5px solid #dedede;
  color: #a2a2a2;
}

.el-card ::v-deep .el-card__body {
  padding: 0;
}
.menu-ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.menu-ul > li {
  padding: 10px 0 10px 0;
  height: 30px;
  line-height: 30px;
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 1px solid #dfdfdf;
}
.menu-ul > li:last-child {
  border-bottom: 0;
}
.menu-ul > li > a {
  color: $--color-text-regular;
  padding: 2px 5px 2px 17px;
  border-left: 2px solid transparent;
  text-decoration: none;
}
.menu-ul > li > a:hover {
  color: $--theme-color;
}
.menu-ul > li > a.router-link-active {
  border-left: 2px solid $--theme-color;
  color: $--theme-color;
}
.el-menu,
::v-deep .el-menu {
  background-color: transparent;
  border-right: none;
}
.el-menu-item {
  height: 56px;
  line-height: 56px;
  font-size: 14px;
  color: #303133;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 20px;
  list-style: none;
  cursor: pointer;
  position: relative;
  -webkit-transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: nowrap;
  &:hover,
  &:focus {
    background-color: transparent;
    color: $--color-primary;
  }
}
.el-submenu .el-menu-item {
  height: 36px;
  line-height: 36px;
}
.el-menu-item.is-active {
  position: relative;
  &::before {
    position: absolute;
    content: '';
    width: 2px;
    height: 14px;
    background: $--color-primary;
    top: 21px;
    left: 12px;
  }
}
.el-submenu {
  .el-menu-item.is-active {
    &::before {
      left: 30px;
      top: 12px;
    }
  }
}

::v-deep div.el-submenu__title {
  height: 56px;
  line-height: 56px;
  font-size: 14px;
  color: #303133;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 20px;
  list-style: none;
  cursor: pointer;
  position: relative;
  -webkit-transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: nowrap;
}

::v-deep i.el-submenu__icon-arrow {
  position: absolute;
  top: 50%;
  right: 0px;
  margin-top: -7px;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  font-size: 12px;
}
.tagList {
  display: flex;
  flex-direction: row;
}
.tab-container {
  background-color: #fff;
  margin: 10px 20px 0 20px;
}
</style>
