<!--
 * @Author: your name
 * @Date: 2021-11-24 14:53:03
 * @LastEditTime: 2022-01-10 16:56:14
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \Foshan4A2.0\src\layout\index.vue
-->
<template>
  <div class="app-wrapper">
    <div class="main-container">
      <navbar />
      <app-main />
    </div>
    <!--修改密码弹框-->
    <Dialog width="496px" customClass="dataStoreInfoDialog" :flag="pwdflag">
      <div class="dialog-public-background">
        <div class="title">修改密码</div>
        <div class="message">
          <div class="m1"><span class="el-icon-s-opportunity mg"></span>密码长度：{{PwdLengthBegin}}-{{PwdLengthEnd}}位字符</div>
          <div class="m2">密码规则：必须包含{{PwdMessage}}</div>
          <div class="m2">特殊字符：!、%、&、,、;、=、?、$、@、#、$、*、'</div>
        </div>
        <div class="content">
          <el-form :model="dataForm" :rules="dataRules" ref="dataForm" class="demo-dataForm">
            <el-form-item label="旧密码" prop="old">
              <el-input size="medium" placeholder="请输入旧密码" show-password v-model="dataForm.old"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="new">
              <el-input size="medium" placeholder="请输入新密码" show-password v-model="dataForm.new"></el-input>
            </el-form-item>
            <el-form-item label="再次确认新密码" prop="again">
              <el-input size="medium" placeholder="请再次确认新密码" show-password v-model="dataForm.again"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="foot center t30">
          <el-button size="medium" type="primary" @click="addSubmit('dataForm')" class="r24">保存</el-button>
          <el-button v-if="!firstLogin" size="medium" @click="resetForm('dataForm')">取消</el-button>
        </div>
      </div>
    </Dialog>
    <!--退出弹框-->
    <Dialog :flag="outflag">
      <div class="airportInfoDialog">
        <div class="title">退出系统</div>
        <div class="content">是否确认退出系统？</div>
        <div class="foot right t30">
          <el-button size="medium" @click="outQx" class="r24">取消</el-button>
          <el-button size="medium" @click="outQd" type="primary">确定</el-button>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Navbar, AppMain } from './components'
import Dialog from '@/layout/components/Dialog'
import { EditPwd } from '@/api/apiHome'
export default {
  name: 'Layout',
  components: {
    Navbar,
    AppMain,
    Dialog
  },
  data () {
    return {
      PwdLengthBegin: '',
      PwdLengthEnd: '',
      PwdMessage: '',
      dataForm: { //数据项表单
        old: '',
        new: '',
        again: ''
      },
      dataRules: { //数据项表单验证
        old: [
          { required: true, message: '请输入旧密码', trigger: 'blur' }
        ],
        new: [
          { required: true, message: '请输入新密码', trigger: 'blur' }
        ],
        again: [
          { required: true, message: '请再次确认新密码', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['pwdflag', 'outflag', 'name', 'firstLogin', 'systemSet'])
  },
  created () {
    const obj = typeof this.systemSet === "string" ? JSON.parse(this.systemSet) : this.systemSet
    const { PwdLengthBegin, PwdLengthEnd, PwdStruc } = obj
    const PwdArrs = `${PwdStruc}`.split('')
    this.PwdLengthBegin = PwdLengthBegin
    this.PwdLengthEnd = PwdLengthEnd
    this.PwdMessage = this.getMessage(PwdArrs)
  },
  methods: {
    getMessage (datas) {
      let str = ''
      if (datas[0] == 1) {
        str += '大写字母、'
      }
      if (datas[1] == 1) {
        str += '小写字母、'
      }
      if (datas[2] == 1) {
        str += '特殊字符、'
      }
      if (datas[3] == 1) {
        str += '数字'
      }
      return str
    },
    //存储数据项-提交
    addSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.dataForm.new !== this.dataForm.again) {
            this.$message.error('两次输入的密码不一致，请重新输入')
            return false
          }
          this.editPwd()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    //存储数据项-取消
    resetForm (formName) {
      this.$store.dispatch('app/togglePwdflag', false)
      this.$refs[formName].resetFields()
    },
    //退出系统-取消
    outQx () {
      this.$store.dispatch('app/toggleOutflag', false)
    },
    //退出系统-确定
    async outQd () {
      sessionStorage.removeItem("userName")
      sessionStorage.removeItem("tabViews")
      await this.$store.dispatch('app/toggleOutcheck', true)
      this.$store.dispatch('app/toggleOutflag', false)
      this.$store.dispatch('tagsView/delAllViews')
    },
    //修改密码
    async editPwd () {
      try {
        const res = await EditPwd({
          LoginName: this.name,
          LoginPwd: this.dataForm.old,
          LoginPwdNew: this.dataForm.again
        })
        if (res.code === 0) {
          this.$message.success(res.message)
          this.$store.dispatch('app/togglePwdflag', false)
          setTimeout(() => {
            this.outQd()
          }, 2000);
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
        console.log('出错了', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  ::v-deep .dialog {
    .dataStoreInfoDialog {
      .el-form-item__label {
        font-size: 16px;
        font-weight: bold;
        &::before {
          display: none;
        }
      }
      .content {
        margin-top: 100px;
      }
      .message {
        position: absolute;
        top: 85px;
        color: #333;
        font-weight: 500;
        .mg {
          margin-right: 8px;
          color: #e6a23c;
        }
        .m1 {
          margin-bottom: 8px;
        }
        .m2 {
          padding-left: 22px;
          margin-bottom: 8px;
        }
      }
    }
  }
}
</style>
