<template>
  <div style="height: 100%;">
    <div class="header">
      <p class="title">
        汇融云眼贷后监管平台
      </p>
      <div class="head_info">
        <p>欢迎您：</p>
        <p>
          <!--          <el-select v-model="defaultOrgPathName" class="selectStyle" size="small" placeholder="" filterable @change="changeOrg">
            <el-option v-for="item in orgDept_list" :key="item.orgPath" :label="item.orgName" :value="item.orgName" />
          </el-select> -->
        </p>
        <p>{{ roleName }} {{ name }}</p>
        <p class="dy" @click="logout()"><img src="@/assets/images/dy.png"></p>
      </div>
    </div>
    <div class="container1">
      <div style="display: flex;flex-direction: row;justify-content: space-between;">

        <!--  <el-row style="margin-top: 20px;margin-left: 10px;">
        <el-col :span="13"> -->
        <ul class="grid-content bg-ltop" style="width: 45%;">
          <li @click="todowork">
            <div style="position: relative">
              <el-badge v-if="shuliang.workCount !== 0" :value="shuliang.workCount" size="mini" class="mark" />
              <img src="@/assets/home/ltIcon1.png">
            </div>
            <p>待办工作</p>
          </li>
          <li @click="donework">
            <img src="@/assets/home/ltIcon2.png">
            <p>已办工作</p>
          </li>
          <li>
            <img src="@/assets/home/ltIcon3.png">
            <p>待阅工作</p>
          </li>
          <li>
            <img src="@/assets/home/ltIcon4.png">
            <p>已阅工作</p>
          </li>
        </ul>
        <!--  </el-col>
        <el-col style="margin-left: 70px;" :span="10"> -->
        <div class="grid-content bg-rtop" style="width: 50%;">
          <!-- <img class="anrui" src="@/assets/home/anrui.png"> -->
          <span class="rt_title">预警中心</span>

          <ul style="margin-top: 40px;">
            <li>
              <img src="../../assets/home/notice.png">
              <span class="notice">编号01021供应商出现工商风险</span>
              <span class="anrui_time">2023-01-22 10:15</span>
            </li>
            <li>
              <img src="../../assets/home/notice.png">
              <span class="notice">库存盘点产生货物数量编差风险</span>
              <span class="anrui_time">2023-01-25 15:22</span>
            </li>
            <li>
              <img src="../../assets/home/notice.png">
              <span class="notice">2023-01-29未按时回款</span>
              <span class="anrui_time">2023-01-28 09:28</span>
            </li>
            <li>
              <img src="../../assets/home/notice.png">
              <span class="notice">供应商在途商品超时</span>
              <span class="anrui_time">2023-01-29 11:15</span>
            </li>
          </ul>
        </div>
        <!--   </el-col>
      </el-row> -->

      </div>
      <ul class="bg-bottom">
        <li v-for="(item, index) in menus" :key="index" @click="toNav(index)">
          <img :src="item.imgUrl">
          <p>{{ item.title }}</p>
        </li>
      </ul>
      <p class="copy">Copyright © {{ year }} 汇融云眼贷后监管平台 All Rights Reserved</p>
    </div>
    <!--<ul class="nav-box">-->
    <!--<li style="background-color: #e87861;" @click="toNavbar('http://39.104.100.138:8081/')">
      <img src="@/assets/images/jcxx.png">
      <p>基础信息</p>
    </li>-->

    <!--<template v-for="(item, i) in menus">
      <li v-if="item.sourceName == '系统管理'" :key="i" @click="toNav('index','系统管理')" :style="{backgroundColor: item.iconBgColor}">
        <img :src="item.iconUrl">
        <p>{{ item.sourceName }}</p>
      </li>
      <li v-else :key="i" @click="toNavbar(item.pageUrl)" :style="{backgroundColor: item.iconBgColor}">
        <img :src="item.iconUrl">
        <p>{{ item.sourceName }}</p>
      </li>
    </template>-->
    <!-- <li style="background-color: #e87861;" @click="toNavbar('http://39.104.100.138:8081/')">
      <img src="@/assets/images/jcxx.png">
      <p>基础信息</p>
    </li>
    <li style="background-color: #e87861;" @click="toNavbar('http://localhost:9529/')">
      <img src="@/assets/images/jcxx.png">
      <p>基础信息</p>
    </li> -->
    <!-- <li @click="xxzx">
       <img src="@/assets/images/xxzx.png">
       <p>消息中心</p>
     </li>
     <li @click="xxzx">
       <img src="@/assets/images/xxzx.png">
       <p>消息中心</p>
     </li>
     <li @click="xxzx">
       <img src="@/assets/images/xxzx.png">
       <p>消息中心</p>
     </li>
     <li @click="xxzx">
       <img src="@/assets/images/xxzx.png">
       <p>消息中心</p>
     </li>
     <li style="background-color: #ffb751;" @click="xxzx">
       <img src="@/assets/images/cxjl.png">
       <p>诚信计量</p>
     </li>
     <li style="background-color: #6fb3e0;" @click="xxzx">
       <img src="@/assets/images/zwsm.png">
       <p>C标志自我声明</p>
     </li>
     <li style="background-color: #87b880;" @click="xxzx">
       <img src="@/assets/images/sjcc.png">
       <p>双随机抽查</p>
     </li>
     <li style="background-color: #448fb9;" @click="xxzx">
       <img src="@/assets/images/jlsc.png">
       <p>能量计量审查</p>
     </li>
     <li style="background-color: #24ca95;" @click="xxzx">
       <img src="@/assets/images/qjsh.png">
       <p>强检计量器具审核</p>
     </li>
     <li style="background-color: #b4429d;" @click="xxzx">
       <img src="@/assets/images/jsxd.png">
       <p>技术规范制修订</p>
     </li>
     <li style="background-color: #b3b442;" @click="toNavbar('http://39.104.100.138:8083/')">
       <img src="@/assets/images/xtbg.png">
       <p>协同办公</p>
     </li>
     <li style="background-color: #eab054;" @click="xxzx">
       <img src="@/assets/images/tjfx.png">
       <p>统计分析</p>
     </li>
     <li style="background-color: #e87861;" @click="toNavbar('http://39.104.100.138:8081/')">
       <img src="@/assets/images/jcxx.png">
       <p>基础信息</p>
     </li>
     <li style="background-color: #e87861;" @click="toNavbar('http://localhost:9529/')">
       <img src="@/assets/images/jcxx.png">
       <p>基础信息</p>
     </li>
     <li style="background-color: #617be8;" @click="toNav('index','系统管理')">
       <img src="@/assets/images/xtgl.png">
       <p>系统管理</p>
     </li> -->
    <!--</ul>-->
    <el-dialog center :visible.sync="dialogVisible" width="40%" :show-close="false" :close-on-click-modal="false">
      <el-form :model="form" class="formadd">
        <el-row style="border-top: 1px solid #e0e3eb">
          <el-col :span="4" class="tleftb"><span>原密码</span></el-col>
          <el-col :span="20">
            <el-form-item>
              <el-input v-model="form.original" type="password" show-password />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="tleftb"><span>新密码</span></el-col>
          <el-col :span="20">
            <el-form-item>
              <el-input v-model="form.password" type="password" show-password />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="tleftb"><span>确认密码</span></el-col>
          <el-col :span="20">
            <el-form-item>
              <el-input v-model="form.confirmPassword" type="password" show-password />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="handleConirm">确 定</el-button>
        <el-button size="small" @click="handleQuXiao">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getToken,
    removeToken,
    getStorage,
    removeStorage
  } from '@/utils/auth'
  import {
    sourcesofrole
  } from '@/api/system/Role/role.js'
  import User from '@/api/User/login.js'
  import {
    getTodoNum
  } from '@/api/system/home/home'

  export default {
    data() {
      return {
        menus: [{
            imgUrl: require('@/assets/home/bIcon5.png'),
            title: '客户中心'
          },
          {
            imgUrl: require('@/assets/home/bIcon6.png'),
            title: '数据报表'
          },
          {
            imgUrl: require('@/assets/home/scm.png'),
            title: '业务审批'
          },
          {
            imgUrl: require('@/assets/home/bIcon2.png'),
            title: '风控管理'
          },
          {
            imgUrl: require('@/assets/home/bIcon1.png'),
            title: '工作调度'
          },
          {
            imgUrl: require('@/assets/home/monitor.png'),
            title: '环境监控'
          },
          {
            imgUrl: require('@/assets/home/notice.png'),
            title: '消息中心'
          },
          {
            imgUrl: require('@/assets/home/bIcon7.png'),
            title: '组织结构'
          },
          {
            imgUrl: require('@/assets/home/bIcon9.png'),
            title: '客户管理'
          },
          {
            imgUrl: require('@/assets/home/bIcon8.png'),
            title: '系统管理'
          }
          // {
          //   imgUrl: require('@/assets/home/bIcon3.png'),
          //   title: '审计管理'
          // },
          // {
          //   imgUrl: require('@/assets/home/bIcon4.png'),
          //   title: '财务管理'
          // },
        ],
        userInfo: {},
        orgDept_list: [],
        shuliang: {
          workCount: ''
        },
        dialogVisible: false,
        form: {
          original: '',
          password: '',
          confirmPassword: '',
          userSid: ''
        },
        timer: '',
        Orgname: '',
        departmentName: '',
        name: '',
        pNameAndDepartmentNameAndPostName: '',
        defaultOrgPathName: '',
        defaultOrgPath: '',
        roleName: '',
        year: ''
      }
    },
    beforeCreate() {},
    created() {
      this.getsPasswordByUserSid()
    },
    mounted() {
      this.Orgname = window.sessionStorage.getItem('Orgname')
      this.departmentName = window.sessionStorage.getItem('departmentName')
      this.pNameAndDepartmentNameAndPostName = window.sessionStorage.getItem('pNameAndDepartmentNameAndPostName')
      this.defaultOrgPathName = window.sessionStorage.getItem('defaultOrgPathName')
      this.defaultOrgPath = window.sessionStorage.getItem('defaultOrgPath')
      this.roleName = window.sessionStorage.getItem('roleName')
      this.name = window.sessionStorage.getItem('name')
      var nowDate = new Date()
      this.year = nowDate.getFullYear()
      //    sourcesofrole({ psid: '0', roleSid: this.$store.getters.userInfo.roleSid }).then(res => {
      //      this.menus = res.data
      //    })
    },
    beforeDestroy() {
      clearInterval(this.timer)
    },
    methods: {
      getsPasswordByUserSid() {
        User.selectPasswordByUserSid(window.sessionStorage.getItem('userSid')).then(resp => {
          if (resp.success && resp.data) {
            this.dialogVisible = true
          } else {
            this.getNum()
            this.timer = setInterval(this.getNum, 20000)
          }
        })
        // User.getOrgListByUserSid({ userSid: window.sessionStorage.getItem('userSid') }).then(res => {
        //   if (res.success) {
        //     this.orgDept_list = res.data
        //   }
        // })
      },
      getNum() {
        // getTodoNum(window.sessionStorage.getItem('userSid')).then(resp => {
        //   if (resp.success) {
        //     this.shuliang.workCount = resp.data
        //   }
        // })
      },
      handleConirm() {
        if (this.form.original === '') {
          this.$message({
            showClose: true,
            type: 'error',
            message: '原密码不能为空'
          })
          return
        }
        if (this.form.password !== this.form.confirmPassword) {
          this.$message({
            showClose: true,
            type: 'error',
            message: '两次输入密码不一致'
          })
          return
        }
        this.form.userSid = window.sessionStorage.getItem('userSid')
        User.updatePassword(this.form).then(resp => {
          if (resp.success) {
            this.$alert('密码修改成功！请重新登录点击确定后退出。', '修改成功', {
              confirmButtonText: '确定',
              callback: action => {
                this.handleQuXiao()
              }
            })
          }
        })
      },
      handleQuXiao() {
        this.dialogVisible = false
        this.form = {
          original: '',
          password: '',
          confirmPassword: ''
        }
        User.logout({
          token: getStorage()
        }).then(res => {
          if (res.success) {
            removeStorage()
            this.$store.commit('user/SET_UESRINFO', '')
            this.$router.push({
              path: '/login'
            })
          }
        })
      },
      todowork() {
        window.open('/#/todo' + '?token=' + getStorage(), '_blank')
        // this.$router.push({ path: '/todo' + '?token=' + getStorage() })
        //  window.open('http://127.0.0.1/message'+'?token='+getStorage(),'_blank')
      },
      donework() {
        window.open('/#/done' + '?token=' + getStorage(), '_blank')
        // this.$router.push({ path: '/done' + '?token=' + getStorage() })
        //  window.open('http://127.0.0.1/message'+'?token='+getStorage(),'_blank')
      },
      logout() {
        this.$confirm('确定要退出吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          User.logout({
            token: getStorage()
          }).then(res => {
            removeStorage()
            this.$store.commit('user/SET_UESRINFO', '')
            this.$router.push({
              path: '/login'
            })
          })
        })
      },
      xxzx() {
        this.$alert('项目正在开发中', '提示', {
          dangerouslyUseHTMLString: true
        })
      },
      toNavbar(name) {
        const myPopup = window.open(name + '?token=' + getStorage(), '_blank')
      },
      changeOrg(value) {
        const choose = this.orgDept_list.filter(item => item.orgName === value)
        this.defaultOrgPathName = choose[0].orgName
        this.defaultOrgPath = choose[0].orgPath
      },
      toNav(index, name, titleName) {
        const organizationData = {
          defaultOrgPathName: this.defaultOrgPathName,
          defaultOrgPath: this.defaultOrgPath
        }
        if (index === 9) {
          window.open('/#/index', '_blank')
        } else if (index === 0) {
          window.open('http://192.168.3.8:9532/#/' + '?token=' + getStorage(), '_blank')
           // window.open('http://jianguan.yyundong.com/customer/#/' + '?token=' + getStorage(), '_blank')
        } else if (index === 1) {
          window.open('http://192.168.3.8:9531#/' + '?token=' + getStorage(), '_blank')
           // window.open('http://jianguan.yyundong.com/report/#/' + '?token=' + getStorage(), '_blank')
        } else if (index === 2) {
          window.open('http://jianguan.yyundong.com/business/#/' + '?token=' + getStorage(), '_blank')
        } else if (index === 3) {
          window.open('http://jianguan.yyundong.com/risk/#/' + '?token=' + getStorage(), '_blank')
        } else if (index === 4) {
          window.open('http://jianguan.yyundong.com/work/#/' + '?token=' + getStorage(), '_blank')
        } else if (index === 5) {
          window.open('http://jianguan.yyundong.com/monitor/#/' + '?token=' + getStorage(), '_blank')
        } else if (index === 6) {
          window.open('http://jianguan.yyundong.com/message/#/' + '?token=' + getStorage(), '_blank')
        } else if (index === 7) {
          window.open('http://jianguan.yyundong.com/organizational/#/' + '?token=' + getStorage(), '_blank')
        } else if (index === 8) {
            // window.open('http://192.168.3.8:9532/#/' + '?token=' + getStorage(), '_blank')
          window.open('http://jianguan.yyundong.com/crm/#/' + '?token=' + getStorage(), '_blank')
        }
      }
    }
  }
