<template>
  <div class="app-container page-nesting" style="position: relative">
    <!-- 左侧start -->
    <div class="grid-content treeDom roleLeft">
      <div style="" class="mb-20 addBox">
        <b>角色类型</b>
        <el-button type="success" @click="addRole()">新增</el-button>
        <el-button type="primary" @click="editRole()">修改</el-button>
      </div>
      <el-radio-group v-model="radio1">
        <el-radio-button
         @change="listTabsChange(radio1)"
          v-for="(item, index) in roleData"
          :label="item.roleId"
          :key="index"
        >
          <img src="@/assets/images/userIcon.svg" />
          {{ item.roleName }}
          <i class="el-icon-delete" @click="deleteRoleItem(index)"></i>
        </el-radio-button>
      </el-radio-group>
    </div>
    <!-- 左侧end -->

    <!-- 右侧表格start -->
    <div class="grid-content nestingDom" style="width: calc(100% - 300px)">
      <role-info-com
        class="basicInfo"
        style="height: calc(100vh - 130px)"
      ></role-info-com>
    </div>
    <!-- 右侧表格end -->

    <!-- 新建角色start -->
    <add-role-com
  
      :dialog-title="dialogTitle"
      :itemInfo="tableItem"
      @closeDialog="closeDialog"
      :flag="showDialog"
    ></add-role-com>
    <!-- 新建角色end -->
  </div>
</template>

<script>
import { defineComponent, ref, reactive,onMounted } from 'vue'
import * as api from '@/api/systemManage/rolePermission.js'
import { ElMessage } from 'element-plus'

import roleInfoCom from './roleInfoCom'
import addRoleCom from './addRoleCom'

export default defineComponent({
  components: { roleInfoCom, addRoleCom },
  setup() {
    const radio1 = ref('1')
    const showDialog = ref(false)
    const roleData = ref([])

    const dialogTitle = ref('')

    // 删除左侧角色列表
    function deleteRoleItem(params) {
      this.roleData.splice(params, 1)
    }

    // 新增角色
    const tableItem = reactive([])

    function addRole() {
      alert('新增')
      tableItem.value = {
        roleName: '',
        roleKey: '',
        status: '',
        roleSort:1

      }
      dialogTitle.value = '角色新增'
      showDialog.value = true
    }

    // 修改角色
    function editRole() {
       alert('修改')
      console.log(radio1.value)
      api.roleDetail({},radio1.value).then((requset) => {
          if (requset.status === 'SUCCESS') {
            console.log(requset.data);

      //       tableItem.value = {
      //   roleName: requset.data.roleName,
      //   roleKey: requset.data.roleKey,
      //   status: requset.data.status,
      //   roleSort:requset.data.status

      // }
            // siteCount.value = requset.data[0].siteCount
            // deviceCount.value = requset.data[0].deviceCount
          } else {
            ElMessage.error(requset.msg)
          }
        })


      dialogTitle.value = '编辑'
      showDialog.value = true

      // tableItem.value = {
      //   id: '',
      //   region: '',
      //   stationName: '',
      //   watchName: '',
      //   watchCode: '',
      //   RoleList: [],
      //   done: '',
      //   guaZai: '',
      //   checked: true,
      //   resource: '',
      // }
      dialogTitle.value = '角色修改'
      showDialog.value = true
    }

     const listTabsChange = (value) => {
      console.log(value)
      radio1.value=value;
      console.log(radio1.value)
     
    }


    // 关闭弹框操作
    const closeDialog=() =>{
      showDialog.value = false
      roleList()
    }

    //角色列表
    function roleList() {
    
      api.roleList().then((requset) => {
          if (requset.code === 200) {
            roleData.value = requset.rows
          } else {
            ElMessage.error(requset.msg)
          }
        })
    }
     onMounted(() => {
      roleList()
    })

    return {
      radio1,
      showDialog,
      roleData,
      dialogTitle,
      tableItem,
      listTabsChange,
      deleteRoleItem,
      addRole,
      editRole,
      closeDialog,
    }
  },
})
</script>

<style scoped lang="scss">
.el-button+.el-button{
  margin-left:0
}
.app-container.page-nesting {
  padding: 0;
  background: rgba(0, 0, 0, 0);
}
.grid-content {
  background: #fff;
  height: calc(100vh - 130px);
  overflow-y: auto;
}
.el-input__inner {
  border-radius: 20px !important;
}
.treeDom {
  width: 270px;
  position: absolute;
  left: 0;
  // margin-left: 20px;
  padding: 20px;
  min-height: calc(100vh - 130px);
}
.nestingDom {
  margin-left: 300px;
}
</style>