<!--
 * @Author: your name
 * @Date: 2021-10-14 17:17:53
 * @LastEditTime: 2022-03-18 10:48:14
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \Foshan4A\src\views\dashboard\index.vue
-->
<template>
  <div class="dashboard">
    <!--分类信息-->
    <div class="flex-wrap tu-fl">
      <div v-for="(item,index) in flList" :key="index" @click="toApp(item)" class="flex fl-list">
        <div class="fl-list-img">
          <template v-if="item.logo">
            <img :alt="item.appName" :src="item.logo">
          </template>
          <template v-else>
            <img src="../../assets/index/log_default.png" :alt="item.appName">
          </template>
        </div>
        <div class="fl-list-title flex1">{{item.appName}}</div>
      </div>
    </div>
    <!--切换和搜索-->
    <div class="dashboard-tab flex">
      <div class="tab">
        <el-radio-group v-model="radio">
          <el-radio label="1">数据分析</el-radio>
          <el-radio label="2">个人日志</el-radio>
        </el-radio-group>
      </div>
      <div class="search flex-wrap">
        <div class="search-input flex-wrap r24">
          <el-select :style="inputFlag ? 'width:150px;':'width:200px;'" @change="handleChange" v-model="select" placeholder="功能菜单">
            <el-option v-for="(item,index) in routes" :key="index" :label="item.meta.title" :value="item.path"></el-option>
          </el-select>
          <el-input v-show="inputFlag" :style="inputFlag ? 'width:330px;':'width:280px;'" placeholder="如需搜索，请输入" v-model.trim="input" class="input-with-select">
          </el-input>
          <!-- <el-select v-model="select" slot="prepend" placeholder="功能菜单">
            <el-option v-for="(item,index) in selectArr" :key="index" :label="item.name" :value="item.value"></el-option>
          </el-select> -->
        </div>
        <div class="search-btn">
          <el-button @click="searchByLink" class="btn" type="primary">进入</el-button>
        </div>
      </div>
    </div>
    <!--数据分析-->
    <Analysis v-show="radio == 1" />
    <!--个人日志-->
    <Journal v-show="radio == 2" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Analysis from './components/analysis.vue'
