<template>
  <div id="indexVue">
    <!--顶部导航-->
    <div class="top">
      <div class="topLeftLogo">
        <img src="../assets/img/logoIndex.png" alt="logo" />
      </div>
      <div class="topRightTip tip">
        <Dropdown>
          <a href="javascript:void(0)">
            <Icon type="md-person" />
            {{userName}}
            <Icon type="ios-arrow-down"></Icon>
          </a>
          <DropdownMenu slot="list">
            <!-- <DropdownItem>
              <Icon type="ios-ionitron" @click="personCenterBtn" />个人中心
            </DropdownItem> -->
            <DropdownItem>
              <Icon type="ios-key" />
              <span @click="editPwd">修改密码</span>
            </DropdownItem>
          </DropdownMenu>
        </Dropdown>
        <a @click="modal=true">
          <Icon type="md-power" />退出
        </a>
      </div>
    </div>
    <!--页面主题部分-->
    <div class="main">
      <!--左边导航-->
      <div class="mainLeft">
        <Menu theme="dark" accordion @on-select="routeToPages">
          <Submenu :name="item.id" :key="item.id" v-for="item in navItems">
            <template slot="title">
              <Icon :type="item.i" />
              {{item.n}}
            </template>
            <div v-if="item.l">
              <MenuItem v-for="p in item.l" :name="p.h+'/'+p.id+'/'+1" :key="p.h">{{p.n}}</MenuItem>
            </div>
          </Submenu>
        </Menu>
      </div>
      <!--右侧主体-->
      <div class="mainRight">
          <router-view />
      </div>
    </div>
    <!--退出询问框-->
    <Modal v-model="modal" :closable="false" :mask-closable="false" width="400" scrollable>
      <p
        slot="header"
        style="height:40px;lineHeight:40px;backgroundColor:#00507e;color:#fff;text-align:center"
      >
        <span>退出登录!</span>
      </p>
      <h2>您确认退出吗？</h2>
      <div slot="footer">
        <Button type="primary" ghost @click="closed">关闭</Button>
        <Button type="primary" @click="ok">确定</Button>
      </div>
    </Modal>
    <!--修改密码框-->
    <Modal v-model="editPassword" :closable="false" :mask-closable="false" width="400" scrollable>
      <p
        slot="header"
        style="height:40px;lineHeight:40px;backgroundColor:#00507e;color:#fff;text-align:center"
      >
        <span>修改密码!</span>
      </p>
      <Form ref="formInline" :model="form">
        <FormItem prop="oldPwd">
          <span>旧密码：</span>
          <Input type="password" v-model="form.oldPwd" style="width: 300px" placeholder="请输入旧密码" />
        </FormItem>
        <FormItem prop="newPwd">
          <span>新密码：</span>
          <Input type="password" v-model="form.newPwd" style="width: 300px" placeholder="请输入新密码" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" ghost @click="cancelEdit">关闭</Button>
        <Button type="primary" @click="okEdit">确定</Button>
      </div>
    </Modal>
    <!--个人中心-->
    <div class="addRole" v-if="personCenter">
      <div class="modelBox">
        <p class="modelTitle">
          <span>个人中心</span>
          <span class="exit" @click="personCenterCancel">
            <Icon type="md-close" />
          </span>
        </p>
        <div class="roleMsg">
          <div>
            <span>登录名:</span>
            <Input type="text" style="width:200px" placeholder="请输入登录名" />
          </div>
          <div>
            <span>用户名:</span>
            <Input type="text" style="width:200px" placeholder="请输入用户名" />
          </div>
          <div>
            <span>邮箱:</span>
            <Input type="text" style="width:200px" placeholder="请输入邮箱" />
          </div>
          <div>
            <span>手机:</span>
            <Input type="text" style="width:200px" placeholder="请输入手机" />
          </div>
        </div>
        <div class="buttons">
          <Button type="primary" ghost @click="personCenterCancel">取消</Button>
          <Button type="primary" @click="personCenterSure">确定</Button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "./../assets/js/axios";
