<template>
  <div class="layout">
    <div
      class="mask-txt"
      v-show="
        $store.state.maskTxt &&
        !$route.path.startsWith('/engineering') &&
        !$route.path.startsWith('/maintain')
      "
      @click="reset"
    >
      横锦水库
    </div>
    <div
      class="player-box"
      v-show="!$route.path.startsWith('/maintain')"
      :key="playerKey"
    >
      <Player />
    </div>
    <header class="header">
      <h1 class="logo">
        <img src="@/assets/images/layout/logo.png" />
        <div class="txt">
          <p class="ch" ref="ch" v-html="logo.ch"></p>
          <p class="en" ref="en" v-html="logo.en"></p>
        </div>
      </h1>
      <HeaderNav />
      <div>
        <el-dropdown class="userInfo">
          <el-button type="primary">
            <em></em>
            <p>
              {{ $store.state.user.userInfo.nickname }}
            </p>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="changeXR(0)"
              >广川云渲染</el-dropdown-item
            >
            <el-dropdown-item @click.native="changeXR(1)"
              >政务云渲染</el-dropdown-item
            >
            <el-dropdown-item @click.native="changeXR(2)"
              >展示机专用1</el-dropdown-item
            >
            <el-dropdown-item @click.native="changeXR(3)"
              >展示机专用2</el-dropdown-item
            >
            <hr />
            <el-dropdown-item @click.native="changePassWord"
              >密码修改</el-dropdown-item
            >
            <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="now-time" v-if="nowTime.date">
          {{ nowTime.date }}<span>{{ nowTime.time }}</span
          >{{ nowTime.week }}
        </div>
        <div class="now-time" v-else>获取中</div>
      </div>
    </header>
    <div class="main">
      <keep-alive>
        <router-view v-if="$route.meta.isKeepAlive" />
      </keep-alive>
      <router-view v-if="!$route.meta.isKeepAlive" />
    </div>

    <el-dialog
      :visible.sync="passShow"
      :before-close="passClose"
      width="716px"
      class="password"
      :append-to-body="false"
      :modal-append-to-body="false"
    >
      <template #title>
        <div class="title">
          <div class="icon1"></div>
          <span>密码修改</span>
          <div class="icon2"></div>
        </div>
      </template>
      <div class="content">
        <el-form
          :rules="passRules"
          ref="passForm"
          :model="passForm"
          label-width="80px"
          label-position="left"
        >
          <el-form-item label="原密码" prop="oldPassword">
            <el-input
              v-model="passForm.oldPassword"
              placeholder="请输入原密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword1">
            <el-input
              v-model="passForm.newPassword1"
              placeholder="请输入新密码"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码确认" prop="newPassword2">
            <el-input
              v-model="passForm.newPassword2"
              placeholder="请再次输入新密码"
              type="password"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="btn-box">
          <button @click="okChangePass">确认</button>
          <button @click="passClose">取消</button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import HeaderNav from '@/components/header-nav.vue'
