<!--
 * @Author: 曹捷
 * @Date: 2019-08-19 10:44:04
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-04-28 15:51:27
 * @Description: file content
 -->
<template>
  <obitUniversalTable name="查询结果">
    <template #search>
      <obit-search-form :params="params" :paramList="paramList" @search="initRole">
      </obit-search-form>
    </template>
    <template #btn>
      <a-button type="primary" @click="addDialog">
        <i class="iconfont icon-add-bold p-r-5"></i> 新 增
      </a-button>
    </template>
    <a-table :loading="loading" rowKey="roleId" :columns="tableColumns" :dataSource="roleList" :pagination="false"
      class="com-table" highlight-current-row style="width: 100%">
      <template #icon="{ record  }">
        <span class=" iconfont obit-link" :class="'icon-'+record.appIcon"></span>
      </template>
      <template #operation="{ record  }" :key="record.appId">
        <a-button type="link" @click="editDialog(record)">编辑</a-button>
        <a-divider type="vertical" style="height: 16px;" />
        <a-button type="link" @click="removeRole(record)"> 删除</a-button>
      </template>
    </a-table>
  </obitUniversalTable>
  <!-- <div class="obit-main full">
    <a-layout class="role-layout">
      <a-layout-sider theme="light" width="320">
        <ul class="role-list">
          <title-wrap title="角色">
            <a-tooltip class="hover-operator obit-link f-r">
              <template #title>新增角色</template>
              <i @click.stop="addDialog" class="iconfont icon-add-circle  pointer"></i>
            </a-tooltip>
          </title-wrap>
          <li v-if="roleList.length > 0" :class="{ ischeck: checkRole === item.roleId }" :key="index"
            @click="choiceRole(item)" class="role-device-item pointer" v-for="(item, index) in roleList">
            {{ item.roleName }}
            <a-tooltip class="hover-operator   f-r">
              <template #title>删除</template>
              <i @click.stop="removeRole(item)" class="icon-ashbin iconfont pointer"></i>
            </a-tooltip>
            <a-tooltip class="hover-operator   f-r">
              <template #title>编辑</template>
              <i @click.stop="editDialog(item)" class="icon-setting iconfont pointer"></i>
            </a-tooltip>
          </li>
        </ul>
      </a-layout-sider>
      <a-layout-content>
        <bindRolePermissVue :checkRole="checkRole"></bindRolePermissVue>
      </a-layout-content>
    </a-layout>
  </div> -->
  <roleAdd :addType="addType" :detailsInfo="detailsInfo" v-model:open="addVisable" @reload="initRole"></roleAdd>

</template>

<script>
import { getCurrentInstance, inject, onMounted, reactive, toRefs, watch } from 'vue'
import roleAdd from './roleAdd.vue'
import bindRolePermissVue from './bindRolePermiss.vue'

export default {
  components: { roleAdd, bindRolePermissVue },
  setup (props, context) {
    let http = inject('http')
    let { proxy } = getCurrentInstance()
    let _data = reactive({
      tableColumns: [
        { dataIndex: 'roleName', title: '角色名称' },
        { title: '操作', slots: { customRender: 'operation' }, width: "160px" },
      ],
      params: {},
      paramList: [
        { name: '角色名称', key: 'roleName' },
      ],
      loading: false,
      roleList: [],
      checkRole: '',
      // 新增编辑相关
      addVisable: false,
      addType: 'add',
      detailsInfo: {},

    })
    let _methods = {
      initRole (callback) {
        _data.loading = true
        http.getAppAllRole(_data.params).then(res => {
          _data.roleList = res
          _data.loading = false
          callback && callback(res)
        })
      },
      // 角色新增和编辑相关  --------------start --------------------------
      addDialog () {
        _data.addVisable = true
        _data.addType = 'add'
        _data.detailsInfo = {}
      },
      editDialog (item) {
        _data.detailsInfo = item
        _data.addVisable = true
        _data.addType = 'edit'
      },
      removeRole (item) {
        proxy.$confirm({
          title: '提示',
          content: '是否删除',
          onOk () {
            http.removeAppRole(item).then((res) => {
              proxy.$message.success('删除成功')
              _methods.initRole()
            })
          },
        })
      },
    }
    onMounted(() => {
      _methods.initRole((data) => {
      })
    })
    return {
      ...toRefs(_data),
      ..._methods
    }
  },
}
</script>

<style lang='less' >
@import url('./../../../styles/mixin.less');
// @import url('./../../../styles/variable.less');
.role-layout {
  height: 100%;

  .ant-layout-sider {
    padding: 0 10px;
  }

  .title {
    height: 35px;
    line-height: 35px;
    font-size: 14px !important;
    margin: 10px 0;
  }
  .fromTitle {
    height: 100%;
    padding: 0;
  }
  .role-list {
    overflow: auto;
    height: 100%;
    padding: 0;
    background: #f0f2f5;
    .scrollBar();
    .role-device-item {
      overflow: hidden;
      height: 35px;
      line-height: 35px;
      padding-left: 10px;
      border-top: 1px solid #dcdfe6;
      .hover-operator {
        display: none;
        height: 35px;
        line-height: 35px;
        padding-right: 10px;
      }
    }
    .role-device-item:last-child {
      border-bottom: 1px solid #dcdfe6;
    }
    .role-device-item:hover {
      background: #ff7102;
      transition: all 0.5s;
      color: #fff;
      .hover-operator {
        display: initial;
      }
    }
    .ischeck {
      background: #ff7102;
      color: #fff;
      i {
        color: #fff;
      }
    }
  }
}
</style>