export default {
  name: "Index",
  data() {
    return {
      userName: "",
      mobile: "",
      modal: false,
      editPassword: false,
      personCenter: false,
      form: {
        oldPwd: "",
        newPwd: ""
      },
      navItems: [], //获取的导航栏
      buttonItems: []
    };
  },
  mounted() {
    // this.selectDictDataList();
    this.getUser();
  },
  methods: {
    /*获取用户登录信息*/
    getUser() {
      let _this = this;
      axios.post("/passport/getLoginUser", {}).then(res => {
        if (res) {
          _this.userName = res.data.data.userName;
          _this.navItems = res.data.data.menus;
          // _this.navItems = [
          //   {
          //     c:"hospital",
          //     i:"ios-settings",
          //     id:100,
          //     l:[{
          //       c:'appointment',
          //       h:'/hospital/appointment',
          //       id:101,
          //       l:[],
          //       n:'预约规则配置',
          //       o:0,
          //       pid:100,
          //       t:2
          //     }],
          //     n:'医院管理',
          //     o:99,
          //     pid:0,
          //     t:1
          //   },
          //   {
          //     c:"wechatinfo",
          //     i:"ios-settings",
          //     id:200,
          //     l:[{
          //       c:'wechatuser',
          //       h:'/wechatinfo/wechatUser',
          //       id:201,
          //       l:[],
          //       n:'微信用户信息查询',
          //       o:0,
          //       pid:200,
          //       t:2
          //     },
          //     {
          //       c:'wechatcode',
          //       h:'/wechatinfo/wechatCode',
          //       id:202,
          //       l:[],
          //       n:'微信用户验证码查询',
          //       o:0,
          //       pid:200,
          //       t:2
          //     },
          //     {
          //       c:'information',
          //       h:'/wechatinfo/information',
          //       id:203,
          //       l:[],
          //       n:'预约信息查询',
          //       o:0,
          //       pid:200,
          //       t:2
          //     },
          //     ],
          //     n:'微信信息',
          //     o:99,
          //     pid:0,
          //     t:1
          //   },
          // ]
          let newMenuArr = [];
          function getTest(arr) {
            if (!!arr && arr.length !== 0) {
              arr.map(item => {
                let obj = {};
                //obj.id = item.id;
                obj.name = item.n;
                obj.code = item.c;
                newMenuArr.push(obj);
                getTest(item.l);
              });
            }
          }
          getTest(_this.navItems);
          //console.log(newMenuArr)
          sessionStorage.setItem("nMArr", JSON.stringify(newMenuArr));
          let pUrl = _this.navItems[0].l[0];
          let pName = pUrl.h + "/" + pUrl.id + "/" + 1;
          let userMsg = JSON.stringify(res.data.data);
          sessionStorage.setItem("userMsg", userMsg);
          _this.$router.push("/index" + pName);
        }
      });
    },
    /*路由*/
    routeToPages(name) {
      this.$router.push("/index" + name);
    },
    /*退出*/
    ok() {
      let _this = this;
      axios.post("/passport/logout", {}).then(res => {
        if (res) {
          _this.$router.push({ path: "/login" });
          _this.$Message.info(res.data.msg);
        }
      });
    },
    closed() {
      this.modal = false;
    },
    editPwd() {
      this.form.oldPwd = "";
      this.form.newPwd = "";
      this.editPassword = true;
    },
    /*修改密码*/
    okEdit() {
      let _this = this;
      if (_this.form.oldPwd == "") {
        _this.$Message.warning("旧密码不能为空");
        return false;
      }
      if (_this.form.newPwd == "") {
        _this.$Message.warning("新密码不能为空");
        return false;
      }
      axios
        .post("/platform-upms/user/modifyPassword", {
          password: _this.form.oldPwd,
          newPassword: _this.form.newPwd
        })
        .then(res => {
          if (res) {
            _this.$Message.info("密码修改成功");
            _this.editPassword = false;
            _this.form.oldPwd = "";
            _this.form.newPwd = "";
          }
        });
    },
    cancelEdit() {
      this.$Message.info("您已取消修改密码");
      this.editPassword = false;
      this.form.oldPwd = "";
      this.form.newPwd = "";
    },
    personCenterBtn() {
      this.personCenter = true;
    },
    personCenterCancel() {},
    personCenterSure() {}
  }
};
</script>
<style scoped>
#indexVue {
  width: 100%;
  height: 100%;
}
#indexVue .top {
  width: 100%;
  height: 7%;
  padding: 0 40px;
  background: #00507e;
  color: #fff;
  font-size: 22px;
  box-sizing: border-box;
  position: relative;
  top: 0;
  z-index: 999;
}
#indexVue .topLeftLogo,
.topRightTip {
  position: absolute;
  top: 50%;
  margin-top: -26px;
}
#indexVue .topLeftLogo {
  left: 8px;
}
#indexVue .topLeftLogo img {
  width: 260px;
}
#indexVue .topRightTip {
  right: 40px;
}
#indexVue .tip a {
  color: #fff;
  font-size: 16px;
  margin-left: 15px;
}
#indexVue .main {
  position: relative;
  height: 93%;
}
#indexVue .main:after {
  display: block;
  content: "";
  clear: both;
}
#indexVue .mainLeft {
  width: 240px;
  height: 100%;
  background-color: #515a6e;
  position: absolute;
  z-index: 999;
  overflow-y: auto;
  overflow-x: hidden;
}
#indexVue .mainRight {
  padding: 15px 15px 15px 255px;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow-y: auto;
}
li.modelEditPassword {
  margin-bottom: 10px;
}
/*个人中心*/
#indexVue .addRole {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  z-index: 999;
}
#indexVue .modelBox {
  position: absolute;
  width: 680px;
  min-height: 300px;
  top: 80px;
  left: 50%;
  background-color: #fff;
  margin-left: -340px;
  border-radius: 10px;
  padding-bottom: 20px;
}
#indexVue .modelTitle {
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  background-color: #00507e;
  color: #fff;
  border-radius: 10px 10px 0 0;
  text-align: center;
}
#indexVue .exit {
  position: absolute;
  font-size: 20px;
  right: 20px;
  cursor: pointer;
}
#indexVue .roleMsg {
  padding: 15px 25px;
  margin: 20px;
  height: 350px;
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: auto;
}
#indexVue .roleMsg div {
  padding: 0 10px 10px 0;
}
#indexVue .roleMsg span {
  display: inline-block;
  width: 80px;
  text-align: justify;
}
#indexVue .roleMsg input {
  outline: none;
  border: none;
  width: 210px;
  height: 30px;
  padding-left: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
#indexVue .roleMsg .ivu-checkbox-wrapper {
  font-size: 16px;
}
#indexVue .modelBox .buttons {
  text-align: center;
}
#indexVue .modelBox .buttons button {
  margin: 10px;
}
</style>