<template>
  <div class="max-big-box">
    <div class="info-box">
      <div class="info-title">
        <img src="~@/assets/images/xian_1.png">
        <p>编辑</p>
        <img src="~@/assets/images/xian_2.png">
      </div>
      <div class="name-box">
        <p class="user-one-p"></p>
        <p>姓名：</p>
        <input class="name-input" type="text" v-model="newData.name">
      </div>
      <div class="drop-down-max-box">
        <p class="drop-down-null-p"></p>
        <p class="drop-down-left-title">性别：</p>
        <div class="dropdown-box">
          <div class="dropdown-right-box cursor_pointer"
               @mouseenter="rightDropdownClickOpen('1')" @mouseleave="rightDropdownClickOpen('2')">
            <p class="dropdown-text" @click="rightDropdownClickOpen">{{newData.sex}}</p>
            <div class="dropdown-for-max" v-if="downRightType">
              <p v-for="(item,index) in sexData" :key="index"
                 :class="{'color-A':mouseColor == item.value}"
                 @mouseenter="colorTypeEnter(item)" @mouseleave="colorTypeLeave"
                 @click="rightDropdownClick(item)">{{item.value}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="name-box">
        <p class="user-one-p"></p>
        <p>手机号：</p>
        <input class="name-input" type="text" v-model="newData.phone">
      </div>
      <div class="name-box">
        <p class="user-one-p"></p>
        <p>账户名：</p>
        <input class="name-input" type="text" v-model="newData.accountName">
      </div>
      <div class="drop-down-max-box">
        <p class="drop-down-null-p"></p>
        <p class="drop-down-left-title">机构：</p>
        <div class="dropdown-box">
          <div class="dropdown-right-box cursor_pointer"
               @mouseenter="leftDropdownClickOpen('1')" @mouseleave="leftDropdownClickOpen('2')">
            <p class="dropdown-text" @click="leftDropdownClickOpen">{{newData.institutionsName}}</p>
            <div class="dropdown-for-max" v-if="downLeftType">
              <p v-for="(item,index) in institutionsNameData" :key="index"
                 :class="{'color-A':mouseColor == item.value}"
                 @mouseenter="colorTypeEnter(item)" @mouseleave="colorTypeLeave"
                 @click="leftDropdownClick(item)">{{item.value}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="name-box">
        <p class="user-one-p"></p>
        <p>角色名称：</p>
        <input class="name-input" type="text" v-model="newData.roleName">
      </div>
      <div class="button-box">
        <p class="cursor_pointer" @click="buttonClick('out')">取消</p>
        <p class="cursor_pointer" @click="buttonClick('set')">保存</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "accountEditor",//账号编辑
    props:["dataInfo"],
    data () {
      return {
        // 性别下拉列表悬浮状态
        mouseColor:"",
        downRightType:false,
        // 机构下拉列表悬浮状态
        downLeftType:false,
        newData:{
          accountName:"admin",
          createTime:"2021-2-23 20:42:59",
          id:"1",
          institutionsName:"陆军军医大学",
          name:"杨爱国",
          phone:"15899999999",
          roleName:"系统管理员",
          sex:"男",
          state:1,
          updateTime:"2021-2-24 20:42:59",
        },
        sexData:[
          {
            id:"1",
            value:"男"
          },
          {
            id:"1",
            value:"女"
          },
        ],
        institutionsNameData:[
          {
            id:"1",
            value:"陆军军医大学"
          },
          {
            id:"2",
            value:"海军军医大学"
          },
          {
            id:"3",
            value:"空军军医大学"
          },
        ]
      }
    },

    created(){
      this.newData = {...this.dataInfo}
    },
    mounted() {

    },
    methods: {
      //下拉菜单悬浮状态
      colorTypeEnter(item){
        this.mouseColor = item.value;
      },
      colorTypeLeave(){
        this.mouseColor = "";
      },
      // 性别下拉菜单
      rightDropdownClickOpen(type){
        this.downRightType = type == 1;
      },
      rightDropdownClick(item){
        this.newData.sex = item.value;
        this.downRightType = !this.downRightType;
      },
      // 机构下拉菜单
      leftDropdownClickOpen(type){
        this.downLeftType = type == 1;
      },
      leftDropdownClick(item){
        this.newData.institutionsName = item.value;
        this.downLeftType = !this.downLeftType;
      },
      // 调用父组件方法退出当前页面
      buttonClick(type){
        if(type=='out'){
          this.$parent.outPage();
        }else if(type=='set'){
          console.log("baocun")
        }
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    height:100%;
    width:100%;
    .info-box
      height:670px;
      width:1000px;
      margin:50px 456px 44px;
      background:url("~@/assets/images/min_back_04.png");
      background-size 100% 100%
      .info-title
        display flex
        height:74px;
        margin:0 369px 44px;
        img
          display block
          height:1px;
          width:76px;
          margin-top:38px;
        p
          width:109px;
          line-height 74px
          font-size $font_20
          color:$theme;
    .name-box
      width:587px;
      margin:16px auto 0;
      display flex
      p
        text-align left
        font-size:$font_17;
        line-height 36px
      .user-one-p
        color:$theme5;
      p:nth-child(1)
        width:20px;
      p:nth-child(2)
        color:$theme;
        width:119px;
      .name-input
        width:408px;
        height:22px;
        line-height 20px
        font-size:$font_16;
        padding:7px 20px;
        background url("~@/assets/images/button_04.png")
        background-size 100% 100%
        color:$color_ff;
        border-radius:10px;
    .drop-down-max-box
      width:587px;
      margin:16px auto 0;
      display flex
      height:36px;
      .drop-down-null-p
        text-align left
        font-size:$font_17;
        line-height 36px
        width:20px;
      .drop-down-left-title
        text-align left
        font-size:$font_17;
        line-height 36px
        color:$theme;
        width:119px;
      .dropdown-box
        display flex
        color:$color_ff;
        z-index:10;
        .dropdown-right-box
          font-size:$font_12;
          z-index:10;
          .dropdown-text
            width:160px;
            height:36px;
            line-height:36px;
            background:url("~@/assets/images/button_15.png");
            background-size:100% 100%;
          .dropdown-for-max
            z-index:10;
            background:$backColor1;
            border-bottom-right-radius 4px
            border-bottom-left-radius 4px
            p
              width:160px;
              height:36px;
              line-height:36px;
            .color-A
              /*
              background:$backColor2 !important;
              color:$color_ff !important;
              */
              color:$theme !important;
              border-bottom-right-radius 4px
              border-bottom-left-radius 4px
    .button-box
      display flex
      width:202px;
      margin:140px 399px 0;
      p
        width:92px;
        height:31px;
        line-height:31px;
        font-size:$font_12;
      p:nth-child(1)
        color:$theme;
        background:url("~@/assets/images/button_01.png");
        background-size 100% 100%
        margin-right:18px;
      p:nth-child(2)
        color:$color_ff;
        background:url("~@/assets/images/button_02.png");
        background-size 100% 100%
</style>
