<template>
  <div>
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <div v-show="isShow" class="img-wrapper">
        <div style="background-color: rgb(21,44,124); height: calc(100% - 124px);width:100%">
          <img :src="require('@/assets/img/jiegang.png')">
        </div>
      </div>
      <!--<div v-show="!isShow">-->
      <!--<div style="background-color: #525f6b; height: 49px;width:100%">-->
      <!--<img :src="require('@/assets/img/LOGO2.png')">-->
      <!--</div>-->
      <!--</div>-->
      <el-menu
        :show-timeout="200"
        :default-active="$route.path"
        :collapse="isCollapse"
        mode="vertical"
        background-color="#F8F8FF"
        text-color="#F8F8FF"
        active-text-color="#409EFF"
        style="height:calc(100% - 49px)">
        <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"/>
      </el-menu>
      <!--<el-button style="font-size: 16px;width: 100%;margin-left: 0px;border-top:1px solid white" type="text" icon="el-icon-s-custom"> {{ name }} </el-button>-->
      <!--<el-button style="font-size: 16px;width: 100%;margin-left: 0px;" type="text" icon="el-icon-alarm-clock" @click="Clock">技术员考勤-打卡</el-button>-->
      <!--<el-button style="font-size: 16px;width: 100%;margin-left: 0px;" type="text" icon="el-icon-setting" @click="Setting('form')">设置</el-button>-->
      <!--<el-button style="font-size: 16px;width: 100%;margin-left: 0px;" type="text" icon="el-icon-document-checked" @click="Licence('form')">许可证状态</el-button>-->
      <!--<el-button style="font-size: 16px;width: 100%;margin-left: 0px;" type="text" icon="el-icon-caret-right" @click="SignOut('form')">系统登出</el-button>-->
    </el-scrollbar>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem'
// import { ExecDatabase } from '@/main'

export default {
  components: { SidebarItem },
  data() {
    return {
      options: [{
        value: '选项1',
        label: '中文'
      }, {
        value: '选项2',
        label: 'English'
      }],
      value: '选项1',
      isShow: '',
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      disable: false,
      disable1: false,
      call: '',
      nowDate: '', // 当前日期
      nowTime: '', // 当前时间
      nowWeek: '' // 当前星期
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'permission_routers',
      'avatar',
      'name',
      'id'
    ]),
    routes() {
      return this.$router.options.routes
    },
    isCollapse() {
      this.showLogo()
      return !this.sidebar.opened
    }
  },
  created() {
    this.currentTime()
    // this.Clock()
  },
  methods: {
    showLogo() {
      if (this.sidebar.opened === true) {
        this.isShow = true
      } else {
        this.isShow = false
      }
    },
    // 实时同步年、月、日、星期
    currentTime() {
      setInterval(this.getDate, 500)
    },
    getDate: function() {
      var _this = this
      const yy = new Date().getFullYear()
      const mm = new Date().getMonth() + 1
      const dd = new Date().getDate()
      const week = new Date().getDay()
      const hh = new Date().getHours()
      const mf =
        new Date().getMinutes() < 10
          ? '0' + new Date().getMinutes()
          : new Date().getMinutes()
      if (week === 1) {
        this.nowWeek = '星期一'
      } else if (week === 2) {
        this.nowWeek = '星期二'
      } else if (week === 3) {
        this.nowWeek = '星期三'
      } else if (week === 4) {
        this.nowWeek = '星期四'
      } else if (week === 5) {
        this.nowWeek = '星期五'
      } else if (week === 6) {
        this.nowWeek = '星期六'
      } else {
        this.nowWeek = '星期日'
      }
      _this.nowTime = hh + ':' + mf
      _this.nowDate = yy + '/' + mm + '/' + dd
    }
    // 系统退出框
    // SignOut() {
    //   this.dialogFormVisible3 = true
    // },
    // 查询打卡
    // Clock() {
    //   this.dialogFormVisible = true
    //   var param = []
    //   // console.log(this.name, 88888)
    //   param[0] = ['用户Id', this.name]
    //   var Data = this.CreateData('11', '打卡_查询', param)
    //   ExecDatabase(Data).then(response => {
    //     this.call = response.data[0].状态
    //     if (this.call === '已打卡') {
    //       this.disable = true
    //       this.disable1 = false
    //     } else {
    //       this.disable = false
    //       this.disable1 = true
    //     }
    //   })
    // },
    // 上班打卡
    // goTowork() {
    //   var param = []
    //   param[0] = ['人员代码', this.id]
    //   // console.log(this.id, 5555)
    //   var Data = this.CreateData('12', '基础数据_下班_修改', param)
    //   ExecDatabase(Data).then(response => {
    //     console.log(response, 4545454)
    //     if (response.data[0].result === '1') {
    //       this.$message({
    //         message: '提交成功',
    //         type: 'success'
    //       })
    //       // console.log(this.form1.ClassNum1)
    //     } else {
    //       this.$message.error('提交失败')
    //     }
    //   })
    //   this.disable = true
    //   this.disable1 = false
    //   this.call = '已打卡'
    //   this.dialogFormVisible = true
    // },
    // // 下班打卡
    // goOffwork() {
    //   var param = []
    //   param[0] = ['人员代码', this.id]
    //   // console.log(this.id, 5555)
    //   var Data = this.CreateData('12', '基础数据_上班_修改', param)
    //   ExecDatabase(Data).then(response => {
    //     console.log(response, 4545454)
    //     if (response.data[0].result === '1') {
    //       this.$message({
    //         message: '提交成功',
    //         type: 'success'
    //       })
    //       // this.searchTable()
    //       // console.log(this.form1.ClassNum1)
    //     } else {
    //       this.$message.error('提交失败')
    //     }
    //   })
    //   this.disable = false
    //   this.disable1 = true
    //   this.call = '未打卡'
    //   this.dialogFormVisible = true
    // },
    // 系统退出
    // logout() {
    //   this.$store.dispatch('FedLogOut').then(() => {
    //     location.reload() // 为了重新实例化vue-router对象 避免bug
    //   })
    // }
  }
}
</script>
<style lang="scss" scoped>
  .img-wrapper{
    img{
      width: 180px;
      margin: 15px 25px 10px 25px;
    }
  }
  .meswork{
    height: 160px;
    width: 180px;
    background-color: #2D3C67;
    text-align: center;
    /*opacity: 0;*/
    transition: opacity 2s ease-in-out;
  }
  .el-button--text {
    /*margin-left: 10px;*/
    text-align: left;
    color: #f6f7f7;
    background: 0 0;
    padding-left: 13px;
    padding-right: 0;
  }
</style>