</script>
<style scoped="scoped">
  li:hover,
  p:hover {
    cursor: pointer;
  }
</style>
<style lang="scss" scoped>
  p {
    margin: 0;
    padding: 0;
  }

  .header {
    background-color: #0294d7;
    color: #fff;
    overflow: hidden;
    height: 60px;
    line-height: 60px;

    .title {
      img {
        // width: 60px;
        vertical-align: middle;
        font-family: Adobe Heiti Std;
        width: 35px;
        height: 35px;
        margin-right: 10px;
      }

      float: left;
      font-size: 22px;
      margin-left: 35px;
      height: 60px;
      line-height: 60px;
    }

    .head_info {
      float: right;
      margin-top: 0;
      font-size: 16px;
    }

    p {
      float: left;
    }
  }

  .head_info img {
    width: 25px;
    margin-top: 20px;
    margin-left: 30px;
    margin-right: 10px;
    float: left;
  }

  .head_info .dy {
    margin-left: 10px;
    margin-right: 20px;
  }

  .container1 {
    background: #e9f1f7;
    padding: 20px;
    width: 100%;
    height: calc(100% - 60px);
    margin: 0;

    .bg-ltop {
      margin: 0;
      padding: 0;
      background-image: url(../../assets/home/ltBg.png);
      border-radius: 10px;
      overflow: hidden;
      background-size: 100% 100%;
      height: 200px;

      li {
        float: left;
        list-style: none;
        width: 25%;
        text-align: center;

        img {
          width: 70px;
          margin: 45px auto 10px auto;
        }
      }
    }

    .bg-rtop {
      background-image: url(../../assets/home/rtBg.png);
      border-radius: 10px;
      height: 200px;
      overflow: hidden;
      position: relative;
      background-size: 100% 100%;

      .anrui {
        width: 100%;
        height: 40px;
      }

      .rt_title {
        position: absolute;
        font-size: 18px;
        padding-top: 10px;
        padding-left: 20px;
        width: 100%;
        height: 40px;
        font-family: SourceHanSerifCN;
        font-weight: 600;
        color: #191919;
        background-color: #0294d7;
      }

      ul {
        margin: 0px auto;
        padding: 0;
        height: 148px;
        width: 100%;

        li {
          font-size: 14px;
          height: 37px;
          line-height: 28px;
          list-style: none;
          text-decoration: underline;
          border-bottom: 1px solid #666;
          width: calc(100% - 70px);
          margin-left: 40px;
          position: relative;
          padding-top: 10px;
          font-family: SimSun;

          img {
            width: 16px;
            margin: 5px 10px;
            position: absolute;
            left: -30px;
          }

          .notice {
            display: inline-block;
            width: 65%;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }

          .anrui_time {
            float: right;
            display: inline-block;
            margin-right: 5px;
            line-height: 30px;
          }
        }
      }
    }

    .bg-bottom {
      background-image: url(../../assets/home/bottomBg.png);
      border-radius: 10px;
      overflow: hidden;
      margin: 40px 10px 0 10px;
      padding: 20px 10px;
      background-size: 100% 100%;

      li {
        float: left;
        list-style: none;
        width: 11.6%;
        margin: 10px 2.5%;
        background: #fff;
        border-radius: 40px;
        text-align: center;
        padding: 10px 25px 15px;

        img {
          width: 80%;
          margin: 10px auto;
        }
      }
    }
  }

  .copy {
    position: fixed;
    bottom: 0;
    width: calc(100% - 40px);
    margin: auto;
    text-align: center;
    line-height: 40px;
    border-top: 2px solid #4e74a6;
    background: #e9f1f7;
    font-size: 14px;
    color: #666;
  }

  .mark {
    position: absolute;
    top: 38%;
    margin-left: 58px;
  }

  .mark {
    ::v-deep .el-badge__content {
      font-size: 14px !important;
    }
  }

  .selectStyle {
    ::v-deep .el-input__inner {
      border: 0px !important;
      background-color: #0294d7 !important;
      font-size: 17px;
      color: #ffffff;
    }
  }
</style>
