<template>
  <div class="routerWapper enquiryList">
        <div class="portalDetailTitle">
            <span class="title">
                日志详情
            </span>
        <div class="detailOperations">
            <a-button @click="$router.back()"> 返回 </a-button> 
        </div>
    </div>
    <!-- 小区 -->
    <div v-if="$route.name == 'jueseInfo'" class="layoutMargin layoutPadding"> 
        <div style="font-size:16px;margin-bottom:20px">
            <P> 操作人：{{content.creator}}</P>
            <P> 操作说明：{{content.pointName}}</P>
            <P>操作时间：{{this.$moment(content.createTime).format('YYYY-MM-DD')}}</P>
        </div>
      <div class="cardBox"> 
        <a-card title="操作前信息" style="width: 49%;margin-right:1%;margin-bottom:1%;justify-content:flex-end;"> 
          <div class="card-centent">
            <div style="margin-bottom:8px;">
                <div class="layoutMargin detailsPartSection contentPadding">
                  <a-form class="portalDetailContentBody" :form="formData">
                  <p>
                    角色名称：<span>{{content.dataBeforeObj?content.dataBeforeObj.roleName:''}}</span>
                  </p>
                  <a-tree class="portalRoleTree" v-if="showTree"  checkable :treeData="treeData" :defaultExpandedKeys='expandedKeys1' v-model="checkedKeys1" disabled="disabled" />
                </a-form>
                </div>
            </div>
          </div>
        </a-card>
        <a-card title="操作后信息" style="width: 49%;margin-right:1%;margin-bottom:1%;"> 
          <div class="card-centent">
            <div style="margin-bottom:8px;">
                <div class="layoutMargin detailsPartSection contentPadding">
                  <a-form class="portalDetailContentBody" :form="formData">
                    <p>
                      角色名称：<span>{{content.dataAfterObj?content.dataAfterObj.roleName:''}}</span>
                    </p>
                    <a-tree class="portalRoleTree" v-if="showTree"  checkable :treeData="treeData" :defaultExpandedKeys='expandedKeys' v-model="checkedKeys" disabled="disabled" />
                  </a-form>
                </div>
            </div>
          </div>
        </a-card>
      </div>
    </div>
    
    <RouterWapper v-else></RouterWapper>
  </div>
</template>

<script>
export default {
  name: 'jueseInfo',
  data() {
    formExt: this.$form.createForm(this)
    return {
      showTree: false,
      treeData: [],
      expandedKeys: [],
      checkedKeys: [],
      expandedKeys1: [],
      checkedKeys1: [],
      roleName: null,
      userCount: null,
      roleIds: [], // 功能点的id数组
      content: {}
    }
  },  
  mounted(){  
    if(this.$route.name == 'jueseInfo'){ 
      this.getList() 
      this.getTree()
    }
  },
  beforeCreate() {
    this.formData = this.$form.createForm(this)
  },
  methods: {
    getTree(){
      this.$ajax.get({
        url: this.$api.GET_ALL_ROLE + '?isTree=true'
      }).then(res => {
        const data=res.data.content
        this.parentId = data.id
        data.forEach((item, index) => {
          this.treeData.push(this.getTreeNode(item, index))
        })
        this.getList(this.$route.query.id)
      })
    }, 
    getList(){  
      this.$ajax.get({
        url: this.$api.GET_RIZHI_INFO.replace('{id}', this.$route.query.id), 
      }).then(res => {
        if(res.code === '200'){
          this.content = res.data.content
          const data=res.data.content
          this.roleName=data.roleName
          this.userCount=data.userCount
          this.expandedKeys=JSON.parse(JSON.stringify(this.checkedKeys))
          this.expandedKeys1=JSON.parse(JSON.stringify(this.checkedKeys1))
          this.showTree=true
          if(data.dataBeforeObj){
            this.checkedKeys1=data.dataBeforeObj.perm.map((item) => {
              return item.id
            })
          }
          if(data.dataAfterObj){
            this.checkedKeys=data.dataAfterObj.perm.map((item) => {
              return item.id
            })
          }
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    getTreeNode(item, index){
      let childrenNode = {}
      if(this.roleIds.length>0 && this.roleIds.indexOf(item.id)<0 && !this.$store.state.userInfos.isAllPerm){
        childrenNode={
          title: item.permName,
          key: item.id,
          disabled: true,
        }
      }else{
        childrenNode={
          title: item.permName,
          key: item.id
        }
      }
      if(item.childList && item.childList.length){
        childrenNode.children = []
        item.childList.forEach((subItem, subIndex) => {
          const subkey = subItem.id
          childrenNode.children.push(this.getTreeNode(subItem, subkey))
        })
      }
      return childrenNode
    },
  },
}
</script>

<style>
.enquiryList .ant-card-head{
  border-bottom: 1px dashed #e8e8e8;
  padding: 0 12px;
}
.enquiryList .ant-card-body{
  padding: 0px;
} 
.enquiryList .card-bottom{
  padding: 8px 0px;
  text-align: center;
  color: #1890ff;
  border-top: 1px solid #e8e8e8;
  cursor: pointer;
}
.enquiryList .card-centent{
  padding: 12px;
}
.enquiryList .cardBox{
  display:flex;
  flex-wrap: wrap;
} 
</style>
