<template>
  <div class="container">
    <div class="topHeader">
      <span>工作台</span>
      <van-icon name="manager-o" class="icon" @click="exitLogin"/>
    </div>
    <div class="main">
        <ul class="text">
          <li
            v-for="(pro, id) in list"
            :key="id"
            @click="toStart(pro.title)"
          >
            <img :src="pro.icon" alt="" />
            <p>{{ pro.title }}</p>
          </li>
        </ul>
    </div>
    <!-- 作业预约 -->
    <job-popup :show.sync="jobShow"></job-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import jobPopup from './jobReservation/jobPopup.vue'
import { getUseInfo } from '@/api/emergencies'
import { baseApi } from '@/config'
import {
  getDict,
  getAreaTree,
  getDeptTree,
  getDeptUserTree,
  getContractor
} from '@/api/danger'
import { userMessageList } from '@/api/new'
export default {
  name: 'VueCli4VantIndex',
  components: {
    jobPopup
  },
  data () {
    return {
      timeIn: null,
      jobShow: false,
      list: [
        {
          title: '添加隐患',
          icon: require('@/assets/images/icon32.png')
        },
        {
          title: '隐患列表',
          icon: require('@/assets/images/icon11.png')
        },
        {
          title: '巡检任务',
          icon: require('@/assets/images/icon11.png')
        },
        {
          title: '应急演习',
          icon: require('@/assets/images/icon11.png')
        },
        {
          title: '作业预约',
          icon: require('@/assets/images/icon11.png')
        },
        {
          title: '作业列表',
          icon: require('@/assets/images/icon32.png')
        },
        {
          title: '培训',
          icon: require('@/assets/images/icon11.png')
        }
      ],
      routeList: []
    }
  },
  computed: {
    ...mapState('login', ['user']),
    ...mapState('num', ['num'])
  },
  mounted () {
    console.log(this.$route, 11111)
    this.userMessageList()
    this.timeIn = setInterval(() => {
      this.userMessageList()
    }, 10000)
    this.routeList = this.$router.options.routes
    console.log(this.$router.options.routes)
    getUseInfo().then(({ data }) => {
      if (data.code === 200) {
        this.$store.dispatch('login/getUser', { userName: data.data.userName, userId: data.data.userId, userType: data.data.userType, deptId: data.data.deptId })
      }
    })
    // 存储图片前缀，baseurl
    this.$store.dispatch('baseUrl/getBase', baseApi)
    // 获取隐患来源列表
    getDict({ dictKey: 'sys_danger_src' }).then(({ data }) => {
      if (data.code === 200) {
        this.$store.dispatch('dangerList/getSrc', {
          list: data.data.map(item => {
            return { text: item.dictLabel, value: item.dictValue }
          })
        })
      }
    })
    // 获取隐患类型列表
    getDict({ dictKey: 'sys_danger_type' }).then(({ data }) => {
      if (data.code === 200) {
        console.log(data, '这这这这这这')
        this.$store.dispatch('dangerList/getType', {
          list: data.data.map(item => {
            return { text: item.dictLabel, value: item.dictValue }
          })
        })
      }
    })
    // 获取区域列表
    getAreaTree().then(({ data }) => {
      if (data.code === 200) {
        // console.log(this.getTree(data.data))
        this.$store.dispatch('dangerList/getTree', {
          list: this.getTree(data.data)
        })
      }
    })
    // 获取部门列表
    getDeptTree().then(({ data }) => {
      if (data.code === 200) {
        this.$store.dispatch('dangerList/getDept', {
          list: this.getDept(data.data)
        })
      }
    })
    // 获取部门用户列表
    getDeptUserTree().then(({ data }) => {
      if (data.code === 200) {
        this.$store.dispatch('dangerList/getUser', { list: this.getUser(data.data) })
      }
    })
    getContractor().then(({ data }) => {
      if (data.code === 200) {
        this.$store.commit('dangerList/GETCONTRACTORUSER', { list: this.getContractorUser(data.data) })
        this.$store.commit('dangerList/GETCONTRACTOR', { list: this.getDept(data.data) })
      }
    })
  },
  beforeDestroy () {
    console.log(111)
    clearInterval(this.timeIn)
  },
  methods: {
    userMessageList () {
      userMessageList().then(({ data }) => {
        this.$store.dispatch('num/getNum', {
          num: data.noReadTotal
        })
      })
    },
    exitLogin () {
      console.log(this.user)
      this.$dialog({
        message: `您确认要退出当前账号${this.user.userName}，返回到登录页吗？`,
        showCancelButton: true
      }).then(() => {
        sessionStorage.clear()
        this.$router.push('/login')
      }).catch(() => {
      })
    },
    // eslint-disable-next-line space-before-function-paren
    toStart(item) {
      if (item === '作业预约') {
        // eslint-disable-next-line semi
        this.jobShow = true;
        return
      }
      this.routeList.forEach(items => {
        if (item === items.meta.title) {
          this.$router.push(items.path)
        }
      })
    },
    getTree (data) {
      return data.map(item => {
        if (item.childList.length) {
          return {
            text: item.areaName,
            value: item.id,
            children: this.getTree(item.childList)
          }
        }
        return { text: item.areaName, value: item.id }
      })
    },
    getDept (data) {
      return data.map(item => {
        if (item.children && item.children.length) {
          return {
            text: item.label,
            value: item.id,
            children: this.getDept(item.children)
          }
        }
        return { text: item.label, value: item.id }
      })
    },
    getUsers (data) {
      return data.map(item => {
        return { text: item.nickName, value: item.userId, show: true }
      })
    },
    getUser (data) {
      return data.map(item => {
        if (item.children && item.children.length && !item.sysUsers) {
          return {
            text: item.label,
            value: item.id + 'd',
            children: this.getUser(item.children)
          }
        }
        if (item.children && item.children.length && item.sysUsers) {
          return {
            text: item.label,
            value: item.id + 'd',
            children: [
              ...this.getUser(item.children),
              ...this.getUsers(item.sysUsers)
            ]
          }
        }
        if (!(item.children && item.children.length) && item.sysUsers) {
          return {
            text: item.label,
            value: item.id + 'd',
            children: this.getUsers(item.sysUsers)
          }
        }
        if (!(item.children && item.children.length) && !item.sysUsers) {
          return {
            text: item.label,
            value: item.id + 'd',
            children: []
          }
        }
        return { text: item.label, value: item.id + 'd' }
      })
    },
    getContractorUser (data) {
      return data.map(item => {
        if (item.children && item.children.length && !item.sysUsers) {
          return {
            text: item.label,
            value: item.id,
            children: this.getUser(item.children)
          }
        }
        if (item.children && item.children.length && item.sysUsers) {
          return {
            text: item.label,
            value: item.id,
            children: [
              ...this.getUser(item.children),
              ...this.getUsers(item.sysUsers)
            ]
          }
        }
        if (!(item.children && item.children.length) && item.sysUsers) {
          return {
            text: item.label,
            value: item.id,
            children: this.getUsers(item.sysUsers)
          }
        }
        if (!(item.children && item.children.length) && !item.sysUsers) {
          return {
            text: item.label,
            value: item.id,
            children: []
          }
        }
        return { text: item.label, value: item.id }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.text {
  width: 100%;
  background: #fefefd;
  margin-bottom: 10px;
  display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;

    li {
      position: relative;
      width: 50%;
      height: 150px;
      &:nth-child(odd){
        border-right: 3px solid #eee;
      }
      border-bottom: 2px solid #eee;
      // margin-left:1%;
      img {
        height: 60px;
        margin-top: 30px;
      }
      p {
        font-family: PingFangSC-Semibold;
        font-size: 14px;
        letter-spacing: 0.17px;
        text-align: center;
        margin-top: 5px;
        font-weight: 700;
      }
    }
}
.icon{
  position: absolute;
  right: 10px;
  top: 15px;
  font-size: 22px;
}
</style>
