<!-- 角色编辑 -->
<template>
  <view class="roleedit">
    <view class="item-warp">
      <view class="bar">
        <view class="item">
          <view class="title">角色标识</view>
          <input class="msg"  v-model="roledata.name" type="text" placeholder="..." placeholder-style="color:#bdbdbd" />
        </view>
      </view>

      <view class="bar">
        <view class="item">
          <view class="title">角色名称</view>
          <input type="text" v-model="roledata.description" placeholder="..." placeholder-style="color:#bdbdbd">
        </view>
      </view>

      <view class="bar">
        <view class="item">
          <view class="title">菜单权限</view>
          <view class="icon-warp" @tap='showRoleList'>
            <text class="txt">请选择</text>
            <image src="../../../static/images/moreicon.png" class="iconRight"></image>
          </view>
        </view>
      </view>
    </view>

    <view class="btn">
      <view class="sure">确认</view>
    </view>

    <Maskre :list='menulist' :hasList="hasRoleList" v-if="isShowMask" @isSureConver='watchmask'></Maskre>
  </view>
</template>

<script>
import Maskre from '../../components/mask';
export default {
  name: 'roleedit',
  components: {
    Maskre
  },
  data () {
    //这里存放数据
    return {
      isShowMask: true,
      roledata: {},
      menulist:[],

      hasRoleList: []
    };
  },
  onLoad (option) {
    this.roledata = JSON.parse(option.roledata)
  },
  onShow () {

    this.getMenuList()
    this.getRoleBuyId ()
   
  },
  //方法集合
  methods: {
    // 监听遮罩层事件
    watchmask(e) {
      this.isShowMask = false
    },
    // 打开遮罩层
    showRoleList() {
      this.isShowMask = true

    },
    // 菜单列表
    async getMenuList () {
      await this.$http.get('/mrole/permissionList').then( res=>{
        if (res.code === 200 && res.msg === 'OK') {
          this.menulist = res.data
          this.$mStore.commit('setMenuRole',res.data)
        }
      })
    },

    // 根据id获取角色权限
    async getRoleBuyId() {
      await this.$http.get('/mrole/findMenuIdsByRoleId',{
        roleId: this.roledata.id
      }).then( res=>{
        if (res.code === 200 && res.msg ==='OK') {
          this.hasRoleList = res.data
          this.$mStore.commit('setHasRoleList',res.data)
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
  .roleedit {
   padding-top: 23upx;
    .item-warp {
      .bar {
        padding: 0 32upx;
        background-color: #fff;
        &:first-child{
          .item {
            border-bottom: 1px solid #e1e1e1;
          }
        }
        &:last-child {
          margin-top: 24upx;
        }
      }
      .item {
        display: flex;
        padding: 30upx 0;
        .title {
          color: #666666;
          width: 170upx;
          letter-spacing: 2upx;
        }
        .msg {
          flex: 1;
        }
      }
    }

    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 41upx;
      .sure {
        width: 600upx;
        height: 98upx;
        background-color: #8064f7;
        text-align: center;
        line-height: 98upx;
        letter-spacing: 2upx;
        border-radius: 6upx;
        color: #fff;
        font-size: 32upx;
      }
    }
    .icon-warp {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 1;
      .txt {
        flex: 1;
        color: #bdbdbd;
      }
      .iconRight{
        width: 19upx;
        height: 27upx;
      }
    }
    
  }
</style>