<template>
  <div class="nav">
    <div class="navCont">
      <img :src="imageUrl.logo" alt srcset />
      <div
        v-for="(item,index) in navCont"
        :key="index"
        @click="navClick(index,item.url)"
        @mouseenter="navMouseClick(index,item.url,true)"
        @mouseleave="navMouseClick(index,item.url,false)"
        :class="{fontSty:index==1&&colorD}"
      >
        <div style="position:relative;">
          {{item.text}}
          <!-- 数据二级导航 -->
          <div class="dataTwo" v-if="twonav&&index===1">
            <div @click="jumpData('monthly')">月度数据</div>
            <div @click="jumpData('quarter')">季度数据</div>
            <div @click="jumpData('year')">年度数据</div>
            <div @click="jumpData('area')">地区数据</div>
          </div>
        </div>
      </div>
      <div class="dsearch">
        <!-- <img :src="imageUrl.search" alt srcset /> -->
        <!-- 未登录 -->
        <div class="div1" v-if="!userLogin" @click="loginWindow()">登录</div>
        <!-- 登陆成功后显示 -->
        <div
          :class="{loginAfter:true,loginAfters:fontsF}"
          v-if="userLogin"
          @mouseenter="userLoginC()"
          @mouseleave="userLoginC()"
        >
          <img :src="userPic" alt srcset />
          {{userName}}
          <!-- 个人信息二级导航 -->
          <div class="dataTwos" v-if="personalInfo">
            <div @click="perspnalCenter">个人中心</div>
            <div @click="quit">退出</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 登陆窗口 -->
    <section class="loginSty" v-if="showWinStatic">
      <div class="loginSty_wcont">
        <div class="wcont_header">
          <div>登录</div>
          <img :src="imageUrl.deleteimg" alt @click="closeLoginWind(false)" />
        </div>
        <div class="wcont_content">
          <div>
            <img :src="imageUrl.usernames" alt />
            <input type="text" placeholder="请输入用户名" v-model="username" />
          </div>
          <div>
            <img :src="imageUrl.userpwds" alt />
            <input type="password" placeholder="请输入密码" v-model="userpwd" />
          </div>
          <div>
            <input type="text" placeholder="请输入验证码" v-model="useryzm" />
            <canvas ref="identifyDom" @click="get_identity()"></canvas>
          </div>
          <div @click="closeLoginWind(true)">确认</div>
          <div>
            <span @click="regirest()">没有账号？去注册</span>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  name: 'navs',
  data: function () {
    return {
      imageUrl: {
        logo: require('../../../static/nav/navlogo.png'),
        search: require('../../../static/nav/search.png'),
        deleteimg: require('../../../static/nav/deleteImg.png'),
        usernames: require('../../../static/nav/username.png'),
        userpwds: require('../../../static/nav/userpwds.png')
      },
      navCont: [
        { text: '首页', url: '/' },
        { text: '数据', url: '/companyIntroduction' },
        { text: '公司介绍', url: '/companyIntroduction' },
        { text: '联系我们', url: '/relation' },
        { text: '个人中心', url: '/personalCenter' },
        { text: '帮助', url: '/help' }
      ],
      twonav: false,
      colorD: false,
      userName: '十画.TeFuir',
      userPic: '',
      // 用户名和登陆的显示隐藏
      userLogin: false,
      personalInfo: false,
      fontsF: false,
      // 登陆窗口
      showWinStatic: false,
      // 用户名
      username: '',
      // 密码
      userpwd: '',
      // 验证码
      useryzm: '',
      // 图片中的验证码
      imgIdentify: null
    }
  },
  watch: {
    $auth (newVal, oldVal) {
      console.log(newVal, '$auth$auth$auth$auth')
    }
  },
  methods: {
    navClick (indexs, url) {
      if (indexs !== 1) {
        this.twonav = false
        this.colorD = false
        this.fontsF = false
        this.personalInfo = false
        if (this.$route.path === url) {
          this.$router.go(0)
        } else {
          this.$router.push({
            path: url
          })
        }
      }
    },
    navMouseClick (indexs, url, statics) {
      if (indexs === 1 && statics) {
        this.twonav = true
        this.colorD = true
        this.fontsF = false
        this.personalInfo = false
      } else if (indexs === 1 && !statics) {
        this.twonav = false
        this.colorD = false
        this.fontsF = false
        this.personalInfo = false
      }
    },
    userLoginC () {
      this.personalInfo = !this.personalInfo
      this.fontsF = !this.fontsF
      this.twonav = false
      this.colorD = false
    },
    loginWindow () {
      this.showWinStatic = true
      this.$auth.auth = true
      this.get_identity()
    },
    // 关闭登录窗口
    closeLoginWind (status) {
      if (status) {
        // 调接口上传，成功后关闭窗口
        if (this.username === '') {
          alert('用户名不能为空！')
        } else if (this.userpwd === '') {
          alert('密码不能为空！')
        } else if (this.useryzm === '') {
          alert('验证码不能为空！')
        } else if (this.useryzm.toLocaleLowerCase() !== this.imgIdentify) {
          alert('验证码输入不正确请重新输入！')
        } else {
          // 调接口判断密码是否输入正确,改变登录状态
          this.$axios({
            method: 'POST',
            url: 'member/index/login',
            data: {
              username: this.username,
              password_hash: this.userpwd
            }
          }).then(res => {
            console.log(res)
            // 请求接口完成注册   请求成功
            alert(res.data.message)
            if (res.data.code === 200) {
              this.showWinStatic = !this.showWinStatic
              this.$auth.auth = this.showWinStatic
              // 用户信息存本地
              localStorage.setItem('username', res.data.data.username)
              localStorage.setItem('pic', res.data.data.pic)
              localStorage.setItem('userPwd', this.userpwd)
              localStorage.setItem('token', 'Bearer ' + res.data.data.token)
              localStorage.setItem('tokenB', res.data.data.token)
              // 登录状态
              localStorage.setItem('userLogin', true)
              console.log(this.$route, '000111')
              if (this.$route.path === '/') {
                this.$router.go(0)
              } else {
                this.$router.push({ path: '/' })
              }
            }
          }).catch((fail) => {
            console.log(fail)
          })
        }
      } else {
        console.log(!this.showWinStatic, 'this.showWinStatic')
        this.showWinStatic = !this.showWinStatic
        this.$auth.auth = this.showWinStatic
      }
    },
    // 获取验证码图片及内容
    get_identity () {
      // 获取验证码渲染区域
      this.$nextTick(() => {
        let identifyD = this.$refs.identifyDom
        console.log(identifyD, 'ref')
        var content = this.$identify(100, 30, identifyD)
        this.imgIdentify = content.join('')
        console.log(this.imgIdentify)
      })
    },
    regirest () {
      this.showWinStatic = !this.showWinStatic
      this.$auth.auth = this.showWinStatic
      this.$router.push({ path: '/register' })
    },
    // 跳到数据页面
    jumpData (staData) {
      if (this.$route.path !== '/datasweb') {
        this.$router.push(
          {
            path: '/datasweb',
            query: {
              type: staData
            }
          }
        )
      } else {
        this.twonav = false
        this.$router.push({
          path: '/'
        })
        this.$router.push(
          {
            path: '/datasweb',
            query: {
              type: staData
            }
          }
        )
        this.$router.go(0)
      }
    },
    // 退出
    quit () {
      // 调接口判断密码是否输入正确,改变登录状态
      this.$axios({
        method: 'GET',
        url: 'member/index/logout',
        params: {
          'access-token': localStorage.getItem('tokenB')
        }
      }).then(res => {
        console.log(res)
        alert(res.data.message)
        // 请求接口完成注册   请求成功
        if (res.data.code === 200) {
          console.log(this.$route.path, 'this.$router.path')
          if (this.$route.path !== '/') {
            this.$router.push({
              path: '/'
            })
          }
          localStorage.clear()
          this.$router.go(0)
        }
      }).catch((fail) => {
        console.log(fail)
      })
    },
    perspnalCenter () {
      if (this.$route.path !== '/personalCenter') {
        this.$router.push({ path: '/personalCenter' })
      } else {
        this.$router.go(0)
      }
    }
  },
  computed: {
  },
  mounted () {
    let that = this
    this.userLogin = localStorage.getItem('userLogin')
    this.userName = localStorage.getItem('username')
    this.userPic = localStorage.getItem('pic')
    // 监听对象的变化
    /* eslint-disable */
    Object.defineProperty(this.$auth, 'auth', {
      set: function (newVal) {
        console.log(newVal, 'newValnewValnewVal')
        that.showWinStatic = newVal
        that.get_identity()
      }
    })
  }
}
</script>
<style lang="scss" scoped>
// 登陆窗口
.loginSty {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.28);
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  & > .loginSty_wcont {
    width: 37.5rem;
    height: 32.6875rem;
    background-color: #ffffff;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    & > .wcont_header {
      width: 32.8125rem;
      height: 3.875rem;
      border-bottom: 0.0625rem solid #dbdbdb;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-direction: row;
      -moz-box-orient: horizontal;
      -moz-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-justify-content: space-between;
      -moz-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-align-items: center;
      // po
      -moz-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      & > div {
        margin-left: 1rem;
        font-size: 1.375rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #333333;
      }
      & > img {
        margin-right: 1rem;
        width: 1.3125rem;
        height: 1.3125rem;
      }
      & > img:hover {
        cursor: pointer;
      }
    }
    & > .wcont_content {
      width: 30.8125rem;
      height: 26.5rem;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-direction: column;
      -moz-box-orient: vertical;
      -moz-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-justify-content: space-around;
      -moz-box-pack: space-around;
      -ms-flex-pack: space-around;
      justify-content: space-around;
      -webkit-align-items: center;
      -moz-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      & > div:nth-last-child(n + 2) {
        width: 100%;
        height: 3.25rem;
        border: 0.0625rem solid #dbdbdb;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: row;
        -moz-box-orient: horizontal;
        -moz-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-justify-content: flex-start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        & > input {
          width: 21.625rem;
          height: 1.6rem;
          border: none;
        }
        & > input::-webkit-input-placeholder {
          font-size: 1.25rem;
          font-weight: normal;
          font-stretch: normal;
          // line-height: 2rem;
          letter-spacing: 0rem;
          color: #999999;
        }
        & > input::-moz-placeholder {
          /* Mozilla Firefox 19+ */
          font-size: 1.25rem;
          font-weight: normal;
          font-stretch: normal;
          // line-height: 2rem;
          letter-spacing: 0rem;
          color: #999999;
        }
        & > input:-moz-placeholder {
          /* Mozilla Firefox 4 to 18 */
          font-size: 1.25rem;
          font-weight: normal;
          font-stretch: normal;
          // line-height: 2rem;
          letter-spacing: 0rem;
          color: #999999;
        }
        & > input:-ms-input-placeholder {
          /* Internet Explorer 10-11 */
          font-size: 1.25rem;
          font-weight: normal;
          font-stretch: normal;
          // line-height: 2rem;
          letter-spacing: 0rem;
          color: #999999;
        }
      }
      & > div:nth-child(1) {
        & > img {
          margin: 0 1.2rem;
          width: 1.375rem;
          height: 1.3125rem;
        }
      }
      & > div:nth-child(2) {
        & > img {
          margin: 0 1.35625rem;
          width: 1.0625rem;
          height: 1.3125rem;
        }
      }
      & > div:nth-child(3) {
        & > input {
          margin: 0 1.35625rem;
        }
        & > canvas:hover {
          cursor: pointer;
        }
      }
      & > div:nth-last-child(2) {
        width: 100%;
        height: 3.1875rem;
        background-color: #52b6e3;
        border-radius: 0.3125rem;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 1.25rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #ffffff;
      }
      & > div:nth-last-child(2):hover {
        cursor: pointer;
      }
      & > div:last-child {
        width: 100%;
        height: 3.1875rem;
        border-radius: 0.3125rem;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-justify-content: flex-start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-align-items: flex-end;
        -moz-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        font-size: 1.25rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #52b6e3;
        & > span {
          border-bottom: 0.125rem solid #52b6e3;
        }
        & > span:hover {
          cursor: pointer;
        }
      }
    }
  }
}