export default {
  name: 'Layout',
  components: {
    HeaderNav
  },
  created () {
    // 半个小时刷新一次 水库三个信息
    setInterval(() => {
      this.$store.dispatch('getReservoirAction')
    }, 30 * 60 * 1000)
  },
  async mounted () {
    this.setLogo()
    console.log('所有路由规则', this.$router.options.routes)
    this.timer = setInterval(this.getTime, 1000)
  },
  data () {
    const validPassword = (rule, value, callback) => {
      if (value !== this.passForm.newPassword1 || value !== this.passForm.newPassword2) {
        callback(new Error('两次新密码输入不一致'))
      } else {
        callback()
      }
    }
    const validOldPassword = (rule, value, callback) => {
      if (value !== this.oldPass) {
        callback(new Error('原密码输入错误'))
      } else {
        callback()
      }
    }
    return {
      logo: {
        ch: '数字孪生金华横锦水库',
        en: 'Digital Twin Jinhua Hengjin Reservoir'
      },
      cqqShow: true,
      playerKey: 1,
      timer: 0,
      form: {
        level: 152,
        gateOpenMap:
          { 1: [{ id: 1, startTime: '2022-08-02 01:00:00', endTime: '2022-08-02 01:30:00', e: 4.5 }], 2: [{ id: 1, startTime: '2021-07-02 08:00:00', endTime: '2021-07-02 08:30:00', e: 1.5 }], 3: [{ id: 1, startTime: '2021-07-03 08:00:00', endTime: '2021-07-03 08:30:00', e: 2.5 }], 4: [{ id: 1, startTime: '2021-07-04 08:00:00', endTime: '2021-07-04 08:30:00', e: 3.5 }], 5: [{ id: 1, startTime: '2021-07-05 08:00:00', endTime: '2021-07-05 08:30:00', e: 4.5 }] }
      },
      nowTime: {},
      oldPass: '123123',
      passShow: false,
      passForm: {
        oldPassword: '',
        newPassword1: '',
        newPassword2: ''
      },
      passRules: {
        oldPassword: [
          { required: true, message: '请输入原密码', trigger: 'blur' },
          { min: 6, message: '密码长度大于 6 个字符', trigger: 'blur' },
          { validator: validOldPassword, trigger: 'blur' }

        ],
        newPassword1: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, message: '密码长度大于 6 个字符', trigger: 'blur' }

        ],
        newPassword2: [
          { required: true, message: '请再次输入新密码', trigger: 'blur' },
          { min: 6, message: '密码长度大于 6 个字符', trigger: 'blur' },
          { validator: validPassword, trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    setLogo () {
      this.logo.ch = this.logo.ch.split('').map(item => `<span>${item}</span>`).join(' ')
      this.logo.en = this.logo.en.split(' ').map(item => `<span>${item}</span>`).join(' ')
    },
    changeXR (num) {
      this.$store.commit('setPlayerKey', num)
      this.playerKey = num
    },
    reset () {
      // 恢复水位
      this.$eventBus.$emit('resetWL')
      // 首页
      this.$eventBus.$emit('hidden')
      this.$router.replace('/')
      this.$eventBus.$emit('homeicon')
    },
    // 修改密码确认按钮
    async okChangePass () {
      const flag = false
      if (flag) {
        try {
          await this.$refs.passForm.validate()
          console.log('修改成功')
          this.$refs.passForm.resetFields()
          this.passShow = false
        } catch (error) {
          console.log(error)
        }
      }
    },
    // 打开修改密码弹窗
    changePassWord () {
      console.log('修改密码')
      this.passShow = true
    },
    // 关闭修改密码弹窗
    passClose () {
      console.log('弹层关闭')
      this.passShow = false
      this.$refs.passForm.resetFields()
    },
    // 退出
    async logout () {
      try {
        await this.$confirm('确认退出吗?')
        await this.$store.dispatch('user/logoutAction')
        this.$router.replace('/login')
      } catch (error) {
        console.log('取消退出')
      }
    },
    // 获取时间
    getTime () {
      const obj = this.cqq.nowTime()
      const date = `${obj.year}-${obj.month}-${obj.day}`
      const time = `${obj.h}:${obj.m}`
      const week = this.transWeek(obj.week)
      this.nowTime = {
        date,
        time,
        week
      }
    },
    // 转换星期
    transWeek (week) {
      if (week === 1) {
        return '星期一'
      } else if (week === 2) {
        return '星期二'
      } else if (week === 3) {
        return '星期三'
      } else if (week === 4) {
        return '星期四'
      } else if (week === 5) {
        return '星期五'
      } else if (week === 6) {
        return '星期六'
      } else if (week === 7) {
        return '星期日'
      }
    }
  },
  watch: {
    playerKey (newVal) {
      console.log('key更新了', newVal)
    }
  },
  destroyed () {
    clearInterval(this.timer)
  }
}
</script>

<style lang="scss" scoped>
.cqq {
  position: fixed;
  top: 0;
  left: 0;
  color: salmon;
  font-size: 20px;
  z-index: 50;
}
.layout {
  position: relative;
  width: 1920px;
  height: 1080px;
  background-color: #03234f;
  .mask-txt {
    position: fixed;
    bottom: 12px;
    z-index: 999;
    width: 200px;
    height: 26px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 1);
    color: #fff;
    text-align: center;
    line-height: 26px;
    cursor: pointer;
  }
  .player-box {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 1920px;
    height: 100px;
    background: url("~@/assets/images/layout/hd_bg.png") no-repeat center top /
      cover;
    .logo {
      display: flex;
      align-items: center;
      margin-left: 20px;
      color: #fff;
      img {
        width: 70px;
        height: 70px;
        margin-right: 15px;
      }
      .txt {
        p {
          display: flex;
          justify-content: space-between;
          white-space: nowrap;
        }
        .ch {
          margin-bottom: 10px;
          font-size: 28px;
          letter-spacing: 2px;
        }
        .en {
          font-size: 12px;
          font-weight: 400;
        }
      }
    }
    .now-time {
      float: right;
      width: 248px;
      height: 50px;
      margin-right: 20px;
      text-align: center;
      line-height: 50px;
      background-color: rgba(3, 35, 79, 0.6);
      color: #e8eff6;
      font-size: 16px;
      border-radius: 6px;
      span {
        margin: 0 10px;
        color: #60fff6;
        font-size: 20px;
      }
    }
    .userInfo ::v-deep {
      float: right;
      position: relative;
      display: flex;
      align-items: center;
      margin-right: 20px;
      button {
        display: flex;
        align-items: center;
        width: 160px;
        height: 50px;
        padding: 0;
        border: 0;
        background-color: rgba(3, 35, 79, 0.6);
        span {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 160px;
          color: #fff;
          font-size: 16px;
          padding: 0 15px;
          // i {
          //   margin-right: 15px;
          // }
          em {
            display: block;
            width: 20px;
            height: 20px;
            background: url("~@/assets/images/layout/user.png") no-repeat center /
              100% 100%;
          }
          p {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          i {
            width: 16px;
            height: 16px;
          }
        }
      }
    }
  }
  .main {
    position: absolute;
    top: 114px;
    left: 0;
    z-index: 2;
  }
}
// 密码修改弹层
.password ::v-deep {
  display: flex;
  flex-direction: column;
  height: 484px;
  overflow: visible;
  .el-dialog__header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    padding: 0;
    background-color: #12407f;
    .title {
      display: flex;
      align-items: center;
      .icon1 {
        width: 23px;
        height: 15px;
        background: url("~@/assets/images/engineering/title_left.png") center /
          100% 100%;
      }
      .icon2 {
        width: 23px;
        height: 15px;
        background: url("~@/assets/images/engineering/title_right.png") center /
          100% 100%;
      }
      span {
        color: #fff;
        font-size: 20px;
        margin: 0 20px;
      }
    }
    .el-dialog__headerbtn {
      .el-dialog__close {
        &::before {
          color: #fff;
        }
      }
    }
  }
  .el-dialog__body {
    flex: 1;
    background-color: #0c3061;
    padding: 10px;
    height: 434px;
    .content {
      width: 100%;
      height: 100%;
      background-color: rgba(96, 255, 246, 0.05);
      .el-form {
        padding: 50px 60px;
        input {
          color: #fff;
          background-color: rgba(63, 128, 172, 0.3);
          border: 1px solid rgba(125, 251, 244, 0.3);
        }
        input::placeholder {
          color: rgba(255, 255, 255, 0.7);
        }
        .el-form-item {
          margin-bottom: 30px;
        }
        .el-form-item:last-child {
          margin-bottom: 0;
        }
        label {
          color: rgba(1, 255, 245, 0.7);
        }
      }
      .btn-box {
        display: flex;
        justify-content: center;
        padding-left: 45px;
      }
      button {
        width: 120px;
        height: 40px;
        margin-right: 120px;
        border-radius: 4px;
        background-color: rgba(1, 255, 245, 0.6);
        color: #fff;
        font-size: 16px;
      }
      button:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