import Journal from './components/journal.vue'
import { GetOthSystem } from '@/api/apiHome'
import axios from 'axios'
export default {
  name: 'Dashboard',
  components: { Analysis, Journal },
  data () {
    return {
      roleFlag: true,
      inputFlag: false,
      //搜索信息
      selectArr: [
        {
          id: 1,
          name: "账号管理",
          value: 1,
        },
        {
          id: 2,
          name: "账号组管理",
          value: 2,
        },
        {
          id: 3,
          name: "权限项管理",
          value: 3,
        },
        {
          id: 4,
          name: "角色管理",
          value: 4,
        },
        {
          id: 5,
          name: "组织管理",
          value: 5,
        },
        {
          id: 6,
          name: "岗位管理",
          value: 6,
        },
        {
          id: 7,
          name: "职员管理",
          value: 7,
        },

        {
          id: 8,
          name: "登录策略",
          value: 8,
        },
        {
          id: 10,
          name: "系统设置",
          value: 10,
        },
      ],
      //分类信息
      flList: [],
      //切换
      radio: '1',
      flIndex: 0,
      input: '',
      select: ''
    }
  },
  computed: {
    ...mapGetters(['systemSet', 'UserType', 'UserId']),
    routes () {
      const arrs = this.$store.getters.permission_routes
      const datas = arrs.filter(item => item.meta && item.meta.title != '首页')
      return datas
    }
  },
  mounted () {
    this.isPower()
    this.getOthSystem()
  },
  methods: {
    //搜索-跳转
    searchByLink () {
      const url = this.select
      this.input ? this.$router.push({ path: url, query: { keyWords: this.input } }) : this.$router.push(url)
    },
    //获取接入系统信息
    async getOthSystem () {
      try {
        const result = await GetOthSystem({
          userId: Number(this.UserId),
          userType: this.UserType
        })
        if (result.code === 0 && result.returnData.length) {
          this.flList = result.returnData
        } else {
          this.$message.error(result.message)
        }
      } catch (error) {
        console.log('网络错误:', error)
      }
    },
    //判断页面展示权限
    isPower () {
      const obj = typeof (this.systemSet) === 'string' ? JSON.parse(this.systemSet) : this.systemSet
      const { OpenGroup, OpenRole, UserOfficerMulti } = obj
      if (!OpenGroup) {
        this.routes.forEach((item, index) => {
          if (item.path === '/accountGroup') {
            this.routes.splice(index, 1)
          }
        })
      }
      if (!OpenRole) {
        this.routes.forEach((item, index) => {
          if (item.path === '/role') {
            this.routes.splice(index, 1)
          }
        })
      }
      if (!UserOfficerMulti) {
        this.routes.forEach((item, index) => {
          if (item.path === '/account') {
            this.routes.splice(index, 1)
          }
        })
      }
    },
    handleChange (val) {
      if (val !== '/systemManagement') {
        this.inputFlag = true
      } else {
        this.inputFlag = false
      }
    },
    paramsType (t, num, url, name) {
      let type = 'application/json'
      let result = ''
      if (t == 'json') {
        type = 'application/json'
      }
      if (num == 1) {
        result = axios.get(url, {
          params: {
            [name]: sessionStorage.getItem('userName'),
          },
          data: {
            unused: 0 //解决请求头无Content-Type
          },
          headers: {
            'token': sessionStorage.getItem('token'),
            'Content-Type': type
          }
        })
      } else {
        result = axios.post(url, {
          [name]: sessionStorage.getItem('userName')
        }, {
          headers: {
            'token': sessionStorage.getItem('token'),
            'Content-Type': type
          }
        })
      }
      result.then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    },
    //应用跳转
    toApp (item) {
      if (item.appUrl) {
        window.open(item.appUrl)
        const datas = item.inputs
        const arrs = []
        if (datas && datas.length) {
          const [a1, a2] = [...datas]
          if (item.requestType == 1) {
            if (a1.AppInputName == 'token' && a1.AppInputSite == 'Header' && a2.AppInputSite == 'Body') {
              this.paramsType(item.bodyType, item.requestType, item.appUrl, a2.AppInputName)
            } else {
              datas.forEach(item => {
                const obj = {}
                if (item.AppInputName == 'token' || item.AppInputName == 'Token' || item.AppInputName == 'TOKEN') {
                  obj[item.AppInputName] = sessionStorage.getItem('token')
                } else if (item.AppInputName == 'loginName' || item.AppInputName == 'userName') {
                  obj[item.AppInputName] = sessionStorage.getItem('userName')
                }
                arrs.push(obj)
              })
              const getParams = Object.assign(...arrs)
              axios.get(item.appUrl, {
                params: getParams
              }).then(res => {
                console.log(res)
              }).catch(err => {
                console.log(err)
              })
            }
          } else if (item.requestType == 2) {
            this.paramsType(item.bodyType, item.requestType, item.appUrl, a2.AppInputName)
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 64px;
  padding-top: 32px;
  .tu-fl {
    .fl-list {
      padding: 24px;
      min-width: 240px;
      height: 88px;
      background: #fff;
      cursor: pointer;
      margin-right: 24px;
      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
      border-radius: 16px;
      margin-bottom: 24px;
      .fl-list-img {
        width: 40px;
        height: 40px;
        overflow: hidden;
        img {
          max-width: 100%;
          width: 100%;
          height: 100%;
        }
      }
      .fl-list-title {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #303133;
        line-height: 40px;
        margin-left: 16px;
      }
      &:last-child {
        margin-right: 0;
      }
    }
    .active {
      background: linear-gradient(0deg, #777dba, #6983be);
      .fl-list-title {
        color: #fff;
      }
    }
  }
  .dashboard-tab {
    margin: 24px 0 32px 0;
    line-height: 48px;
    ::v-deep .tab {
      .el-radio__label {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #303133;
      }
    }
    ::v-deep .search {
      .search-input {
        height: 48px;
        background: #ffffff;
        box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
        border-radius: 6px;
        line-height: 48px;
        max-width: 480px;
        .el-input-group__prepend {
          border: none;
          background-color: #fff;
          width: 120px;
        }
        .el-input__inner {
          border: 1px solid #fff;
          font-size: 16px;
        }
      }
      .search-btn {
        .btn {
          height: 48px;
          background: linear-gradient(0deg, #6983be, #777dba);
          box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.18);
          border-radius: 6px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #ffffff;
          min-width: 96px;
        }
      }
    }
  }
}
</style>
