<template>
  <div>
    <!-- delApiId="20221101132002" -->
    <basicDetails
        ref="details"
        :titleText="mainData.rolename"
        :oldFormPath="{edit:'HManagement/roleManage/modules'}"
        :editData="mainData"
        :mainAreaData="mainAreaData"
        turnPageId="20221101131902"
        idname="roleid"
        ownertable="sys_role"
        tags=""
        :tabs="['角色授权','报表授权','用户授权','数据过滤']"
        @pageChange="pageChange"
        @onEditSuccess="queryMainData($route.query.id)">
      <div slot="tags">
      </div>
      <div slot="customOperation" >
        <el-popconfirm title="确定删除当前角色吗？" @confirm="deleteRow()">
          <el-button slot="reference" v-if="tool.checkAuth($route.name,'delete')" class="inline-16" size="mini">删 除</el-button>
        </el-popconfirm>
      </div>
      <div class="container normal-panel" slot="slot0" >
        <roleContentTemp :data="{roleid:$route.query.id}" @onSuccess="onSuccess">
          <el-button slot="cancel" size="small" @click="drawer = false" class="normal-btn-width">取 消</el-button>
        </roleContentTemp>
      </div>
      <div class="container normal-panel" slot="slot1" >
        <reportCenter :data="{roleid:$route.query.id}" @onSuccess="onSuccess">
          <el-button slot="cancel" size="small" @click="drawer = false" class="normal-btn-width">取 消</el-button>
        </reportCenter>
      </div>
      <div class="container normal-panel" slot="slot2" >
        <userCenter :data="{roleid:$route.query.id}" @onSuccess="onSuccess">
          <el-button slot="cancel" size="small" @click="drawer = false" class="normal-btn-width">取 消</el-button>
        </userCenter>
      </div>
      <div class="container normal-panel" slot="slot3" >
       <dataFiltering :data="{roleid:$route.query.id}">

       </dataFiltering>
      </div>
    </basicDetails>
  </div>
</template>

<script>
import roleContentTemp from './roleContent'
import reportCenter from './reportCenter'
import userCenter from './userCenter'
import dataFiltering from './dataFiltering'
export default {
  name: "detail",
  data() {
    return {
      mainData:{},
      mainAreaData:{},
      form:{
        "roleid":0,
        "rolename":"",
        "remarks":""
      },
      roleMainInfo:{},
      tablecols:[],
      appoptions:[],
      hiddenfields:[],
      roleid:0,
      active_systemappid:''
    }
  },
  provide () {
    return {
      editData: () => this.form
    }
  },
  components:{
    roleContentTemp,
    reportCenter,
    userCenter,
    dataFiltering
  },
  methods:{
    async queryMainData(id) {
      const res = await this.$api.requested({
        "classname": "webmanage.role.role",
        "method": "query_roleMain",
        "content": {
          "roleid":this.$route.query.id
        }
      })
      this.mainData = res.data
      this.form = {
        "roleid":res.data.roleid,
        "rolename":res.data.rolename,
        "remarks":res.data.remarks,
        "usertype":res.data.usertype,
        "usertypename":res.data.usertypename
      }
      this.roleMainInfo = res.data
      
      //显示默认授权信息,一般默认信息为第一条数据
      res.data.apps[0]?this.appoptionselect(res.data.apps[0]):''
      this.changeDataStructure()
    },
    changeDataStructure() {
      this.mainAreaData = [
        {
          label:'角色名称',
          value:this.mainData.rolename
        },
        {
          label:'角色描述',
          value:this.mainData.remarks
        },
        {
          label:'角色类型',
          value:this.mainData.usertypename
        }
      ]
    },
    // 监听切换数据,上一页,下一页
    pageChange (id,rowindex,tabIndex) {
      this.flag = false
      tabIndex = this.$route.query.tabIndex
      this.$router.replace({path:'/roleDetail',query:{id:id,rowindex:rowindex,tabIndex:tabIndex}})
      this.queryMainData(id)
    },
    onSuccess(){
      this.visible = false
      this.queryMainData(this.$route.query.id)
      this.$emit('onSuccess')
    },
    async appoptionselect (row) {
      this.active_systemappid = row.systemappid
      this.appoptions = row.options
      this.hiddenfields = row.hiddenfields
    },
    async deleteRow () {
      let res = await this.$api.requested({
        "id": 20221121112102,
        "content": {
            "roleids": [this.mainData.roleid]
        },
      })
      if (res.data == 2) {
        this.$confirm('该角色已被使用，删除角色会导致账号失去该角色功能权限，是否确认删除角色？?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await this.$api.requested({
          "id":20221101132002,
          "content": {
            "roleids":[this.mainData.roleid]
          }
        })
        this.tool.showMessage(res,()=>{
          this.$store.dispatch('changeDetailDrawer',false)
        })
      }).catch((err) => {
        console.log(err)
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
      } else {
        let res = await this.$api.requested({
          "id":20221101132002,
          "content": {
            "roleids":[this.mainData.roleid]
          }
        })
        this.tool.showMessage(res,() => {
          this.$store.dispatch('changeDetailDrawer',false)
        })
      }
    }
  },
  mounted () {
   // 获取应用表结构
    this.tablecols = this.tool.tabelCol(this.$route.name).detailsAppsTable.tablecols
    this.roleid = this.$route.query.id
    this.roleid !== '0'?this.queryMainData():''
  },
  created() {
  }
}
</script>

<style scoped>
.mb-16{
  margin-bottom:16px
}
.title{
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  text-indent: 7px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20px;
  border-left: .3rem solid #3874F6;
}
.option-item{
  color:#333333;
  font-size: 14px;
  border-bottom:1px solid #f1f2f3;
  line-height: 35px;
}
</style>