.nav {
  width: 100%;
  height: 5.5rem;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #fff;
  & > .navCont {
    width: 84.25rem;
    height: 5.5rem;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-between;
    -moz-box-pack: space-between;
    -ms-flex-pack: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    // border: 1px solid black;
    & > .fontSty {
      color: #52b6e3 !important;
    }
    & > div:hover {
      cursor: pointer;
      color: #52b6e3;
    }
    & > div:nth-child(2) {
      position: relative;
    }
    .dataTwo {
      width: 8rem;
      height: 14rem;
      position: absolute;
      top: 1.875rem;
      left: -2.5625rem;
      z-index: 10;
      background-image: url("../../../static/nav/xl.png");
      background-repeat: no-repeat;
      -o-background-size: 100% 100%;
      background-size: 100% 100%;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-direction: column;
      -moz-box-orient: vertical;
      -moz-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-justify-content: center;
      -moz-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-align-items: center;
      -moz-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      & > div {
        margin-top: 0.985rem;
        font-size: 1.25rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #333333;
      }
      & > div:hover {
        cursor: pointer;
        color: #52b6e3;
      }
    }
    & > img {
      width: 9.375rem;
      height: 3.375rem;
    }
    & > img:hover {
      cursor: pointer;
    }
    & > div {
      font-size: 1.375rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #333333;
    }
    & > .dsearch {
      margin-left: 8.625rem;
      width: 13.25rem;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-direction: row;
      -moz-box-orient: horizontal;
      -moz-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
      justify-content: space-around;
      -webkit-align-items: center;
      -moz-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      & > img {
        width: 1.75rem;
        height: 1.75rem;
      }
      & > .div1 {
        width: 4.375rem;
        height: 2.75rem;
        background-color: #52b6e3;
        border-radius: 0.25rem;
        font-size: 1.375rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #ffffff;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: row;
        -moz-box-orient: horizontal;
        -moz-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
      }
      & > .loginAfter {
        position: relative;
        font-size: 1.375rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #666666;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        & > img {
          margin-right: 0.75rem;
          width: 3.2rem;
          height: 3.2rem;
          border-radius: 50%;
        }
        & > .dataTwos {
          width: 8rem;
          height: 6.125rem;
          position: absolute;
          top: 2.875rem;
          // right: 3.825rem;
          z-index: 10;
          background-image: url("../../../static/nav/xl.png");
          background-repeat: no-repeat;
          -o-background-size: 100% 100%;
          background-size: 100% 100%;
          display: -webkit-flex;
          display: -moz-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-flex-direction: column;
          -moz-box-orient: vertical;
          -moz-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          -webkit-justify-content: center;
          -moz-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-align-items: center;
          -moz-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          & > div {
            margin-top: 0.375rem;
            font-size: 1.25rem;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rem;
            color: #333333;
          }
          & > div:hover {
            cursor: pointer;
            color: #52b6e3;
          }
        }
      }
      & > .loginAfter:hover {
        color: #52b6e3;
      }
      & > .loginAfters {
        color: #52b6e3 !important;
      }
    }
  }
}
</style>
